Install ziggy untuk penggunaan name route di inertiajs
Install ziggy untuk penggunaan name route di inertiajs
7 Sheet
createInertiaApp({
resolve: name => {
const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
return pages[./Pages/${<em>name</em>}.vue]
},
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.use({
install(app){
app.config.globalProperties.$route = route;
}
})
.mount(el)
},
})tambahkan @routes di app.blade.php<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
@vite('resources/js/app.js')
@vite('resources/css/app.css')
@inertiaHead
@routes
</head>
<body>
@inertia
</body>
</html>jika menggunakan cara ini perlu menggunakan $route()penggunaan $route() pada implementasi component vue<Link
:href="$route('user.index')"
class="flex items-center w-full p-2 text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
>User</Link>Cara keduacara kedua untuk langkah-langkahnya hampir samacomposer require tightenco/ziggy
php artisan ziggy:generatebuka vite.config.js. tambahkan kode berikut:resolve: {
alias: {
'ziggy': '/vendor/tightenco/ziggy/src/js',
'ziggy-vue': '/vendor/tightenco/ziggy/src/js/vue',
},
},lengkapnya terlihat seperti ini:import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'
export default defineConfig({ resolve: { alias: { 'ziggy': '/vendor/tightenco/ziggy/src/js', 'ziggy-vue': '/vendor/tightenco/ziggy/src/js/vue', }, }, plugins: [ vue(), laravel({ input: ['resources/css/app.css', 'resources/js/app.js'], ssr: 'resources/js/ssr.js', refresh: true, }), ], });buka di app.js tambahkan kode berikut:import { ZiggyVue } from 'ziggy-vue'; import route from 'ziggy'; .use(ZiggyVue)lengkap terlihat seperti ini:import { createApp, h } from 'vue' import { createInertiaApp } from '@inertiajs/vue3' import { ZiggyVue } from 'ziggy-vue'; import route from 'ziggy';
createInertiaApp({
resolve: name => {
const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
return pages[./Pages/${<em>name</em>}.vue]
},
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.use(ZiggyVue)
.mount(el)
},
})jika menggunakan cara ini tidak perlu menggunakan $route() cukup menggunakan route()penggunaan route() pada implementasi component vue<Link
:href="route('user.index')"
class="flex items-center w-full p-2 text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
>User</Link>
Komentar
Ada 0 komentar pada episode ini.