FormKit PrimeVue nuxt module
npm install @sfxcode/formkit-primevue-nuxt[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]
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:
``bash`
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.true
- includeStyles (default: ): Add custom FormKit CSS to the project.true
- installI18N (default: ): Install nuxt i18n module automatically.true
- installFormKit (default: ): Install nuxt formkit module automatically.
Use a formkit.config.ts file to configure FormKit.
`ts
// 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:
`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
`bash``
# 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
[npm-version-src]: https://img.shields.io/npm/v/@sfxcode/formkit-primevue-nuxt/latest.svg?style=flat&colorA=020420&colorB=00DC82
[npm-version-href]: https://npmjs.com/package/@sfxcode/formkit-primevue-nuxt
[npm-downloads-src]: https://img.shields.io/npm/dm/@sfxcode/formkit-primevue-nuxt.svg?style=flat&colorA=020420&colorB=00DC82
[npm-downloads-href]: https://npm.chart.dev/@sfxcode/formkit-primevue-nuxt
[license-src]: https://img.shields.io/npm/l/@sfxcode/formkit-primevue-nuxt.svg?style=flat&colorA=020420&colorB=00DC82
[license-href]: https://npmjs.com/package/@sfxcode/formkit-primevue-nuxt
[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
[nuxt-href]: https://nuxt.com