The issue
Currently, I am trying to follow the jqWidgets guidelines provided in the link below to create a dropdown box. However, the challenge I'm facing is that their setup involves using the IMPORT functionality which is restricted by my tech lead.
My query
Is there a way to integrate the plugin into my HTML file without relying on the IMPORT feature, perhaps through a CDN?
Another important question is whether it's feasible to utilize Vue JS and its plugins without the need for webpack and NPM.
Jqwidgets Vue
My attempts so far:
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">
<style src="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css"></style>
<script src="https://unpkg.com/vue@latest"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b011a1c020f0c0e1f1846180819021b1f182b5a5b455a4558">[email protected]</a>/jqwidgets/jqx-all.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/http-vue-loader"></script>
</head>
<body>
<div id="app">
<jqx-DropDownList @select="onSelect($event)"
:width="200" :height="25"
:source="source" :selectedIndex="1">
</jqx-DropDownList>
</div>
<script type="text/javascript">
var filter = new Vue({
el: '#app',
components: {
'jqx-dropdownlist': httpVueLoader('https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8d2c9cfd1dcdfddcccb95cbdbcad1c8cccbf889889689968b">[email protected]</a>/jqwidgets-vue/vue_jqxdropdownlist.vue')
},
data: function () {
return {
source: [
'Affogato',
'Americano',
'Bicerin',
'Breve',
'Café Bombón',
'Café au lait',
'Caffé Corretto',
'Café Crema',
'Caffé Latte',
'Caffé macchiato',
'Café mélange',
'Coffee milk',
'Cafe mocha',
'Cappuccino',
'Carajillo',
'Cortado',
'Cuban espresso',
'Espresso',
'Eiskaffee',
'The Flat White',
'Frappuccino',
'Galao',
'Greek frappé coffee',
'Iced Coffee',
'Indian filter coffee',
'Instant coffee',
'Irish coffee',
'Liqueur coffee'
]
}
},
beforeCreate: function () {
// Include any necessary code for data transformation before component rendering
},
methods: {
onSelect: function () {
this.$refs.dropdownlist.close();
}
},
events: {
dataplotRollover: function (ev, props) {
chart.displayValue = props.displayValue
}
}
});
</script>
</body>
</html>