Laravel - Fresh VueJS and Inertia app giving error: Do not mount Vue to <html> or <body> - mount to normal elements instead

Question

I have just done a fresh install of inertia on an app with vuejs (v2) and am getting this error:

[Vue warn]: Do not mount Vue to <html> or <body> - mount to normal elements instead.

But I don't see why it's trying to mount on those elements? As far as I can tell I've followed the inertia installation guide....

web.php

Route::get('test', function(){return \Inertia\Inertia::render('master');});

app-ihf.js

import { App, plugin } from '@inertiajs/inertia-vue'
import Vue from 'vue'
import { InertiaProgress } from '@inertiajs/progress'

Vue.use(plugin)

const el = document.getElementById('app')

new Vue({
    render: h => h(App, {
        props: {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: name => require(`./Pages/${name}`).default,
        },
    }),
}).$mount(el)

InertiaProgress.init()

master.blade.php

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="/css/app-ihf.css">
    <script src="{{ mix('/js/app-ihf.js') }}"></script>
</head>
<body>
    @inertia
</body>
</html>

Can anyone see what's going wrong here? This is the html when you visit that route

<html><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="/css/app-ihf.css?id=fc17ae1fae0b57440a59">
    <script src="/js/app-ihf.js?id=fa7eba2a2c660c498a3e"></script>
</head>
<body>
    <div id="app" data-page="{&quot;component&quot;:&quot;master&quot;,&quot;props&quot;:{&quot;errors&quot;:{}},&quot;url&quot;:&quot;\/test&quot;,&quot;version&quot;:&quot;3993c0d73e25e92aa0e15607a6c438ef&quot;}"></div>


</body></html>

Can you also share your Inertia middleware config?

Sidney Gijzen
– Sidney Gijzen

2021-04-24 14:53:29 +00:00
Commented Apr 24, 2021 at 14:53 — Sidney Gijzen
– Sidney Gijzen, Commented Apr 24, 2021 at 14:53

devartnz · Accepted Answer · 2021-04-25 22:53:44Z

1

I had the exact same issue and it's because I didn't put defer into the script tag so the JavaScript in app.js was running before the id="app" element existed on the page.

So in your case you need:

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

answered Apr 25, 2021 at 22:53

devartnz

261 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Laravel - Fresh VueJS and Inertia app giving error: Do not mount Vue to <html> or <body> - mount to normal elements instead

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related