layouts eklemek için;
Pages içine layouts ekle. Index içine Index.vue ve show adı altında 2 dosya oluştur. sırasıyla kodları;
layouts;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<template> <Link href="/">Main Page</Link> <Link href="/hello">Show Page</Link> <div>The page with time {{timer}}</div> <slot>Default</slot> </template> <script setup> import {Link} from '@inertiajs/vue3' import {ref} from 'vue' const timer = ref(0); setInterval(() => timer.value++,1000); </script> |
index.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<template> <div>Index</div> <Link href="/hello">Hello Page</Link> <div> The message is {{ message }} </div> </template> <script setup> import {Link} from '@inertiajs/vue3' defineProps({message:String}) </script> |
show.vue
1 2 3 4 5 6 7 8 |
<template> <div>Show</div> <Link href="/">Main Page</Link> </template> <script setup> import {Link} from '@inertiajs/vue3' </script> |
bide app.js var her sayfada manilayout gözüksün diye;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { createApp, h } from 'vue' import { createInertiaApp } from '@inertiajs/vue3' import MainLayout from '@/Pages/Layouts/MainLayout.vue' createInertiaApp({ resolve: name => { const pages = import.meta.glob('./Pages/**/*.vue', { eager: true }) return pages[`./Pages/${name}.vue`] }, setup({ el, App, props, plugin }) { createApp({ render: () => h(MainLayout, {}, [h(App, props)]) }) .use(plugin) .mount(el) }, }) |