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 @primevue/nuxt-module to the modules section and define primevue object for the configuration of the module.

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

Styled mode provides pre-skinned components, default theme is Aura with emerald as the primary color. See the styled mode documentation for details.

Install the @primevue/themes add-on package as the themes are not included in PrimeVue by default.

# Using npm
npm install @primevue/themes

# Using yarn
yarn add @primevue/themes

# Using pnpm
pnpm add @primevue/themes

Configure the module to use a theme like Aura.

import Aura from '@primevue/themes/aura';

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

In unstyled mode, the components do not include any CSS so you'd need to style the components on your end, this is especially useful when building your own UI library on top of PrimeVue. Visit the Unstyled mode documentation for more information and examples.

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

The nuxt-primevue module registers the components automatically so you may start using them instantly.

The module installs the PrimeVue plugin by default. 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.

The auto import feature registers components automatically with tree shaking support. Defaults to true, when disabled use include/exclude options of components and directives for manual registration.

primevue: {
    autoImport: true|false
}

Use the prefix in components and directives to add a prefix for registration.

primevue: {
    autoImport: true|false,
    components: {
        prefix: 'org'
    },
    directives: {
        prefix: 'org'
    }
}

Configures the global pass through import path.

primevue: {
    importPT: { from: '@/passthrough/mycustompt.js')}
}

mycustompt.js file defines the configuration and exports it.

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

export default MyCustomPT;

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

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

The mytheme.js file contains the theme configuration.

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

When autoImport is disabled, use the include and exclude for manual registration.

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

When autoImport is disabled, use the include and exclude for manual registration.

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

Nuxt based samples with different options are available at PrimeVue examples repository.