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

1
2  modules: [
3    ...
4    '@sfxcode/nuxt-primevue',
5    
6  ],

Create formkit.config.ts

1// formkit.config.ts
2import type { DefaultConfigOptions } from '@formkit/vue'
3import { primeInputs } from '@sfxcode/formkit-primevue'
4
5const config: DefaultConfigOptions = {
6  inputs: primeInputs,
7}
8
9export default config

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

Module Configuration

Primevue Configuration

1    config: {
2      ripple: true  // default
3    }

Formkit Configuration

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

1    config: {
2      useFormkit: true  // default
3    }

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:

1export const defaultPrimevueExcludeComponentNames:Array<string>  = [
2  'Chart',
3  'Editor',
4  'FullCalendar',
5]
6
7

Finetuning by components configuration options:

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

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:

1export 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.