Laravel7+Vuetify Material DashboradをLaravel Mixで動かすまで(Laravel7対応)

こんにちは〜BlumaのBuefyが気になっていますが、今回は作り込む時間がないのでとりあえずLaravel+Vuetifyでまたサービスを作って行く下準備をしていきます。

まずはLaravelを準備！

1 環境
2 LaravelをHomesteadへインストール
3 Vuetify Material Dashboardを入れる
4 Sass周りを調整
- 4.1 app.scssを修正
5 js周りを修正
- 5.1 app.jsを修正
- 5.2 webpack.mix.jsを変更する
6 Laravelの設定

環境

Homestead 10.9.1
Laravel 7.18
Vuetify Material Dashboard Pro 2.1.0
Mac OSX 10.13 High Sierra
node 12.14
PHP 7.4

Vuetify Material Dashboard Pro を入れていますが、最初に作った環境は無料版なので同じ方法でインストールしていこうと思います。

今回のプロジェクト名は「sampleproject」でいきますので適時読み替えてください。
それではHomsetedにある、codeフォルダへプロジェクトを作成していきます。

LaravelをHomesteadへインストール

#ディレクトリを移動 (Mac)
$ cd ~/homestead
$ vagrant resume
$ vagrant ssh
$ cd code

#Laravel6はこっち (Homestead)
$ composer create-project "laravel/laravel=6.*" sampleproject

#Laravel7はこっち (Homestead)
$ composer create-project "laravel/laravel" sampleproject

#ディレクトリを移動 (Mac)

$ cd ~/homestead

$ vagrant resume

$ vagrant ssh

$ cd code

#Laravel6はこっち (Homestead)

$ composer create-project "laravel/laravel=6.*" sampleproject

#Laravel7はこっち (Homestead)

$ composer create-project "laravel/laravel" sampleproject

Vuetify Material Dashboardを入れる

アナログですみませんwただコピペしてるだけです。

