Configuration

Pour configurer FormKit, créez un fichier formkit.config.js à la racine de votre projet Nuxt. Le module Nuxt fourni utilise automatiquement le fichier formkit.config.js qui se trouve à la racine de votre projet pour étendre les fonctionnalités de FormKit. Votre fichier de configuration doit exporter un objet de configuration.

formkit.config.js

import { fr } from '@formkit/i18n'

export default {
  locales: { fr },
  locale: 'fr',
}

Utiliser des variables d'environnement dans formkit.config.js

Il peut y avoir des cas où vous souhaitez utiliser les variables runtimeConfig de Nuxt à l'intérieur de votre fichier formkit.config.js — comme pour éviter de publier une clé API FormKit Pro dans votre base de code. Pour cela, vous pouvez fournir une fonction à defineFormKitConfig qui retourne un objet de configuration. Votre fonction sera appelée par Nuxt et aura accès à runtimeConfig.

import { fr } from '@formkit/i18n'
import { defineFormKitConfig } from '@formkit/vue'
import { createProPlugin, inputs } from '@formkit/pro'

export default defineFormKitConfig(() => {
  // ici, nous pouvons accéder à `useRuntimeConfig` car
  // notre fonction sera appelée par Nuxt.
  const config = useRuntimeConfig()

  // et nous pouvons utiliser les variables pour importer des secrets.
  //
  // ⚠️ ceci est juste un exemple — si vous souhaitez utiliser FormKit Pro
  // vous devrez installer la dépendance @formkit/pro.
  const pro = createProPlugin(config.FORMKIT_PRO_KEY, inputs)

  return {
    plugins: [pro],
    locales: { fr },
    locale: 'fr',
  }
})

Définir un chemin personnalisé pour formkit.config

Si vous souhaitez fournir un chemin personnalisé pour votre formkit.config, vous pouvez remplacer l'emplacement par défaut en utilisant l'option configFile sous la clé formkit. Tout chemin que vous fournissez doit être relatif à la racine de votre projet Nuxt :

// nuxt.config
export default defineNuxtConfig({
  modules: ['@formkit/nuxt'],
  formkit: {
    autoImport: true,
    configFile: './my-configs/formkit.config.js',
  },
})

Sans étendre defaultConfig

Par défaut, votre configuration va étendre le defaultConfig qui est fourni avec FormKit. C'est le comportement souhaité pour la majorité des projets. Cependant, si vous avez besoin de définir la configuration complète de FormKit vous-même — depuis le début — vous pouvez le faire en définissant l'option defaultConfig du module sur false :

// nuxt.config
export default defineNuxtConfig({
  modules: ['@formkit/nuxt'],
  formkit: {
    autoImport: true,
    defaultConfig: false,
    configFile: './my-configs/formkit.config.js',
    // ^ ceci est maintenant un remplacement complet de la config, pas une surcharge.
  },
})