This package has been moved to @formkit/inertia to maintain a first party integration with Inertia and FormKit, it comes with breaking changes, a better composable and an easier way to extend event callbacks.

FormKit Addon Inertia

Addon for integrating InertiaJS with FormKit

• 🇺🇸 English
• 🇧🇷 Português

Table of contents

• 🚀 Getting Started
• 🛠 Options
• 👏 Contributing
• 📝 License

Getting Started

There are two ways to use this addon, firstly there is the composition 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. Composition

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('/users', 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('/users', 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");

Options

You can use all of InertiaJS callbacks, and we add the FormKit node as the last argument for easy integration of your features.

We by default add some features inside Inertia callbacks to make the use smoother.

There are four features, loading message, disabled prop, progress data attribute and automatic field errors. You can disable any of these by passing any of these properties to the options.

{ disableLoading: true, disableDisabled: true, disableProgress: true, disableErrors: true }

<script setup>
  const onSuccess = (page, node) => {
    // Do any onSuccess logic here
  };

  const submit = (fields, node) => {
    node.context.inertia.post("/users", fields, {
      onSuccess,
      disableProgress: true,
    });
  };
</script>

<template>
  <FormKit type="form" @submit="submit">
    <FormKit type="text" name="name" label="Name" />
    <FormKit type="email" name="email" label="E-mail" />
  </FormKit>
</template>

Contributing

All contributions are welcomed and appreciated!

• You can always star it!
• Any bug you found can be reported by opening an issue
• If you have any cool ideas or features you want to be added just open a discussion about it
• You can make pull request with fixes or features, read out the contributing guide to get started

License

MIT