実行環境

PHP 7.4
Laravel 6.2
Vue.js 2.5

ゴール

Laravelのアプリ内でvue.jsを使えるようにする

手順

laravel/uiパッケージをインストール
vue.jsのファイル生成
依存パッケージのインストール
js/sassファイルのコンパイル実行
コンポーネントの記述

１）laravel/uiパッケージをインストール

composer require laravel/ui:^1.0 --dev

２）vue.jsのファイル生成

php artisan ui vue

この時、ルート直下の「package.json」の中身を確認し、 vueが表記されているか確認します。下記のようになっていれば、問題ないかと思います。

package.json

{
    "devDependencies": {
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    }
}

３）依存パッケージのインストール

npm install

4）js/sassファイルのコンパイル実行

npm run dev

コンパイルの際、cross-env周りのエラーが出た方は、下記の記事を参考にしてみてください。

解決策①：パスの変更
laravelでnpm run devを実行すると「cross-env: not found」というエラーが出る件対応したった

解決策②：mode_modulesディレクトリ以下を削除し、npmインストールからやり直す
npmキャッシュ削除とインストール済みを削除して再インストール

ちなみに、ルート直下にある「webpack.mix.js」はコンパイル時に要となるファイルです。下記のように、コンパイル後のファイルの行き先が記載されています。

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

resources/js/app.jsはコンパイルされpublic/jsディレクトリに、resources/sass/app.scssはコンパイルされpublic/cssディレクトリに出力されるよう設定されています。詳しくは、下記サイトをご覧ください。

Laravel 6.x JavaScriptとCSSスカフォールド「CSSの出力」

ここまで行えば、すでにコンポーネントが登録されているかと思います。

resources/js/app.js

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

componentsディレクトリ以下にあるExampleComponentのVueファイルを割り当てしています。ちなみに呼び出すExampleComponent.vueファイルの初期値はこんな感じですね。

resources/js/components/ExampleComponent.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

5）コンポーネントの記述

あとは、呼び出し先で、コンポーネントの記述をするだけです。
今回は、welcomeページに表示してみます。下記の記述で表示できます。

<example-component></example-component>

welcomeページに埋め込むと...こんな感じ↓

resources/views/welcome.blade.php

<!DOCTYPE html>
    <head>

         （省略）

    </head>
    <body>

         （省略）

        <div id="app">
            <example-component></example-component>
        </div>

        <script src="{{mix('js/app.js')}}"></script>
    </body>
</html>

welcomeページにコンポーネントが表示されました！

今回の記事は以上になります
お役に立てたなら幸いです！！

【初心者向】Laravel 6系でVue.jsを使用する方法