Inertia

Level 63

Can you share the code that initializes the inertia app ?

1 like

Level 3

@vincent15000 yep.

This is inside my HandleInertiaRequests

  public function rootView(Request $request)
    {
        return 'app/layouts/parent';
    }

this is my webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .postCss('resources/css/app.css', 'public/css', [
    ]);

this is my app.js

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./app/*.vue', { eager: true })
    return pages[`./app/${name}.vue`]
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

this is my main layout called parent.blade.php and it's located in resources/views/app/layouts/parent.blade.php

<!DOCTYPE html>
<html lang="en" class="js"> 
<head> 
    <meta charset="utf-8">  
    <meta name="author" content="">
    <meta name="description" content=""> 
     
    <title>{{ $title }} | Test</title> 

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="{{ URL::asset('build/css/1.main.css') }}" rel="stylesheet">
    <link href="{{ URL::asset('build/css/main.css') }}" rel="stylesheet">
    <link href="{{ URL::asset('custom/styles.css') }}" rel="stylesheet">

    <link rel="shortcut icon" href="{{ URL::asset('build/images/maven.png') }}" type="image/x-icon">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">

    @inertiaHead 
</head> 
<body class="nk-body npc-invest bg-lighter">
    <script src="https://cdn.socket.io/4.5.0/socket.io.min.js" integrity="sha384-7EyYLQZgWBi67fBtVxw60/OWl1kjsfrPFcaU0pp0nAh+i8FD068QogUvg85Ewy1k" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/@popperjs/core@2"></script>
    <script src="https://unpkg.com/tippy.js@6"></script>
    
    
    @if(!isset($full))
        @include('app.components.header.main') 
    @endif

    @inertia
    

    @include('app.components.footer') 

  
    @include('app.components.notifications')
</body> 
</html>

1 like

vincent15000

Level 63

@Kris01 I already had the same problem as your one. I have solved it with this code instead of the original one to create the Inertia app.

I use the resolvePageComponent() method.

import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

...

createInertiaApp({
  resolve: (name) => {
    const page = resolvePageComponent(
      `./Pages/${name}.vue`,
      import.meta.glob("./Pages/**/*.vue")
    );

    page.then((module) => {
      if (name.startsWith('Guest/')) {
        module.default.layout = module.default.layout || GuestLayout
      }
      if (name.startsWith('User/')) {
        module.default.layout = module.default.layout || UserLayout
      }
    });

    return page;
  }
});

1 like

Level 104

Where is (i) the compiled app.js asset loaded into the View, and (ii) the @inertia directive?

2 likes

Level 3

@tykus the @inertia directive you can see in the main layout inside the body, I added

    <script src="{{ asset(mix('js/app.js')) }}" defer></script>

and now I get error 500

1 like

Level 3

This page isn’t working
127.0.0.1 is currently unable to handle this request.
HTTP ERROR 500

1 like

Level 104

@Kris01 I see it now that you changed the snippet, yes. The js build should be included with

<script src="{{ mix('js/app.js') }}" defer></script>

Are you always using this particular layout with Inertia Responses; or do you have non-Inertia pages as well?

2 likes

Level 3

@tykus my whole website is built with blade, now i'm trying to switch. So basically everything is non-intertia, besides one page

1 like

Level 3

@tykus this is my web.php

Route::get('/', function () {
        return \Redirect::to('/app/landing');
        return Inertia::render('test');
        // return view('landing.pages.home.index');
    })->name('homepage');

and I have test.vue inside resouerces/js/app/test.vue

<template>
    <h1>Welcome Here</h1>
</template>

<script setup>

</script>

<style>

</style>

1 like

Level 104

@Kris01 this URL???

return \Redirect::to('/app/landing');

2 likes

Level 3

@tykus basically when someone goes to / I redirect him to /app/landing which is the homepage

1 like

Level 104

@Kris01 okay? And, app/landing URL is handled how exactly???

2 likes

Level 3

@tykus

return Inertia::render('test');

1 like

Level 3

@tykus why would I get

unable to handle request
this page isn't working

maybe something inside the app.js ?

1 like

Level 104

@Kris01 Is this an Laravel application error page; or something server-related?

1 like

Level 3

@tykus it is server related