# 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>

<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>

<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>

<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/</span><span class="p">${</span><span class="nx">props</span><span class="p">.</span><span class="nx">page</span><span class="p">}.vue`]
const PageComponent = loader ? defineAsyncComponent(loader) : null
script>

template>

    <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>

<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>