Astro

首先，我们需要安装 Astro 的 Vue 集成。你可以参考 Astro 的 Vue 集成文档了解更多详情。

在 Astro 的配置文件（astro.config.*）中，让我们添加一个入口点 _app。_app 入口点文件只是一个 Vue 的配置文件：

// astro.config.mjs
import { defineConfig } from 'astro/config'
import vue from '@astrojs/vue'

export default defineConfig({
  integrations: [vue({ appEntrypoint: '/src/pages/_app' })],
})

接下来，安装 @formKit/vue 包：

npm install @formkit/vue

@formKit/vue 包附带了一个 Vue 插件和一个默认配置，以便简单设置：

// src/pages/_app.ts
import type { App } from 'vue'
import { plugin, defaultConfig } from '@formkit/vue'

export default (app: App) => {
  app.use(plugin, defaultConfig)
}

现在你可以在你的 Astro Vue 组件中添加 FormKit，这样你就可以在组件文件夹中创建一个组件：

<script setup>
  // src/components/Form.vue

  const submitHandler = async (fields) => {
    // 假装这是一个 ajax 请求：
    await new Promise((r) => setTimeout(r, 1000))
    console.log(fields)
  }
</script>

<template>
  <FormKit type="form" @submit="submitHandler">
    <FormKit type="text" label="Name" name: "name" />
    <FormKit type="email" label="Email" name: "email" />
  </FormKit>
</template>

之后，你只需要在你的 Astro 文件中导入并使用它：

// src/pages/index.astro
---
import Form from '../components/Form.vue';
---

<Form client:visible />

就是这样！你现在已经准备好在你的 Astro 应用程序中使用 <FormKit> 组件了。