Otimizando para produção

• Examinando o defaultConfig
• Uma configuração personalizada
  • Usando o plugin global
  • Usando o módulo Nuxt
• Injeção de configuração (divisão de código)

O FormKit vem com muitas funcionalidades prontas para uso. Isso é ótimo para começar, mas o defaultConfig pode incluir recursos e entradas que você não está usando. Neste guia, vamos aprender a enxugar nossa instalação do FormKit para produção.

Examinando o defaultConfig

A maioria dos usuários do FormKit começa usando o defaultConfig fornecido — mas o que isso realmente inclui?

• Adiciona o plugin @formkit/validation com todas as regras.
• Adiciona o plugin @formkit/i18n com o local en (mais quaisquer locais adicionais que você tenha adicionado).
• Adiciona o plugin @formkit/inputs com todas as entradas que não são pro.
• Adiciona o plugin @formkit/theme com ícones carregados via CDN, ou quaisquer ícones explicitamente carregados.
• Adiciona as vinculações @formkit/vue para permitir que o FormKit interaja com o Vue.
• Registra o interpretador de erros @formkit/dev (fornece mensagens de erro legíveis por humanos em desenvolvimento).

O defaultConfig também expõe uma sintaxe de objeto conveniente para fornecer opções de configuração para todos os plugins acima. Por exemplo, para fornecer uma entrada ao plugin @formkit/inputs na instanciação, a configuração padrão permite que você passe uma propriedade inputs:

app.use(plugin, defaultConfig({
  inputs: {
    myInput: createInput(/* opções de entrada */)
  }
}))

Para mais detalhes, confira o código fonte do defaultConfig.

Uma configuração personalizada

Ao otimizar sua instalação do FormKit para produção, você pode querer criar uma configuração personalizada. Isso permitirá que você inclua apenas os recursos, entradas, regras e mensagens que está realmente usando.

Por exemplo, considere um projeto com um formulário simples que usa apenas uma entrada de texto e a regra required. Algo assim:

<script setup>
async function submit () {
  // ... envie as coisas
}
</script>
<template>
  <FormKit
    type="form"
    @submit="submit"
  >
    <FormKit
      type="text"
      name="name"
      label="Nome"
      help="Como as pessoas te chamam?"
      validation="required"
    />
  </FormKit>
</template>

Neste caso, queremos usar apenas a regra singular required, apenas a entrada text e apenas a mensagem required em inglês e alemão. Podemos criar essa configuração personalizada compatível com tree-shaking ao não usar o defaultConfig e, em vez disso, realizar nossas próprias instanciações de plugins:

Usando o plugin global

// arquivo: 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]
})

Usando o módulo Nuxt

Se você está usando o módulo @formkit/nuxt, você pode optar por não usar a defaultConfig fornecendo a opção defaultConfig: false para o módulo:

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

Então, espera-se que o seu formkit.config.ts forneça uma configuração personalizada completa:

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: 'Este campo é obrigatório'
    },
    ui: {
      submit: 'Enviar'
    }
  },
  de: {
    validation: {
      required: 'Dieses Feld ist erforderlich'
    },
    ui: {
      submit: 'Einreichen'
    }
  }
})

Injeção de configuração (divisão de código)

A arquitetura de plugins do Vue é inerentemente global. O plugin em @formkit/vue não é diferente; no entanto, essa conveniência vem com um custo — FormKit será carregado onde quer que o Vue seja carregado, mesmo que não seja usado na página.

Felizmente para os usuários do Nuxt, o módulo @formkit/nuxt oferece uma solução para esse problema: autoImport: true. Esta opção injetará automaticamente o FormKit e sua configuração apenas nas páginas onde ele é usado.

Usuários do Vite também podem aproveitar a injeção automática usando unplugin-formkit.

Para usuários de outras ferramentas de construção ou para casos de uso que não se encaixam bem nas funcionalidades suportadas pelo unplugin-formkit, usar o componente <FormKitProvider> permite fornecer uma configuração global para seus inputs FormKit no ponto de uso. Basta envolver seus componentes em <FormKitProvider> e fornecer uma prop config:

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

const formKitConfig: FormKitOptions = {
  // ... sua configuração personalizada
}
</script>

<template>
  <FormKitProvider :config="formKitConfig">
    <!-- seus componentes FormKit (podem estar profundamente aninhados) -->
  </FormKitProvider>
</template>