https://github.com/fenilli/formkit-addon-inertia
A plugin for integrating InertiaJS with FormKit.
https://github.com/fenilli/formkit-addon-inertia
addon formkit inertiajs javascript plugin typescript
Last synced: 6 months ago
JSON representation
A plugin for integrating InertiaJS with FormKit.
- Host: GitHub
- URL: https://github.com/fenilli/formkit-addon-inertia
- Owner: fenilli
- License: mit
- Created: 2022-03-31T23:48:17.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-15T19:03:57.000Z (about 1 year ago)
- Last Synced: 2024-04-28T21:43:22.267Z (about 1 year ago)
- Topics: addon, formkit, inertiajs, javascript, plugin, typescript
- Language: TypeScript
- Homepage:
- Size: 2.34 MB
- Stars: 32
- Watchers: 5
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: .github/README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
> This package has been moved to [@formkit/inertia](https://github.com/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](https://inertiajs.com/) with [FormKit](https://formkit.com/)
- 🇺🇸 [English](./README.md)
- 🇧🇷 [Português](./README.pt_BR.md)
## Table of contents
- 🚀 [Getting Started](#getting-started)
- 🛠 [Options](#options)
- 👏 [Contributing](#contributing)
- 📝 [License](#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.
```bash
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`.
```html
import { useInertia } from "formkit-addon-inertia";
useInertia(node).post('/users', fields)"
>
```
### 2. Plugin
The `inertia` context property has all Inertia HTTP methods.
Those are `visit`, `get`, `post`, `put`, `patch`, `delete` and `reload`.
```html
import { plugin as inertiaPlugin } from "formkit-addon-inertia";
node.context.inertia.post('/users', fields)"
>
```
> You can add this plugin as a global formkit plugin so every form has it, instead of defining manually like the example above
>
> ```js
> 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](https://inertiajs.com/manual-visits#event-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 }
```html
const onSuccess = (page, node) => {
// Do any onSuccess logic here
};
const submit = (fields, node) => {
node.context.inertia.post("/users", fields, {
onSuccess,
disableProgress: true,
});
};
```
## Contributing
All contributions are welcomed and appreciated!
- You can always star it!
- Any bug you found can be reported by opening an [issue](https://github.com/GustavoFenilli/formkit-addon-inertia/issues/new?assignees=GustavoFenilli&labels=bug)
- If you have any cool ideas or features you want to be added just open a [discussion](https://github.com/GustavoFenilli/formkit-addon-inertia/discussions/new?category=ideas) about it
- You can make pull request with fixes or features, read out the [contributing guide](./CONTRIBUTING.md) to get started
## License
[MIT](https://github.com/GustavoFenilli/formkit-addon-inertia/blob/main/LICENSE)