Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Dec 19, 2021

13

OP

Level 8

showing only @routes in fresh Inertia app

Has anyone experienced this error before in a fresh Inertia app?

What I did was (in order):

Install a fresh Laravel app (8.x)
Install Laravel Breeze
- php artisan breeze:install vue - Breeze with Inertia
Install Inertia for Laravel
- composer require inertiajs/inertia-laravel
Run npm install and npm run dev, I also run npm run watch

But after visiting my app's index page, it only shows me @routes as seen in the image below: https://ibb.co/N2hQjT8

My .env config I am using a virtual host, (note: I also tried php artisan serve but it's the same result)

APP_URL=http://vilt.test

My app.js

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';

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

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

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

My package.json

"devDependencies": {
    "@inertiajs/inertia": "^0.10.0",
    "@inertiajs/inertia-vue3": "^0.5.1",
    "@inertiajs/progress": "^0.2.6",
    "@tailwindcss/forms": "^0.4.0",
    "@vue/compiler-sfc": "^3.0.5",
    "autoprefixer": "^10.4.0",
    "axios": "^0.21",
    "laravel-mix": "^6.0.6",
    "lodash": "^4.17.19",
    "postcss": "^8.4.5",
    "postcss-import": "^14.0.1",
    "tailwindcss": "^3.0.7",
    "vue": "^3.0.5",
    "vue-loader": "^16.1.2"
}

My composer.json

"require": {
    "php": "^8.0",
    "inertiajs/inertia-laravel": "^0.4.5",
    "laravel/framework": "^8.76|^8.0",
},
"require-dev": {
    "barryvdh/laravel-debugbar": "^3.6",
    "barryvdh/laravel-ide-helper": "^2.10",
    "laravel/breeze": "^1.6",
    "laravel/sail": "^1.0.1",
},

My app.blade.php this is the default

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title inertia>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

        <!-- Styles -->
        <link rel="stylesheet" href="{{ mix('css/app.css') }}">

        <!-- Scripts -->
        @routes
        <script src="{{ mix('js/app.js') }}" defer></script>
    </head>
    <body class="font-sans antialiased">
        @inertia

        @env ('local')
            <script src="http://localhost:8080/js/bundle.js"></script>
        @endenv
    </body>
</html>

For reference, this article is the same problem with me, unfortunately it has no answers https://laravelquestions.com/2021/10/15/empty-page-showing-only-routes-text-comes-out-when-using-laravel8-inertia-vue-js-together/

OS: Windows 10

Laravel version: 8.x

PHP version: 8.x

Level 102

Can you show your app.js file?

1 like

OP

Level 8

@Sinnbeck Sure, I've attached it to the question.

Level 102

Can you check if you have ziggy in your composer.json? That is the @routes part

1 like

OP

Level 8

@Sinnbeck I don't have ziggy installed, I'll install it now and see what happens.

Best Answer

Level 102

@benjamin1509 ok. I just tested and I had it installed automatically when I ran php artisan breeze:install vue

1 like

OP

Level 8

@Sinnbeck here's my updated composer.json

"tightenco/ziggy": "^1.4",

I do run again, npm install and npm run dev

I got the same error

app.js:21425 Uncaught (in promise) ReferenceError: route is not defined
    at setup (app.js:21425)
    at app.js:10
```

OP

Level 8

@Sinnbeck strange, I also ran that command and it did not install on mine

OP

Level 8

@Sinnbeck I ran php artisan breeze:install vue, npm install, npm run dev, and now it loads the page it seems that it's been fix. In my console is it normal to have this? GET http://localhost:8080/js/bundle.js net::ERR_CONNECTION_REFUSED I'm confused about that bundle.js

Thank you @sinnbeck

Level 102

@benjamin1509 great. The last part is live reload I think. If you set it up in your mix config file, your page will reload on changes. You can just remove it for now

1 like

OP

Level 8

@Sinnbeck Thank you for your great guidance, I appreciate you and everyone here helping us everyday.

Level 102

@benjamin1509 always happy to help

1 like

Level 102

Found the guide for live reload if you want to try it out

https://laravel-mix.com/docs/6.0/livereload

1 like

OP

Level 8

@Sinnbeck wow! thank you for looking for a guide about live reload, now I'll understand that bundle.js thing, will look into it!

Please or to participate in this conversation.