Nuxt PrimeVue | Nuxt PrimeVue

Getting Started

Installation steps

Step. 1: Install depenendencies

Create and change into a new directory.

$ pnpm add -D @sfxcode/nuxt-primevue

$ pnpm add -D @sfxcode/nuxt-primevue

Step. 2: Define nuxt modules (nuxt.config.ts)

Add nuxt-formkit (optional) and nuxt-primevue to your modules

  modules: [
  '@formkit/nuxt',
  '@sfxcode/nuxt-primevue',
  ]

  modules: [
  '@formkit/nuxt',
  '@sfxcode/nuxt-primevue',
  ]

Step. 3: Configure nuxt-primevue (nuxt.config.ts, optional)

  primevue: {
    config: {
      ripple: true
    }
  }

  primevue: {
    config: {
      ripple: true
    }
  }

Step. 4: Add PrimeVue specific CSS

Example below add required primevue css, primeicons and one of the primevue themes (here: saga-blue).

Base scss files for formkit can be imported from formkit-primevue.

  css: [
    'primevue/resources/primevue.css',
    'primevue/resources/themes/saga-blue/theme.css',
    'primeicons/primeicons.css',
    '@sfxcode/formkit-primevue/dist/sass/formkit-primevue.scss'
  ]

  css: [
    'primevue/resources/primevue.css',
    'primevue/resources/themes/saga-blue/theme.css',
    'primeicons/primeicons.css',
    '@sfxcode/formkit-primevue/dist/sass/formkit-primevue.scss'
  ]

Step. 5: Add primevue to build / transpile (nuxt.config.ts)

  build: {
    transpile: ['primevue']
  }

  build: {
    transpile: ['primevue']
  }

Step 6 (only for usage of Formkit with PrimeVue)

Add formkit.config.ts to your root dir and register primeInputs.

// formkit.config.ts
import type { DefaultConfigOptions } from '@formkit/vue'
import { primeInputs } from '@sfxcode/formkit-primevue'

const config: DefaultConfigOptions = {
  inputs: primeInputs
}

export default config

// formkit.config.ts
import type { DefaultConfigOptions } from '@formkit/vue'
import { primeInputs } from '@sfxcode/formkit-primevue'

const config: DefaultConfigOptions = {
  inputs: primeInputs
}

export default config

Test Installation

This module contains some demo components to make sure everything work as expected.

PrimeDemoToast

Makes sure PrimeVue Services and Components are available.

vue

<PrimeDemoToast/>

<PrimeDemoToast/>

PrimeDemoForm

Makes sure Formkit by PrimeVue Input components and validation are available.

vue

<PrimeDemoForm/>

<PrimeDemoForm/>

Installation steps ​

Step. 1: Install depenendencies ​

Step. 2: Define nuxt modules (nuxt.config.ts) ​

Step. 3: Configure nuxt-primevue (nuxt.config.ts, optional) ​

Step. 4: Add PrimeVue specific CSS ​

Step. 5: Add primevue to build / transpile (nuxt.config.ts) ​

Step 6 (only for usage of Formkit with PrimeVue) ​

Test Installation ​

PrimeDemoToast ​

PrimeDemoForm ​