Configuração

Para configurar o FormKit, crie um formkit.config.js na raiz do seu projeto Nuxt. O módulo Nuxt fornecido usa automaticamente o formkit.config.js 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.js

import { fr } from '@formkit/i18n'

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

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

Pode haver casos em que você queira usar as variáveis runtimeConfig do Nuxt dentro do seu arquivo formkit.config.js — como manter uma chave da API FormKit Pro fora do seu código-fonte. 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.js',
  },
})

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.js',
    // ^ isso agora é uma substituição completa da configuração, não uma sobreposição.
  },
})