Why vue js component does not showing in laravel blade?

Question

I am trying to fix the following error from a component, but it's still failing. The error is the following

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

In my password component, following script, I have the following:

<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 problem is that the vue component is not loading when the page opens, and the error disappears on refresh.

In laravel blade, I am using it in the following way:

@if($errors->has('password')) :error="'{{$errors->first('password')}}'" @endif></password-input>

In the app.js

I have following script

Vue.component('password-input', require('./components/PasswordInput.vue'));

new Vue({
    el: '#app'
});

Can someone guide me on how I fix it? I would appreciate if someone could guide me about this issue.

Answer 1

I think this code is syntactically incorrect, or maybe you left out some parts of the code:

@if($errors->has('password')) :error="'{{$errors->first('password')}}'" @endif></password-input>

Could have been something like:

<password-input>
   if($errors->has('password')) :error="'{{$errors >first('password')}}'" @endif 
</password-input>

Answer 2

I agree that something seems weird about this line;

@if($errors->has('password')) :error="'{{$errors->first('password')}}'" @endif></password-input>

Did you add the opening part of the component's tag? I.e. <password-input @if($errors->has('password')) ...

---

But I don't think you can have an optional prop in a Vue component, so if there are no errors you wouldn't be passing anything to the Vue component.

Maybe try something like this:

<password-input
    :error="'{{ $errors->has('password') ? $errors->first('password') : null }}'"
></password-input>