Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/logue/vue-inertia-composable
Vue2 @Inertiajs wrapper library for @vue/composition-api
https://github.com/logue/vue-inertia-composable
composition-api inertiajs laravel9 vue2
Last synced: 6 days ago
JSON representation
Vue2 @Inertiajs wrapper library for @vue/composition-api
- Host: GitHub
- URL: https://github.com/logue/vue-inertia-composable
- Owner: logue
- License: mit
- Created: 2022-06-16T08:52:07.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-06-19T22:49:08.000Z (4 months ago)
- Last Synced: 2024-09-18T16:52:18.511Z (15 days ago)
- Topics: composition-api, inertiajs, laravel9, vue2
- Language: TypeScript
- Homepage:
- Size: 6.73 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Inertia Composable
[](https://www.jsdelivr.com/package/npm/vue-inertia-composable)
[](https://www.npmjs.com/package/vue-inertia-composable)
[](https://uiwjs.github.io/npm-unpkg/#/pkg/vue-inertia-composable/file/README.md)
[](https://www.npmjs.com/package/vue-inertia-composable)
[](https://gitpod.io/#https://github.com/logue/vue-inertia-composable)
[](https://twitter.com/logue256)
A wrapper library for using [Inertia](https://inertiajs.com/) with the [Composition API](https://composition-api.vuejs.org/) in [Vue2](https://v2.vuejs.org/). Rewrite the function starting with `$` (such as `this.$inertia`) to use and use (ex. `const inertia = useInertia();`) it. Please note that due to the implementation of Vue Inertia, it is not always API compatible with Vue3 Inertia.
## Usage
Rewrite entry point script(such as `main.ts` or `app.js`).
```ts
import './bootstrap';
import '../css/app.css';
import Vue from 'vue';
import teleport from '@logue/vue2-helpers/teleport';
import { createInertiaApp } from '@inertiajs/vue2';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
import ziggy from 'ziggy-js';
/** Application Name */
const appName =
window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
createInertiaApp({
title: title => `${title} - ${appName}`,
resolve: name =>
// @ts-ignore
resolvePageComponent(
`./Pages/${name}.vue`,
import.meta.glob('./Pages/**/*.vue')
),
// @ts-ignore
setup({ el, App, props, plugin }) {
// Add route function.
Vue.mixin({ methods: { route: ziggy } });
// Register Inertia
Vue.use(plugin);
// Telepot for vue2.
Vue.component('Teleport', teleport);
// @ts-ignore
Vue.use(ZiggyVue, Ziggy);
return new Vue({ render: h => h(App, props) }).$mount(el);
},
progress: {
color: import.meta.env.VITE_APP_INERTIA_PROGRESS_COLOR || '#4B5563',
},
});
```
ssr.js or ssr.ts is bellow.
```js
import { createInertiaApp } from '@inertiajs/vue2';
// @ts-ignore
import { createRenderer } from 'vue-server-renderer';
// @ts-ignore
import createServer from '@inertiajs/vue2/server';
import Vue from 'vue';
import teleport from '@logue/vue2-helpers/teleport';
import ziggy from 'ziggy-js';
/** Application Name */
const appName = import.meta.env.APP_NAME || 'Laravel';
createServer(page =>
createInertiaApp({
title: title => `${title} - ${appName}`,
page,
render: createRenderer().renderToString,
resolve: name =>
// @ts-ignore
resolvePageComponent(
`./Pages/${name}.vue`,
import.meta.glob('./Pages/**/*.vue')
),
// @ts-ignore
setup({ App, props, plugin }) {
// Add route function.
Vue.mixin({ methods: { route: ziggy } });
// Register Inertia
Vue.use(plugin);
// Telepot for vue2.
Vue.component('Teleport', teleport);
// @ts-ignore
Vue.use(ZiggyVue, Ziggy);
return new Vue({ render: h => h(App, props) });
},
progress: {
color: import.meta.env.VITE_APP_INERTIA_PROGRESS_COLOR || '#4B5563',
},
})
);
```
The script tags of various vue files look like the following.
```vue
Submit
Link
import { defineComponent, ref, type Ref } from 'vue';
import { useForm } from '@inertiajs/vue2';
import { route, InertiaLink } from 'vue-inertia-composable';
import { Head as InertiaHead } from '@inertiajs/inertia-vue';
export default defineComponent({
/** Using Components */
components: {
InertiaHead,
InertiaLink,
},
/** Setup */
setup() {
/** Inertia Form */
const form = useForm({
email: '',
password: '',
remember: false,
}) as any;
/** Form submit handler */
const submit = () => {
form.post(route('login'), {
onFinish: () => form.reset('password'),
});
};
return { form, submit, route };
},
});
```
## Available functions
These functions are basically used to access from within the `setup()` function.
| Function | information |
| --------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
| `useInertia(): typeof Inertia & InertiaFormTrait` | Alias of `Vue.$inertia` |
| `useHeadManager(): InertiaHeadManager` | Alias of `Vue.$headManager` |
| ~~`usePage>(): Page`~~ | Alias of `Vue.$page` |
| ~~`useForm>(args: TForm): InertiaForm`~~ | Alias of `Vue.$inertia.form(...)` |
| `route(name: string, params?: RouteParamsWithQueryOverload, RouteParam, absolute?: boolean, config?: Config): string` | Alias of `ziggy(...)` or `Vue.route(...)` |
| `InertiaLink` | Experimental. See bellow. |
Originally defined PageProps are similar to key-value pairs, but the value type is defined as unknown. As it is, the TypeScript check doesn't go well, so I changed the value type to any.
### InertiaLink
This component was created experimentally because [@inertiajs/vue](https://github.com/inertiajs/inertia/tree/master/packages/inertia-vue)'s `InertiaLink` causes a type checking error. Not required if you don't use TypeScript.
## See also
- [laravel9-vite-vue2-starter](https://github.com/logue/laravel9-vite-vue2-starter) - Laravel9 + Breeze + Vue2
- [vite-vue2-ts-starter](https://github.com/logue/vite-vue2-ts-starter)
## LICENSE
[MIT](LICENSE)
© 2022-2023 by Logue.