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 */
    }
})

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.

Defines the theming mode, defaults to false.

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: 'MyCustomPreset', from: path.resolve(__dirname, './presets/mypreset.js')}
}

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

export default MyPreset;

Configures the theme configuration path for the customizations of a theme in styled mode.

primevue: {
    importTheme: { from: '@/themes/mytheme.js' },
}

import { definePreset } from 'primevue/themes';
import Aura from 'primevue/themes/aura';

const MyPreset = definePreset(Aura, {
    semantic: {
        primary: {
            50: '{indigo.50}',
            100: '{indigo.100}',
            200: '{indigo.200}',
            300: '{indigo.300}',
            400: '{indigo.400}',
            500: '{indigo.500}',
            600: '{indigo.600}',
            700: '{indigo.700}',
            800: '{indigo.800}',
            900: '{indigo.900}',
            950: '{indigo.950}'
        }
    }
});

export default {
    preset: MyPreset,
    options: {
        darkModeSelector: '.p-dark'
    }
};

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.