Some more improvements

public/index.html → index.html

@@ -7,7 +7,7 @@
     <title>@voerro/vue-tagsinput</title>
 
     <link rel="stylesheet" href="dist/style.css">
-    <link rel="stylesheet" href="demo/css/bulma.min.css">
+    <link rel="stylesheet" href="public/css/bulma.min.css">
 
     <style>
         .mb-1 {
@@ -49,7 +49,7 @@
                 <h1 class="title">@voerro/vue-tagsinput</h1>
 
                 <h2 class="subtitle">
-                    Tags input for Vue.js 2 by
+                    Tags input for Vue 3 by
                     <a href="http://voerro.com">Voerro</a>
                 </h2>
             </div>
@@ -132,7 +132,7 @@ <h2 class="is-size-4" style="margin-bottom: 1rem;">Options</h2>
                             <label class="label">Typeahead Style</label>
 
                             <div class="control">
-                                <select class="input" type="text" v-model="typeaheadStyle">
+                                <select class="input" v-model="typeaheadStyle">
                                     <option value="badges">Badges</option>
                                     <option value="dropdown">Dropdown</option>
                                 </select>
@@ -313,13 +313,18 @@ <h2 class="is-size-3 mb-1">Custom Display Field for the Dropdown</h2>
         </div>
     </div>
 
-    <script src="https://unpkg.com/vue@3"></script>
-    <script src="dist/voerro-vue-tagsinput.js"></script>
-
-    <script>
-        Vue.createApp({
+    <script type="importmap">
+        {
+          "imports": {
+            "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
+          }
+        }
+    </script>
+    <script type="module" src="dist/voerro-vue-tagsinput.js"></script>
+    <script type="module">
+        import { createApp } from 'vue'
+        createApp({
             components: { VoerroTagsInput },
-
             data() {
                 return {
                     selectedTags: [

package.json

@@ -23,7 +23,7 @@
     "license": "MIT",
     "scripts": {
         "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
-        "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+        "build": "cross-env NODE_ENV=production webpack --progress"
     },
     "browserslist": [
         "> 1%",
@@ -38,12 +38,11 @@
         "cross-env": "^7.0.3",
         "css-loader": "^6.7.1",
         "file-loader": "^6.2.0",
-        "vue": "^3.2.31",
         "vue-loader": "^17.0.0",
-        "vue-template-compiler": "^2.6.14",
         "webpack": "^5.70.0",
         "webpack-cli": "^4.9.2",
-        "webpack-dev-server": "^4.7.4"
+        "webpack-dev-server": "^4.7.4",
+        "vue": "^3.2.31"
     },
     "repository": "https://github.com/voerro/vue-tagsinput"
 }

webpack.config.js

@@ -36,27 +36,15 @@ module.exports = {
     ]
   },
   resolve: {
+    extensions: ['\*', '.js', '.jsx', '.vue'],
+    symlinks: false,
     alias: {
-      'vue$': 'vue/dist/vue.esm-bundler.js'
+        "@": path.resolve(__dirname, '../src'),
+        'vue$': 'vue/dist/vue.esm-bundler.js',
     },
-    extensions: ['*', '.js', '.vue', '.json']
   },
   devServer: {
     historyApiFallback: true,
-    static: [
-      {
-        directory: path.join(__dirname, 'dist'),
-        publicPath: '/dist',
-      },
-      {
-        directory: path.join(__dirname, 'demo'),
-        publicPath: '/demo',
-      },
-      {
-        directory: path.join(__dirname, 'public'),
-        publicPath: '/',
-      },
-    ],
     client: {
       logging: 'warn',
       overlay: true
@@ -72,7 +60,7 @@ module.exports = {
 }
 
 if (process.env.NODE_ENV === 'production') {
-  module.exports.devtool = '#source-map'
+  module.exports.devtool = 'source-map'
   // http://vue-loader.vuejs.org/en/workflow/production.html
   module.exports.plugins = (module.exports.plugins || []).concat([
     new webpack.DefinePlugin({