[SOLVED] Trying to use Vue js plug-ins without the use of NPM or webpack

Trying to use Vue js plug-ins without the use of NPM or webpack

The problem

At this moment I am following the jqwidgets guidelines from the link displayed below to build a dropdownbox. The only problem with their setup is that they make use of the IMPORT functionality which I can not make use of due to restrictions from my techlead.

My question

Is there a way to make the plug-in work within my html file and without the IMPORT functionality through for example a CDN?

Maybe an even more important quest, is it possible to make use of Vue JS and it's plugins without the use of webpack and NPM?

Jqwidgets Vue

https://www.jqwidgets.com/vue-components-documentation/documentation/jqxdropdownlist/vue-dropdownlist-getting-started.htm?search=dropdown

What I have tried About the CDN, I have tried to implement this part without much success, below is my current code:

<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/jqwidgets-scripts@10.1.3/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/jqwidgets-scripts@10.1.3/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 () {            
            // Add here any data where you want to transform before components be rendered
            },
            methods: {
                methods: {
                    onSelect: function () {
                        this.$refs.dropdownlist.close();
                    }
                }
            },
            events: {
                dataplotRollover: function (ev, props) {
                    chart.displayValue = props.displayValue
                }
            }
        });

    </script>
</body>
</html>

Solution

Download the package in a directory, e.g. assets or static, within your webroot and use the <script src="path_to that dir/js_file_you_need" /> to make it available to your page. Same for the CSS.