Using Internet Explorer 11 with Vue 3

While there are numerous discussions on Vue 2 support for IE11 with the use of polyfills, I am curious if it is possible to utilize Vue 3 in IE11. If not, are there any plans to provide support for it in the future?

I experimented with Vue CLI @vue/cli 4.5.8, which installs 

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="384e4d5d780b1608160a">[email protected]</a>
(along with Vuex, Router and Typescript support). By adding 
transpileDependencies: ['vue-router']
to my vue.config.js, I was able to make it work in Edge. However, IE11 continued to raise issues regarding the "vue" npm package. Even after transpiling it, I encountered an error stating 
Accessing the 'caller' property of a function or arguments object is not allowed in strict mode
, which has left me at a standstill.

I also attempted using babel polyfills and other techniques recommended for Vue 2 compatibility without achieving success.

javascriptvue.jsvuejs3

Answer №1

Vue 3 has implemented JS proxies for reactivity, but this feature is not compatible with any version of Internet Explorer (refer to the link at the bottom).

A "Compatibility" build that includes the same reactivity system as Vue 2 and is compatible with IE11 was promised previously, and it seems like it may be arriving soon (especially since Microsoft has announced the end of support for IE), although it currently lacks high priority...

The release notes for v3.0.0 One Piece state: Migration and IE11 Support: Due to time constraints, we have delayed the migration build (v3 build with v2 compatible behavior + migration warnings) and the IE11 build until Q4 2020. Users looking to migrate an existing v2 app or needing IE11 support should take note of these limitations.

You can consider using some ES6 Proxy polyfills or waiting for the Vue 3 compatibility build...

UPDATE (2021/03/15)

In a recent State of the Vuenion 2021 talk at Vue Amsterdam, Evan You, the founder and main developer of Vue, mentioned that they are reconsidering support for legacy browsers.

You can watch the video yourself, but from my understanding, they recognize the effort required to align the rest of the ecosystem with Vue 3 (Router/Vuex/Dev Tools/DX - dev experience) and are skeptical about whether making Vue 3 compatible with IE11 is worthwhile when Vue 2 already functions well in IE 11 and IE 11 is largely obsolete for most users...

This aligns with their work towards enhancing the @vue/composition-api for Vue 2 and creating guidelines and documentation for library authors to develop Composition API libraries that work in both Vue 2 and 3.

This decision is tentative and will involve public discussion and feedback from the community. If you're interested, there will soon be a new RFC available for feedback in the Vue RFCs repository.

UPDATE (2021/04/08)

The RFC is now posted and open for discussion.

TLDR

There will not be a version of Vue 3 for IE 11. If you need to support IE 11, stick with Vue 2....

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unlimited image rotation with JQuery

I'm currently working on a project where I have a series of images that are moving left or right using the animate() function. My goal is to create a loop so that when the user clicks "next", the last image transitions to the first position seamlessly ...

javascriptjqueryhtmlcss

Using JS/PHP to send a POST request to a PHP script for querying a database

Trying to gather user input and then pass it to another PHP script for utilizing in a MariaDB query. Index.php: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="robots" content=&q ...

javascriptphphtmlmysqlmariadb

What is the method to include a second scroll to reach the top of the page, similar to

I am facing an issue with my Vue component that extends beyond the size of the browser window, resulting in a scrollbar being added to the bottom. I need another scrollbar at the top as well, but I am unsure how to implement this. Despite researching onlin ...

vue.js

What is the easiest method to design an email subscription form that remains fixed on the top right corner of the screen?

Looking for advice on setting up a sleek email signup bar that remains at the top of the browser while users scroll and navigate through different pages. I am working with WordPress and have jquery already loaded, but have not yet worked with either. Up ...

javascriptjqueryhtmlcsswordpress

The left border is failing to appear on the Td element

When attempting to add border styling to td elements, the left border is not displaying correctly. This issue seems to vary across different browsers. Here is the HTML code: <table class="table-bordered"> <thead> <tr> ...

javascriptjqueryhtmlcss

What is the best way to capture the input value upon pressing the "Enter" key?

My first question here is about implementing the addtodo(todo) code. After trying it out successfully, I wanted to make it work when typing and pressing enter. However, despite attempting some other methods, I couldn't get it to work. I didn't re ...

