vue-loader 15 with laravel-mix
7
So i am trying to update my vue-loader in laravel project to version 15.2.1. After updating dependencies and running npm run watch first i get an error that i shoul use VueLoaderPlugin. I added it like official documentation suggests.
After trying to run build command again i get this error for each one of my single file components:
ERROR in ./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options!./resources/assets/js/components/users/User.vue?vue&type=style&index=0&id=d0ee1f54&scoped=true&lang=sass
Module build failed:
<template lang="pug">
^
Invalid CSS after "": expected 1 selector or at-rule, was ".user-container"
in C:MAMPhtdocslightCRMresourcesassetsjscomponentsusersUser.vue (line 1, column 1)
@ ./node_modules/style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options!./resources/assets/js/components/users/User.vue?vue&type=style&index=0&id=d0ee1f54&scoped=true&lang=sass 4:14-338
@ ./resources/assets/js/components/users/User.vue?vue&type=style&index=0&id=d0ee1f54&scoped=true&lang=sass
@ ./resources/assets/js/components/users/User.vue
@ ./resources/assets/js/routes/routes.js
@ ./resources/assets/js/app.js
@ multi ./resources/assets/js/app.js
If iam adding this rule to my laravel-mix config
rules: [
test: /.vue$/,
loader: 'vue-loader'
]
Then compilation runs successfully, but in console I get:
[vue warn]: failed to mount component: template or render function not defined.
I use sass and pug in my vue components with appropriate loaders. Adding more rules to laravel-mix config seems to make no difference. All dependencies are up-to date and work well with vue-loader v.14.2.2. Node.js version is 10.1.0 and npm is 6.1.0.
Also here is my 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": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"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 --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
,
"devDependencies":
"axios": "^0.18.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"cross-env": "^5.1.6",
"css-loader": "^0.28.11",
"laravel-mix": "2.1",
"lodash": "^4.17.10",
"node-sass": "^4.9.0",
"pug": "^2.0.3",
"pug-loader": "^2.4.0",
"pug-plain-loader": "^1.0.0",
"sass-loader": "^7.0.1",
"sass-resources-loader": "^1.3.3",
"vue": "^2.5.16",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.2.1",
"vue-style-loader": "^4.1.0"
,
"dependencies":
"es6-promise": "^4.2.4",
"vue-multiselect": "^2.1.0",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
Here is resolve statement from WebpackConfig.js
buildResolving()
this.webpackConfig.resolve =
extensions: ['*', '.js', '.jsx', '.vue'],
alias:
vue$: 'vue/dist/vue.common.js'
;
return this;
And here is all of my webpack.mix.js
mix.js('resources/assets/js/app.js', 'public/js')
.copy('resources/assets/fonts/', 'public/fonts/')
.webpackConfig(
plugins: [
new VueLoaderPlugin()
],
resolve:
alias:
'Global': path.resolve('resources/assets/sass')
)
laravel laravel-5 vue.js laravel-mix vue-loader
asked May 29 '18 at 15:09
Никита ГулисНикита Гулис
12617
|
show 2 more comments
7
So i am trying to update my vue-loader in laravel project to version 15.2.1. After updating dependencies and running npm run watch first i get an error that i shoul use VueLoaderPlugin. I added it like official documentation suggests.
After trying to run build command again i get this error for each one of my single file components:
ERROR in ./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options!./resources/assets/js/components/users/User.vue?vue&type=style&index=0&id=d0ee1f54&scoped=true&lang=sass
Module build failed:
<template lang="pug">
^
Invalid CSS after "": expected 1 selector or at-rule, was ".user-container"
in C:MAMPhtdocslightCRMresourcesassetsjscomponentsusersUser.vue (line 1, column 1)
@ ./node_modules/style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options!./resources/assets/js/components/users/User.vue?vue&type=style&index=0&id=d0ee1f54&scoped=true&lang=sass 4:14-338
@ ./resources/assets/js/components/users/User.vue?vue&type=style&index=0&id=d0ee1f54&scoped=true&lang=sass
@ ./resources/assets/js/components/users/User.vue
@ ./resources/assets/js/routes/routes.js
@ ./resources/assets/js/app.js
@ multi ./resources/assets/js/app.js
If iam adding this rule to my laravel-mix config
rules: [
test: /.vue$/,
loader: 'vue-loader'
]
Then compilation runs successfully, but in console I get:
[vue warn]: failed to mount component: template or render function not defined.
I use sass and pug in my vue components with appropriate loaders. Adding more rules to laravel-mix config seems to make no difference. All dependencies are up-to date and work well with vue-loader v.14.2.2. Node.js version is 10.1.0 and npm is 6.1.0.
Also here is my 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": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"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 --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
,
"devDependencies":
"axios": "^0.18.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"cross-env": "^5.1.6",
"css-loader": "^0.28.11",
"laravel-mix": "2.1",
"lodash": "^4.17.10",
"node-sass": "^4.9.0",
"pug": "^2.0.3",
"pug-loader": "^2.4.0",
"pug-plain-loader": "^1.0.0",
"sass-loader": "^7.0.1",
"sass-resources-loader": "^1.3.3",
"vue": "^2.5.16",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.2.1",
"vue-style-loader": "^4.1.0"
,
"dependencies":
"es6-promise": "^4.2.4",
"vue-multiselect": "^2.1.0",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
Here is resolve statement from WebpackConfig.js
buildResolving()
this.webpackConfig.resolve =
extensions: ['*', '.js', '.jsx', '.vue'],
alias:
vue$: 'vue/dist/vue.common.js'
;
return this;
And here is all of my webpack.mix.js
mix.js('resources/assets/js/app.js', 'public/js')
.copy('resources/assets/fonts/', 'public/fonts/')
.webpackConfig(
plugins: [
new VueLoaderPlugin()
],
resolve:
alias:
'Global': path.resolve('resources/assets/sass')
)
laravel laravel-5 vue.js laravel-mix vue-loader
asked May 29 '18 at 15:09
Никита ГулисНикита Гулис
12617
Please show us theresolvedeclaration in your webpack config
– Ohgodwhy
May 29 '18 at 15:58
@Ohgodwhy I have added it to the question
– Никита Гулис
May 29 '18 at 18:42
did you find a solution?
– sgotre
Jun 24 '18 at 14:16
@sgotre Nope, still looking for one. I've tried several combinations of rules and loaders but none of them seem to work. Right now i'm using vue-loader 14.2.2. till i find a solution.
– Никита Гулис
Jun 24 '18 at 14:31
@НикитаГулис So did i... When i tried to fix this was helpful. vue-loader.vuejs.org/… And i think you have to define that html files should be loaded with babel... But it was very confusing to me
– sgotre
Jun 25 '18 at 15:06
|
show 2 more comments
7
7
7
2
So i am trying to update my vue-loader in laravel project to version 15.2.1. After updating dependencies and running npm run watch first i get an error that i shoul use VueLoaderPlugin. I added it like official documentation suggests.
After trying to run build command again i get this error for each one of my single file components:
ERROR in ./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options!./resources/assets/js/components/users/User.vue?vue&type=style&index=0&id=d0ee1f54&scoped=true&lang=sass
Module build failed:
<template lang="pug">
^
Invalid CSS after "": expected 1 selector or at-rule, was ".user-container"
in C:MAMPhtdocslightCRMresourcesassetsjscomponentsusersUser.vue (line 1, column 1)
@ ./node_modules/style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options!./resources/assets/js/components/users/User.vue?vue&type=style&index=0&id=d0ee1f54&scoped=true&lang=sass 4:14-338
@ ./resources/assets/js/components/users/User.vue?vue&type=style&index=0&id=d0ee1f54&scoped=true&lang=sass
@ ./resources/assets/js/components/users/User.vue
@ ./resources/assets/js/routes/routes.js
@ ./resources/assets/js/app.js
@ multi ./resources/assets/js/app.js
If iam adding this rule to my laravel-mix config
rules: [
test: /.vue$/,
loader: 'vue-loader'
]
Then compilation runs successfully, but in console I get:
[vue warn]: failed to mount component: template or render function not defined.
I use sass and pug in my vue components with appropriate loaders. Adding more rules to laravel-mix config seems to make no difference. All dependencies are up-to date and work well with vue-loader v.14.2.2. Node.js version is 10.1.0 and npm is 6.1.0.
Also here is my 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": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"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 --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
,
"devDependencies":
"axios": "^0.18.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"cross-env": "^5.1.6",
"css-loader": "^0.28.11",
"laravel-mix": "2.1",
"lodash": "^4.17.10",
"node-sass": "^4.9.0",
"pug": "^2.0.3",
"pug-loader": "^2.4.0",
"pug-plain-loader": "^1.0.0",
"sass-loader": "^7.0.1",
"sass-resources-loader": "^1.3.3",
"vue": "^2.5.16",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.2.1",
"vue-style-loader": "^4.1.0"
,
"dependencies":
"es6-promise": "^4.2.4",
"vue-multiselect": "^2.1.0",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
Here is resolve statement from WebpackConfig.js
buildResolving()
this.webpackConfig.resolve =
extensions: ['*', '.js', '.jsx', '.vue'],
alias:
vue$: 'vue/dist/vue.common.js'
;
return this;
And here is all of my webpack.mix.js
mix.js('resources/assets/js/app.js', 'public/js')
.copy('resources/assets/fonts/', 'public/fonts/')
.webpackConfig(
plugins: [
new VueLoaderPlugin()
],
resolve:
alias:
'Global': path.resolve('resources/assets/sass')
)
laravel laravel-5 vue.js laravel-mix vue-loader
asked May 29 '18 at 15:09
Никита ГулисНикита Гулис
12617
So i am trying to update my vue-loader in laravel project to version 15.2.1. After updating dependencies and running npm run watch first i get an error that i shoul use VueLoaderPlugin. I added it like official documentation suggests.
After trying to run build command again i get this error for each one of my single file components:
ERROR in ./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options!./resources/assets/js/components/users/User.vue?vue&type=style&index=0&id=d0ee1f54&scoped=true&lang=sass
Module build failed:
<template lang="pug">
^
Invalid CSS after "": expected 1 selector or at-rule, was ".user-container"
in C:MAMPhtdocslightCRMresourcesassetsjscomponentsusersUser.vue (line 1, column 1)
@ ./node_modules/style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options!./resources/assets/js/components/users/User.vue?vue&type=style&index=0&id=d0ee1f54&scoped=true&lang=sass 4:14-338
@ ./resources/assets/js/components/users/User.vue?vue&type=style&index=0&id=d0ee1f54&scoped=true&lang=sass
@ ./resources/assets/js/components/users/User.vue
@ ./resources/assets/js/routes/routes.js
@ ./resources/assets/js/app.js
@ multi ./resources/assets/js/app.js
If iam adding this rule to my laravel-mix config
rules: [
test: /.vue$/,
loader: 'vue-loader'
]
Then compilation runs successfully, but in console I get:
[vue warn]: failed to mount component: template or render function not defined.
I use sass and pug in my vue components with appropriate loaders. Adding more rules to laravel-mix config seems to make no difference. All dependencies are up-to date and work well with vue-loader v.14.2.2. Node.js version is 10.1.0 and npm is 6.1.0.
Also here is my 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": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"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 --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
,
"devDependencies":
"axios": "^0.18.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"cross-env": "^5.1.6",
"css-loader": "^0.28.11",
"laravel-mix": "2.1",
"lodash": "^4.17.10",
"node-sass": "^4.9.0",
"pug": "^2.0.3",
"pug-loader": "^2.4.0",
"pug-plain-loader": "^1.0.0",
"sass-loader": "^7.0.1",
"sass-resources-loader": "^1.3.3",
"vue": "^2.5.16",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.2.1",
"vue-style-loader": "^4.1.0"
,
"dependencies":
"es6-promise": "^4.2.4",
"vue-multiselect": "^2.1.0",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
Here is resolve statement from WebpackConfig.js
buildResolving()
this.webpackConfig.resolve =
extensions: ['*', '.js', '.jsx', '.vue'],
alias:
vue$: 'vue/dist/vue.common.js'
;
return this;
And here is all of my webpack.mix.js
mix.js('resources/assets/js/app.js', 'public/js')
.copy('resources/assets/fonts/', 'public/fonts/')
.webpackConfig(
plugins: [
new VueLoaderPlugin()
],
resolve:
alias:
'Global': path.resolve('resources/assets/sass')
)
laravel laravel-5 vue.js laravel-mix vue-loader
laravel laravel-5 vue.js laravel-mix vue-loader
asked May 29 '18 at 15:09
Никита ГулисНикита Гулис
12617
asked May 29 '18 at 15:09
Никита ГулисНикита Гулис
12617
edited May 29 '18 at 16:04
Никита Гулис
asked May 29 '18 at 15:09
Никита ГулисНикита Гулис
12617
asked May 29 '18 at 15:09
Никита ГулисНикита Гулис
12617
asked May 29 '18 at 15:09
Никита ГулисНикита Гулис
12617
12617
Please show us theresolvedeclaration in your webpack config
– Ohgodwhy
May 29 '18 at 15:58
@Ohgodwhy I have added it to the question
– Никита Гулис
May 29 '18 at 18:42
did you find a solution?
– sgotre
Jun 24 '18 at 14:16
@sgotre Nope, still looking for one. I've tried several combinations of rules and loaders but none of them seem to work. Right now i'm using vue-loader 14.2.2. till i find a solution.
– Никита Гулис
Jun 24 '18 at 14:31
@НикитаГулис So did i... When i tried to fix this was helpful. vue-loader.vuejs.org/… And i think you have to define that html files should be loaded with babel... But it was very confusing to me
– sgotre
Jun 25 '18 at 15:06
|
show 2 more comments
Please show us theresolvedeclaration in your webpack config
– Ohgodwhy
May 29 '18 at 15:58
@Ohgodwhy I have added it to the question
– Никита Гулис
May 29 '18 at 18:42
did you find a solution?
– sgotre
Jun 24 '18 at 14:16
@sgotre Nope, still looking for one. I've tried several combinations of rules and loaders but none of them seem to work. Right now i'm using vue-loader 14.2.2. till i find a solution.
– Никита Гулис
Jun 24 '18 at 14:31
@НикитаГулис So did i... When i tried to fix this was helpful. vue-loader.vuejs.org/… And i think you have to define that html files should be loaded with babel... But it was very confusing to me
– sgotre
Jun 25 '18 at 15:06
Please show us the
resolve declaration in your webpack config– Ohgodwhy
May 29 '18 at 15:58
Please show us the
resolve declaration in your webpack config– Ohgodwhy
May 29 '18 at 15:58
@Ohgodwhy I have added it to the question
– Никита Гулис
May 29 '18 at 18:42
@Ohgodwhy I have added it to the question
– Никита Гулис
May 29 '18 at 18:42
did you find a solution?
– sgotre
Jun 24 '18 at 14:16
did you find a solution?
– sgotre
Jun 24 '18 at 14:16
@sgotre Nope, still looking for one. I've tried several combinations of rules and loaders but none of them seem to work. Right now i'm using vue-loader 14.2.2. till i find a solution.
– Никита Гулис
Jun 24 '18 at 14:31
@sgotre Nope, still looking for one. I've tried several combinations of rules and loaders but none of them seem to work. Right now i'm using vue-loader 14.2.2. till i find a solution.
– Никита Гулис
Jun 24 '18 at 14:31
@НикитаГулис So did i... When i tried to fix this was helpful. vue-loader.vuejs.org/… And i think you have to define that html files should be loaded with babel... But it was very confusing to me
– sgotre
Jun 25 '18 at 15:06
@НикитаГулис So did i... When i tried to fix this was helpful. vue-loader.vuejs.org/… And i think you have to define that html files should be loaded with babel... But it was very confusing to me
– sgotre
Jun 25 '18 at 15:06
|
show 2 more comments
1 Answer
1
active
oldest
votes
1
I have it working fine. Here's a library project using laravel mix with Vue Loader 15 - https://github.com/niiknow/vue-datatables-net
I don't have a public Laravel project to demonstrate but here's my private project package.json
"private": true,
"scripts":
"clean": "rm -rf ./public/js/parts/*",
"dev": "npm run development",
"development": "npm run clean && 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 clean && cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "npm run clean && 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": "npm run clean && cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"test": "npm run clean && cross-env NODE_ENV=test mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/Vue/setup.js tests/Vue/**/*.spec.js",
"watch-test": "npm run clean && cross-env NODE_ENV=test mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --watch --require tests/Vue/setup.js tests/Vue/**/*.spec.js",
"lint": "eslint --ext .js,.vue resources/js",
"lint-fix": "eslint --fix --ext .js,.vue resources/js",
"check-outdated": "npm outdated"
,
"devDependencies":
"autotrack": "^2.4.1",
"axios": "^0.18.0",
"axios-jsonp": "^1.0.2",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.1",
"babel-loader": "^7.1.5",
"babel-plugin-transform-imports": "^1.5.1",
"babel-polyfill": "^6.26.0",
"babel-preset-vue-app": "^2.0.0",
"bootstrap": "^4.1.3",
"bootstrap-vue": "^2.0.0-rc.11",
"browser-sync": "^2.26.0",
"browser-sync-webpack-plugin": "^2.0.1",
"cross-env": "^5.1.6",
"datatables.net-bs4": "^1.10.19",
"datatables.net-buttons-bs4": "^1.5.4",
"datatables.net-fixedheader-bs4": "^3.1.5",
"datatables.net-responsive-bs4": "^2.2.3",
"eslint": "^5.9.0",
"eslint-config-prettier": "^3.3.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.0",
"eslint-plugin-vue": "^5.0.0-beta.4",
"inputmask": "^4.0.3",
"jQuery-QueryBuilder": "^2.5.2",
"jquery": "^3.3.1",
"laravel-mix": "^2.1.14",
"lodash": "^4.17.11",
"noty": "^3.2.0-beta",
"popper.js": "^1.14.5",
"sweetalert2": "^7.29.0",
"tinycolor2": "^1.4.1",
"vee-validate": "2.1.2",
"vform": "^1.0.0",
"vue": "^2.5.17",
"vue-authenticate": "^1.3.4",
"vue-axios": "^2.0.2",
"vue-datatables-net": "^1.0.1",
"vue-element-loading": "^1.0.5",
"vue-i18n": "^8.3.1",
"vue-loader": "^15.4.2",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.17",
"vue2-google-maps": "^0.10.2",
"vuedraggable": "^2.16.0",
"vuex": "^3.0.1",
"vuex-persistedstate": "^2.5.4",
"vuex-router-sync": "^5.0.0"
,
"dependencies": ,
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 9"
],
"engines":
"node": ">= 8.10.x",
"npm": ">= 5.6.0"
And here's my webpack.mix.js
const path = require('path');
const mix = require('laravel-mix');
const VueLoaderPlugin = require('vue-loader');
const source = 'resources';
const public = 'public';
mix.options(
processCssUrls: false,
uglify:
uglifyOptions:
compress:
drop_console: true
);
mix.setPublicPath(path.normalize(public));
mix.webpackConfig(
externals:
'jquery': 'jQuery'
,
output: chunkFilename: 'js/parts/[name].js' ,
module:
rules: [
js)$/,
exclude: /(node_modules
]
,
plugins: [
new VueLoaderPlugin()
],
devServer: overlay: true ,
devtool: 'source-map',
resolve:
/* Path Shortcuts */
alias:
/* root */
'~': path.resolve(__dirname, `$ source /js`),
Components: path.resolve(__dirname, `$ source /js/components`),
Layouts: path.resolve(__dirname, `$ source /js/layouts`),
Pages: path.resolve(__dirname, `$ source /js/pages`)
);
mix.js(`$ source /js/myapp.js`, `$ public /js`);
mix.sass(`$ source /sass/myapp.scss`, `$ public /css`,
outputStyle: mix.inProduction() ? 'compact' : 'expanded'
);
mix.sourceMaps();
mix.browserSync(
proxy: 'yourproject.test',
host: 'yourproject.test',
files: [
`$ source /views/**/*.php`,
`$ public /js/**/*.js`,
`$ public /css/**/*.css`
],
browser: 'firefox',
ghostMode: false,
open: 'external'
);
mix.extract([
'autotrack',
'axios',
'axios-jsonp',
'noty',
'popper.js',
'sweetalert2',
'tinycolor2',
'vee-validate',
'vform',
'vue',
'vue-authenticate',
'vue-axios',
'vue-element-loading',
'vue-i18n',
'vue-router',
'vue2-google-maps',
'vuedraggable',
'vuex',
'vuex-persistedstate',
'vuex-router-sync'
]);
if (mix.inProduction())
mix.version();
mix.disableNotifications();
And here's my .babelrc
"presets":
[
[
"env",
"targets":
"browsers": ["last 2 versions"]
,
"debug": true,
"useBuiltIns": "entry"
]
],
"plugins": ["transform-runtime", "syntax-dynamic-import"]
Here's .eslint.js
module.exports =
root: true,
env:
browser: true,
,
plugins: ['vue'], // enable vue plugin
extends: ["plugin:vue/recommended", "prettier"], // activate vue related rules
parserOptions:
"parser": "babel-eslint",
"ecmaVersion": 7,
"sourceType": "module",
"ecmaFeatures":
"globalReturn": false,
"impliedStrict": false,
"jsx": false,
"experimentalObjectRestSpread": false,
"allowImportExportEverywhere": false
,
rules:
// allow paren-less arrow functions
"arrow-parens": 0,
// allow async-await
"generator-star-spacing": 0,
// allow debugger during development
"no-debugger": process.env.NODE_ENV === 'production' ? 2 : 0,
"semi": [2, "never"],
"quotes": [2, "single"],
"vue/require-default-prop": 0,
"vue/require-prop-types": 0,
"vue/no-v-html": 0
;answered Nov 13 '18 at 6:18
NoogenNoogen
1,31799
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f50587679%2fvue-loader-15-with-laravel-mix%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
I have it working fine. Here's a library project using laravel mix with Vue Loader 15 - https://github.com/niiknow/vue-datatables-net
I don't have a public Laravel project to demonstrate but here's my private project package.json
"private": true,
"scripts":
"clean": "rm -rf ./public/js/parts/*",
"dev": "npm run development",
"development": "npm run clean && 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 clean && cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "npm run clean && 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": "npm run clean && cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"test": "npm run clean && cross-env NODE_ENV=test mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/Vue/setup.js tests/Vue/**/*.spec.js",
"watch-test": "npm run clean && cross-env NODE_ENV=test mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --watch --require tests/Vue/setup.js tests/Vue/**/*.spec.js",
"lint": "eslint --ext .js,.vue resources/js",
"lint-fix": "eslint --fix --ext .js,.vue resources/js",
"check-outdated": "npm outdated"
,
"devDependencies":
"autotrack": "^2.4.1",
"axios": "^0.18.0",
"axios-jsonp": "^1.0.2",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.1",
"babel-loader": "^7.1.5",
"babel-plugin-transform-imports": "^1.5.1",
"babel-polyfill": "^6.26.0",
"babel-preset-vue-app": "^2.0.0",
"bootstrap": "^4.1.3",
"bootstrap-vue": "^2.0.0-rc.11",
"browser-sync": "^2.26.0",
"browser-sync-webpack-plugin": "^2.0.1",
"cross-env": "^5.1.6",
"datatables.net-bs4": "^1.10.19",
"datatables.net-buttons-bs4": "^1.5.4",
"datatables.net-fixedheader-bs4": "^3.1.5",
"datatables.net-responsive-bs4": "^2.2.3",
"eslint": "^5.9.0",
"eslint-config-prettier": "^3.3.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.0",
"eslint-plugin-vue": "^5.0.0-beta.4",
"inputmask": "^4.0.3",
"jQuery-QueryBuilder": "^2.5.2",
"jquery": "^3.3.1",
"laravel-mix": "^2.1.14",
"lodash": "^4.17.11",
"noty": "^3.2.0-beta",
"popper.js": "^1.14.5",
"sweetalert2": "^7.29.0",
"tinycolor2": "^1.4.1",
"vee-validate": "2.1.2",
"vform": "^1.0.0",
"vue": "^2.5.17",
"vue-authenticate": "^1.3.4",
"vue-axios": "^2.0.2",
"vue-datatables-net": "^1.0.1",
"vue-element-loading": "^1.0.5",
"vue-i18n": "^8.3.1",
"vue-loader": "^15.4.2",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.17",
"vue2-google-maps": "^0.10.2",
"vuedraggable": "^2.16.0",
"vuex": "^3.0.1",
"vuex-persistedstate": "^2.5.4",
"vuex-router-sync": "^5.0.0"
,
"dependencies": ,
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 9"
],
"engines":
"node": ">= 8.10.x",
"npm": ">= 5.6.0"
And here's my webpack.mix.js
const path = require('path');
const mix = require('laravel-mix');
const VueLoaderPlugin = require('vue-loader');
const source = 'resources';
const public = 'public';
mix.options(
processCssUrls: false,
uglify:
uglifyOptions:
compress:
drop_console: true
);
mix.setPublicPath(path.normalize(public));
mix.webpackConfig(
externals:
'jquery': 'jQuery'
,
output: chunkFilename: 'js/parts/[name].js' ,
module:
rules: [
js)$/,
exclude: /(node_modules
]
,
plugins: [
new VueLoaderPlugin()
],
devServer: overlay: true ,
devtool: 'source-map',
resolve:
/* Path Shortcuts */
alias:
/* root */
'~': path.resolve(__dirname, `$ source /js`),
Components: path.resolve(__dirname, `$ source /js/components`),
Layouts: path.resolve(__dirname, `$ source /js/layouts`),
Pages: path.resolve(__dirname, `$ source /js/pages`)
);
mix.js(`$ source /js/myapp.js`, `$ public /js`);
mix.sass(`$ source /sass/myapp.scss`, `$ public /css`,
outputStyle: mix.inProduction() ? 'compact' : 'expanded'
);
mix.sourceMaps();
mix.browserSync(
proxy: 'yourproject.test',
host: 'yourproject.test',
files: [
`$ source /views/**/*.php`,
`$ public /js/**/*.js`,
`$ public /css/**/*.css`
],
browser: 'firefox',
ghostMode: false,
open: 'external'
);
mix.extract([
'autotrack',
'axios',
'axios-jsonp',
'noty',
'popper.js',
'sweetalert2',
'tinycolor2',
'vee-validate',
'vform',
'vue',
'vue-authenticate',
'vue-axios',
'vue-element-loading',
'vue-i18n',
'vue-router',
'vue2-google-maps',
'vuedraggable',
'vuex',
'vuex-persistedstate',
'vuex-router-sync'
]);
if (mix.inProduction())
mix.version();
mix.disableNotifications();
And here's my .babelrc
"presets":
[
[
"env",
"targets":
"browsers": ["last 2 versions"]
,
"debug": true,
"useBuiltIns": "entry"
]
],
"plugins": ["transform-runtime", "syntax-dynamic-import"]
Here's .eslint.js
module.exports =
root: true,
env:
browser: true,
,
plugins: ['vue'], // enable vue plugin
extends: ["plugin:vue/recommended", "prettier"], // activate vue related rules
parserOptions:
"parser": "babel-eslint",
"ecmaVersion": 7,
"sourceType": "module",
"ecmaFeatures":
"globalReturn": false,
"impliedStrict": false,
"jsx": false,
"experimentalObjectRestSpread": false,
"allowImportExportEverywhere": false
,
rules:
// allow paren-less arrow functions
"arrow-parens": 0,
// allow async-await
"generator-star-spacing": 0,
// allow debugger during development
"no-debugger": process.env.NODE_ENV === 'production' ? 2 : 0,
"semi": [2, "never"],
"quotes": [2, "single"],
"vue/require-default-prop": 0,
"vue/require-prop-types": 0,
"vue/no-v-html": 0
;answered Nov 13 '18 at 6:18
NoogenNoogen
1,31799
add a comment |
1
I have it working fine. Here's a library project using laravel mix with Vue Loader 15 - https://github.com/niiknow/vue-datatables-net
I don't have a public Laravel project to demonstrate but here's my private project package.json
"private": true,
"scripts":
"clean": "rm -rf ./public/js/parts/*",
"dev": "npm run development",
"development": "npm run clean && 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 clean && cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "npm run clean && 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": "npm run clean && cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"test": "npm run clean && cross-env NODE_ENV=test mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/Vue/setup.js tests/Vue/**/*.spec.js",
"watch-test": "npm run clean && cross-env NODE_ENV=test mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --watch --require tests/Vue/setup.js tests/Vue/**/*.spec.js",
"lint": "eslint --ext .js,.vue resources/js",
"lint-fix": "eslint --fix --ext .js,.vue resources/js",
"check-outdated": "npm outdated"
,
"devDependencies":
"autotrack": "^2.4.1",
"axios": "^0.18.0",
"axios-jsonp": "^1.0.2",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.1",
"babel-loader": "^7.1.5",
"babel-plugin-transform-imports": "^1.5.1",
"babel-polyfill": "^6.26.0",
"babel-preset-vue-app": "^2.0.0",
"bootstrap": "^4.1.3",
"bootstrap-vue": "^2.0.0-rc.11",
"browser-sync": "^2.26.0",
"browser-sync-webpack-plugin": "^2.0.1",
"cross-env": "^5.1.6",
"datatables.net-bs4": "^1.10.19",
"datatables.net-buttons-bs4": "^1.5.4",
"datatables.net-fixedheader-bs4": "^3.1.5",
"datatables.net-responsive-bs4": "^2.2.3",
"eslint": "^5.9.0",
"eslint-config-prettier": "^3.3.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.0",
"eslint-plugin-vue": "^5.0.0-beta.4",
"inputmask": "^4.0.3",
"jQuery-QueryBuilder": "^2.5.2",
"jquery": "^3.3.1",
"laravel-mix": "^2.1.14",
"lodash": "^4.17.11",
"noty": "^3.2.0-beta",
"popper.js": "^1.14.5",
"sweetalert2": "^7.29.0",
"tinycolor2": "^1.4.1",
"vee-validate": "2.1.2",
"vform": "^1.0.0",
"vue": "^2.5.17",
"vue-authenticate": "^1.3.4",
"vue-axios": "^2.0.2",
"vue-datatables-net": "^1.0.1",
"vue-element-loading": "^1.0.5",
"vue-i18n": "^8.3.1",
"vue-loader": "^15.4.2",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.17",
"vue2-google-maps": "^0.10.2",
"vuedraggable": "^2.16.0",
"vuex": "^3.0.1",
"vuex-persistedstate": "^2.5.4",
"vuex-router-sync": "^5.0.0"
,
"dependencies": ,
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 9"
],
"engines":
"node": ">= 8.10.x",
"npm": ">= 5.6.0"
And here's my webpack.mix.js
const path = require('path');
const mix = require('laravel-mix');
const VueLoaderPlugin = require('vue-loader');
const source = 'resources';
const public = 'public';
mix.options(
processCssUrls: false,
uglify:
uglifyOptions:
compress:
drop_console: true
);
mix.setPublicPath(path.normalize(public));
mix.webpackConfig(
externals:
'jquery': 'jQuery'
,
output: chunkFilename: 'js/parts/[name].js' ,
module:
rules: [
js)$/,
exclude: /(node_modules
]
,
plugins: [
new VueLoaderPlugin()
],
devServer: overlay: true ,
devtool: 'source-map',
resolve:
/* Path Shortcuts */
alias:
/* root */
'~': path.resolve(__dirname, `$ source /js`),
Components: path.resolve(__dirname, `$ source /js/components`),
Layouts: path.resolve(__dirname, `$ source /js/layouts`),
Pages: path.resolve(__dirname, `$ source /js/pages`)
);
mix.js(`$ source /js/myapp.js`, `$ public /js`);
mix.sass(`$ source /sass/myapp.scss`, `$ public /css`,
outputStyle: mix.inProduction() ? 'compact' : 'expanded'
);
mix.sourceMaps();
mix.browserSync(
proxy: 'yourproject.test',
host: 'yourproject.test',
files: [
`$ source /views/**/*.php`,
`$ public /js/**/*.js`,
`$ public /css/**/*.css`
],
browser: 'firefox',
ghostMode: false,
open: 'external'
);
mix.extract([
'autotrack',
'axios',
'axios-jsonp',
'noty',
'popper.js',
'sweetalert2',
'tinycolor2',
'vee-validate',
'vform',
'vue',
'vue-authenticate',
'vue-axios',
'vue-element-loading',
'vue-i18n',
'vue-router',
'vue2-google-maps',
'vuedraggable',
'vuex',
'vuex-persistedstate',
'vuex-router-sync'
]);
if (mix.inProduction())
mix.version();
mix.disableNotifications();
And here's my .babelrc
"presets":
[
[
"env",
"targets":
"browsers": ["last 2 versions"]
,
"debug": true,
"useBuiltIns": "entry"
]
],
"plugins": ["transform-runtime", "syntax-dynamic-import"]
Here's .eslint.js
module.exports =
root: true,
env:
browser: true,
,
plugins: ['vue'], // enable vue plugin
extends: ["plugin:vue/recommended", "prettier"], // activate vue related rules
parserOptions:
"parser": "babel-eslint",
"ecmaVersion": 7,
"sourceType": "module",
"ecmaFeatures":
"globalReturn": false,
"impliedStrict": false,
"jsx": false,
"experimentalObjectRestSpread": false,
"allowImportExportEverywhere": false
,
rules:
// allow paren-less arrow functions
"arrow-parens": 0,
// allow async-await
"generator-star-spacing": 0,
// allow debugger during development
"no-debugger": process.env.NODE_ENV === 'production' ? 2 : 0,
"semi": [2, "never"],
"quotes": [2, "single"],
"vue/require-default-prop": 0,
"vue/require-prop-types": 0,
"vue/no-v-html": 0
;answered Nov 13 '18 at 6:18
NoogenNoogen
1,31799
add a comment |
1
1
1
I have it working fine. Here's a library project using laravel mix with Vue Loader 15 - https://github.com/niiknow/vue-datatables-net
I don't have a public Laravel project to demonstrate but here's my private project package.json
"private": true,
"scripts":
"clean": "rm -rf ./public/js/parts/*",
"dev": "npm run development",
"development": "npm run clean && 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 clean && cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "npm run clean && 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": "npm run clean && cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"test": "npm run clean && cross-env NODE_ENV=test mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/Vue/setup.js tests/Vue/**/*.spec.js",
"watch-test": "npm run clean && cross-env NODE_ENV=test mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --watch --require tests/Vue/setup.js tests/Vue/**/*.spec.js",
"lint": "eslint --ext .js,.vue resources/js",
"lint-fix": "eslint --fix --ext .js,.vue resources/js",
"check-outdated": "npm outdated"
,
"devDependencies":
"autotrack": "^2.4.1",
"axios": "^0.18.0",
"axios-jsonp": "^1.0.2",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.1",
"babel-loader": "^7.1.5",
"babel-plugin-transform-imports": "^1.5.1",
"babel-polyfill": "^6.26.0",
"babel-preset-vue-app": "^2.0.0",
"bootstrap": "^4.1.3",
"bootstrap-vue": "^2.0.0-rc.11",
"browser-sync": "^2.26.0",
"browser-sync-webpack-plugin": "^2.0.1",
"cross-env": "^5.1.6",
"datatables.net-bs4": "^1.10.19",
"datatables.net-buttons-bs4": "^1.5.4",
"datatables.net-fixedheader-bs4": "^3.1.5",
"datatables.net-responsive-bs4": "^2.2.3",
"eslint": "^5.9.0",
"eslint-config-prettier": "^3.3.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.0",
"eslint-plugin-vue": "^5.0.0-beta.4",
"inputmask": "^4.0.3",
"jQuery-QueryBuilder": "^2.5.2",
"jquery": "^3.3.1",
"laravel-mix": "^2.1.14",
"lodash": "^4.17.11",
"noty": "^3.2.0-beta",
"popper.js": "^1.14.5",
"sweetalert2": "^7.29.0",
"tinycolor2": "^1.4.1",
"vee-validate": "2.1.2",
"vform": "^1.0.0",
"vue": "^2.5.17",
"vue-authenticate": "^1.3.4",
"vue-axios": "^2.0.2",
"vue-datatables-net": "^1.0.1",
"vue-element-loading": "^1.0.5",
"vue-i18n": "^8.3.1",
"vue-loader": "^15.4.2",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.17",
"vue2-google-maps": "^0.10.2",
"vuedraggable": "^2.16.0",
"vuex": "^3.0.1",
"vuex-persistedstate": "^2.5.4",
"vuex-router-sync": "^5.0.0"
,
"dependencies": ,
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 9"
],
"engines":
"node": ">= 8.10.x",
"npm": ">= 5.6.0"
And here's my webpack.mix.js
const path = require('path');
const mix = require('laravel-mix');
const VueLoaderPlugin = require('vue-loader');
const source = 'resources';
const public = 'public';
mix.options(
processCssUrls: false,
uglify:
uglifyOptions:
compress:
drop_console: true
);
mix.setPublicPath(path.normalize(public));
mix.webpackConfig(
externals:
'jquery': 'jQuery'
,
output: chunkFilename: 'js/parts/[name].js' ,
module:
rules: [
js)$/,
exclude: /(node_modules
]
,
plugins: [
new VueLoaderPlugin()
],
devServer: overlay: true ,
devtool: 'source-map',
resolve:
/* Path Shortcuts */
alias:
/* root */
'~': path.resolve(__dirname, `$ source /js`),
Components: path.resolve(__dirname, `$ source /js/components`),
Layouts: path.resolve(__dirname, `$ source /js/layouts`),
Pages: path.resolve(__dirname, `$ source /js/pages`)
);
mix.js(`$ source /js/myapp.js`, `$ public /js`);
mix.sass(`$ source /sass/myapp.scss`, `$ public /css`,
outputStyle: mix.inProduction() ? 'compact' : 'expanded'
);
mix.sourceMaps();
mix.browserSync(
proxy: 'yourproject.test',
host: 'yourproject.test',
files: [
`$ source /views/**/*.php`,
`$ public /js/**/*.js`,
`$ public /css/**/*.css`
],
browser: 'firefox',
ghostMode: false,
open: 'external'
);
mix.extract([
'autotrack',
'axios',
'axios-jsonp',
'noty',
'popper.js',
'sweetalert2',
'tinycolor2',
'vee-validate',
'vform',
'vue',
'vue-authenticate',
'vue-axios',
'vue-element-loading',
'vue-i18n',
'vue-router',
'vue2-google-maps',
'vuedraggable',
'vuex',
'vuex-persistedstate',
'vuex-router-sync'
]);
if (mix.inProduction())
mix.version();
mix.disableNotifications();
And here's my .babelrc
"presets":
[
[
"env",
"targets":
"browsers": ["last 2 versions"]
,
"debug": true,
"useBuiltIns": "entry"
]
],
"plugins": ["transform-runtime", "syntax-dynamic-import"]
Here's .eslint.js
module.exports =
root: true,
env:
browser: true,
,
plugins: ['vue'], // enable vue plugin
extends: ["plugin:vue/recommended", "prettier"], // activate vue related rules
parserOptions:
"parser": "babel-eslint",
"ecmaVersion": 7,
"sourceType": "module",
"ecmaFeatures":
"globalReturn": false,
"impliedStrict": false,
"jsx": false,
"experimentalObjectRestSpread": false,
"allowImportExportEverywhere": false
,
rules:
// allow paren-less arrow functions
"arrow-parens": 0,
// allow async-await
"generator-star-spacing": 0,
// allow debugger during development
"no-debugger": process.env.NODE_ENV === 'production' ? 2 : 0,
"semi": [2, "never"],
"quotes": [2, "single"],
"vue/require-default-prop": 0,
"vue/require-prop-types": 0,
"vue/no-v-html": 0
;answered Nov 13 '18 at 6:18
NoogenNoogen
1,31799
I have it working fine. Here's a library project using laravel mix with Vue Loader 15 - https://github.com/niiknow/vue-datatables-net
I don't have a public Laravel project to demonstrate but here's my private project package.json
"private": true,
"scripts":
"clean": "rm -rf ./public/js/parts/*",
"dev": "npm run development",
"development": "npm run clean && 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 clean && cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "npm run clean && 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": "npm run clean && cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"test": "npm run clean && cross-env NODE_ENV=test mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/Vue/setup.js tests/Vue/**/*.spec.js",
"watch-test": "npm run clean && cross-env NODE_ENV=test mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --watch --require tests/Vue/setup.js tests/Vue/**/*.spec.js",
"lint": "eslint --ext .js,.vue resources/js",
"lint-fix": "eslint --fix --ext .js,.vue resources/js",
"check-outdated": "npm outdated"
,
"devDependencies":
"autotrack": "^2.4.1",
"axios": "^0.18.0",
"axios-jsonp": "^1.0.2",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.1",
"babel-loader": "^7.1.5",
"babel-plugin-transform-imports": "^1.5.1",
"babel-polyfill": "^6.26.0",
"babel-preset-vue-app": "^2.0.0",
"bootstrap": "^4.1.3",
"bootstrap-vue": "^2.0.0-rc.11",
"browser-sync": "^2.26.0",
"browser-sync-webpack-plugin": "^2.0.1",
"cross-env": "^5.1.6",
"datatables.net-bs4": "^1.10.19",
"datatables.net-buttons-bs4": "^1.5.4",
"datatables.net-fixedheader-bs4": "^3.1.5",
"datatables.net-responsive-bs4": "^2.2.3",
"eslint": "^5.9.0",
"eslint-config-prettier": "^3.3.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.0",
"eslint-plugin-vue": "^5.0.0-beta.4",
"inputmask": "^4.0.3",
"jQuery-QueryBuilder": "^2.5.2",
"jquery": "^3.3.1",
"laravel-mix": "^2.1.14",
"lodash": "^4.17.11",
"noty": "^3.2.0-beta",
"popper.js": "^1.14.5",
"sweetalert2": "^7.29.0",
"tinycolor2": "^1.4.1",
"vee-validate": "2.1.2",
"vform": "^1.0.0",
"vue": "^2.5.17",
"vue-authenticate": "^1.3.4",
"vue-axios": "^2.0.2",
"vue-datatables-net": "^1.0.1",
"vue-element-loading": "^1.0.5",
"vue-i18n": "^8.3.1",
"vue-loader": "^15.4.2",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.17",
"vue2-google-maps": "^0.10.2",
"vuedraggable": "^2.16.0",
"vuex": "^3.0.1",
"vuex-persistedstate": "^2.5.4",
"vuex-router-sync": "^5.0.0"
,
"dependencies": ,
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 9"
],
"engines":
"node": ">= 8.10.x",
"npm": ">= 5.6.0"
And here's my webpack.mix.js
const path = require('path');
const mix = require('laravel-mix');
const VueLoaderPlugin = require('vue-loader');
const source = 'resources';
const public = 'public';
mix.options(
processCssUrls: false,
uglify:
uglifyOptions:
compress:
drop_console: true
);
mix.setPublicPath(path.normalize(public));
mix.webpackConfig(
externals:
'jquery': 'jQuery'
,
output: chunkFilename: 'js/parts/[name].js' ,
module:
rules: [
js)$/,
exclude: /(node_modules
]
,
plugins: [
new VueLoaderPlugin()
],
devServer: overlay: true ,
devtool: 'source-map',
resolve:
/* Path Shortcuts */
alias:
/* root */
'~': path.resolve(__dirname, `$ source /js`),
Components: path.resolve(__dirname, `$ source /js/components`),
Layouts: path.resolve(__dirname, `$ source /js/layouts`),
Pages: path.resolve(__dirname, `$ source /js/pages`)
);
mix.js(`$ source /js/myapp.js`, `$ public /js`);
mix.sass(`$ source /sass/myapp.scss`, `$ public /css`,
outputStyle: mix.inProduction() ? 'compact' : 'expanded'
);
mix.sourceMaps();
mix.browserSync(
proxy: 'yourproject.test',
host: 'yourproject.test',
files: [
`$ source /views/**/*.php`,
`$ public /js/**/*.js`,
`$ public /css/**/*.css`
],
browser: 'firefox',
ghostMode: false,
open: 'external'
);
mix.extract([
'autotrack',
'axios',
'axios-jsonp',
'noty',
'popper.js',
'sweetalert2',
'tinycolor2',
'vee-validate',
'vform',
'vue',
'vue-authenticate',
'vue-axios',
'vue-element-loading',
'vue-i18n',
'vue-router',
'vue2-google-maps',
'vuedraggable',
'vuex',
'vuex-persistedstate',
'vuex-router-sync'
]);
if (mix.inProduction())
mix.version();
mix.disableNotifications();
And here's my .babelrc
"presets":
[
[
"env",
"targets":
"browsers": ["last 2 versions"]
,
"debug": true,
"useBuiltIns": "entry"
]
],
"plugins": ["transform-runtime", "syntax-dynamic-import"]
Here's .eslint.js
module.exports =
root: true,
env:
browser: true,
,
plugins: ['vue'], // enable vue plugin
extends: ["plugin:vue/recommended", "prettier"], // activate vue related rules
parserOptions:
"parser": "babel-eslint",
"ecmaVersion": 7,
"sourceType": "module",
"ecmaFeatures":
"globalReturn": false,
"impliedStrict": false,
"jsx": false,
"experimentalObjectRestSpread": false,
"allowImportExportEverywhere": false
,
rules:
// allow paren-less arrow functions
"arrow-parens": 0,
// allow async-await
"generator-star-spacing": 0,
// allow debugger during development
"no-debugger": process.env.NODE_ENV === 'production' ? 2 : 0,
"semi": [2, "never"],
"quotes": [2, "single"],
"vue/require-default-prop": 0,
"vue/require-prop-types": 0,
"vue/no-v-html": 0
;
"private": true,
"scripts":
"clean": "rm -rf ./public/js/parts/*",
"dev": "npm run development",
"development": "npm run clean && 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 clean && cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "npm run clean && 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": "npm run clean && cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"test": "npm run clean && cross-env NODE_ENV=test mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/Vue/setup.js tests/Vue/**/*.spec.js",
"watch-test": "npm run clean && cross-env NODE_ENV=test mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --watch --require tests/Vue/setup.js tests/Vue/**/*.spec.js",
"lint": "eslint --ext .js,.vue resources/js",
"lint-fix": "eslint --fix --ext .js,.vue resources/js",
"check-outdated": "npm outdated"
,
"devDependencies":
"autotrack": "^2.4.1",
"axios": "^0.18.0",
"axios-jsonp": "^1.0.2",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.1",
"babel-loader": "^7.1.5",
"babel-plugin-transform-imports": "^1.5.1",
"babel-polyfill": "^6.26.0",
"babel-preset-vue-app": "^2.0.0",
"bootstrap": "^4.1.3",
"bootstrap-vue": "^2.0.0-rc.11",
"browser-sync": "^2.26.0",
"browser-sync-webpack-plugin": "^2.0.1",
"cross-env": "^5.1.6",
"datatables.net-bs4": "^1.10.19",
"datatables.net-buttons-bs4": "^1.5.4",
"datatables.net-fixedheader-bs4": "^3.1.5",
"datatables.net-responsive-bs4": "^2.2.3",
"eslint": "^5.9.0",
"eslint-config-prettier": "^3.3.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.0",
"eslint-plugin-vue": "^5.0.0-beta.4",
"inputmask": "^4.0.3",
"jQuery-QueryBuilder": "^2.5.2",
"jquery": "^3.3.1",
"laravel-mix": "^2.1.14",
"lodash": "^4.17.11",
"noty": "^3.2.0-beta",
"popper.js": "^1.14.5",
"sweetalert2": "^7.29.0",
"tinycolor2": "^1.4.1",
"vee-validate": "2.1.2",
"vform": "^1.0.0",
"vue": "^2.5.17",
"vue-authenticate": "^1.3.4",
"vue-axios": "^2.0.2",
"vue-datatables-net": "^1.0.1",
"vue-element-loading": "^1.0.5",
"vue-i18n": "^8.3.1",
"vue-loader": "^15.4.2",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.17",
"vue2-google-maps": "^0.10.2",
"vuedraggable": "^2.16.0",
"vuex": "^3.0.1",
"vuex-persistedstate": "^2.5.4",
"vuex-router-sync": "^5.0.0"
,
"dependencies": ,
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 9"
],
"engines":
"node": ">= 8.10.x",
"npm": ">= 5.6.0"
"private": true,
"scripts":
"clean": "rm -rf ./public/js/parts/*",
"dev": "npm run development",
"development": "npm run clean && 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 clean && cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "npm run clean && 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": "npm run clean && cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"test": "npm run clean && cross-env NODE_ENV=test mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/Vue/setup.js tests/Vue/**/*.spec.js",
"watch-test": "npm run clean && cross-env NODE_ENV=test mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --watch --require tests/Vue/setup.js tests/Vue/**/*.spec.js",
"lint": "eslint --ext .js,.vue resources/js",
"lint-fix": "eslint --fix --ext .js,.vue resources/js",
"check-outdated": "npm outdated"
,
"devDependencies":
"autotrack": "^2.4.1",
"axios": "^0.18.0",
"axios-jsonp": "^1.0.2",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.1",
"babel-loader": "^7.1.5",
"babel-plugin-transform-imports": "^1.5.1",
"babel-polyfill": "^6.26.0",
"babel-preset-vue-app": "^2.0.0",
"bootstrap": "^4.1.3",
"bootstrap-vue": "^2.0.0-rc.11",
"browser-sync": "^2.26.0",
"browser-sync-webpack-plugin": "^2.0.1",
"cross-env": "^5.1.6",
"datatables.net-bs4": "^1.10.19",
"datatables.net-buttons-bs4": "^1.5.4",
"datatables.net-fixedheader-bs4": "^3.1.5",
"datatables.net-responsive-bs4": "^2.2.3",
"eslint": "^5.9.0",
"eslint-config-prettier": "^3.3.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.0",
"eslint-plugin-vue": "^5.0.0-beta.4",
"inputmask": "^4.0.3",
"jQuery-QueryBuilder": "^2.5.2",
"jquery": "^3.3.1",
"laravel-mix": "^2.1.14",
"lodash": "^4.17.11",
"noty": "^3.2.0-beta",
"popper.js": "^1.14.5",
"sweetalert2": "^7.29.0",
"tinycolor2": "^1.4.1",
"vee-validate": "2.1.2",
"vform": "^1.0.0",
"vue": "^2.5.17",
"vue-authenticate": "^1.3.4",
"vue-axios": "^2.0.2",
"vue-datatables-net": "^1.0.1",
"vue-element-loading": "^1.0.5",
"vue-i18n": "^8.3.1",
"vue-loader": "^15.4.2",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.17",
"vue2-google-maps": "^0.10.2",
"vuedraggable": "^2.16.0",
"vuex": "^3.0.1",
"vuex-persistedstate": "^2.5.4",
"vuex-router-sync": "^5.0.0"
,
"dependencies": ,
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 9"
],
"engines":
"node": ">= 8.10.x",
"npm": ">= 5.6.0"
const path = require('path');
const mix = require('laravel-mix');
const VueLoaderPlugin = require('vue-loader');
const source = 'resources';
const public = 'public';
mix.options(
processCssUrls: false,
uglify:
uglifyOptions:
compress:
drop_console: true
);
mix.setPublicPath(path.normalize(public));
mix.webpackConfig(
externals:
'jquery': 'jQuery'
,
output: chunkFilename: 'js/parts/[name].js' ,
module:
rules: [
js)$/,
exclude: /(node_modules
]
,
plugins: [
new VueLoaderPlugin()
],
devServer: overlay: true ,
devtool: 'source-map',
resolve:
/* Path Shortcuts */
alias:
/* root */
'~': path.resolve(__dirname, `$ source /js`),
Components: path.resolve(__dirname, `$ source /js/components`),
Layouts: path.resolve(__dirname, `$ source /js/layouts`),
Pages: path.resolve(__dirname, `$ source /js/pages`)
);
mix.js(`$ source /js/myapp.js`, `$ public /js`);
mix.sass(`$ source /sass/myapp.scss`, `$ public /css`,
outputStyle: mix.inProduction() ? 'compact' : 'expanded'
);
mix.sourceMaps();
mix.browserSync(
proxy: 'yourproject.test',
host: 'yourproject.test',
files: [
`$ source /views/**/*.php`,
`$ public /js/**/*.js`,
`$ public /css/**/*.css`
],
browser: 'firefox',
ghostMode: false,
open: 'external'
);
mix.extract([
'autotrack',
'axios',
'axios-jsonp',
'noty',
'popper.js',
'sweetalert2',
'tinycolor2',
'vee-validate',
'vform',
'vue',
'vue-authenticate',
'vue-axios',
'vue-element-loading',
'vue-i18n',
'vue-router',
'vue2-google-maps',
'vuedraggable',
'vuex',
'vuex-persistedstate',
'vuex-router-sync'
]);
if (mix.inProduction())
mix.version();
mix.disableNotifications();
const path = require('path');
const mix = require('laravel-mix');
const VueLoaderPlugin = require('vue-loader');
const source = 'resources';
const public = 'public';
mix.options(
processCssUrls: false,
uglify:
uglifyOptions:
compress:
drop_console: true
);
mix.setPublicPath(path.normalize(public));
mix.webpackConfig(
externals:
'jquery': 'jQuery'
,
output: chunkFilename: 'js/parts/[name].js' ,
module:
rules: [
js)$/,
exclude: /(node_modules
]
,
plugins: [
new VueLoaderPlugin()
],
devServer: overlay: true ,
devtool: 'source-map',
resolve:
/* Path Shortcuts */
alias:
/* root */
'~': path.resolve(__dirname, `$ source /js`),
Components: path.resolve(__dirname, `$ source /js/components`),
Layouts: path.resolve(__dirname, `$ source /js/layouts`),
Pages: path.resolve(__dirname, `$ source /js/pages`)
);
mix.js(`$ source /js/myapp.js`, `$ public /js`);
mix.sass(`$ source /sass/myapp.scss`, `$ public /css`,
outputStyle: mix.inProduction() ? 'compact' : 'expanded'
);
mix.sourceMaps();
mix.browserSync(
proxy: 'yourproject.test',
host: 'yourproject.test',
files: [
`$ source /views/**/*.php`,
`$ public /js/**/*.js`,
`$ public /css/**/*.css`
],
browser: 'firefox',
ghostMode: false,
open: 'external'
);
mix.extract([
'autotrack',
'axios',
'axios-jsonp',
'noty',
'popper.js',
'sweetalert2',
'tinycolor2',
'vee-validate',
'vform',
'vue',
'vue-authenticate',
'vue-axios',
'vue-element-loading',
'vue-i18n',
'vue-router',
'vue2-google-maps',
'vuedraggable',
'vuex',
'vuex-persistedstate',
'vuex-router-sync'
]);
if (mix.inProduction())
mix.version();
mix.disableNotifications();
"presets":
[
[
"env",
"targets":
"browsers": ["last 2 versions"]
,
"debug": true,
"useBuiltIns": "entry"
]
],
"plugins": ["transform-runtime", "syntax-dynamic-import"]
"presets":
[
[
"env",
"targets":
"browsers": ["last 2 versions"]
,
"debug": true,
"useBuiltIns": "entry"
]
],
"plugins": ["transform-runtime", "syntax-dynamic-import"]
module.exports =
root: true,
env:
browser: true,
,
plugins: ['vue'], // enable vue plugin
extends: ["plugin:vue/recommended", "prettier"], // activate vue related rules
parserOptions:
"parser": "babel-eslint",
"ecmaVersion": 7,
"sourceType": "module",
"ecmaFeatures":
"globalReturn": false,
"impliedStrict": false,
"jsx": false,
"experimentalObjectRestSpread": false,
"allowImportExportEverywhere": false
,
rules:
// allow paren-less arrow functions
"arrow-parens": 0,
// allow async-await
"generator-star-spacing": 0,
// allow debugger during development
"no-debugger": process.env.NODE_ENV === 'production' ? 2 : 0,
"semi": [2, "never"],
"quotes": [2, "single"],
"vue/require-default-prop": 0,
"vue/require-prop-types": 0,
"vue/no-v-html": 0
;module.exports =
root: true,
env:
browser: true,
,
plugins: ['vue'], // enable vue plugin
extends: ["plugin:vue/recommended", "prettier"], // activate vue related rules
parserOptions:
"parser": "babel-eslint",
"ecmaVersion": 7,
"sourceType": "module",
"ecmaFeatures":
"globalReturn": false,
"impliedStrict": false,
"jsx": false,
"experimentalObjectRestSpread": false,
"allowImportExportEverywhere": false
,
rules:
// allow paren-less arrow functions
"arrow-parens": 0,
// allow async-await
"generator-star-spacing": 0,
// allow debugger during development
"no-debugger": process.env.NODE_ENV === 'production' ? 2 : 0,
"semi": [2, "never"],
"quotes": [2, "single"],
"vue/require-default-prop": 0,
"vue/require-prop-types": 0,
"vue/no-v-html": 0
;answered Nov 13 '18 at 6:18
NoogenNoogen
1,31799
answered Nov 13 '18 at 6:18
NoogenNoogen
1,31799
answered Nov 13 '18 at 6:18
NoogenNoogen
1,31799
answered Nov 13 '18 at 6:18
NoogenNoogen
1,31799
1,31799
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f50587679%2fvue-loader-15-with-laravel-mix%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Please show us the
resolvedeclaration in your webpack config– Ohgodwhy
May 29 '18 at 15:58
@Ohgodwhy I have added it to the question
– Никита Гулис
May 29 '18 at 18:42
did you find a solution?
– sgotre
Jun 24 '18 at 14:16
@sgotre Nope, still looking for one. I've tried several combinations of rules and loaders but none of them seem to work. Right now i'm using vue-loader 14.2.2. till i find a solution.
– Никита Гулис
Jun 24 '18 at 14:31
@НикитаГулис So did i... When i tried to fix this was helpful. vue-loader.vuejs.org/… And i think you have to define that html files should be loaded with babel... But it was very confusing to me
– sgotre
Jun 25 '18 at 15:06