Persistent layouts not working with basic Laravel Jetstream Inertia #800

RorzGonzalez · 2021-07-10T16:02:29Z

RorzGonzalez
Jul 10, 2021

Hey all,

Really struggling here.

Started learning PHP, Laravel around Nov 2020. Past few weeks Inertia & Vue. I am still very much a newbie.

I cannot get persistent layouts to work after a good few hours of trying.

I am using Laravel 8, Jetstream 2 w/Inertia and Vue3

Any help would be greatly appreciated.

Main @Pages/App.vue

<template>
    <div>

        <Head />

        <Banner />

        <div
            class="flex flex-col justify-between h-screen font-sans transition duration-500 ease-in-out bg-bg-primary"
            :class="theme"
        >

            <AppHeader />

            <main class="flex flex-grow transition duration-500 ease-in-out text-copy-primary bg-bg-primary">
                <slot />
            </main>

            <AppFooter />

        </div>
    </div>
</template>

<script>
import AppHeader from "@/Includes/Header.vue";
import AppFooter from "@/Includes/Footer.vue";
import Banner from "@/Shared/Banner";
import Head from "@/Shared/Head";

export default {

    created() {
        this.$page.props.theme = localStorage.getItem("theme") || "light-theme";
    },

    computed: {
        theme() {
            return this.$page.props.theme;
        },
    },

    components: {
        AppHeader,
        AppFooter,
        Banner,
        Head,
    },

};
</script>

My Layout @Layouts/AppLayout.vue

<template>
    <main>
        <!-- Page Sidebar -->
        <Sidebar v-if="$slots.sidebar">
            <slot />
        </Sidebar>

        <!-- Page Content -->
        <div class="flex-grow">
            <slot />
        </div>
    </main>
</template>

<script>
import App from "@/Pages/App";
import Sidebar from "@/Shared/Sidebar";

export default {
    
    layout: App,

    components: {
        Sidebar,
    },

    data() {
        return {
            showingNavigationDropdown: false,
        };
    },

    methods: {
        logout() {
            this.$inertia.post(route("logout"));
        },
    },
};
</script>

app.js

require("./bootstrap");

// Import modules...
import { createApp, h } from "vue";
import { App as InertiaApp, plugin as InertiaPlugin } from "@inertiajs/inertia-vue3";
import { InertiaProgress } from "@inertiajs/progress";

const el = document.getElementById("app");

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({ methods: { route } })
    .use(InertiaPlugin)
    .mount(el);

InertiaProgress.init({ color: "#4B5563" });

The inertia documentation isn't up to date with what is installed using Laravel 8 so Kinda makes it much harder for newbie's to utilise... but I appreciate it's a lot to keep up with.

Thanks ;)

ajnsn · 2021-07-16T06:51:23Z

ajnsn
Jul 16, 2021

@CamdenGonzalez You need to import your layout component within the Pages/App.vue and put it there aslayout: AppLayout. Also remove the layout: App from your Page/AppLayout.vue.

See documentation over here.

1 reply

RorzGonzalez Jul 16, 2021
Author

Thank you for taking the time to reply!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Persistent layouts not working with basic Laravel Jetstream Inertia #800

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

Persistent layouts not working with basic Laravel Jetstream Inertia #800

RorzGonzalez Jul 10, 2021

Main @Pages/App.vue

My Layout @Layouts/AppLayout.vue

app.js

Replies: 1 comment · 1 reply

ajnsn Jul 16, 2021

RorzGonzalez Jul 16, 2021 Author

RorzGonzalez
Jul 10, 2021

Replies: 1 comment 1 reply

ajnsn
Jul 16, 2021

RorzGonzalez Jul 16, 2021
Author