javascripthtmlcss

What is the best way to grab just the whole number from a string in JavaScript?

I'm facing an issue with a specific string format: const value = "value is 10"; My goal is to retrieve the integer 10 from this string and store it in a separate variable. How can I achieve this efficiently? ...

javascript

I am having trouble retrieving the array value from the response sent by my server

After receiving a dictionary from my server, when I try to access the values using the following code: {"filters":{ "Facture": [ "Магма (Тычок)", "Тонкий кирпич", "Гладк ...

javascriptjsonajaxjsp

What steps should I take to repair my jQuery button slider?

I am facing a challenge with creating a carousel of three images in HTML using jQuery. When the user clicks on the "Next" or "Previous" buttons, I want to scroll through the images one by one. However, I am struggling to hide the other images when one is d ...

javascriptjqueryhtmlcssslider

Replicate the contents of one DIV element into a different DIV

I am in need of assistance with cloning a DIV in order to prevent data duplication. This is something I frequently need to do across several pages and I don't want to make major structural changes. My goal is to clone the mApageLeft DIV with the clas ...

javascriptjqueryhtmlclone

Utilizing Mysql Joins with parameterized queries in Node.js: A Comprehensive Guide

Currently, I am utilizing Node.js and Express.js for my project. In particular, I am incorporating the "mysql2 library" into my development process. My current task involves concatenating and joining queries with parameters in a secure manner. How can I ...

javascriptnode.jsexpressnode-mysql

Node.js is great at hosting HTML files, but struggles when it comes to loading script files within those pages

Recently, I’ve been working on creating a simple login page using a mongoDB database along with Node.js and express. Since I'm still new to Node.js, I'm facing an issue that seems more complicated than it actually is. The main problem I’m en ...

javascripthtmlnode.jsmongodbexpress

Utilizing the `this` keyword within a click handler that is passed through an intermediary function

If I initially have a click event handler in jQuery set up like this jQuery('#btn').click(_eventHandler); And handling the event as follows function _eventHandler(e){ jQuery(this).text('Clicked'); } Does the this keyword serve a ...

javascriptjquery

Ways to generate a fresh div containing the identical current information

I'm currently working on a small PHP project that includes an invoice module. One of the requirements for this module is to have an auto-generate option that can create new div elements automatically when the user clicks on a button. Here's what ...

javascriptjquery

Issue with updating state using useCallBack in React when handling resize events

I'm a bit confused about how to properly use the useCallback hook. I have a hook that detects whether I'm on desktop, tablet, or mobile based on the screen width. This part is working fine. However, I'm running into an issue in a specific c ...

javascriptreactjsnext.js

PDF Embed Whitelist

Is there a way to embed PDFs on a specific domain in a read-only format without allowing saving or downloading? While services like Scribd and Slideshare offer private options, I haven't found one that allows whitelisting for embeds on certain domains ...

javascriptnode.jspdf

Error: Unable to execute setState in React Native

Why am I receiving an error stating that this.setState is not a function? I'm having trouble understanding why my code isn't working as expected. import React from 'react'; import axios from 'axios' import { StyleSheet, Text ...

javascriptreactjsfunctionreact-nativesetstate

How can we generate 3 different arrays, each containing an equal number of items except for the last array, using VueJS?

Incorporating Bootstrap5 and VueJS 2, I am working on designing a layout of cards in a "pinterest-style" arrangement, as depicted in the following screenshot: https://i.sstatic.net/AvdWR.png To achieve the layout showcased above, the HTML markup required ...

javascriptarraysvuejs2bootstrap-5

Steps for creating a basic prioritized event listener system in JavaScript

I am currently working on an event/listener manager that has the following function: var addListener = function(event, listener) { myListeners[event].push(listener); //assume this code works } However, I now need to modify it so that it appears a ...

javascript

Moving a div horizontally while clicking and holding on a control button with a smooth animation effect

I am currently working on a new feature inspired by a previous question I found on Stack Overflow. My goal is to make the scrolling start slowly and then gradually speed up. However, I am facing an issue with using easing in the animate function as it get ...

javascriptjqueryanimationeasingmousedown