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.
Getting Started
We install the required packages by running:
npm install primevue@^3.1.1 --save
npm install primeicons --save
This will install the library with all the components and the icons.
Next, we add the PrimeVue plugin into our app:
main.js
import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import InputText from "primevue/inputtext";
import 'primevue/resources/primevue.min.css'
import 'primevue/resources/themes/bootstrap4-light-blue/theme.css'
import 'primeicons/primeicons.css'
const app = createApp(App);
app.use(PrimeVue);
app.component("InputText", InputText);
app.mount("#app");
App.vue
<template>
<div>
<InputText type="text" v-model="text" />
<p>{{text}}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
text: "",
};
},
};
</script>
In main.js m we call app.use to add the plugin.
Then we call app.component to register the InputText component.
import ‘primevue/resources/primevue.min.css’ imports the core CSS.
import ‘primevue/resources/themes/bootstrap4-light-blue/theme.css’ is the CSS for the theme.
import ‘primeicons/primeicons.css’ add the icons.
We can also include the script tag for the individual components:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>calendar demo</title>
<link
href="https://unpkg.com/primevue/resources/themes/saga-blue/theme.css "
rel="stylesheet"
/>
<link
href="https://unpkg.com/primevue/resources/primevue.min.css "
rel="stylesheet"
/>
<link
href="https://unpkg.com/primeicons/primeicons.css "
rel="stylesheet"
/>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/primevue@3.1.1/components/inputtext/inputtext.umd.min.js"></script>
</head>
<body>
<div id="app">
<p-inputtext v-model="text"></p-inputtext>
<p>{{text}}</p>
</div>
<script>
Vue.createApp({
data() {
return {
text: ""
};
},
components: {
"p-inputtext": inputtext
}
}).mount("#app");
</script>
</body>
</html>
We add the script tags for Vue 3 and PrimeVue’s inputtext component.
Then we can use it in our code.
PrimeFlex
We can install the primeflex package to add CSS to let us create layouts easily without writing everything from scratch.
To install it, we run:
npm install primeflex --save
Then we cal add the CSS by writing:
main.js
import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import InputText from "primevue/inputtext";
import 'primeflex/primeflex.css';
const app = createApp(App);
app.use(PrimeVue);
app.component("InputText", InputText);
app.mount("#app");
Now we can use the classes by writing:
App.vue
<template>
<div class="card">
<InputText type="text" v-model="text" class="p-ml-2 p-d-inline" />
<p>{{ text }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
text: "",
};
},
};
</script>
p-ml-2 adds some margin on the left side.
p-d-inline makes the input display inline.
We can add shadows with the p-shadow-{x} class, where x can be 1 to 24.
p-d-flex lets us create a flex layout.
p-d-inline-flex lets us create an inline flex layout.
p-flex-{direction} lets us set the flex-direction. Where direction can be one of:
- row (default)
- row-reverse
- column
- column-reverse
The order of items inside a flex container can be changed with the p-order-{value} classes.
We can also add layouts that change according to breakpoints:
<template>
<div class="p-d-flex">
<div class="p-mr-2 p-order-3 p-order-md-2">Item 1</div>
<div class="p-mr-2 p-order-1 p-order-md-3">Item 2</div>
<div class="p-mr-2 p-order-2 p-order-md-1">Item 3</div>
</div>
</template>
<script>
export default {
name: "App",
};
</script>
We change the order depending on whether the breakpoint is md and up or otherwise.
If it’s md or higher, then we get:
Item 3 Item 1 Item 2
Otherwise, we get:
Item 2 Item 3 Item 1
Conclusion
PrimeVue is one of the earliest UI frameworks to be compatible with Vue 3.
