Skip to content

sfxcode/formkit-primevue-nuxt

Repository files navigation

FormKit PrimeVue Nuxt

npm version npm downloads License Nuxt

Nuxt Module for PrimeVue based FormKit Inputs for using FormKit with the PrimeVue UI Framework.

Based on sfxcode/formkit-primevue.

Features

  • ⛰  Validation by FormKit
  • 🚠  UI by PrimeVue
  • 🏎  Auto import for formkit-primevue components and composables

Nuxt Module Dependencies

  • primevue-nuxt Module
  • formkit-nuxt Module

Both are auto installed by default, this can be disabled in the module options.

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add @sfxcode/formkit-primevue-nuxt

That's it! You can now use FormKit PrimeVue Nuxt Module in your Nuxt app ✨

Module Options

  • includePrimeIcons (default: true): Add PrimeIcons CSS to the project.
  • includeStyles (default: true): Add custom FormKit CSS to the project.
  • installI18N (default: true): Install nuxt i18n module automatically.
  • installFormKit (default: true): Install nuxt formkit module automatically.

Removed options since 1.2.0

  • formkitAutoConfig : Automatically configure FormKit. => Removed in favor of installFormKit
  • formkitLocale ,formkitPluginAnimate, formkitPluginAsterisk : use formkit.config.ts for custom configuration

FormKit Configuration

Use a formkit.config.ts file to configure FormKit.

// formkit.config.ts import type { DefaultConfigOptions } from '@formkit/vue' import { primeInputs, primeOutputs } from '@sfxcode/formkit-primevue' const config: DefaultConfigOptions = { // Define the active locale inputs: { ...primeInputs, ...primeOutputs }, } export default config

Additional Configuration

For i18n support, you can add the following configuration to your nuxt.config.ts:

i18n: { locales: [ { code: 'en', file: 'en.json', }, { code: 'de', file: 'de.json', }, ], defaultLocale: 'en', vueI18n: { fallbackLocale: 'en', }, },

Also define some locales and a sufficient configuration for Vue I18n. Example is provided in the playground

Contribution

Local 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

About

Nuxt Module for PrimeVue based FormKit Inputs for using FormKit with the PrimeVue UI Framework.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published