Laravel 7.x, 8.x で Vue.js を使う方法

Ⅰ. はじめに

タイトルの通り「Laravel 7.x, 8.x で Vue.js を使う方法」です。
LaravelにデフォルトでインストールされているLaravel Mixを利用する事でVue.jsの利用が簡単に出来ます。

Ⅱ. やり方

1. Laravel をベースにしてプロジェクトを作成する

composer create-project laravel/laravel project-name --prefer-dist

2. Vue.js を使う

composer require laravel/ui
php artisan ui vue

3. パッケージをインストールする

npm install

4. Webpackを実行する

ファイル変更を監視させ、アセットを自動的に再コンパイルさせます

npm run watch

5. welcome.blade.php を編集する

project-name/resources/views/welcome.blade.php を以下の通り編集します

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel</title>
  </head>
  <body>
    <div id="app">
      <div class="container">
        <example-component></example-component>
      </div>
    </div>

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

6. Webサーバを起動する

cd project-name/public
php -S 0.0.0.0:8000

実行結果

f:id:kagasu:20180505180051p:plain

その他

.vue ファイルの場所

project-name/resources/assets/js/components/

Vue.js用のESLint環境を用意する方法

https://kagasu.hatenablog.com/entry/2018/05/19/201521

参考

https://readouble.com/laravel/6.x/ja/frontend.html

備忘録

備忘録