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


今回の記事は下記の方におすすめです！

:::note info
Laravelの基礎はとりあえず通した
Vue.jsの基礎はとりあえず通した
でもLaravelでvue.jsを使う方法がわからない
:::

私自身、今まで実務レベルでWEBアプリを作成したことが少なく、困ったので共有します。。

今回の記事が参考になれば幸いです:relaxed:
なお、間違いやご指摘ありましたら、コメント下さると幸いです。

---

# 実行環境
- PHP 7.4
- Laravel 6.2
- Vue.js 2.5

# ゴール
- Laravelのアプリ内でvue.jsを使えるようにする


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



## １）laravel/uiパッケージをインストール
```
composer require laravel/ui:^1.0 --dev
```

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

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

```json:package.json
{
    "devDependencies": {
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    }
}
```


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

```
npm install
```

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

```
npm run dev
```

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

解決策①：パスの変更
[laravelでnpm run devを実行すると「cross-env: not found」というエラーが出る件対応したった
](https://qiita.com/Yorinton/items/fd9dae33c6748abcdfbc)
解決策②：mode_modulesディレクトリ以下を削除し、npmインストールからやり直す
[npmキャッシュ削除とインストール済みを削除して再インストール](https://ticklecode.com/npmcachedelete/)

---

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

```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の出力」](https://readouble.com/laravel/6.x/ja/frontend.html?header=Vue%25E3%2582%25B3%25E3%2583%25B3%25E3%2583%259D%25E3%2583%25BC%25E3%2583%258D%25E3%2583%25B3%25E3%2583%2588%25E3%2581%25AE%25E5%2587%25BA%25E5%258A%259B)

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


```js:resources/js/app.js
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
```
componentsディレクトリ以下にあるExampleComponentのVueファイルを割り当てしています。ちなみに呼び出すExampleComponent.vueファイルの初期値はこんな感じですね。

```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ページに埋め込むと...こんな感じ↓

```php: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ページ](http://localhost/)にコンポーネントが表示されました！

![Laravel-vuejs-component_2021-09-08 16.23.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1954103/6eb30d95-33bf-b302-15fe-54350b27dc96.png)

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