Laravel’de Inertia Kullanmadan Vue Kullanımı

Son güncelleme: 12 Mayıs 2026 03:56

Folder Yapısı

# sadece bir örnek resources ├ js │ ├ app.js │ ├ App.vue │ ├ pages │ │ └ Dashboard.vue │ ├ components │ │ └ ui │ └ layouts └ views └ app.blade.php Akış

Laravel route ↓ controller returns Blade ↓ Blade sets PAGE + PROPS ↓ Vue loads correct page component ↓ component receives props

<h3>
    Adımlar
</h3>
<div class="highlight js-code-highlight">
    <pre class="highlight shell"><code><span class="c"># laravel</span>

laravel new example-app

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

<div class="highlight js-code-highlight">
    <pre class="highlight javascript"><code><span class="err">#</span> <span class="nx">vite</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">js</span>

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

export default defineConfig({
plugins: [
laravel({
input: [‘resources/css/app.css‘, ‘resources/js/app.js‘],
refresh: true,
}),
vue(),
],
});

<div class="highlight js-code-highlight">
    <pre class="highlight javascript"><code><span class="err">#</span> <span class="nx">resources</span><span class="err">\</span><span class="nx">js</span><span class="err">\</span><span class="nx">app</span><span class="p">.</span><span class="nx">js</span>

import { createApp, h } from “vue“
import App from “./App.vue“

const app = createApp({
render: () => h(App, {
page: window.PAGE,
props: window.PROPS
})
})

app.mount(“#vue-app“)

<div class="highlight js-code-highlight">
    <pre class="highlight vue"><code># resources\js\App.vue

script setup>
import { defineAsyncComponent } from “vue“
import AppSidebar from “./components/app-sidebar.vue“

const props = defineProps({
page: String,
props: Object
})

const pages = import.meta.glob(“./pages/*/.vue“)
const loader = pages[./pages/${props.page}.vue`]
const PageComponent = loader ? defineAsyncComponent(loader) : null
script>

template>

class=“flex min-h-screen”>
/>

    <span class="nt"><main> <span class="na">class=</span><span class="s">"flex-1 p-6"</span><span class="nt">&gt;</span>
        <span class="nt"><component> <span class="na">v-if=</span><span class="s">"PageComponent"</span> <span class="na">:is=</span><span class="s">"PageComponent"</span> <span class="na">v-bind=</span><span class="s">"props.props"</span> <span class="nt">/&gt;</span>
        <span class="nt"><p> <span class="na">v-else</span><span class="nt">&gt;</span>Sayfa bulunamadı<span class="nt"/></p></span>
    <span class="nt"/></component></span></main></span>
<span class="nt"/></appsidebar></span></div></span>

template>

<div class="highlight js-code-highlight">
    <pre class="highlight html"><code># resources\views\layouts\app.blade.php

lang=“{{ strreplace(‘‘, ‘-‘, app()->getLocale()) }}”>

<span class="nt"><meta/> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">&gt;</span>
<span class="nt"><meta/> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1.0"</span><span class="nt">&gt;</span>
<span class="nt"><meta/> <span class="na">http-equiv=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content=</span><span class="s">"ie=edge"</span><span class="nt">&gt;</span>
<span class="nt"><meta/> <span class="na">name=</span><span class="s">"csrf-token"</span> <span class="na">content=</span><span class="s">"{{ csrf_token() }}"</span><span class="nt">&gt;</span>

<span class="nt"><title/></span>{{ config('app.name') }}<span class="nt"/>

<span class="nt"><script/></span>
    <span class="nb">window</span><span class="p">.</span><span class="nx">PAGE</span> <span class="o">=</span> <span class="p">@</span><span class="nd">json</span><span class="p">(</span><span class="nx">$page</span><span class="p">);</span>
    <span class="nb">window</span><span class="p">.</span><span class="nx">PROPS</span> <span class="o">=</span> <span class="p">@</span><span class="nd">json</span><span class="p">(</span><span class="nx">$props</span><span class="p">);</span>
    <span class="nb">window</span><span class="p">.</span><span class="nx">_USER</span> <span class="o">=</span> <span class="p">@</span><span class="nd">json</span><span class="p">(</span><span class="nf">auth</span><span class="p">()</span><span class="o">-&gt;</span><span class="nf">user</span><span class="p">());</span>
    <span class="nb">window</span><span class="p">.</span><span class="nx">APP_NAME</span> <span class="o">=</span> <span class="p">@</span><span class="nd">json</span><span class="p">(</span><span class="nf">config</span><span class="p">(</span><span class="dl">'</span><span class="s1">app.name</span><span class="dl">'</span><span class="p">));</span>
<span class="nt"/>

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

<span class="nt"><p> <span class="na">id=</span><span class="s">"vue-app"</span><span class="nt">&gt;</span></p></span>

<div class="highlight js-code-highlight">
    <pre class="highlight shell"><code><span class="c"># web sunucunuzu başlatın, ve sonra:</span>

npm run dev

<div class="highlight js-code-highlight">
    <pre class="highlight php"><code><span class="c1"># örnek</span>

public function index()
{
return view(‘app’, [
‘page’ => ‘componentsname’,
‘props’ => [
‘title’ => ‘sayfa başlığı’,
‘constant’ => [‘type’ => ‘monthly’]
]
]);
}

Kaynak: Orijinal Makale

Laravel’de Inertia Kullanmadan Vue Kullanımı

Folder Yapısı

Akış

Sanal Medya

Son Eklenenler

Qualcomm Sohbeti: Snapdragon C, RTX Spark ve Yapay Zeka Geleceği

GTA 6 Gecikmesini WWE 2K26 ile İkiye Katla

İspanyada Yüzen yılanlar Balear Adaları’nda turistleri korkutuyor

Hırsız Waymo ile San Francisco’da Yoga Kıyafetleri Çaldı ve Kaçtı

Belkin’in Yeni Joy-Con Kavramaları Switch 2’nin Pil Ömrünü Uzatıyor

Çin’in Yeni Büyük Denizaltısı Uydu Görüntülerinde Tespit Edildi Eşsiz Özelliği Dikkat Çekiyor

Siber güvenlik, yapay zeka ve savunma sanayiinden; finans ve sinema dünyasına uzanan geniş bir yelpaze. Teknomers; teknoloji, strateji ve yazılım dünyasını sade bir dille sizlerle buluşturuyor.

Kurumsal

Kategoriler

Populer