Configuração

Para configurar o FormKit, crie um formkit.config.ts na raiz do seu projeto Nuxt. O módulo Nuxt fornecido usa automaticamente o formkit.config.ts que está na raiz do seu projeto para estender a funcionalidade do FormKit. Seu arquivo de configuração deve exportar um objeto de configuração.

formkit.config.ts

import { fr } from '@formkit/i18n'
import { defineFormKitConfig } from '@formkit/vue'

export default defineFormKitConfig({
  locales: { fr },
  locale: 'fr',
})

Usando variáveis de ambiente em formkit.config.ts

Pode haver casos em que você queira usar as variáveis runtimeConfig do Nuxt dentro do seu arquivo formkit.config.ts — como manter uma chave da API FormKit Pro sem ser publicada no seu código. Para conseguir isso, você pode fornecer uma função para defineFormKitConfig que retorna um objeto de configuração. Sua função será chamada pelo Nuxt e terá acesso ao runtimeConfig.

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

export default defineFormKitConfig(() => {
  // aqui podemos acessar `useRuntimeConfig` porque
  // nossa função será chamada pelo Nuxt.
  const config = useRuntimeConfig()

  // e podemos usar as variáveis para importar segredos.
  //
  // ⚠️ isso é apenas um exemplo — se você quiser usar o FormKit Pro
  // você precisará instalar a dependência @formkit/pro.
  const pro = createProPlugin(config.FORMKIT_PRO_KEY, inputs)

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

Definindo um caminho personalizado para o FormKit config

Se você deseja fornecer um caminho personalizado para o seu formkit.config, você pode substituir o local padrão usando a opção configFile sob a chave formkit. Qualquer caminho que você fornecer deve ser relativo à raiz do seu projeto Nuxt:

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

Sem estender o defaultConfig

Por padrão, sua configuração irá estender o defaultConfig que acompanha o FormKit. Este é o comportamento desejado para a maioria dos projetos. No entanto, se você precisar definir a configuração completa do FormKit por conta própria — do zero — você pode fazer isso definindo a opção defaultConfig do módulo como false:

// nuxt.config
export default defineNuxtConfig({
  modules: ['@formkit/nuxt'],
  formkit: {
    autoImport: true,
    defaultConfig: false,
    configFile: './my-configs/formkit.config.ts',
    // ^ isso agora é uma substituição completa da configuração, não uma sobreposição.
  },
})