laravel 10 vue 3 vite kurulumu

ilk laravel kur.

npm install –save-dev vue @vitejs/plugin-vue

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue({
            template: {
                base: null,
                includeAbsolute: false
            }
        })
    ],
});

import { defineConfig } from 'vite';

import laravel from 'laravel-vite-plugin';

import vue from '@vitejs/plugin-vue'

export default defineConfig({

plugins: [

laravel({

input: ['resources/css/app.css', 'resources/js/app.js'],

refresh: true,

}),

vue({

template: {

base: null,

includeAbsolute: false

}

})

});

npm run dev yap bi gör abim çalışıp çalışmadığını.

composer require inertiajs/inertia-laravel

welcome.blade.phpye aşağıdaki kodu yaz.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel Zero</title>
        @vite('resources/js/app.js')
        @inertiaHead
    </head>
    <body>
        @inertia
    </body>
</html>

<!DOCTYPE html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>

<title>Laravel Zero</title>

@vite('resources/js/app.js')

@inertiaHead

</head>

<body>

@inertia

</body>

</html>

https://inertiajs.com/client-side-setup (burada vue3 kısmından kurabilirsiniz şimdiki halini sırayla yazıyorum)

npm install @inertiajs/vue3

bootstrap.js’i sil resources/js içindeki. çöp o. kullanmayacağız.

app.js’e aşağıdaki kodu yazabilirsin.

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'

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(App, props) })
      .use(plugin)
      .mount(el)
  },
})

import { createApp, h } from 'vue'

import { createInertiaApp } from '@inertiajs/vue3'

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(App, props) })

.use(plugin)

.mount(el)

})

web.php içindeki route’u sil.

böylelikle bomboş 404 hatası aldığımız sayfa kalacak sadece geriye.

Bir cevap yazın Cevabı iptal et