@sfxcode/formkit-primevue-nuxt
v1.2.3
Published
FormKit PrimeVue nuxt module
Downloads
879
Readme
FormKit PrimeVue 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
# 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