Vue 3 Development with the PrimeVue Framework — Tree Node Content and Accordions

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.

Tree Node Content

We can customize the tree node’s content with the default and url slots.

For instance, we can write:

<template>
  <div>
    <Tree :value="nodes" :expandedKeys="expandedKeys">
      <template #default="slotProps">
        <b>{{ slotProps.node.label }}</b>
      </template>
      <template #url="slotProps">
        <a :href="slotProps.node.data">{{ slotProps.node.label }}</a>
      </template>
    </Tree>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      expandedKeys: undefined,
      nodes: [
        {
          key: "0",
          label: "Introduction",
          children: [
            {
              key: "0-0",
              label: "What is Vue.js?",
              data: "https://vuejs.org/v2/guide/#What-is-Vue-js",
              type: "url",
            },
            {
              key: "0-1",
              label: "Getting Started",
              data: "https://vuejs.org/v2/guide/#Getting-Started",
              type: "url",
            },
            {
              key: "0-2",
              label: "Declarative Rendering",
              data: "https://vuejs.org/v2/guide/#Declarative-Rendering",
              type: "url",
            },
            {
              key: "0-3",
              label: "Conditionals and Loops",
              data: "https://vuejs.org/v2/guide/#Conditionals-and-Loops",
              type: "url",
            },
          ],
        },
        {
          key: "1",
          label: "Components In-Depth",
          children: [
            {
              key: "1-0",
              label: "Component Registration",
              data: "https://vuejs.org/v2/guide/components-registration.html",
              type: "url",
            },
            {
              key: "1-1",
              label: "Props",
              data: "https://vuejs.org/v2/guide/components-props.html",
              type: "url",
            },
            {
              key: "1-2",
              label: "Custom Events",
              data: "https://vuejs.org/v2/guide/components-custom-events.html",
              type: "url",
            },
            {
              key: "1-3",
              label: "Slots",
              data: "https://vuejs.org/v2/guide/components-slots.html",
              type: "url",
            },
          ],
        },
      ],
    };
  },
  methods: {},
};
</script>

We get the node data in each slot with the slotProps.node property.

Also, we can add the filter slot to add a text input to let us search for nodes.

Accordion

PrimeVue comes with an accordion component to let us add content into tabs.

To add it, we write:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import Accordion from 'primevue/accordion';
import AccordionTab from 'primevue/accordiontab';
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("Accordion", Accordion);
app.component("AccordionTab", AccordionTab);
app.mount("#app");

App.vue

<template>
  <div>
    <Accordion>
      <AccordionTab header="Header 1"> Content </AccordionTab>
      <AccordionTab header="Header 2"> Content </AccordionTab>
      <AccordionTab header="Header 3"> Content </AccordionTab>
    </Accordion>
  </div>
</template>

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

We register the Accordion and AccordionTab components to let us add the accordion with the tabs.

We just put the content into the default slot of AccordionTab to add the content.

header has strings that are displayed in the accordion tab headers.

The Accordion‘s multiple prop lets us keep multiple tabs open at once.

We can also add the disabled prop to AccordionTab to disable the tab.

Also, we can add custom content into the header by populating the header slot:

<template>
  <div>
    <Accordion>
      <AccordionTab>
        <template #header>
          <i class="pi pi-calendar p-mr-2"></i>
          <span>Header 1</span>
        </template>
        Content
      </AccordionTab>
      <AccordionTab header="Header 2"> Content </AccordionTab>
      <AccordionTab header="Header 3"> Content </AccordionTab>
    </Accordion>
  </div>
</template>

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

Conclusion

We can add tree node with custom content and accordions into our Vue 3 app with PrimeVue.