#ダウンロードしたVurtify Material Dashboardからソースをコピー(Mac)
$ cp -pR ~/Downloads/vuetify-material-dashboard-pro-v2.1.0/src/* ~/code/sampleproject/resources/js/

#ディレクトリを移動(Homestead)
$ cd ~/code/sampleproject

#パッケージをインスト〜ル
$ npm i --save vue-i18n vuetify vuex vue-router vue vue-chartist

#今だによくわかってないけど開発環境用にインストール？
$ npm i --save-dev browser-sync browser-sync-webpack-plugin deepmerge resolve-url-loader fibers css-loader vue-style-loader vuetify-loader vee-validate vue-template-compiler

#laravelのパッケージも必要なのでインストール
$ npm i

#ダウンロードしたVurtify Material Dashboardからソースをコピー(Mac)

$ cp -pR ~/Downloads/vuetify-material-dashboard-pro-v2.1.0/src/* ~/code/sampleproject/resources/js/

#ディレクトリを移動(Homestead)

$ cd ~/code/sampleproject

#パッケージをインスト〜ル

$ npm i --save vue-i18n vuetify vuex vue-router vue vue-chartist

#今だによくわかってないけど開発環境用にインストール？

$ npm i --save-dev browser-sync browser-sync-webpack-plugin deepmerge resolve-url-loader fibers css-loader vue-style-loader vuetify-loader vee-validate vue-template-compiler

#laravelのパッケージも必要なのでインストール

$ npm i

devDependenciesとdependenciesってこういう開発の時分ける必要あるのか謎ですが、開発だけで使いそうなパッケージは全部devに入れています。

Laravel 6用 package.json

{
    "private": true,
    "scripts": {
        "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "postinstall": "echo postinstall finished!!",
        "heroku-prebuild": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "heroku-postbuild": "echo heroku-postbuild finished!!"
    },
    "devDependencies": {
        "axios": "^0.19",
        "browser-sync": "^2.26.7",
        "browser-sync-webpack-plugin": "^2.0.1",
        "deepmerge": "^4.2.2",
        "fibers": "^4.0.2",
        "lodash": "^4.17.13",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vee-validate": "^3.2.2",
        "vue-chartist": "^2.2.1",
        "vue-template-compiler": "^2.6.10",
        "css-loader": "^3.4.2",
        "vue-style-loader": "^4.1.2",
        "vuetify-loader": "^1.4.3"
        #googlemapやら使わないパッケージは全て抜いています。必要なものは入れてくださいね！
    },
    "dependencies": {
        "laravel-mix": "^5.0.1",#herokuアップ時に使用
        "cross-env": "^7.0",#herokuアップ時に使用
        "vue": "^2.5.17",
        "vue-i18n": "^8.15.3",
        "vue-router": "^3.1.3",
        "vuetify": "^2.2.18",
        "vuex": "^3.1.2"
    }
}

{

"private": true,

"scripts": {

"dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",

"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",

"watch": "npm run development -- --watch",

"watch-poll": "npm run watch -- --watch-poll",

"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",

"prod": "npm run production",

"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",

"postinstall": "echo postinstall finished!!",

"heroku-prebuild": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",

"heroku-postbuild": "echo heroku-postbuild finished!!"

"devDependencies": {

"axios": "^0.19",

"browser-sync": "^2.26.7",

"browser-sync-webpack-plugin": "^2.0.1",

"deepmerge": "^4.2.2",

"fibers": "^4.0.2",

"lodash": "^4.17.13",

"popper.js": "^1.12",

"resolve-url-loader": "^2.3.1",

"sass": "^1.20.1",

"sass-loader": "^8.0.0",

"vee-validate": "^3.2.2",

"vue-chartist": "^2.2.1",

"vue-template-compiler": "^2.6.10",

"css-loader": "^3.4.2",

"vue-style-loader": "^4.1.2",

"vuetify-loader": "^1.4.3"

#googlemapやら使わないパッケージは全て抜いています。必要なものは入れてくださいね！

"dependencies": {

"laravel-mix": "^5.0.1",#herokuアップ時に使用

"cross-env": "^7.0",#herokuアップ時に使用

"vue": "^2.5.17",

"vue-i18n": "^8.15.3",

"vue-router": "^3.1.3",

"vuetify": "^2.2.18",

"vuex": "^3.1.2"

}

Laravel 7用 package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "browser-sync": "^2.26.7",
        "browser-sync-webpack-plugin": "^2.2.2",
        "cross-env": "^7.0",
        "css-loader": "^3.6.0",
        "deepmerge": "^4.2.2",
        "fibers": "^5.0.0",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.13",
        "resolve-url-loader": "^3.1.1",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0",
        "vee-validate": "^3.3.7",
        "vue-style-loader": "^4.1.2",
        "vuetify-loader": "^1.5.0"
    },
    "dependencies": {
        "vue": "^2.6.11",
        "vue-chartist": "^2.3.1",
        "vue-i18n": "^8.18.2",
        "vue-router": "^3.3.4",
        "vue-template-compiler": "^2.6.11",
        "vuetify": "^2.3.3",
        "vuex": "^3.5.1"
    }
}

{

"private": true,

"scripts": {

"dev": "npm run development",

"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",

"watch": "npm run development -- --watch",

"watch-poll": "npm run watch -- --watch-poll",

"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",

"prod": "npm run production",

"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"

"devDependencies": {

"axios": "^0.19",

"browser-sync": "^2.26.7",

"browser-sync-webpack-plugin": "^2.2.2",

"cross-env": "^7.0",

"css-loader": "^3.6.0",

"deepmerge": "^4.2.2",

"fibers": "^5.0.0",

"laravel-mix": "^5.0.1",

"lodash": "^4.17.13",

"resolve-url-loader": "^3.1.1",

"sass": "^1.15.2",

"sass-loader": "^8.0.0",

"vee-validate": "^3.3.7",

"vue-style-loader": "^4.1.2",

"vuetify-loader": "^1.5.0"

"dependencies": {

"vue": "^2.6.11",

"vue-chartist": "^2.3.1",

"vue-i18n": "^8.18.2",

"vue-router": "^3.3.4",

"vue-template-compiler": "^2.6.11",

"vuetify": "^2.3.3",

"vuex": "^3.5.1"

}

Nuxtをインストールした方がいいのかもしれない気がしてるので今度トライして見ます！

Sass周りを調整

sassフォルダもLaravelのままだと厄介なので調整していきます。

#sassフォルダの内容をコピーする(Mac)
$ cp -pR ~/code/sampleproject/resources/js/sass/* ~/code/sampleproject/resources/sass/

#sassフォルダを削除(Mac)
$ rm -rf ~/code/sampleproject/resources/js/sass

#sassフォルダの内容をコピーする(Mac)

$ cp -pR ~/code/sampleproject/resources/js/sass/* ~/code/sampleproject/resources/sass/

#sassフォルダを削除(Mac)

$ rm -rf ~/code/sampleproject/resources/js/sass

app.scssを修正

~/code/sampleproject/resources/sass/app.scssを修正します。

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');
@import url('https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

// Variables
@import 'variables';

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');

@import url('https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css');

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

// Variables

@import 'variables';

js周りを修正

ルーターとストアは使いやすいようにディレクトリを作成します。

#ディレクトリを作成(Mac)
$ mkdir ~/code/sampleproject/resources/js/router

#routerファイルを移動する
$ mv ~/code/sampleproject/resources/js/router.js ~/code/sampleproject/resources/js/router

#ファイル名を変更する
$ mv ~/code/sampleproject/resources/js/router/router.js ~/code/sampleproject/resources/js/router/index.js

####storeも同じ手順で変更

$ mkdir ~/code/sampleproject/resources/js/store
$ mv ~/code/sampleproject/resources/js/store.js ~/code/sampleproject/resources/js/store
$ mv ~/code/sampleproject/resources/js/store/store.js ~/code/sampleproject/resources/js/store/index.js

#ディレクトリを作成(Mac)

$ mkdir ~/code/sampleproject/resources/js/router

#routerファイルを移動する

$ mv ~/code/sampleproject/resources/js/router.js ~/code/sampleproject/resources/js/router

#ファイル名を変更する

$ mv ~/code/sampleproject/resources/js/router/router.js ~/code/sampleproject/resources/js/router/index.js

####storeも同じ手順で変更

$ mkdir ~/code/sampleproject/resources/js/store

$ mv ~/code/sampleproject/resources/js/store.js ~/code/sampleproject/resources/js/store

$ mv ~/code/sampleproject/resources/js/store/store.js ~/code/sampleproject/resources/js/store/index.js

app.jsを修正

~/code/sampleproject/resources/js/app.jsを修正します。

// require('./bootstrap');
import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store/index'
import './plugins/base'
import './plugins/chartist'
import './plugins/vee-validate'
import vuetify from './plugins/vuetify'
import i18n from './i18n'

new Vue({
    router,
    store,
    vuetify,
    i18n,
    render: h => h(App),
}).$mount('#app');

// require('./bootstrap');

import Vue from 'vue'

import App from './App.vue'

import router from './router/index'

import store from './store/index'

import './plugins/base'

import './plugins/chartist'

import './plugins/vee-validate'

import vuetify from './plugins/vuetify'

import i18n from './i18n'

new Vue({

router,

store,

vuetify,

i18n,

render: h => h(App),

}).$mount('#app');

~/code/sampleproject/resources/js/plugins/vuetify.js
の一部を修正します。

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import i18n from '@/i18n'
#↓ここを１階層上に移動させてsassを見るように変更
import '@/../sass/overrides.sass'

Vue.use(Vuetify)

const theme = {
  primary: '#E91E63',
  secondary: '#9C27b0',
  accent: '#9C27b0',
  info: '#00CAE3',
}

export default new Vuetify({
  lang: {
    t: (key, ...params) => i18n.t(key, params),
  },
  theme: {
    themes: {
      dark: theme,
      light: theme,
    },
  },
})

import Vue from 'vue'

import Vuetify from 'vuetify/lib'

import i18n from '@/i18n'

#↓ここを１階層上に移動させてsassを見るように変更

import '@/../sass/overrides.sass'

Vue.use(Vuetify)

const theme = {

primary: '#E91E63',

secondary: '#9C27b0',

accent: '#9C27b0',

info: '#00CAE3',

}

export default new Vuetify({

lang: {

t: (key, ...params) => i18n.t(key, params),

theme: {

themes: {

dark: theme,

light: theme,

})

webpack.mix.jsを変更する

const mix = require('laravel-mix');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');

mix.webpackConfig({
    plugins: [
        new VuetifyLoaderPlugin()
    ],
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            '@': __dirname + '/resources/js'
        },
    },
});

//ココが結構重要！
Mix.listen("configReady", config => {
    const scssRule = config.module.rules.find(r => r.test.toString() === /\.scss$/.toString());
    const scssOptions = scssRule.loaders.find(l => l.loader === "sass-loader").options;
    scssOptions.implementation = require('sass');
    scssOptions.prependData = "@import \"./resources/sass/variables.scss\";";

    const sassRule = config.module.rules.find(r => r.test.toString() === /\.sass$/.toString());
    const sassOptions = sassRule.loaders.find(l => l.loader === "sass-loader").options;
    sassOptions.implementation = require('sass');
    sassOptions.prependData = "@import \"./resources/sass/variables.scss\"";
});

mix.browserSync('sampleproject.dev')
    .sass('resources/sass/app.scss', 'public/css')
    .js('resources/js/app.js', 'public/js')
    .version();

const mix = require('laravel-mix');

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');

mix.webpackConfig({

plugins: [

new VuetifyLoaderPlugin()

resolve: {

extensions: ['.js', '.vue', '.json'],

alias: {

'@': __dirname + '/resources/js'

});

//ココが結構重要！

Mix.listen("configReady", config => {

const scssRule = config.module.rules.find(r => r.test.toString() === /\.scss$/.toString());

const scssOptions = scssRule.loaders.find(l => l.loader === "sass-loader").options;

scssOptions.implementation = require('sass');

scssOptions.prependData = "@import \"./resources/sass/variables.scss\";";

const sassRule = config.module.rules.find(r => r.test.toString() === /\.sass$/.toString());

const sassOptions = sassRule.loaders.find(l => l.loader === "sass-loader").options;

sassOptions.implementation = require('sass');

sassOptions.prependData = "@import \"./resources/sass/variables.scss\"";

});

mix.browserSync('sampleproject.dev')

.sass('resources/sass/app.scss', 'public/css')

.js('resources/js/app.js', 'public/js')

.version();

ここでずっと引っかかっていました。
variable.scssはVuetifyの上書きを行なっているのでどうしても後から読み込みをするとスタイルが壊れたりしてうまくUIが表示されなかったので。
特に”$font-size-root”が反映されずに何度もプロジェクトごと作り直しました…。

#ここで一旦
$ npm run dev

1 2	#ここで一旦 $ npm run dev

コンパイルが通ればオッケーです。
次はLaravelのrouterを触ります。

Laravelの設定

~/code/sampleproject/routes/web.php

//welcomeは消しちゃいます
//Route::get('/', function () {
//    return view('welcome');
//});
//SPA用のルーティングにしておく
Route::get('/{any?}', fn() => view('index'))->where('any', '.+');

//welcomeは消しちゃいます

//Route::get('/', function () {

// return view('welcome');

//});

//SPA用のルーティングにしておく

Route::get('/{any?}', fn() => view('index'))->where('any', '.+');

ファイルを追加
~/code/sampleproject/resources/views/index.blade.php

&lt;head>
    &lt;meta charset="utf-8">
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge">
    &lt;meta name="viewport" content="width=device-width, initial-scale=1">

    &lt;!-- CSRF Token -->
    &lt;meta name="csrf-token" content="{{ csrf_token() }}">

    &lt;title>{{ config('app.name', 'Laravel') }}&lt;/title>

    &lt;!-- Styles -->
    &lt;link rel="stylesheet" href="{{ mix('css/app.css') }}">
&lt;/head>
&lt;body>
&lt;div id="app">
&lt;/div>
&lt;!-- Scripts -->
&lt;script src="{{ mix('js/app.js') }}">&lt;/script>
&lt;/body>

<head>

<title>{{ config('app.name', 'Laravel') }}</title>

</head>

<body>

</div>

</body>

※すみません、エスケープされちゃってます…。”<“を<へ置換してください…。

下記はWebpackに@をパスのエイリアスに設定していないために発生するエラー一覧です。
ググった時に出て来やすくするために、あえて載せておきます。

ERROR in ./resources/js/plugins/base.js
Module not found: Error: Can’t resolve ‘@/components/base’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js/plugins’
@ ./resources/js/plugins/base.js 5:23-75
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/plugins/vuetify.js
Module not found: Error: Can’t resolve ‘@/i18n’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js/plugins’
@ ./resources/js/plugins/vuetify.js 3:0-26 19:13-17
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/i18n.js
Module not found: Error: Can’t resolve ‘@/locales/ar.json’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js’
@ ./resources/js/i18n.js 16:24-52
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/i18n.js
Module not found: Error: Can’t resolve ‘@/locales/en.json’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js’
@ ./resources/js/i18n.js 13:24-52
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/plugins/vuetify.js
Module not found: Error: Can’t resolve ‘@/sass/overrides.sass’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js/plugins’
@ ./resources/js/plugins/vuetify.js 4:0-31
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/router.js
Module not found: Error: Can’t resolve ‘@/views/dashboard/Calendar’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js’
@ ./resources/js/router.js 179:15-51
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/router.js
Module not found: Error: Can’t resolve ‘@/views/dashboard/Charts’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js’
@ ./resources/js/router.js 173:15-49
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/router.js
Module not found: Error: Can’t resolve ‘@/views/dashboard/Dashboard’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js’
@ ./resources/js/router.js 47:15-52
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/router.js
Module not found: Error: Can’t resolve ‘@/views/dashboard/Index’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js’
@ ./resources/js/router.js 40:13-46
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/router.js
Module not found: Error: Can’t resolve ‘@/views/dashboard/Widgets’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js’
@ ./resources/js/router.js 167:15-50
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/router.js
Module not found: Error: Can’t resolve ‘@/views/dashboard/component/Buttons’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js’
@ ./resources/js/router.js 73:15-60
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/router.js
Module not found: Error: Can’t resolve ‘@/views/dashboard/component/Grid’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js’
@ ./resources/js/router.js 79:15-57
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/router.js
Module not found: Error: Can’t resolve ‘@/views/dashboard/component/Icons’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js’
@ ./resources/js/router.js 97:15-58
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/router.js
Module not found: Error: Can’t resolve ‘@/views/dashboard/component/Notifications’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js’
@ ./resources/js/router.js 91:15-66
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/router.js
Module not found: Error: Can’t resolve ‘@/views/dashboard/component/Tabs’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js’
@ ./resources/js/router.js 85:15-57
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/router.js
Module not found: Error: Can’t resolve ‘@/views/dashboard/component/Typography’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js’
@ ./resources/js/router.js 103:15-63
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/router.js
Module not found: Error: Can’t resolve ‘@/views/dashboard/forms/ExtendedForms’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js’
@ ./resources/js/router.js 116:15-62
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/router.js
Module not found: Error: Can’t resolve ‘@/views/dashboard/forms/RegularForms’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js’
@ ./resources/js/router.js 110:15-61
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/router.js
Module not found: Error: Can’t resolve ‘@/views/dashboard/forms/ValidationForms’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js’
@ ./resources/js/router.js 122:15-64
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/router.js
Module not found: Error: Can’t resolve ‘@/views/dashboard/forms/Wizard’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js’
@ ./resources/js/router.js 128:15-55
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/router.js
Module not found: Error: Can’t resolve ‘@/views/dashboard/maps/FullScreenMap’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js’
@ ./resources/js/router.js 160:15-61
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/router.js
Module not found: Error: Can’t resolve ‘@/views/dashboard/maps/GoogleMaps’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js’
@ ./resources/js/router.js 154:15-58
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/router.js
Module not found: Error: Can’t resolve ‘@/views/dashboard/pages/Rtl’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js’
@ ./resources/js/router.js 54:15-52
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/router.js
Module not found: Error: Can’t resolve ‘@/views/dashboard/pages/Timeline’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js’
@ ./resources/js/router.js 66:15-57
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/router.js
Module not found: Error: Can’t resolve ‘@/views/dashboard/pages/UserProfile’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js’
@ ./resources/js/router.js 60:15-60
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/router.js
Module not found: Error: Can’t resolve ‘@/views/dashboard/tables/DataTables’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js’
@ ./resources/js/router.js 147:15-60
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/router.js
Module not found: Error: Can’t resolve ‘@/views/dashboard/tables/ExtendedTables’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js’
@ ./resources/js/router.js 141:15-64
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/router.js
Module not found: Error: Can’t resolve ‘@/views/dashboard/tables/RegularTables’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js’
@ ./resources/js/router.js 135:15-63
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/router.js
Module not found: Error: Can’t resolve ‘@/views/pages/Error’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js’
@ ./resources/js/router.js 191:15-44
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/router.js
Module not found: Error: Can’t resolve ‘@/views/pages/Index’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js’
@ ./resources/js/router.js 10:13-42 185:13-42
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/router.js
Module not found: Error: Can’t resolve ‘@/views/pages/Lock’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js’
@ ./resources/js/router.js 16:15-43
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/router.js
Module not found: Error: Can’t resolve ‘@/views/pages/Login’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js’
@ ./resources/js/router.js 22:15-44
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/router.js
Module not found: Error: Can’t resolve ‘@/views/pages/Pricing’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js’
@ ./resources/js/router.js 28:15-46
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/router.js
Module not found: Error: Can’t resolve ‘@/views/pages/Register’ in ‘/Users/ユーザー名/code/プロジェクト名/resources/js’
@ ./resources/js/router.js 34:15-47
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

長くてすみませんw
全部で35個です。
Vue Cliを今回は使わないので、@のエラーが頻発しています。

ん〜次からは少しくらい時短になるようにメモでした〜

Laravel7+Vuetify Material DashboradをLaravel Mixで動かすまで(Laravel7対応)

環境

LaravelをHomesteadへインストール

Vuetify Material Dashboardを入れる

Sass周りを調整

app.scssを修正

js周りを修正

app.jsを修正

webpack.mix.jsを変更する

Laravelの設定

iPad 第7世代を買うに当たって検討したことまとめ

Laravel6 + Vuetify Material Dashboard Proの設定方法

環境

LaravelをHomesteadへインストール

Vuetify Material Dashboardを入れる

Sass周りを調整

app.scssを修正

js周りを修正

app.jsを修正

webpack.mix.jsを変更する

Laravelの設定

関連記事

Laravel6 + Vuetify Material Dashboard Proの設定方法

Homestead+Mac+開発用ドメインの証明書設定

XserverにNodebrewがインストールできない

XServer+お名前.comの組み合わせで無料のSSLを使う

XServerにGitを導入、MacのSourcetreeを使ってSSHで繋ぐまで

iPad 第7世代を買うに当たって検討したことまとめ

Laravel6 + Vuetify Material Dashboard Proの設定方法