Add some helpers for your Inertia app with TypeScript.
[!IMPORTANT]
- PHP
composer
packagekiwilan/typescriptable-laravel
is required.- Built for Vite with
laravel-vite-plugin
, Inertia and Vue 3.
# npm
npm install @kiwilan/typescriptable-laravel --save-dev
# pnpm
pnpm add @kiwilan/typescriptable-laravel -D
# yarn
yarn add @kiwilan/typescriptable-laravel -D
- 🦾 Add TypeScript experience into
inertia
- 💨 Vite plugin to execute automatically kiwilan/typescriptable-laravel's commands :'
typescriptable:models
,typescriptable:routes
andtypescriptable:routes
with watch mode. - 📦 Vue composables
-
useRouter()
composable withisRoute()
method,currentRoute
computed androute()
method -
useInertia()
composable forpage
computed,component
computed,props
computed,url
computed,version
computed,auth
computed,user
computed andisDev
computed -
useFetch()
withhttp
group methods,laravel
group methods andinertia
group methods. Each group hasget()
,post()
,put()
,patch()
anddelete()
methods-
http
is for anonymous HTTP requests with nativefetch
-
laravel
is for Laravel HTTP requests with route name (works for internal API) with nativefetch
-
inertia
is for Inertia HTTP requests with route name
-
-
- 💚 Vue plugin to use global methods for
template
into Vue components:-
$route
transform route tostring
with Laravel route name and parameters -
$isRoute
transform route name or path toboolean
-
$currentRoute
give current route - Auto-import :
Head
from@inertiajs/vue3
,Link
from@inertiajs/vue3
-
In your vite.config.ts
:
import { defineConfig } from "vite";
import typescriptable from "@kiwilan/typescriptable-laravel/vite";
export default defineConfig({
plugins: [
typescriptable({
autoreload: true,
inertia: true,
inertiaPaths: {
base: "resources/js",
pageType: "types-inertia.d.ts",
globalType: "types-inertia-global.d.ts",
},
models: true,
routes: true,
settings: true,
}),
],
});
In your resources/js/app.ts
:
import "./bootstrap";
import "../css/app.css";
import type { DefineComponent } from "vue";
import { createApp, h } from "vue";
import { createInertiaApp, router } from "@inertiajs/vue3";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue.m";
import { VueTypescriptable } from "@kiwilan/typescriptable-laravel"; // Import VueTypescriptable
import "./routes"; // Import routes
createInertiaApp({
title: (title) => `${title} - Laravel`,
resolve: (name) =>
resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob("./Pages/**/*.vue")) as Promise<DefineComponent>,
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.use(ZiggyVue)
.use(VueTypescriptable); // Add Vue plugin
.mount(el)
},
});
Many options are available into composables
<script lang="ts" setup>
import {
useRouter,
useInertia,
useFetch,
} from "@kiwilan/typescriptable-laravel";
const { route, isRoute, currentRoute } = useRouter();
const { page, component, props, url, version, auth, user, isDev } =
useInertia();
// HTTP requests, each group has get(), post(), put(), patch() and delete() methods
const { http, laravel, inertia } = useFetch();
</script>
With Vue plugin, you can use global methods into your template
:
<template>
<IHead title="Home" />
<ILink :href="$route('home')">Home</ILink>
<ILink :href="$route('user.show', { id: 1 })">User</ILink>
</template>
pnpm package
In package.json
{
"devDependencies": {
"@kiwilan/typescriptable-laravel": "file:~/kiwilan-typescriptable-laravel.tgz"
}
}