Nuxt

The nuxt-primevue package is the official module by PrimeTek.

The module is enabled by adding nuxt-primevue to the modules option. Configuration values are defined with the primevue property.

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

The complete API with the all available configuration options along with the default values.

export default defineNuxtConfig({
    modules: [
        'nuxt-primevue'
    ],
    primevue: {
        usePrimeVue: true,
        options: {},
        importPT: undefined,
        cssLayerOrder: 'tailwind-base, primevue, tailwind-utilities',
        components: {
            prefix: '',
            name: undefined,
            include: undefined,
            exclude: undefined
        },
        directives: {
            prefix: '',
            name: undefined,
            include: undefined,
            exclude: undefined
        },
        composables: {
            prefix: '',
            name: undefined,
            include: undefined,
            exclude: undefined
        }
    }
})

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']
    }
}

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.

Module is used to configure the PrimeVue options, register components, directives and composables. CSS configuration of the styled mode is not included at the moment due to the upcoming enhancements like moving theming to core with CSS variables. In styled mode, the theme can be defined at Nuxt configuration with the css property. Note that this only applies to styled mode, in unstyled mode a theme file is not required as styling is done externally.

export default defineNuxtConfig({
    css: ['primevue/resources/themes/lara-dark-green/theme.css']
})

Until the new styled mode implementation is ready, dynamic theming at runtime is currently done by switching theme css files. Visit the Switch Themes section at styled mode for an example.

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.