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.

- ✨  Release Notes

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:

``bash
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.

$3

`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

``

Additional Configuration

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

Contribution

[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