Undefined variable $page

After upgrading my project from Laravel 8 to Laravel 10, I found out that Mix is getting replaced with Vite. And I also want to implement Vue + Inertia in my project. So I followed the upgrade procedure and guides to make it all integrated, but now I get the error Undefined variable $page.

Here is my vite.config.js

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

export default defineConfig({
    plugins: [
        laravel({
            hotFile: 'storage/vite.hot', // Customize the "hot" file...
            buildDirectory: 'assets/vite', // Customize the build directory...
            input: ['resources/js/app.js'], // Specify the entry points...
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    build: { 
        outDir: 'public/assets/vite', 
        emptyOutDir: true 
    },
    resolve: {
        alias: {
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap')
        }
    }
});

And this is the template file

<!DOCTYPE html>
<html lang="en">
    <head>
        @include('layouts.shared/head')
    </head>
    <body class="loading" data-layout="topnav" data-layout-config='{"layoutBoxed":false,"darkMode":false,"showRightSidebarOnStart": false}' >
        @inertia
        <!-- Begin page -->
        <div id="app" class="wrapper">

            <div class="content-page">
                <div class="content">
                    
                    @include('layouts.shared/horizontal-nav')
                   
                    @yield('content')
                </div>
                @include('layouts.shared/footer')
            </div>
        @include('layouts.shared/right-sidebar')
        @include('layouts.shared/footer-script')
    </body>
</html>

And here is the header file where I initiate Inertia

<meta charset="utf-8" />
<title>{{ $page_title }} | {{ config('app.name', 'Laravel') }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="{{ config('app.name', 'Laravel') }} Phone System Portal" name="description" />
<meta content="{{ config('app.name', 'Laravel') }}" name="{{ config('app.name', 'Laravel') }}" />
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta http-equiv="refresh" content="{{ config('session.lifetime') * 60 }}">

<!-- App favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="/storage/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/storage/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/storage/favicon-16x16.png">
<link rel="manifest" href="/storage/site.webmanifest">
<link rel="mask-icon" href="/storage/safari-pinned-tab.svg" color="#f08439">
<link rel="shortcut icon" href="/storage/favicon.ico">
<meta name="msapplication-TileColor" content="#00aba9">
<meta name="msapplication-config" content="/storage/browserconfig.xml">
<meta name="theme-color" content="#ffffff">

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

@inertiaHead

@yield('css')
<link href="{{asset('assets/css/icons.min.css')}}" rel="stylesheet" type="text/css" />

<link href="{{asset('assets/libs/admin-resources/admin-resources.min.css')}}" rel="stylesheet" type="text/css">

<link href="{{asset('assets/css/app-modern.min.css')}}" rel="stylesheet" type="text/css" id="light-style" />
<link href="{{asset('assets/css/app-modern-dark.min.css')}}" rel="stylesheet" type="text/css" id="dark-style" />
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

<style>
.modal-open {
    padding-right: 0px!important;
    padding-left: 0px!important;
}
</style>

Laravel is throwing the error on the following line

@inertiaHead

Please let me know what I'm doing wrong or missing. I tried googling and didn't find any answers. I'm happy to provide any other files to help with troubleshooting.

laravel_developer

2 years ago

Best Answer

Level 1

After more searching, I found this post. https://laracasts.com/discuss/channels/inertia/incremental-implementation-of-inertiavue

And the solution was to split the templates between Inertia templates and Laravel blade templates. @martinbean proposed this solution.

<!-- resources/views/layout.blade.php -->
<!DOCTYPE html>
<html>
    <head>
        <!-- meta, title, etc. -->
        @stack('head.end')
    </head>
    <body>
        @yield('content')
    </body>
</html>

<!-- resources/views/layout-inertia.blade.php -->
@extends('layout')

@push('head.end')
    @inertiaHead
@endpush

@section('content')
    @inertia
@endsection

Please or to participate in this conversation.