FormKit PrimeVue Nuxt

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

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 is true).
• formkitPluginAnimate (default: true): Enable FormKit animate plugin (Only hen formkitAutoConfig is true).
• formkitPluginAsterisk (default: true): Enable FormKit asterisk plugin (Only hen formkitAutoConfig is true).
• installI18N (default: true): Install nuxt i18n module automatically.

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

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