Vue3 support

[MINDoSOFT]

trafficstars

Hi there !

Thank you for this awesome library.

I tried to use it in a Vue3 project and it didn't work. The password value seems to keep only one character.

After investigating a bit I found these references about breaking changes in Vue3

• https://dev.to/ghalex/top-problems-i-got-switching-to-vue-3-28i6
• https://v3.vuejs.org/guide/migration/v-model.html#v-model-modifiers

If anyone else is trying to make this component compatible with Vue3 you need to make the following changes in src/components/PasswordStrengthMeter.vue

line 14:

        :value="modelValue"

line 62:

     emits: ['input', 'blur', 'focus', 'score', 'hide', 'show', 'update:modelValue', 'feedback'],

line 68:

      modelValue: {
        type: String
      },

line 232:

      emitValue (type, value) {
        if (type == 'input') {
          this.$emit('update:modelValue', value) // Changed in Vue 3
        }
        else {
          this.$emit(type, value)
        }
        this.password = value
      }

line 294:

    watch: {
      modelValue (newValue) {

This makes it work on my environment with [email protected] .