Currently in the process of enhancing a legacy project with new functionality. The front end is currently relying solely on jQuery for all the webpages. I have been tasked with adding another webpage and would like to incorporate Vuetify + Vue due to the intricate features required. Unfortunately, there is no webpack or modern conveniences available, but I will make use of a CDN.
The challenge I am facing involves the necessity to support IE (as per user request). These script tags are enabling everything to function smoothly in Chrome:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e383b2b633c2b3d213b3c2d2b0e7f607b607f">[email protected]</a>"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<jsp:include page="components/location_component.jsp"></jsp:include>
How can I ensure this works in IE using just a CDN? I'm encountering issues related to ES6 syntax, which prompted me to introduce babel. However, I'm still faced with the same errors as before.
<div id="app">
<v-app>
<v-container>
<location @workstationchange="handleWorkstationChange($event)"></location>
</v-container>
</v-app>
</div>
</div>
<script>
var app = new Vue({
el : '#app',
data : {
workstationSelected : null,
},
methods : {
handleWorkstationChange : function(id) {
this.workstationSelected = id
}
},
mounted: function(){
}
})
</script>
The 'location' component I've developed is quite extensive, primarily consisting of dropdown menus populated from a database. It incorporates ES6 arrow functions, sorting, Set(), spread operator [...] and more. Keeping this post concise, does anyone have insights on making ES6 compatible with IE in a Legacy environment using only a CDN? What am I missing?