Creating a layout file in Laravel, Vue, Inertia Js

Question

I'm new to Vue and Inertia Js, so far I understand that in Inertia, u can call Vue components with layouts, like navbar and sidebar etc.

but what I'm trying to achieve is to create a layout of the whole app, that consists of multiple vue files for example like this,

<template>
    <NavbarVue/>
    <Home/>
    <Kenapa/>
    <Cerita/>
    <Karir/>
    <Lowongan/>
    <Media/>
    <Gabung/>
    <Mitra/>
    <Download/>
    <Footer/>
</template>
    
    <script setup lang="ts">
    import NavbarVue from '../components/Navbar.vue';
    import Home from '../pages/Home.vue';
    import Media from '../pages/Media.vue';
    import Kenapa from '../pages/Kenapa.vue';
    import Cerita from '../pages/Cerita.vue';
    import Lowongan from '../pages/Lowongan.vue';
    import Karir from '../pages/Karir.vue';
    import Gabung from '../pages/Gabung.vue';
    import Mitra from '../pages/Mitra.vue';
    import Download from '../pages/Download.vue';
    import Footer from '../components/Footer.vue';
    
    </script>

In vue.js, I can create a layout for the app like that, by creating a template for different vue files like Home page, Kenapa page etc.

But in Inertia Js, this is the app.js file

import './bootstrap';
import '../css/app.css';

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

What should I do to achieve that ?

`resolve: (name) => resolvePageComponent('./Pages/${name}.vue',` is already handling the routing of your pages. I think you should just create your individual .vue page files in the `./Pages/` directory and that's all. if you need the navbar on the pages, you can import it on the individual pages. — Joshua Opata, Jan 29 '23 at 00:09
@JoshuaOpata so I just need to create the .vue files or do I need to call them somewhere? — , Jan 29 '23 at 06:35

score 1 · Answer 1 · answered Jan 30 '23 at 12:59

You must use a persistent layout for that.

Layout.vue

<template>
   <div>
      <Navbar />
      <slot /> <!-- Don't forget this -->
      <Footer />
   </div>
</template>
    
<script setup lang="ts">
import Navbar from '../components/Navbar.vue';
import Footer from '../components/Footer.vue';    
</script>

MyPage.vue

<script>
import Layout from './Layout'

export default {
  layout: Layout,
}
</script>

<script setup>
defineProps({ user: Object })
</script>

<template>
  <H1>My Page</H1>
  <p>Hello {{ user.name }}, welcome to my page!</p>
</template>

Creating a layout file in Laravel, Vue, Inertia Js

1 Answers1