Using Vue in Laravel
up vote
2
down vote
favorite
I am new to Vue but I thought I'd give it a go in a recent project, I can see why its liked. Anyway, everything was going great until I switched over to IE, where nothing worked at all.
With errors such as Object doesn't support property or method 'assign' I gave it a Google and apparently IE doesn't support ES6 very well, according to this question: Getting Error: Object doesn't support property or method 'assign'
So, I'd heard of Babel and it looked like the sort of thing that would do the job as it is capable of converting from ES6. Following this I attempted to integrate Babel into my Laravel project.
I updated my webpack.min.js as follows:
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/assets/js/app.js', 'public/js')
.webpackConfig({
module: {
rules: [{
test: /.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}]
}
})
.sass('resources/assets/sass/app.scss', 'public/css');
if (!mix.inProduction()) {
mix.webpackConfig({
devtool: 'source-map'
})
.sourceMaps();
} else if (mix.inProduction()) {
mix.version();
}
mix.browserSync({
proxy: '127.0.0.1:8000'
});
The env package refers to: https://babeljs.io/docs/en/babel-preset-env
However, this did not seem to solve my problem.
Should I just use mix.babel instead?
javascript php laravel vue.js webpack
asked Nov 9 at 12:59
Jesse Orange
581316
add a comment |
up vote
2
down vote
favorite
I am new to Vue but I thought I'd give it a go in a recent project, I can see why its liked. Anyway, everything was going great until I switched over to IE, where nothing worked at all.
With errors such as Object doesn't support property or method 'assign' I gave it a Google and apparently IE doesn't support ES6 very well, according to this question: Getting Error: Object doesn't support property or method 'assign'
So, I'd heard of Babel and it looked like the sort of thing that would do the job as it is capable of converting from ES6. Following this I attempted to integrate Babel into my Laravel project.
I updated my webpack.min.js as follows:
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/assets/js/app.js', 'public/js')
.webpackConfig({
module: {
rules: [{
test: /.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}]
}
})
.sass('resources/assets/sass/app.scss', 'public/css');
if (!mix.inProduction()) {
mix.webpackConfig({
devtool: 'source-map'
})
.sourceMaps();
} else if (mix.inProduction()) {
mix.version();
}
mix.browserSync({
proxy: '127.0.0.1:8000'
});
The env package refers to: https://babeljs.io/docs/en/babel-preset-env
However, this did not seem to solve my problem.
Should I just use mix.babel instead?
javascript php laravel vue.js webpack
asked Nov 9 at 12:59
Jesse Orange
581316
Normally you would usenpm run devto compile for development. I suppose that is what laravel mix helps with that is it wraps around tools to compile assets code to compatible ones. Have you made use of Laravel mix properly?
– Oluwatobi Samuel Omisakin
Nov 9 at 13:32
I ran dev and it made no difference
– Jesse Orange
Nov 9 at 13:41
What version of IE are you using?
– marvinIsSacul
Nov 9 at 14:07
IE11 is the version I'm using
– Jesse Orange
Nov 9 at 14:36
add a comment |
up vote
2
down vote
favorite
up vote
2
down vote
favorite
I am new to Vue but I thought I'd give it a go in a recent project, I can see why its liked. Anyway, everything was going great until I switched over to IE, where nothing worked at all.
With errors such as Object doesn't support property or method 'assign' I gave it a Google and apparently IE doesn't support ES6 very well, according to this question: Getting Error: Object doesn't support property or method 'assign'
So, I'd heard of Babel and it looked like the sort of thing that would do the job as it is capable of converting from ES6. Following this I attempted to integrate Babel into my Laravel project.
I updated my webpack.min.js as follows:
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/assets/js/app.js', 'public/js')
.webpackConfig({
module: {
rules: [{
test: /.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}]
}
})
.sass('resources/assets/sass/app.scss', 'public/css');
if (!mix.inProduction()) {
mix.webpackConfig({
devtool: 'source-map'
})
.sourceMaps();
} else if (mix.inProduction()) {
mix.version();
}
mix.browserSync({
proxy: '127.0.0.1:8000'
});
The env package refers to: https://babeljs.io/docs/en/babel-preset-env
However, this did not seem to solve my problem.
Should I just use mix.babel instead?
javascript php laravel vue.js webpack
asked Nov 9 at 12:59
Jesse Orange
581316
I am new to Vue but I thought I'd give it a go in a recent project, I can see why its liked. Anyway, everything was going great until I switched over to IE, where nothing worked at all.
With errors such as Object doesn't support property or method 'assign' I gave it a Google and apparently IE doesn't support ES6 very well, according to this question: Getting Error: Object doesn't support property or method 'assign'
So, I'd heard of Babel and it looked like the sort of thing that would do the job as it is capable of converting from ES6. Following this I attempted to integrate Babel into my Laravel project.
I updated my webpack.min.js as follows:
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/assets/js/app.js', 'public/js')
.webpackConfig({
module: {
rules: [{
test: /.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}]
}
})
.sass('resources/assets/sass/app.scss', 'public/css');
if (!mix.inProduction()) {
mix.webpackConfig({
devtool: 'source-map'
})
.sourceMaps();
} else if (mix.inProduction()) {
mix.version();
}
mix.browserSync({
proxy: '127.0.0.1:8000'
});
The env package refers to: https://babeljs.io/docs/en/babel-preset-env
However, this did not seem to solve my problem.
Should I just use mix.babel instead?
javascript php laravel vue.js webpack
javascript php laravel vue.js webpack
asked Nov 9 at 12:59
Jesse Orange
581316
asked Nov 9 at 12:59
Jesse Orange
581316
edited Nov 9 at 13:49
asked Nov 9 at 12:59
Jesse Orange
581316
asked Nov 9 at 12:59
Jesse Orange
581316
asked Nov 9 at 12:59
Jesse Orange
581316
581316
Normally you would usenpm run devto compile for development. I suppose that is what laravel mix helps with that is it wraps around tools to compile assets code to compatible ones. Have you made use of Laravel mix properly?
– Oluwatobi Samuel Omisakin
Nov 9 at 13:32
I ran dev and it made no difference
– Jesse Orange
Nov 9 at 13:41
What version of IE are you using?
– marvinIsSacul
Nov 9 at 14:07
IE11 is the version I'm using
– Jesse Orange
Nov 9 at 14:36
add a comment |
Normally you would usenpm run devto compile for development. I suppose that is what laravel mix helps with that is it wraps around tools to compile assets code to compatible ones. Have you made use of Laravel mix properly?
– Oluwatobi Samuel Omisakin
Nov 9 at 13:32
I ran dev and it made no difference
– Jesse Orange
Nov 9 at 13:41
What version of IE are you using?
– marvinIsSacul
Nov 9 at 14:07
IE11 is the version I'm using
– Jesse Orange
Nov 9 at 14:36
Normally you would use
npm run dev to compile for development. I suppose that is what laravel mix helps with that is it wraps around tools to compile assets code to compatible ones. Have you made use of Laravel mix properly?– Oluwatobi Samuel Omisakin
Nov 9 at 13:32
Normally you would use
npm run dev to compile for development. I suppose that is what laravel mix helps with that is it wraps around tools to compile assets code to compatible ones. Have you made use of Laravel mix properly?– Oluwatobi Samuel Omisakin
Nov 9 at 13:32
I ran dev and it made no difference
– Jesse Orange
Nov 9 at 13:41
I ran dev and it made no difference
– Jesse Orange
Nov 9 at 13:41
What version of IE are you using?
– marvinIsSacul
Nov 9 at 14:07
What version of IE are you using?
– marvinIsSacul
Nov 9 at 14:07
IE11 is the version I'm using
– Jesse Orange
Nov 9 at 14:36
IE11 is the version I'm using
– Jesse Orange
Nov 9 at 14:36
add a comment |
1 Answer
1
active
oldest
votes
up vote
2
down vote
accepted
You need a polyfill: https://babeljs.io/docs/en/babel-polyfill
Import that as the first line in your entry (app.js).
However, I'd recommend using vue cli instead of laravel mix entirely.
answered Nov 9 at 14:02
DigitalDrifter
6,7322423
I've literally spent hours looking at this o_O... is there a way to load it via Mix? Also, why should I scrap Mix for vue-cli?
– Jesse Orange
Nov 9 at 14:15
All you need to do isimport "@babel/polyfill";as the first line in app.js. Mix should handle the rest. Vue CLI handles everything pretty much out of the box and supports webpack 4. It's a much better build tool all around.
– DigitalDrifter
Nov 9 at 14:20
Okay, does Mix utilize babel to some degree anyway? Asrequireis not a native JS function
– Jesse Orange
Nov 9 at 14:35
Essentially I need to learn JavaScript more fully
– Jesse Orange
Nov 9 at 14:40
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',
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
});
}
});
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%2f53226187%2fusing-vue-in-laravel%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
up vote
2
down vote
accepted
You need a polyfill: https://babeljs.io/docs/en/babel-polyfill
Import that as the first line in your entry (app.js).
However, I'd recommend using vue cli instead of laravel mix entirely.
answered Nov 9 at 14:02
DigitalDrifter
6,7322423
I've literally spent hours looking at this o_O... is there a way to load it via Mix? Also, why should I scrap Mix for vue-cli?
– Jesse Orange
Nov 9 at 14:15
All you need to do isimport "@babel/polyfill";as the first line in app.js. Mix should handle the rest. Vue CLI handles everything pretty much out of the box and supports webpack 4. It's a much better build tool all around.
– DigitalDrifter
Nov 9 at 14:20
Okay, does Mix utilize babel to some degree anyway? Asrequireis not a native JS function
– Jesse Orange
Nov 9 at 14:35
Essentially I need to learn JavaScript more fully
– Jesse Orange
Nov 9 at 14:40
add a comment |
up vote
2
down vote
accepted
You need a polyfill: https://babeljs.io/docs/en/babel-polyfill
Import that as the first line in your entry (app.js).
However, I'd recommend using vue cli instead of laravel mix entirely.
answered Nov 9 at 14:02
DigitalDrifter
6,7322423
I've literally spent hours looking at this o_O... is there a way to load it via Mix? Also, why should I scrap Mix for vue-cli?
– Jesse Orange
Nov 9 at 14:15
All you need to do isimport "@babel/polyfill";as the first line in app.js. Mix should handle the rest. Vue CLI handles everything pretty much out of the box and supports webpack 4. It's a much better build tool all around.
– DigitalDrifter
Nov 9 at 14:20
Okay, does Mix utilize babel to some degree anyway? Asrequireis not a native JS function
– Jesse Orange
Nov 9 at 14:35
Essentially I need to learn JavaScript more fully
– Jesse Orange
Nov 9 at 14:40
add a comment |
up vote
2
down vote
accepted
up vote
2
down vote
accepted
You need a polyfill: https://babeljs.io/docs/en/babel-polyfill
Import that as the first line in your entry (app.js).
However, I'd recommend using vue cli instead of laravel mix entirely.
answered Nov 9 at 14:02
DigitalDrifter
6,7322423
You need a polyfill: https://babeljs.io/docs/en/babel-polyfill
Import that as the first line in your entry (app.js).
However, I'd recommend using vue cli instead of laravel mix entirely.
answered Nov 9 at 14:02
DigitalDrifter
6,7322423
answered Nov 9 at 14:02
DigitalDrifter
6,7322423
answered Nov 9 at 14:02
DigitalDrifter
6,7322423
answered Nov 9 at 14:02
DigitalDrifter
6,7322423
6,7322423
I've literally spent hours looking at this o_O... is there a way to load it via Mix? Also, why should I scrap Mix for vue-cli?
– Jesse Orange
Nov 9 at 14:15
All you need to do isimport "@babel/polyfill";as the first line in app.js. Mix should handle the rest. Vue CLI handles everything pretty much out of the box and supports webpack 4. It's a much better build tool all around.
– DigitalDrifter
Nov 9 at 14:20
Okay, does Mix utilize babel to some degree anyway? Asrequireis not a native JS function
– Jesse Orange
Nov 9 at 14:35
Essentially I need to learn JavaScript more fully
– Jesse Orange
Nov 9 at 14:40
add a comment |
I've literally spent hours looking at this o_O... is there a way to load it via Mix? Also, why should I scrap Mix for vue-cli?
– Jesse Orange
Nov 9 at 14:15
All you need to do isimport "@babel/polyfill";as the first line in app.js. Mix should handle the rest. Vue CLI handles everything pretty much out of the box and supports webpack 4. It's a much better build tool all around.
– DigitalDrifter
Nov 9 at 14:20
Okay, does Mix utilize babel to some degree anyway? Asrequireis not a native JS function
– Jesse Orange
Nov 9 at 14:35
Essentially I need to learn JavaScript more fully
– Jesse Orange
Nov 9 at 14:40
I've literally spent hours looking at this o_O... is there a way to load it via Mix? Also, why should I scrap Mix for vue-cli?
– Jesse Orange
Nov 9 at 14:15
I've literally spent hours looking at this o_O... is there a way to load it via Mix? Also, why should I scrap Mix for vue-cli?
– Jesse Orange
Nov 9 at 14:15
All you need to do is
import "@babel/polyfill"; as the first line in app.js. Mix should handle the rest. Vue CLI handles everything pretty much out of the box and supports webpack 4. It's a much better build tool all around.– DigitalDrifter
Nov 9 at 14:20
All you need to do is
import "@babel/polyfill"; as the first line in app.js. Mix should handle the rest. Vue CLI handles everything pretty much out of the box and supports webpack 4. It's a much better build tool all around.– DigitalDrifter
Nov 9 at 14:20
Okay, does Mix utilize babel to some degree anyway? As
require is not a native JS function– Jesse Orange
Nov 9 at 14:35
Okay, does Mix utilize babel to some degree anyway? As
require is not a native JS function– Jesse Orange
Nov 9 at 14:35
Essentially I need to learn JavaScript more fully
– Jesse Orange
Nov 9 at 14:40
Essentially I need to learn JavaScript more fully
– Jesse Orange
Nov 9 at 14:40
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
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%2f53226187%2fusing-vue-in-laravel%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
Normally you would use
npm run devto compile for development. I suppose that is what laravel mix helps with that is it wraps around tools to compile assets code to compatible ones. Have you made use of Laravel mix properly?– Oluwatobi Samuel Omisakin
Nov 9 at 13:32
I ran dev and it made no difference
– Jesse Orange
Nov 9 at 13:41
What version of IE are you using?
– marvinIsSacul
Nov 9 at 14:07
IE11 is the version I'm using
– Jesse Orange
Nov 9 at 14:36