Vue 3 Development with the PrimeVue Framework — Calendar and Order List

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.

Calendar

We can add a calendar into our Vue 3 app with PrimeVue’s FullCalendar component.

To use it, we install the required packages by running:

npm install @fullcalendar/core --save
npm install @fullcalendar/daygrid --save
npm install @fullcalendar/timegrid --save
npm install @fullcalendar/interaction --save

Then we can add the calendar into our Vue 3 app by writing:

main.js

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

App.vue

<template>
  <div>
    <FullCalendar :events="events" :options="options" />
  </div>
</template>

<script>
import '@fullcalendar/core'
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";

export default {
  name: "App",
  data() {
    return {
      options: {
        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
        initialDate: "2020-12-01",
        headerToolbar: {
          left: "prev,next",
          center: "title",
          right: "dayGridMonth,timeGridWeek,timeGridDay",
        },
        editable: true,
      },
      events: [
        {
          id: 1,
          title: "All Day Event",
          start: "2020-12-01",
        },
        {
          id: 2,
          title: "Long Event",
          start: "2020-12-07",
          end: "2020-12-10",
        },
      ],
    };
  },
  methods: {},
};
</script>

We have to install the @fullcalendar dependencies.

Then we import and register the FullCalendar component.

Then in App.vue , we add the required plugins by putting them into the options.plugins array.

Then events are populated by the events array, which has the id , title , start and end properties.

If end isn’t specified, then the event lasts a day.

We also specify how the top bar in the calendar is displayed with the headerToolbar property.

All the items listed are names for toolbar buttons.

We can set the initialDate property to set the initial date to display in the calendar.

Order List

We can add a list that can be reordered with the OrderList component.

To add it, we write:

main.js

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

App.vue

<template>
  <div>
    <OrderList v-model="cars" listStyle="height:auto" dataKey="vin">
      <template #header> List of Cars </template>
      <template #item="slotProps">
        <div class="p-caritem">
          <div>
            <span class="p-caritem-vin">{{ slotProps.item.vin }}</span>
            <span>{{ slotProps.item.year }} - {{ slotProps.item.color }}</span>
          </div>
        </div>
      </template>
    </OrderList>
  </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>

We register the OrderList component in main.js .

Then we add it into App.vue .

We populate the header slot with the header content.

And we populate the item slot with the content for a single item.

The slotProps.item property has the item data.

We should now get a list of items that we can select with buttons to reorder them.

v-model is bound to the cars array, which has the list items.

Conclusion

We can add calendars and reorderable lists into our Vue 3 app with PrimeVue.