How to fix Vue warn]: Unknown custom element: <password-input>?

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:

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

In the app.js

I have following script

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

Can someone guide me on how I fix it? I would appreciate if someone could guide me about this issue. I have seen this question but it does not resolved my problem.

It seem like your component doesn't have the name attribute: name: "password-input", after or before your props — Lamonde
– Lamonde, Commented Feb 13, 2019 at 14:44
Is that assuming you have imported this password-input component from the parent component? — Yom T.
– Yom T., Commented Feb 13, 2019 at 14:49
@jom I don't get your point, can you kindly explain it please. Sorry for that — Imran Abbas
– Imran Abbas, Commented Feb 13, 2019 at 14:50
Possible duplicate of "Unknown custom element" warning inside a component tag, but not outside of it — Yom T.
– Yom T., Commented Feb 13, 2019 at 15:15

jtlad · Accepted Answer · 2019-02-13 14:53:22Z

1

Was the component registered, usually when you create your Vue instance in app.js file.

const app = new Vue({
    el: '#app',
    components: { ExampleComponent } // Note!!!
});

You can find more information here: https://laracasts.com/discuss/channels/vue/little-help-with-laravel-and-vue-components-registration

answered Feb 13, 2019 at 14:53

jtlad

413 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Imran Abbas Over a year ago

What will be in { ExampleComponent } ?

Yom T. Over a year ago

@ImranAbbas You will import the password-input component into this parent, and place it in place of this ExampleComponent.

sl1der · Accepted Answer · 2019-07-22 20:16:10Z

0

Hey did you ever get to the bottom of this? I have been struggling all day with the same thing. The intermittent part has been killing my productivity lol. Anyway. Like you I was using ="this.myVar" in the <template> section instead of ="myVar" and when I changed that the issue hasn't been occurring since.

answered Jul 22, 2019 at 20:16

sl1der

1361 silver badge6 bronze badges

Collectives™ on Stack Overflow

How to fix Vue warn]: Unknown custom element: <password-input>?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related