Vue 3 Development with the PrimeVue Framework — AutoComplete, Calendar, and Datepicker

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.

AutoComplete

We can add the AutoComplete that comes with PrimeVue to add a autocomplete dropdown.

For instance, we can write:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import AutoComplete from "primevue/autocomplete";

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

App.vue

<template>
  <div>
    <AutoComplete
      v-model="fruit"
      :suggestions="filteredFruits"
      [@complete](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Fcomplete "Twitter profile for @complete")="search($event)"
      field="fruit"
    >
      <template #item="{ item }">
        <div>
          <div>{{ item }}</div>
        </div>
      </template>
    </AutoComplete>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      fruit: null,
      filteredFruits: ["apple", "orange", "grape"],
      fruits: ["apple", "orange", "grape"],
    };
  },
  methods: {
    search({ query }) {
      if (!query.trim()) {
        this.filteredFruits = [...this.fruits];
        return;
      }
      this.filteredFruits = this.fruits.filter((f) => f.includes(query));
    },
  },
};
</script>

In main.js , we import the Autocomplete component.

The suggestions prop has an array of suggestions

The suggestion items are rendered in the item slot.

We listen to the complete event to run the search function to get the filtered items.

The query property in the first parameter of search has the search query we typed in.

Calendar

PrimeVue comes with a calendar component that renders a date picker.

To use it, we write:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import Calendar from 'primevue/calendar';

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

App.vue

<template>
  <div>
    <Calendar v-model="value" />
    <p>{{ value }}</p>
  </div>
</template>

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

We import and register the Calendar component into our app.

Then we can use the Calendar component in our components to render an input that shows a date picker popup when we click it.

We bind the value we pick to the value reactive property with v-model .

We can change the selection mode to let us select multiple dates or a date range.

For example, if we write:

<template>
  <div>
    <Calendar v-model="value" selectionMode="multiple" />
    <p>{{ value }}</p>
  </div>
</template>

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

Then we can select multiple dates.

value is an array of dates instead of a single date.

If we change selectionMode to 'range' :

<template>
  <div>
    <Calendar v-model="value" selectionMode="range" />
    <p>{{ value }}</p>
  </div>
</template>

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

then we can select 2 dates, which is the start and end date respectively.

We can change the format of the selected date with the dateFormat prop:

<template>
  <div>
    <Calendar v-model="value" dateFormat="dd.mm.yy" />
    <p>{{ value }}</p>
  </div>
</template>

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

The format code can have the following parts:

• d — day of the month (no leading zero)
• dd — day of the month (2 digits)
• o — day of the year (no leading zeros)
• oo — day of the year (3 digits)
• D — day name short
• DD — day name long
• m — month of the year (no leading zero)
• mm — month of the year (2 digits)
• M — month name short
• MM — month name long
• y — year (2 digits)
• yy — year (4 digits)
• @ — Unix timestamp (ms since 01/01/1970)
• ! — Windows ticks (100ns since 01/01/0001)
• ‘…’ — literal text
• ‘’ — single-quote
• anything else — literal text

Conclusion

We can add autocomplete dropdowns and date pickers easily into our Vue 3 app with PrimeVue.