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

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:

1npx 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.

1// formkit.config.ts
2import type { DefaultConfigOptions } from '@formkit/vue'
3import { primeInputs, primeOutputs } from '@sfxcode/formkit-primevue'
4
5const config: DefaultConfigOptions = {
6  // Define the active locale
7  inputs: { ...primeInputs, ...primeOutputs },
8}
9
10export default config
11

Additional Configuration

For i18n support, you can add the following configuration to your nuxt.config.ts:

1i18n: {
2  locales: [
3    {
4      code: 'en',
5      file: 'en.json',
6    },
7    {
8      code: 'de',
9      file: 'de.json',
10    },
11  ],
12  defaultLocale: 'en',
13  vueI18n: {
14    fallbackLocale: 'en',
15  },
16},

Also define some locales and a sufficient configuration for Vue I18n. Example is provided in the playground

Contribution

1# Install dependencies
2npm install
3
4# Generate type stubs
5npm run dev:prepare
6
7# Develop with the playground
8npm run dev
9
10# Build the playground
11npm run dev:build
12
13# Run ESLint
14npm run lint
15
16# Run Vitest
17npm run test
18npm run test:watch
19
20# Release new version
21npm run release