書くこと

Laravelのプロジェクト作成
UIにVueを使えるようにする
Vueのサンプルコンポーネントを表示してみる

本題

プロジェクト作成

コマンドでプロジェクト作成。
PROJECT_NAMEのプロジェクトフォルダが作成される。

composer create-project laravel/laravel PROJECT_NAME

作成したら移動しておく。
移動を忘れると後から行うパッケージインストールがプロジェクトの外にされるので注意。

cd PROJECT_NAME

Laravelを実行するのは下記のコマンド

php artisan serve

成功すると「Laravel development server started: http://127.0.0.1:8000 」と出てくる。
http://127.0.0.1:8000 にアクセスしてLaravelのウェルカムページが出てくればOK。
（localhost:8000でもいい）

Vueのインストールと有効化

パッケージをインストールして、UIにVueを使うように設定。

composer require laravel/ui
php artisan ui vue --auth

2個目のコマンドを実行した時点で、resources/js/componentsにExampleComponentというサンプルのVueコンポーネントが作成される。

実行後、「Please run "npm install && npm run dev" to compile your fresh scaffolding.（npm installとnpm run devも実行してね）」
と言われるので実行。

npm install
npm run dev

Vueに必要なモジュールのインストールとビルドをしていると思う。
Vueコンポーネントのコードを変更するたびにnpm run devを実行する必要がある。

コンポーネント登録を自動化

デフォルトだと、新しくVueコンポーネントを作成したらresources/js/app.jsにコンポーネントを登録する必要がある。
app.jsを開いて見てみると、先ほどのコマンドで作成されたExampleComponentがすでに登録されている。

app.js

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

が、その上に

app.js

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

という記述があり、コメントアウトされている2行のコードを有効にすれば自動でコンポーネントが登録されるようになる。

これでもともと書かれていたExampleComponentの登録も行われるため、ExampleComponentの登録処理は念のためコメントアウトしておく。

app.js

// コメントアウトを外す
const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

// 一応コメントアウトしておく
// Vue.component('example-component', require('./components/ExampleComponent.vue').default);

ExampleComponentを表示してみる

resources/views/layouts/app.blade.phpを開く。
このファイルはUI設定のコマンドで自動生成される。
ここまでの段階で既に作成されているはず。

idにappが設定されているdiv要素がある。
ExampleComponentを表示するよう書き加えてみる。

app.blade.php

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    省略
</head>
<body>
    <div id="app">

        <!-- 追加 -->
        <example-component></example-component>

        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
           省略 
        </nav>

        <main class="py-4">
            @yield('content')
        </main>
    </div>
</body>
</html>

この状態で http://127.0.0.1:8000 にアクセスするとExampleComponentの内容が表示されるようになる。