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 shortDD— day name longm— month of the year (no leading zero)mm— month of the year (2 digits)M— month name shortMM— month name longy— 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.
