vue-switches
vue-switches copied to clipboard
Support for IE11 (ES5)
Hello,
I've implemented vue-switches in a software solution, and concluded that vue-switches is not (yet) supported for IE11.
At https://github.com/drewjbartlett/vue-switches/blob/master/src/switches.vue#L58 IE11 is complaining about the mounted function. There are some other places where this happens.
The cause for this is because in ES6 the shorthand function for object initializers is introduced.
Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions
The VueJS documentation is suggesting to use the following style:
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
Reference: https://vuejs.org/v2/api/#mounted
Transcompiling the node_modules directory is not a really effecient option.
Option 1 - Manual "downgrade" the syntax to ES5
It would be fairly simple to implement this and support IE11 without the need of a transcompiler.
If there aren't any plans to fix this, I could fix it myself and send a PR.
Pros:
- Able to support IE11
Cons:
- Every time the source gets updated, it has to be checked if it is still compatible for IE11, if not then it has to be changed to older syntax
Option 2 - Transcompile the source
Transcompile the source to ES5 before distribubtion (eg. npm).
Pros:
- Able to support IE11
- Don't have to worry about using new syntax (ES6, ES7 etc.)
Cons:
- Requires set-up to handle transcompiling (eg. Babel)
A primary issue is that on rule 58 in switches.vue, the syntax mounted () {
is not supported in IE, thus causing all other layout to break. Adjusting that (as mentioned above) to mounted: function () {
would fix it.