備忘録

備忘録

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

Ⅰ. はじめに

タイトルの通り「Laravel 7.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