Install PrimeVue with Nuxt

PrimeVue is available for download on npm Registry along with the official nuxt-primevue module.

In nuxt.config file, add the nuxt-primevue to the modules section and define primevue object for the configuration of the module. View the module configuration section for the available list of options.

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

Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Theme is the required css file to be imported, visit the Themes section for the complete list of available themes to choose from.

You may use the app.vue file to import a theme using a script.

<script>
import 'primevue/resources/themes/aura-light-green/theme.css'
</script>

The style section may also be used with @import.

<style>
@import url("primevue/resources/themes/aura-light-green/theme.css");
</style>

Another alternative would be the css option in nuxt.config.

export default defineNuxtConfig({
    modules: [
        'nuxt-primevue'
    ],
    primevue: {
        /* Options */
    },
    css: ['primevue/resources/themes/aura-light-green/theme.css']
})

The style classes of PrimeVue are defined under the primevue CSS layer to be easier to customize by having low specificity. If you are using a CSS library that styles default HTML elements such as Tailwind Preflight, Bootstrap, Normalize, or similar, a custom CSS layer configuration might be necessary with the cssLayerOrder option to make sure primevue layer is defined afterward. This only applies to Styled Mode as Unstyled Mode does not use any default styles or layers. View the CSS Layer guide for more information.

/* Reset CSS */
@layer reset {
    button,
    input {
        /* CSS to Reset */
    }
}

export default defineNuxtConfig({
    modules: [
        'nuxt-primevue'
    ],
    primevue: {
        cssLayerOrder: 'reset,primevue'
    },
    css: ['primevue/resources/themes/aura-light-green/theme.css']
})

Unstyled mode is disabled by default for all components. Set unstyled as true to enable it globally using a module configuration. Visit the Unstyled mode documentation for more information and examples.

export default defineNuxtConfig({
    modules: [
        'nuxt-primevue'
    ],
    primevue: {
        options: {
            unstyled: true
        }
    }
})

In unstyled mode, you'd need to style the components on your end. If you are using Tailwind CSS, see the Tailwind CSS Presets project to get you started.

import path from 'path';

export default defineNuxtConfig({
    modules: [
        'nuxt-primevue'
    ],
    primevue: {
        unstyled: true,
        importPT: { from: path.resolve(__dirname, './presets/lara/') }      //import and apply preset
    }
})

The nuxt-primevue module registers the components automatically so you may start using them instantly. See the Components section to customize how the components are loaded and named.

Whether to install the PrimeVue plugin, defaults to true. Disable this option if you prefer to configure PrimeVue manually e.g. with a Nuxt plugin.

Main configuration settings of PrimeVue, refer to the configuration documentation for details. Defaults to an empty object.

The components to import and register are defined with the include option using a string array. When the value is ignored or set using the * alias, all of the components are registered.

primevue: {
    components: {
        include: ['Button', 'DataTable']
    }
}

In case all components are imported, particular components can still be excluded with the exclude option.

primevue: {
    components: {
        include: '*',
        exclude: ['Galleria', 'Carousel']
    }
}

By default, for compatibility reasons, Chart and Editor components are excluded. To include them simply set the exclude option to an empty list.

primevue: {
    components: {
        exclude: []
    }
}

Use the prefix option to give a prefix to the registered component names.

primevue: {
    components: {
        prefix: 'Prime'
        include: ['Button', 'DataTable']    /* Used as <PrimeButton /> and <PrimeDataTable /> */
    }
}

Component registration can be customized further by implementing the name function that gets an object representing the import metadata. name is the label of the component, as is the default export name and from is the import path.

primevue: {
    components: {
        name: ({ name, as, from }) => {
            return name === 'Button' ? `My${name}` : name;
        },
        include: ['Button', 'DataTable']    /* Used as <MyButton /> and <DataTable /> */
    }
}

The names of the directives to import and register are provided using the include property. When the value is ignored or set using the * alias, all of the directives are registered.

primevue: {
    directives: {
        include: ['Ripple', 'Tooltip']
    }
}

Similar to components, certain directives can be excluded and name registration can be customized.

primevue: {
    directives: {
        include: '*',
        exclude: ['Ripple']
    }
}

primevue: {
    directives: {
        prefix: 'p'
        include: ['Ripple', 'Tooltip']    /* Used as v-pripple and v-ptooltip */
    }
}

Determines the composables to use, when default value is ignored or set as * all composables are imported.

primevue: {
    composables: {
        include: ['useStyle']
    }
}

Configures the global pass through import path.

primevue: {
    importPT: { as: 'Tailwind', from: 'primevue/passthrough/tailwind' },
}

The path may also be a location within your application.

primevue: {
    importPT: { as: 'MyCustomPreset', from: path.resolve(__dirname, './assets/presets/mypreset.js')}
}

const MyPreset = {
    ...
    button: {
        root: 'my-button',
       ...
    },
    ...
}

export default MyPreset;

Defines the CSS layer order setting for compatibility with libraries like Tailwind and Bootstrap in styled mode. Visit the CSS Layer guide for detailed information.

A sample starter example is available at PrimeVue examples repository. In addition an online playground sample can be accessed at StackBlitz.

A video tutorial that goes through steps of setting up PrimeVue with the nuxt-primevue module.