Vue 3 Development with the PrimeVue Framework — Panels and Split Panes

PrimeVue is a UI framework that’s compatible with Vue 3.

In this article, we’ll look at how to get started with developing Vue 3 apps with PrimeVue.

Panel

We can add a panel with PrimeVue’s Panel component.

For example, we can write:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import Panel from 'primevue/panel';
import 'primevue/resources/primevue.min.css'
import 'primevue/resources/themes/saga-blue/theme.css'
import 'primeicons/primeicons.css'
import 'primeflex/primeflex.css';

const app = createApp(App);
app.use(PrimeVue);
app.component("Panel", Panel);
app.mount("#app");

App.vue

<template>
  <div>
    <Panel header="Header"> Lorem ipsum dolor sit amet </Panel>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

The header prop has the header text.

And the default slot has the content text.

We can customize the header with the header slot:

<template>
  <div>
    <Panel>
      <template #header> Header Content </template>
      Lorem ipsum dolor sit amet
    </Panel>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

And we can add the toggleable prop to make the panel toggleable:

<template>
  <div>
    <Panel toggleable>
      <template #header> Header Content </template>
      Lorem ipsum dolor sit amet
    </Panel>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

We can also collapse the panel initially with the collapsed prop:

<template>
  <div>
    <Panel toggleable collapsed>
      <template #header> Header Content </template>
      Lorem ipsum dolor sit amet
    </Panel>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

We can also add a custom icon by populating the icons slot:

<template>
  <div>
    <Panel>
      <template #icons>
        <button class="p-panel-header-icon p-link p-mr-2">
          <span class="pi pi-cog"></span>
        </button>
      </template>
      Lorem ipsum dolor sit amet
    </Panel>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

Splitter

PrimeVue comes with a splitter component to let us add a split pane.

For instance, we can write:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import Splitter from 'primevue/splitter';
import SplitterPanel from 'primevue/splitterpanel';
import 'primevue/resources/primevue.min.css'
import 'primevue/resources/themes/saga-blue/theme.css'
import 'primeicons/primeicons.css'
import 'primeflex/primeflex.css';

const app = createApp(App);
app.use(PrimeVue);
app.component("Splitter", Splitter);
app.component("SplitterPanel", SplitterPanel);
app.mount("#app");

App.vue

<template>
  <div>
    <Splitter style="height: 300px">
      <SplitterPanel> Panel 1 </SplitterPanel>
      <SplitterPanel> Panel 2 </SplitterPanel>
    </Splitter>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

We add the Splitter component with the SplitterPane to add the panes.

We can add more than 2 SplitPanel s.

Also, we can set the layout prop of Splitter to 'vertical' to make the layout vertical.

The initial size of each pane can be changed with the size prop:

<template>
  <div>
    <Splitter style="height: 300px">
      <SplitterPanel :size="20"> Panel 1 </SplitterPanel>
      <SplitterPanel :size="80"> Panel 2 </SplitterPanel>
    </Splitter>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

We can also set the min size with tyhe minSize prop:

<template>
  <div>
    <Splitter style="height: 300px">
      <SplitterPanel :size="20" :minSize="10"> Panel 1 </SplitterPanel>
      <SplitterPanel :size="80" :minSize="20"> Panel 2 </SplitterPanel>
    </Splitter>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

SplitterPanel s can also be nested in other SplitterPanel s.

We can also save the splitter sizes to local storage with the stateKey and stateStorage props:

<template>
  <div>
    <Splitter stateKey="splitter-key" stateStorage="local">
      <SplitterPanel :size="20" :minSize="10"> Panel 1 </SplitterPanel>
      <SplitterPanel :size="80" :minSize="20"> Panel 2 </SplitterPanel>
    </Splitter>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

stateKey is the key for local storage.

And stateStorage specifies that we save the size setting for each pane to local storage.

Conclusion

We can add panels and split panels into our Vue 3 with PrimeVue.