@sfxcode/formkit-primevue-nuxt
v1.1.3
Published
FormKit PrimeVue nuxt module
Downloads
86
Readme
FormKit PrimeVue Nuxt
Nuxt Module for PrimeVue based FormKit Inputs for using FormKit with the PrimeVue UI Framework.
Features
- ⛰ Validation by FormKit
- 🚠 UI by PrimeVue
- 🏎 Auto import for formkit-primevue components and composables
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. - formkitAutoConfig (default:
true
): Automatically configure FormKit. - formkitLocale (default:
'en'
): Set the FormKit local (Only hen formkitAutoConfig istrue
). - formkitPluginAnimate (default:
true
): Enable FormKit animate plugin (Only hen formkitAutoConfig istrue
). - formkitPluginAsterisk (default:
true
): Enable FormKit asterisk plugin (Only hen formkitAutoConfig istrue
).
Custom Global FormKit Configuration
You can also provide a custom FormKit configuration by adding the following configuration to your nuxt.config.ts
:
formkitPrimevue: {
formkitAutoConfig: false
}
and creating a custom nuxt plugin in the plugins
directory:
for example plugins/formkit.ts
:
import { defaultConfig, plugin } from '@formkit/vue'
import { primeInputs, primeOutputs } from '@sfxcode/formkit-primevue'
export default defineNuxtPlugin((nuxtApp) => {
// Doing something with nuxtApp
const app = nuxtApp.vueApp
app.use(plugin, defaultConfig({
inputs: { ...primeInputs, ...primeOutputs },
// ... additional configurations like locales, plugins, custom validations etc.
}))
})
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