Zenn
🦍

【Laravel】InertiaでVue Devtoolsが使えない時の対処法

2024/09/29に公開
Laravel
Vue.js
inertia
tech

LaravelでInertiaを使って開発していると、Vue Devtoolsが使えなくなりました。
解決するための方法をネットで探し、いろいろ試してみたのですが、なかなか解決ができず結構時間がかかってしまいました。
日本語で探しても解決できなかったので、英語の記事で最終的に解決することができました。

同じトラブルに遭遇した人のために、記事を残しておこうと思います。
※Inertiaを使っている人が少ないのか、トラブル解決系の日本語記事があまり見つからないので...

解決策

僕の場合はvite.config.jsonに下記のコードを加えることで解決しました。

vite.config.js
define: {
    __VUE_PROD_DEVTOOLS__: mode !== 'production',
}

また、modeを使えるようにするために、引数にmodeを指定する必要があり、最終的なコードは以下のようになりました。

vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig(({ mode }) => ({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    // モードによって Devtools の有効化を設定
    define: {
        __VUE_PROD_DEVTOOLS__: mode !== 'production',
    },
}));

解決するまでに試した方法

1. Vue.config.devtools = trueを使う

Inertiaではなく、純粋なVue.jsを使っている場合の解決策の記事はいくつかあり、以下のコードをjsファイルの先頭に入れると解決することが多いようです。

Vue.config.devtools = true

しかし、僕の場合はこれでは解決しませんでした。

2. 開発環境になっているか確認する

viteを起動するときにnpm run productionを使っている場合などはVue Devtoolsが使えないようです。
僕の場合はコマンドだけでなく、現在の実行環境をconsoleに出力してみたりもしましたが、実行環境はdevelopmentとなっており、これは原因ではありませんでした。

3. Vue Devtoolsの環境設定を確認する

以下の2箇所の設定を変更することで、解決できるという記事も多くありましたが、僕の場合は設定しても解決しませんでした。
ただ、この設定はVue Devtoolsを入れたら最初にするべき設定だと思います。

参考記事

解決策を見つけた記事のリンクを貼っておきます。
英語ですが、他の解決策についても書かれているので勉強になります。
https://stackoverflow.com/questions/43781351/vue-js-is-detected-on-this-page-devtools-inspection-is-not-available-because-it

Discussion