VueJS Inertia Not displaying!

I should mention I also got to the same point and had the same problem with reactJS. https://inertiajs.com/client-side-setup, https://www.youtube.com/watch?v=inBAncC__YI&list=PL3VM-unCzF8jeu0m8pSz6-Q9TwV74AbvW&index=3&ab_channel=Laracasts.

Help, I am going insane.

Something I am not able to do what I keep seeing on the tutorials is most are using mix.

<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return inertia('Welcome');
});

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

createInertiaApp({
    resolve: name => require(`./Pages/${name}`),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .mount(el)
    },
})

<template>
    <h1>Hello world!</h1>
</template>

<script>
    export default {};
</script>

martinbean

3 years ago

Level 80

@randy_johnson So what’s the issue? If the “Hello, world!” isn’t displaying in the browser then open your browser’s developer console and see if there are any JavaScript errors. Otherwise, no one can help with “doesn’t work”.

2 likes

thinkverse

3 years ago

Level 15

Have you created your root view?

<!-- resources/views/app.blade.php -->
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

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

        @vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
        @inertiaHead
    </head>
    <body class="font-sans antialiased">
        @inertia
    </body>
</html>

1 like

Randy_Johnson

3 years ago

Level 8

@thinkverse Progress, makes sense, I am using vite and its saying mix. But now I have a new error, [plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files. and when I do what it says and now the vite file looks like this.

npm i @vitejs/plugin-vue

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue()
    ],
});

Now I am not sure which one I am supposed to be clicking on, but I am guessing it is http://127.0.0.1:8000/ from the php artisan server.

The error message presented to me is:

Uncaught (in promise) ReferenceError: require is not defined
    resolve app.js:5
    h2 createInertiaApp.js:8
    node_modules @inertiajs_inertia-vue3.js:9780
    <anonymous> app.js:4
app.js:5:22

Update: In the browser on inspect I get this error. Reference Error: require is not defined

createInertiaApp({
    resolve: name => require(`./Pages/${name}`),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .mount(el)
    },
})

Randy_Johnson

3 years ago

Best Answer

Level 8

Fixed it

createInertiaApp({
    resolve: (name) => import(`./Pages/${name}.vue`),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .mount(el)
    },
})

Thanks to everyone here! Couldn't of done it with out you!

Please or to participate in this conversation.