Nuxt PrimeVue

Nuxt module for PrimeVue

Features

Provides auto import of PrimeVue components and directives.

Quick Setup

1. Add primevue dependency to your project

# Using pnpm
pnpm add primevue

# Using yarn
yarn add primevue

# Using npm
npm install primevue

2. Add @notkamui/nuxt-primevue dependency to your project

# Using pnpm
pnpm add @notkamui/nuxt-primevue

# Using yarn
yarn add @notkamui/nuxt-primevue

# Using npm
npm install @notkamui/nuxt-primevue

3. As of now, you need to create a Nuxt plugin to include the services provided by Primevue. Create a primevue.ts file in the plugins folder :

import ToastService from 'primevue/toastservice'
import ConfirmationService from 'primevue/confirmationservice'
import DialogService from 'primevue/dialogservice'

export default defineNuxtPlugin(({ vueApp }) => {
  vueApp.use(ToastService)
  vueApp.use(ConfirmationService)
  vueApp.use(DialogService)
})

4. Add @notkamui/nuxt-primevue to the modules section of nuxt.config.ts, along with the PrimeVue CSS files.

export default defineNuxtConfig({
  css: [
    'primevue/resources/themes/lara-light-blue/theme.css',
    'primevue/resources/primevue.css',
  ],
  modules: [
    '@notkamui/nuxt-primevue'
  ],
  primevue: {
    // PrimeVue configuration
    // see https://primevue.org/setup,

    // additional PrimeVue components to auto-import
    includeChart: true, // default: false
    includeEditor: true, // default: false
  },
})

That's it! You can now use PrimeVue in your Nuxt app with (almost) all the directives and components auto-imported ✨ (Note that components are prefixed with a P, e.g. PButton instead of Button)

Configuration

There are two PrimeVue components that are not auto-imported by default:

• Chart
• Editor

This is because they require additional dependencies to function (chart.js and quill respectively).

To include them, set the includeChart and/or includeEditor options to true in the module configuration, after installing their dependencies.

Moreover, the rest of the module configuration options are the exact same as the PrimeVue plugin's configuration options (and they are typed !).

Please refer to the Configuration section of this page for more information.

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release