Laravel 8 - Jetstream + inertia.js - Vue dev tools not working

Question

I have a project using Laravel 8, inertia js, Vue.js and webpack. The VueJs chrome dev tools aren't working for this project. It keeps showing as not detected, i've tried restarting it, removing and readding the dev tools. I've checked in both dev and production, no vuejs detected. Any help would be great.

App.js

require("./bootstrap");

// Import modules...
import { createApp, h } from "vue";
import {
    App as InertiaApp,
    plugin as InertiaPlugin,
} from "@inertiajs/inertia-vue3";

const el = document.getElementById("app");

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({ methods: { route } })
    .use(InertiaPlugin)
    .mount(el);

wepack.mix.js

const mix = require("laravel-mix");

mix.js("resources/js/app.js", "public/js")
    .vue()
    .postCss("resources/css/app.css", "public/css", [
        require("postcss-import"),
        require("tailwindcss"),
        require("autoprefixer"),
    ])
    .webpackConfig(require("./webpack.config"));

if (mix.inProduction()) {
    mix.version();
} else {
    mix.sourceMaps(false, "source-map");
}

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">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ 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
    </body>
</html>

score 21 · Answer 1 · answered Mar 01 '21 at 22:04

21

i had the same problem in chrome and opera gx, the solution for me was:

Install Vue.js devtools beta;
Close and Reopen your Browser.

answered Mar 01 '21 at 22:04

Carlos Salles

474
2
6

1

So Vue 3 needs the beta version because the original extension only goes up to v2? – Stephan-v Apr 08 '21 at 22:00
When I gave my answer, I believe it was true. Now it’s better to test. However, I am not sure if the extension does not fully support vue3 at the time of my answer or is just a minor incompatibility. – Carlos Salles Apr 16 '21 at 13:52
is the beta version available for firefox ?? – Riaz Laskar Jun 15 '21 at 13:10
2

I think it is, here is the place that i found it: https://devtools.vuejs.org/guide/installation.html#beta – Carlos Salles Jun 16 '21 at 20:11
3

Can confirm this is necessary as of Aug 26, 2021 (Firefox 91.0.2, Vue 3.0.5, Vue devtools 5.3.4) — installing the beta (version 6.0.0.15) Carlos linked above did the trick. – Steve Grunwell Aug 26 '21 at 15:40
1

The link no longer works, 404 error. – FredTheWebGuy Jun 28 '23 at 02:15

score 1 · Accepted Answer · answered Feb 28 '21 at 18:05

In case anyone has the same issue, the chrome extenstion also needs the vuejs devtools dev version to work. But this encountered another issue. Vue not appearing in the dev/inspect tool. Removing a chrome theme and setting this to default brought this back.

Laravel 8 - Jetstream + inertia.js - Vue dev tools not working

App.js

wepack.mix.js

app.blade.php

2 Answers2