Vue 3 Development with the PrimeVue Framework — Pick List, Timelines, and Tree Views

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.

Pick List

We add the picklist component to let us reorder items between different lists.

For instance, we can write:

<template>
  <div>
    <PickList v-model="cars" dataKey="vin">
      <template #item="slotProps">
        <div class="p-caritem">
          <p>{{ slotProps.item.vin }}</p>
          <p>{{ slotProps.item.year }}</p>
          <p>{{ slotProps.item.color }}</p>
        </div>
      </template>
    </PickList>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      cars: [
        [
          {
            brand: "Volkswagen",
            year: 2012,
            color: "Orange",
            vin: "dsad231ff",
          },
        ],
        [
          { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
          { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
        ],
      ],
    };
  },
  methods: {},
};
</script>

The model for the picklist is an array with 2 arrays.

The first array is for the left list.

And the 2nd array is for the right list.

The items slot has the item display.

slotProps.item has the item for an entry.

Now we should get 2 lists with buttons to let us move items between 2 lists after selecting one.

Timeline

We can add a timeline into our Vue 3 app with the Timeline component.

To add it, we write:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import Timeline from 'primevue/timeline';
import Card from 'primevue/card';
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("Timeline", Timeline);
app.component("Card", Card);
app.mount("#app");

App.vue

<template>
  <div>
    <Timeline :value="events">
      <template #marker="slotProps">
        <span
          class="custom-marker p-shadow-2"
          :style="{ backgroundColor: slotProps.item.color }"
        >
          <i :class="slotProps.item.icon"></i>
        </span>
      </template>
      <template #content="slotProps">
        <Card>
          <template #title>
            {{ slotProps.item.status }}
          </template>
          <template #subtitle>
            {{ slotProps.item.date }}
          </template>
          <template #content>
            <p>Lorem ipsum</p>
          </template>
        </Card>
      </template>
    </Timeline>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      events: [
        {
          status: "Ordered",
          date: "15/10/2020 10:30",
          icon: "pi pi-shopping-cart",
          color: "#9C27B0",
          image: "game-controller.jpg",
        },
        {
          status: "Processing",
          date: "15/10/2020 14:00",
          icon: "pi pi-cog",
          color: "#673AB7",
        },
        {
          status: "Shipped",
          date: "15/10/2020 16:15",
          icon: "pi pi-shopping-cart",
          color: "#FF9800",
        },
        {
          status: "Delivered",
          date: "16/10/2020 10:00",
          icon: "pi pi-check",
          color: "#607D8B",
        },
      ],
      events2: ["2020", "2021", "2022", "2023"],
    };
  },
  methods: {},
};
</script>

We register the Timeline component.

Then we populate the content prop with the content of each timeline entry.

The marker prop lets us change the marker to what we want.

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

Tree View

We can add a tree view into our Vue 3 app with PrimeVue’s Tree component.

To add one, we write:

maim.js

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

App.vue

<template>
  <div>
    <Tree :value="nodes" :expandedKeys="expandedKeys"></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 register the Tree component in main.js .

We set the value prop to the nodes array, which is an array with some objects with the keys , label and children properties.

label has the label text.

children has an array with more node objects.

Conclusion

We can add picklists, tree views, and timelines into our Vue 3 app with the PrimeVue framework.