vue-switches icon indicating copy to clipboard operation
vue-switches copied to clipboard

Support for IE11 (ES5)

Open Napokue opened this issue 6 years ago • 1 comments

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)

Napokue avatar Oct 31 '18 15:10 Napokue

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.

Roye7777777 avatar Apr 30 '20 07:04 Roye7777777