FormKit Addon Inertia

Plugin for integrating InertiaJS with FormKit

You can check out the full documentation here

Getting Started

There are two ways to use this addon, firstly there is the composable way, and there is also a formkit plugin.

In the end, the plugin uses the composable inside of it with the correct form node for easy of use.

npm i formkit-addon-inertia

1. Composable

The useInertia is a function that receives a FormKit node and returns all Inertia HTTP methods. Those are visit, get, post, put, patch, delete and reload.

<script setup>
  import { useInertia } from "formkit-addon-inertia";
</script>

<template>
  <FormKit
    type="form"
    @submit="(fields, node) => useInertia(node).post('/user', fields)"
  >
    <FormKit type="text" name="name" label="Name" />
    <FormKit type="email" name="email" label="E-mail" />
  </FormKit>
</template>

2. Plugin

The inertia context property has all Inertia HTTP methods. Those are visit, get, post, put, patch, delete and reload.

<script setup>
  import { plugin as inertiaPlugin } from "formkit-addon-inertia";
</script>

<template>
  <FormKit
    type="form"
    :plugins="[inertiaPlugin]"
    @submit="(fields, node) => node.context.inertia.post('/user', fields)"
  >
    <FormKit type="text" name="name" label="Name" />
    <FormKit type="email" name="email" label="E-mail" />
  </FormKit>
</template>

You can add this plugin as a global formkit plugin so every form has it, instead of defining manually like the example above

import { createApp } from "vue";
import App from "App.vue";
import { plugin, defaultConfig } from "@formkit/vue";
import { plugin as inertiaPlugin } from "formkit-addon-inertia";

createApp(App)
  .use(plugin, defaultConfig({ plugins: [inertiaPlugin] }))
  .mount("#app");

License

MIT