[laravel]laravel(v6)にvueを導入する(JS&CSSスカフォールド)

laravelスカフォールド？
使ってみる
動作確認

laravelスカフォールド？

公式をみてみるとlaravelのフロントエンドでbootstrap、vueやreactなどを導入するための仕組みのようです。
今回はこれを使って、vueを導入してみました。

laravelはvertion6で確認しています。

使ってみる

laravel/uiをインストール

laravel/uiを使うと、それぞれの機能を導入できるようになるようです。
composerでインストールします。

composer require laravel/ui:^1.0 --dev

インストールするとcomposer.lockに変更がかかって、入ったことが確認できます。

vueインストール

下記のコマンドでvueインストールします
コマンドを実行すると即座にファイルを作ってくれます。

php artisan ui vue

変更があるファイルが下記になります。

package.json
webpack.mix.js // フォーマットされただけ
resources/js/app.js // vueがrequireされて、サンプルのvueファイルがコンポーネント化定義されている
resources/js/bootstrap.js // jqueryとbootstrapがロードされてる？
resources/sass/app.scss // cssファイルインポート

下記のファイルが新規に作成されます。

resources/js/components/ExampleComponent.vue // サンプルのvueファイル
resources/sass/_variables.scss

package.jsonをみると下記が追加されてます。

     "devDependencies": {
         "axios": "^0.19",
+        "bootstrap": "^4.0.0",
         "cross-env": "^5.1",
+        "jquery": "^3.2",
         "laravel-mix": "^4.0.7",
         "lodash": "^4.17.13",
+        "popper.js": "^1.12",
         "resolve-url-loader": "^2.3.1",
-        "sass": "^1.15.2",
-        "sass-loader": "^7.1.0"
+        "sass": "^1.20.1",
+        "sass-loader": "^8.0.0",
+        "vue": "^2.5.17",
+        "vue-template-compiler": "^2.6.10"
     }

jqueryとかbootstrapも入ってますね🤯

npm installを実行する

package.jsonに追加されたライブラリをnpmコマンドでインストールします。

npm install

npm run devでビルドする

下記コマンドでビルドします。

npm run dev

下記ファイルが新規で作成されます。
このビルドしたファイルを読み込んで使います。

public/mix-manifest.json
public/css/app.css
public/js/app.js

ビルドエラーになったら

npm run devでビルドするときに下記のエラーになりました😓

ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'outputStyle'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (/var/www/html/poc-laravel6/node_modules/schema-utils/dist/validate.js:88:11)
    at Object.loader (/var/www/html/poc-laravel6/node_modules/sass-loader/dist/index.js:36:28)
    at runLoaders (/var/www/html/poc-laravel6/node_modules/webpack/lib/NormalModule.js:316:20)
    at /var/www/html/poc-laravel6/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /var/www/html/poc-laravel6/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at runSyncOrAsync (/var/www/html/poc-laravel6/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (/var/www/html/poc-laravel6/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at /var/www/html/poc-laravel6/node_modules/loader-runner/lib/LoaderRunner.js:205:4
    at process.nextTick (/var/www/html/poc-laravel6/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15)
    at process._tickCallback (internal/process/next_tick.js:61:11)
 @ ./resources/sass/app.scss

ERROR in ./resources/sass/app.scss (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./node_modules/resolve-url-loader??ref--5-4!./node_modules/sass-loader/dist/cjs.js??ref--5-5!./resources/sass/app.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'outputStyle'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (/var/www/html/poc-laravel6/node_modules/schema-utils/dist/validate.js:88:11)
    at Object.loader (/var/www/html/poc-laravel6/node_modules/sass-loader/dist/index.js:36:28)
 @ ./resources/sass/app.scss 2:14-253

下記コマンドでsass-loaderのバージョンを7にすると解決しました。

npm uninstall --save-dev sass-loader
npm install --save-dev sass-loader@7.1.0

こちらが参考になりました。

welcome.blade.phpを修正してみる

ここまでの手順で、使えるようになったのでwelcome.blade.php(最初から入っているトップページblade)を下記のように修正して
トップページにアクセスしてみます。

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

修正内容としては、php artisan ui vueコマンドを実行した時に作成されたExampleComponent.vueを表示するように定義しています。