配置

要配置 FormKit，请在您的 Nuxt 项目根目录下创建一个 formkit.config.js 文件。提供的 Nuxt 模块会自动使用项目根目录下的 formkit.config.js 来扩展 FormKit 的功能。您的配置文件应该导出一个配置对象。

formkit.config.js

import { fr } from '@formkit/i18n'

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

在 formkit.config.js 中使用环境变量

在某些情况下，您可能希望在 formkit.config.js 文件中使用 Nuxt 的 runtimeConfig 变量 —— 例如，防止 FormKit Pro API 密钥在您的代码库中被公开。为了实现这一点，您可以提供一个函数给 defineFormKitConfig，该函数返回一个配置对象。Nuxt 将调用您的函数，并可以访问 runtimeConfig。

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

export default defineFormKitConfig(() => {
  // 在这里我们可以访问 `useRuntimeConfig`，因为
  // 我们的函数将被 Nuxt 调用。
  const config = useRuntimeConfig()

  // 我们可以使用变量来导入秘密。
  //
  // ⚠️ 这只是一个示例 —— 如果您想使用 FormKit Pro
  // 您需要安装 @formkit/pro 依赖。
  const pro = createProPlugin(config.FORMKIT_PRO_KEY, inputs)

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

定义自定义 FormKit 配置路径

如果您想要提供一个自定义路径给您的 formkit.config，您可以使用 formkit 键下的 configFile 选项来覆盖默认位置。您提供的任何路径都应该相对于您的 Nuxt 项目根目录：

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

不扩展 defaultConfig

默认情况下，你的配置将会_扩展_随 FormKit 一起提供的 defaultConfig。这是大多数项目所期望的行为。然而，如果你需要从头开始定义整个 FormKit 配置，你可以通过将模块的 defaultConfig 选项设置为 false 来实现：

// nuxt.config
export default defineNuxtConfig({
  modules: ['@formkit/nuxt'],
  formkit: {
    autoImport: true,
    defaultConfig: false,
    configFile: './my-configs/formkit.config.js',
    // ^ 这现在是一个完整的配置替换，而不是覆盖。
  },
})