laravel 10 – vite vue ders 3

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>&nbsp;
    <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)
    },
})

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.