Module Configuration ​

Available Configuration options are:

export interface ModuleOptions {
  config: PrimeVueConfiguration
  components?: {
    include?: Array<PrimeVueComponent | string>
    exclude?: Array<string>
    force?: Array<PrimeVueComponent | string>
  }
  useFormkit: boolean
  quiet: boolean
  includeDemo: boolean
}

export interface ModuleOptions {
  config: PrimeVueConfiguration
  components?: {
    include?: Array<PrimeVueComponent | string>
    exclude?: Array<string>
    force?: Array<PrimeVueComponent | string>
  }
  useFormkit: boolean
  quiet: boolean
  includeDemo: boolean
}

Options ​

Default Configuration ​

If no configuration provided, this module work totally fine.

Nearly all PrimeVue components are imported (except Editor because of some SSR problems).

Default PrimeVueConfiguration is used with (ripple:true).

If fintuning is needed, see information below.

Primevue Configuration ​

PrimeVueConfiguration is read from module config and injected in the PrimeVue startup of this module.

export interface PrimeVueConfiguration {
    ripple?: boolean;
    inputStyle?: string;
    locale?: PrimeVueLocaleOptions;
}

export interface PrimeVueConfiguration {
    ripple?: boolean;
    inputStyle?: string;
    locale?: PrimeVueLocaleOptions;
}

Configuration sample:

config: {
  ripple: true  // default
}

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.

  useFormkit: true  // default

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

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: {
  include: [...defaultPrimeVueComponents(true, true), 'DataTable', 'Column'],
  force: ['Button',{name:'Message', global:true}],
}

Components Configuration ​

Option include:

Includes components by name or as PrimeVueComponent. If includes are defined, default values are not used.

export interface PrimeVueComponent {
  name: string
  global: boolean
}

export interface PrimeVueComponent {
  name: string
  global: boolean
}

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)

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