Vue 3 support and build with Vite

build/webpack.release.js

@@ -70,12 +70,12 @@ if (process.env.NODE_ENV === 'production') {
         NODE_ENV: '"production"'
       }
     }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      }
-    }),
-    new webpack.optimize.OccurenceOrderPlugin()
+    // new webpack.optimize.UglifyJsPlugin({
+    //   compress: {
+    //     warnings: false
+    //   }
+    // }),
+    // new webpack.optimize.OccurenceOrderPlugin()
     // new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),
   ]
 }

package.json

@@ -19,17 +19,20 @@
     "password strength",
     "security"
   ],
-  "main": "dist/vue-password-strength-meter.js",
-  "browser": "dist/vue-password-strength-meter.min.js",
+  "main": "dist/vue-password-strength-meter.umd.js",
+  "browser": "dist/vue-password-strength-meter.min.umd.js",
+  "module": "dist/vue-password-strength-meter.es.js",
   "scripts": {
     "play": "vue-play start",
     "play:build": "vue-play build",
     "dev": "node build/dev-server.js",
-    "build": "npm run release",
+    "build": "npm run release && npm run release-vite && npm run release-vite-min",
     "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
     "lint": "eslint --ext .js,.vue src test/unit/specs",
     "prepublish": "npm run lint && npm run build",
-    "release": "cross-env NODE_ENV=production webpack --progress --hide-modules --config  ./build/webpack.release.js && cross-env NODE_ENV=production webpack --progress --hide-modules --config  ./build/webpack.release.min.js"
+    "release": "cross-env NODE_ENV=production webpack --progress --hide-modules --config  ./build/webpack.release.js && cross-env NODE_ENV=production webpack --progress --hide-modules --config  ./build/webpack.release.min.js",
+    "release-vite": "vite build",
+    "release-vite-min": "vite build -c vite.config.min.js"
   },
   "files": [
     "dist"
@@ -113,5 +116,11 @@
       "webpack",
       "webpack-merge"
     ]
+  },
+  "dependencies": {
+    "@vitejs/plugin-vue": "^1.2.4",
+    "@vue/compiler-sfc": "^3.1.2",
+    "sass": "^1.35.1",
+    "vite": "^2.3.8"
   }
 }

src/components/PasswordStrengthMeter.vue

@@ -9,7 +9,7 @@
         :type="inputType"
         :ref="referenceValue"
         :class="[defaultClass, $attrs.disabled ? disabledClass : '']"
-        :value="value"
+        :value="modelValue"
         @input="evt => emitValue('input', evt.target.value)"
         @blur="evt => emitValue('blur', evt.target.value)"
         @focus="evt => emitValue('focus', evt.target.value)"
@@ -62,7 +62,7 @@
        * Binded value
        * @type {Object}
        */
-      value: {
+      modelValue: {
         type: String
       },
       /**
@@ -227,7 +227,11 @@
         }
       },
       emitValue (type, value) {
-        this.$emit(type, value)
+        if (type === 'input') {
+          this.$emit('update:modelValue', value)
+        } else {
+          this.$emit(type, value)
+        }
         this.password = value
       }
     },
@@ -281,7 +285,7 @@
     },
 
     watch: {
-      value (newValue) {
+      modelValue (newValue) {
         if (this.strengthMeterOnly) {
           this.emitValue('input', newValue)
         }

src/index-vite.js

@@ -0,0 +1,3 @@
+import Password from './components/PasswordStrengthMeter.vue'
+
+export default Password

vite.config.js

@@ -0,0 +1,8 @@
+// vite.config.js
+const config = require('./vite.config.min')
+const pkgName = require('./package.json').name
+
+config.build.lib.fileName = pkgName;
+config.build.minify = false;
+
+module.exports = config

vite.config.min.js

@@ -0,0 +1,31 @@
+// vite.config.js
+const path = require('path')
+const Vue = require('@vitejs/plugin-vue')
+const pkgName = require('./package.json').name
+
+module.exports = {
+  plugins: [
+    Vue(),
+  ],
+  build: {
+    emptyOutDir: false,
+    lib: {
+      entry: path.resolve(__dirname, 'src/index-vite.js'),
+      name: 'Password',
+      fileName: `${pkgName}.min`
+    },
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: ['vue', 'zxcvbn'],
+      output: {
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        globals: {
+          vue: 'Vue',
+          zxcvbn: 'zxcvbn'
+        }
+      }
+    }
+  }
+}