Optimisation pour la production

• Examiner le defaultConfig
• Une configuration personnalisée
  • Utilisation du plugin global
  • Utilisation du module Nuxt
• Injection de configuration (fractionnement de code)

FormKit est livré avec de nombreuses fonctionnalités dès le départ. C'est idéal pour commencer, mais le defaultConfig peut inclure des fonctionnalités et des entrées que vous n'utilisez pas. Dans ce guide, nous allons apprendre à alléger notre installation de FormKit pour la production.

Examiner le defaultConfig

La plupart des utilisateurs de FormKit commencent par utiliser le defaultConfig fourni — mais que contient-il réellement ?

• Ajoute le plugin @formkit/validation avec toutes les règles.
• Ajoute le plugin @formkit/i18n avec la locale en (plus toutes les locales supplémentaires que vous avez ajoutées).
• Ajoute le plugin @formkit/inputs avec tous les inputs non-pro.
• Ajoute le plugin @formkit/theme avec des icônes chargées via CDN, ou toutes icônes explicitement chargées.
• Ajoute les liaisons @formkit/vue pour permettre à FormKit d'interagir avec Vue.
• Enregistre l'interpréteur d'erreurs @formkit/dev (fournit des messages d'erreur lisibles par l'homme en développement).

Le defaultConfig expose également une syntaxe d'objet pratique pour fournir des options de configuration pour tous les plugins ci-dessus. Par exemple, pour fournir une entrée au plugin @formkit/inputs lors de l'instanciation, le config par défaut vous permet de passer une propriété inputs :

app.use(plugin, defaultConfig({
  inputs: {
    myInput: createInput(/* options de l'entrée */)
  }
}))

Pour plus de détails, consultez le code source du defaultConfig.

Une configuration personnalisée

Lors de l'optimisation de votre installation de FormKit pour la production, vous voudrez peut-être créer une configuration personnalisée. Cela vous permettra d'inclure uniquement les fonctionnalités, entrées, règles et messages que vous utilisez réellement.

Par exemple, considérez un projet avec un formulaire simple qui n'utilise qu'une entrée de texte et la règle required. Quelque chose comme ceci :

<script setup>
async function submit () {
  // ... soumettre les choses
}
</script>
<template>
  <FormKit
    type="form"
    @submit="submit"
  >
    <FormKit
      type="text"
      name="name"
      label="Nom"
      help="Comment les gens vous appellent-ils ?"
      validation="required"
    />
  </FormKit>
</template>

Dans ce cas, nous voulons uniquement utiliser la règle singulière required, seulement l'entrée text, et seulement le message required en anglais et en allemand. Nous pouvons créer cette configuration personnalisée élagable en n'utilisant pas le defaultConfig et en effectuant nos propres instantiations de plugins :

Utilisation du plugin global

// fichier : main.ts
import { createApp } from 'vue'
import App from './App.vue'
import type { FormKitOptions } from '@formkit/core'
import { plugin, bindings } from '@formkit/vue'
import { createValidationPlugin } from '@formkit/validation'
import { required } from '@formkit/rules'
import { createI18nPlugin, en, de } from '@formkit/i18n'
import { createLibraryPlugin, text, form, submit } from '@formkit/inputs'

const library = createLibraryPlugin({ text, form, submit })
const validation = createValidationPlugin({ required })
const i18n = createI18nPlugin({ en, de })

const app = createApp(App)
app.use(plugin, {
  plugins: [library, validation, i18n, bindings]
})

Utilisation du module Nuxt

Si vous utilisez le module @formkit/nuxt, vous pouvez choisir de ne pas utiliser la defaultConfig en fournissant l'option defaultConfig: false au module :

export default defineNuxtConfig({
  modules: ['@formkit/nuxt'],
  formkit: {
    autoImport: true,
    defaultConfig: false
  }
})

Ensuite, votre formkit.config.ts doit fournir une configuration personnalisée complète :

import type { FormKitOptions } from '@formkit/core'
import { bindings } from '@formkit/vue'
import { createValidationPlugin } from '@formkit/validation'
import { required } from '@formkit/rules'
import { createI18nPlugin, en, de } from '@formkit/i18n'
import { createLibraryPlugin, text, form, submit } from '@formkit/inputs'

const library = createLibraryPlugin({ text, form, submit })
const validation = createValidationPlugin({ required })
const i18n = createI18nPlugin({ en, de })

export default {
  plugins: [library, validation, i18n, bindings]
} satisfies FormKitOptions

createI18nPlugin({
  en: {
    validation: {
      required: 'This field is required'
    },
    ui: {
      submit: 'Submit'
    }
  },
  de: {
    validation: {
      required: 'Dieses Feld ist erforderlich'
    },
    ui: {
      submit: 'Einreichen'
    }
  }
})

Injection de configuration (fractionnement de code)

L'architecture des plugins de Vue est intrinsèquement globale. Le plugin dans @formkit/vue ne fait pas exception ; cependant, cette commodité a un coût — FormKit sera chargé partout où Vue est chargé, même s'il n'est pas utilisé sur la page.

Heureusement pour les utilisateurs de Nuxt, le module @formkit/nuxt fournit une solution à ce problème : autoImport: true. Cette option injectera automatiquement FormKit et sa configuration uniquement sur les pages où il est utilisé.

Les utilisateurs de Vite peuvent également tirer parti de l'injection automatique en utilisant unplugin-formkit.

Pour les utilisateurs d'autres outils de build ou pour des cas d'utilisation qui ne s'intègrent pas bien dans les fonctionnalités prises en charge par unplugin-formkit, l'utilisation du composant <FormKitProvider> vous permet de fournir une configuration globale à vos entrées FormKit au point d'utilisation. Il suffit d'entourer vos composants avec <FormKitProvider> et de fournir une prop config :

<script setup>
import { FormKitProvider } from '@formkit/vue'
import type { FormKitOptions } from "@formkit/core"

const formKitConfig: FormKitOptions = {
  // ... votre config personnalisée
}
</script>

<template>
  <FormKitProvider :config="formKitConfig">
    <!-- vos composants FormKit (peuvent être profondément imbriqués) -->
  </FormKitProvider>
</template>