Astro

Primeiro, precisamos instalar a integração do Vue com o Astro. Você pode consultar a documentação de integração do Vue com o Astro para mais detalhes.

Dentro do arquivo de configuração do Astro (astro.config.*), vamos adicionar um ponto de entrada _app. O arquivo de ponto de entrada _app é apenas um arquivo de configuração para o Vue:

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

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

Em seguida, instale o pacote @formKit/vue:

npm install @formkit/vue

O pacote @formkit/vue vem com um plugin do Vue e uma configuração padrão para facilitar a configuração:

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

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

Agora você pode adicionar o FormKit aos seus componentes Vue no Astro, para que você possa criar um componente dentro da pasta de componentes:

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

  const submitHandler = async (fields) => {
    // Vamos fingir que isso é uma requisição ajax:
    await new Promise((r) => setTimeout(r, 1000))
    console.log(fields)
  }
</script>

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

Depois disso, você só precisa importar e usar dentro dos seus arquivos Astro:

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

<Form client:visible />

Pronto! Agora você está preparado para usar o componente <FormKit> na sua aplicação Astro.