Astro

D'abord, nous devons installer l'intégration de Vue avec Astro. Vous pouvez consulter la documentation de l'intégration de Vue avec Astro pour plus de détails.

À l'intérieur du fichier de configuration d'Astro (astro.config.*), ajoutons un point d'entrée _app. Le fichier de point d'entrée _app est juste un fichier de configuration pour Vue :

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

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

Ensuite, installez le paquet @formKit/vue :

npm install @formkit/vue

Le paquet @formkit/vue est livré avec un plugin Vue et une configuration par défaut pour une installation facile :

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

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

Maintenant, vous pouvez ajouter FormKit à vos composants Vue dans Astro, afin de pouvoir créer un composant dans le dossier des composants :

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

  const submitHandler = async (fields) => {
    // Faisons comme si c'était une requête ajax :
    await new Promise((r) => setTimeout(r, 1000))
    console.log(fields)
  }
</script>

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

Après cela, vous avez juste besoin d'importer et d'utiliser cela dans vos fichiers Astro :

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

<Form client:visible />

C'est tout ! Vous êtes maintenant prêt à utiliser le composant <FormKit> dans votre application Astro.