I would like to make my Vuetify(CDN) application compatible with Internet Explorer. I know I have to put a "babel-polyfill.js" script but it doesn't work when it has one or more data. Here is an example that doesn't work in IE with the option for the dark mode.
<!DOCTYPE html>
<html>
<head>
<title>My super application</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app id="inspire" :dark="setTheme">
<v-container fluid px-15> <v-btn>random button</v-btn><br>
<v-switch :label="`Dark Theme`" v-model="goDark"></v-switch>
<v-spacer></v-spacer>
</v-container>
</v-app>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.10.4/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.js"></script>
<script>
new Vue({
el: "#app",
opts: {
theme: {
dark: false
}
},
vuetify: new Vuetify(this.opts),
data() {
return {
goDark: false
};
},
computed: {
setTheme() {
if (this.goDark == true) {
return (this.$vuetify.theme.dark = true);
} else {
return (this.$vuetify.theme.dark = false);
}
}
}
});
</script>
</body>
</html>