Nuxt Module for PrimeVue based FormKit Inputs for using FormKit with the PrimeVue UI Framework.
Based on sfxcode/formkit-primevue.
- ⛰ Validation by FormKit
- 🚠 UI by PrimeVue
- 🏎 Auto import for formkit-primevue components and composables
- primevue-nuxt Module
- formkit-nuxt Module
Both are auto installed by default, this can be disabled in the module options.
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 ✨
- 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.
- formkitAutoConfig : Automatically configure FormKit. => Removed in favor of installFormKit
- formkitLocale ,formkitPluginAnimate, formkitPluginAsterisk : use formkit.config.ts for custom 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
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
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