I've been working on resolving an error within a component, but unfortunately, I'm still encountering issues. The error message is as follows:
[Vue warn]: Unknown custom element: - have you registered the component correctly? For recursive components, ensure to provide the "name" option.
Within my password component script, I have the following code snippet:
<template>
<div class="form-group form-material floating" data-plugin="formMaterial">
<input id="password" type="password" class="form-control" name='password'>
<label class="floating-label">Create password</label>
<span class="password-info"><i class="fa fa-info-circle"></i></span>
<div class="password-rules">minimum 6 characters</div>
<span v-if="this.error != null" :class="['invalid-feedback', {'inline': this.error != null}]">
<strong>{{ error }}</strong>
</span>
</div>
</template>
<script>
import Password from 'password-strength-meter'
export default{
props: ['error'],
mounted: function(){
const $password = $('#password', this.$el);
$password.password({
showText: false,
animate: true,
});
}
}
</script>
<style lang="scss">
@import '~password-strength-meter/dist/password.min.css';
</style>
The issue at hand is that the Vue component fails to load upon page open and only disappears when refreshed.
When incorporating this into a Laravel blade file, I utilize the following syntax:
<password-input @if($errors->has('password')) :error="'{{$errors->first('password')}}'" @endif></password-input>
Additionally, within the app.js file, the script reads as follows:
new Vue({
el: '#app'
});
If anyone could provide guidance on rectifying this issue, it would be greatly appreciated. I referred to a similar query on Stack Overflow, but unfortunately, it did not resolve my problem.