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>

Carlos Salles · Accepted Answer · 2024-05-02 12:39:41Z

22

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.

edited May 2, 2024 at 12:39

answered Mar 1, 2021 at 22:04

Carlos Salles

5144 silver badges6 bronze badges

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

6 Comments

Stephan-v Over a year ago

So Vue 3 needs the beta version because the original extension only goes up to v2?

Carlos Salles Over a year ago

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 Over a year ago

I think it is, here is the place that i found it: devtools.vuejs.org/guide/installation.html#beta

Steve Grunwell Over a year ago

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.

FredTheWebGuy Over a year ago

The link no longer works, 404 error.

|

Ashler2 · Accepted Answer · 2021-02-28 18:05:24Z

1

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.

answered Feb 28, 2021 at 18:05

Ashler2

1592 silver badges11 bronze badges

Collectives™ on Stack Overflow

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

App.js

wepack.mix.js

app.blade.php

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

App.js

wepack.mix.js

app.blade.php

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related