Install PrimeVue with Nuxt

The PrimeVue module for Nuxt adds PrimeVue to your Nuxt application with a few steps.

Installing the Module

Start adding the module by running the following command:

npm install primevue @primevue/themes
npm install --save-dev @primevue/nuxt-module

Adding the module to the Nuxt config

Next up you have to add the module to your nuxt.config.ts file:

export default defineNuxtConfig({
    modules: [
        '@primevue/nuxt-module'
    ],
    primevue: {
        /* Configuration */
    }
})

Setup a theme for PrimeVue

You now need to add a theme for PrimeVue to work. You can select any Theme you want or even create your own.

To add a default theme, change the following line in your nuxt.config.ts file:

// nuxt.config.ts
import Aura from '@primevue/themes/aura'; 

export default defineNuxtConfig({
    modules: [
        '@primevue/nuxt-module'
    ],
    primevue: {
        options: { 
            theme: { 
                preset: Aura 
            } 
        }
    }
})

---

Now you have successfully added PrimeVue to your Nuxt application! The PrimeVue module for Nuxt automatically registers the PrimeVue components and directives for you. So you can test them with the following implementation in your App.vue file:

<Button label="Verify" />

🔎 Info

To learn more about PrimeVue with Nuxt, check out the official PrimeVue Nuxt Module.