Laravel + Vue.jsのかんたん実装

laravel上でVuejsを実装は、大まかに３段階です。

1. resources/js/components にvueデータを作成。
2. resources/js/app.jsにvueコンポーネントを定義。
3. app.jsに定義したvueコンポーネントを resources/views/*.blade.phpにマークアップ。

<img width="412" alt="スクリーンショット 2020-05-31 23.45.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636249/37539014-a06c-a809-371b-20cab7b1eacb.png">

ExampleComponent.vueを表示してみましょう！
app.jsを以下のように設定します。

```resources/js/app.js

require('./bootstrap');

window.Vue = require('vue');

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

const app = new Vue({
    el: '#app',
});

```

デフォルトのwelcome.blade.phpに記述します。

```html 
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>ExampleComponent</title>
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    </head>
    <body>
        <div id="app">
            <example-component></example-component>
        </div>
        <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>
```

vueファイルを記述、変更したらターミナルでコンパイルをします。

```terminal
#コンパイル
npm run dev
#サーバーを立ち上げて確認
php artisan serve
```
表示されました！
<img width="942" alt="スクリーンショット 2020-06-01 0.08.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636249/d49a6547-c713-a4ec-4b8d-07ec4afb0364.png">



新しくVueを作成してみましょう。
1. vueファイルを作成します。
<img width="360" alt="スクリーンショット 2020-06-01 0.12.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636249/62b62895-285a-773a-8a92-2891c92c3e48.png">

```resources/js/components/LaravelVue.vue
<template>
  <div>
    <h1>LaravelでVueを実装</h1>
    <p>Good!!</p>
  </div>
</template>
```
2. resources/js/app.jsにvueコンポーネントを定義します。

```resources/js/app.js
require('./bootstrap');

window.Vue = require('vue');

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

const app = new Vue({
    el: '#app',
});
```

3. app.jsに定義したvueコンポーネントを resources/views/welcome.blade.phpにマークアップ。

```html

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>laravelvue</title>
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    </head>
    <body>
        <div id="app">
            <laravelvue></laravelvue>
        </div>
        <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>
```

コンパイルのたびに<code>npm run dev</code>するのは、面倒くさいので
vueファイルの記述が変更されるたびに自動でコンパイルしてくれる<code>npm run watch</code>
を実行します。

```terminal
#コンパイル
npm run watch
```
<code>command + T</code>で新しくタブを作ってサーバーを立ち上げます。

```terminal
#サーバーを立ち上げて確認
php artisan serve
```

表示されました！
<img width="364" alt="スクリーンショット 2020-06-01 0.19.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636249/6df00f1b-c6c3-b9ee-b0ee-67019527e98f.png">


もう一度vueファイルの記述を変更してみましょう。

```resources/js/components/LaravelVue.vue
<template>
  <div>
    <h1>LaravelでVueを実装できた！！</h1>
    <p>Yeah!!</p>
  </div>
</template>
```

<code>npm run watch</code>で監視されているので、vueファイルの記述に変更があると自動的にコンパイルをしてくれます。
ブラウザを更新してみましょう！
<img width="535" alt="スクリーンショット 2020-06-01 0.32.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636249/16723877-aaa2-c1ad-dcc9-90412bfda15d.png">
更新されています。

かんたんでは、ありますが少しでも参考になれば幸いです。