2.4.34 • Published 1 month ago
@kiwilan/typescriptable-laravel v2.4.34
@kiwilan/typescriptable-laravel
Add some helpers for your Inertia app with TypeScript.
- PHP
composer
packagekiwilan/typescriptable-laravel
is required.- Built for Vite with
laravel-vite-plugin
, Inertia and Vue 3.
Installation
# npm
npm install @kiwilan/typescriptable-laravel --save-dev
# pnpm
pnpm add @kiwilan/typescriptable-laravel -D
# yarn
yarn add @kiwilan/typescriptable-laravel -D
Features
- 🦾 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()
methoduseInertia()
composable forpage
computed,component
computed,props
computed,url
computed,version
computed,auth
computed,user
computed andisDev
computeduseFetch()
withhttp
group methods,laravel
group methods andinertia
group methods. Each group hasget()
,post()
,put()
,patch()
anddelete()
methodshttp
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
Setup
Vite plugin
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,
}),
],
});
Inertia
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)
},
});
Usage
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>
Tests
Local test
pnpm package
In package.json
{
"devDependencies": {
"@kiwilan/typescriptable-laravel": "file:~/kiwilan-typescriptable-laravel.tgz"
}
}
2.4.34
1 month ago
2.4.33
1 month ago
2.4.30
2 months ago
2.4.29
2 months ago
2.4.28
2 months ago
2.4.27
2 months ago
2.4.26
2 months ago
2.4.25
3 months ago
2.4.24
3 months ago
2.4.23
3 months ago
2.4.22
3 months ago
2.4.21
3 months ago
2.4.20
3 months ago
2.4.1
4 months ago
2.4.0
4 months ago
2.3.4
4 months ago
2.3.6
4 months ago
2.3.5
4 months ago
2.3.8
4 months ago
2.3.7
4 months ago
2.3.3
4 months ago
2.3.1
4 months ago
2.3.0
4 months ago
2.2.0
5 months ago
1.2.0
11 months ago
2.0.3
9 months ago
2.0.2
9 months ago
2.0.5
9 months ago
2.0.4
9 months ago
2.0.7
7 months ago
2.0.6
7 months ago
2.0.9
7 months ago
2.0.8
7 months ago
2.1.0
7 months ago
2.0.1
10 months ago
2.0.0
10 months ago
1.1.10
1 year ago
1.0.10
1 year ago
1.0.0
1 year ago