Nuxt 3 Module PrimeVue

• Load PrimeVue Components
• Add PrimeVue Services (usePrimeDataTable)
• Formkit Support with formkit-primevue

Version

Nuxt 3 Demo

Github: nuxt3-primevue-starter

Netlify: nuxt3-primevue-starter

Docs

Read more on Docs

Tutorial: Getting started

Usage

Add Module nuxt-primevue to nuxt.config.ts

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

Create formkit.config.ts

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

const config: DefaultConfigOptions = {
  inputs: primeInputs,
}

export default config

See https://github.com/sfxcode/formkit-primevue

Module Configuration

Primevue Configuration

    config: {
      ripple: true  // default
    }

Formkit Configuration

Shows if formkit should be used with PrimeVue. In this case PrimeVue components used by formkit-primevue must be imported global.

    config: {
      useFormkit: true  // default
    }

Component Configuration

Default all but excluded PrimeVue Components are imported automatically.

Some components in default are excluded because of some SSR problems or needed Third Party Libraries:

export const defaultPrimevueExcludeComponentNames:Array<string>  = [
  'Chart',
  'Editor',
  'FullCalendar',
]

Finetuning by components configuration options:

components: {
    include: [...defaultPrimeVueComponents(true, true), 'DataTable', 'Column'],
    force: ['Button',{name:'Message', global:true}],
}

Components Configuration

Option include:

Includes components by name or as PrimeVueComponent. Defaults are not used if not implemented in helper function.

Option exclude:

Only if not include is used. Exclude default components by name.

Option force:

Force Includes components by name or as PrimeVueComponent.

Helper Function:

export function defaultPrimeVueComponents(useFormkit: boolean, onlyGlobal:boolean=false) 

Development

• Run npm run dev:prepare to generate type stubs.
• Use npm run dev to start playground in development mode.