IE 11 compatibility documentation

[volkipp]

I recently discovered that simply registering any of the components in Vuetensils breaks IE11. It took a min, but I realized that most babel configurations will not transpile anything in the node_modules folder by default.

It would be great to help others to document how to fix in a Vue CLI project and Nuxt projects since, sadly, IE11 is still a requirement by some companies.

Vue CLI: vue.config.js
Vue CLI Documentation

module.exports = {
  transpileDependencies: ["vuetensils"]
}

Nuxt: nuxt.config.js
Nuxt Documentation

export default {
  build: {
    transpile: ["vuetensils"]
  }
}

[AustinGil]

Ok, this is a really good thing to know. Up until recently I've been including a transpiled version. I stopped including that because I figured it adds extra bloat, and the library itself is not really designed to be used directly as is. I always expect the components to be extended upon. I didn't know that Babel would ignore node-modules folder, so that changes things, I think.

Moving forward comes down to either supporting IE11 in the library via a transpilation step, or showing users how to support it in the docs (as you point out above. thanks!).

I'm leaning towards leaving the transpilation step out, and just having the steps for IE11 support documented. I definitely don't want to completely ignore IE11, but I also prefer not shipping unnecessary code to the 97% of users that are not on IE11.

Open to other thoughts/ideas though, and ultimately I think browser support is part of accessibility which is the number 1 focus of this project.

What do you think?

[volkipp]

Glad to help! I would also agree that not including polyfills and transpiling is a better approach to reduce bloat. It would also help keep filesize down if you're doing something fancy like bundling a modern and legacy version of your compiled javascript.

I think simply documenting how to make the library compile for IE is good enough. If you're using the CLI for Vue or Nuxt, it's a very small change to the config file.

On that same note of browser compatibility, including a blurb about the components which rely on IntersectionObservers and a link to a good polyfill would be helpful as well (it's just an npm install and an import away). iOS Safari 12.1 and lower doesn't support IntersectionObservers, but Safari 12.2 and up does. iOS users are pretty good at upgrading, but it's good to point out for that one user that refuses to upgrade and reports a bug.

[AustinGil]

Agreed. Actually, only the VIntersect, VImg, and the intersect directive use IntersectionObserver, and they already do have the note about including a polyfill.

Thanks for your support on this. I'll be sure to add the notes about IE11 support to the Introduction section.

[volkipp]

Anytime! 🍻 Happy to spare someone a moment of panic when they see IE not loading.

[lbineau]

I also had this issue and I knew Babel do not transpiled node_module by default.
But didn't know Vuetensils was not transpiled in the last releases thanks for bringing it up!

[AustinGil]

Hey, sorry for the delay on this. It's back on my radar now.