Vue components in Inertia with Laravel seems to load twice

Question

With a newly created Laravel with Inertia and Vue project, I have an error that it runs code inside my vue components twice.

For a simple test demo, I have a Test.vue , with this code

<template>
<div>
    TEST
</div>
</template>

<script>
export default {
    name: "Test",
    mounted() {
        console.log('test')
    }
}
</script>

<style scoped>

</style>

Route in web.php:

Route::get('/test', array(App\Http\Controllers\DashboardController::class, 'test'));

In controller:

    public function test(): Response
    {
        return Inertia::render('Test');
    }

When I go to the route /test, it echoes out 'test' twice on mounted in my console. In more advanced components which calls APIs and such, also calls them twice.

I suspect maybe my project is set up wrongly, in app.blade.php or app.js but cannot figure it out.

I followed the guides on https://inertiajs.com/server-side-setup and https://inertiajs.com/client-side-setup to set this up.

My source code is here: https://github.com/ekstremedia/laravel-inertia

Edit: It seems to only echo out twice in the first component I load. If I in that component link to another component, and go there, it doesn't load that twice.

Answer 1

I found that this is solved by modifying your app.js file in your resources directory thus:

 import Vue from 'vue' import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue' Vue.use(InertiaPlugin) new Vue({ render: (h) => h(InertiaApp, { props: { initialPage: JSON.parse(app.dataset.page), resolveComponent: (name) => require(`./Pages/${name}`).default, }, }), }).$mount(app);

Your problem seems to have been in how you initialized your inertia app.