Vue JS - Issue adding multiple components

Question

I'm new to Vue JS and I've read several different articles online and I can't figure out how to display my component. I'm using Laravel 5.5.

I have a login view page with the following:

<div id="app">
    <div class="login-box">
        <login-form></login-form>
    </div><!-- /.login-box -->
</div>

I created a Login.vue page at /components/Auth/Login.vue:

<template>
    <div class="login-box-body">
        <p class="login-box-msg"> Sign in to start your session. </p>
        <form action="{{ url('/login') }}" method="post">
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <div class="form-group has-feedback">
                <input type="text" class="form-control" placeholder="Username" name="username"/>
                <span class="glyphicon glyphicon-user form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" class="form-control" placeholder="Password" name="password"/>
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="row">
                <div class="col-xs-8">
                    <div class="checkbox icheck">
                        <label>
                            <input type="checkbox" name="remember"> Remember Me
                        </label>
                    </div>
                </div>
                <div class="col-xs-4">
                    <button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
                </div>
            </div>
        </form>
        <a href="{{ url('/password/reset') }}"> Forgot Password? </a><br>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

I've registered it in the app.js file:

require('./bootstrap');

Vue.component('example', require('./components/Example.vue'));
Vue.component('login-form', require('./components/Auth/Login.vue'));

const app = new Vue({
    el: '#app',

});

I'm getting the error, [Vue warn]: Unknown custom element: <login-form> - did you register the component correctly? For recursive components, make sure to provide the "name" option. (found in root instance).

I've registered it in app.js as seen above and if I use <example></example> it appears correctly.

I changed the Example.vue to the template file and it didn't update -it's still showing the old template. How can I get this to appear?

try to provide a name for your login component as it says in the error text. to do this add name: 'login-form', in the exported object at Login.vue — oniondomes
– oniondomes, Commented Feb 10, 2018 at 22:24
@oniondomes like this? export default { name:'login-form', mounted() { console.log('Component mounted.') } } - tried that and still getting the same error. — ahinkle
– ahinkle, Commented Feb 10, 2018 at 22:32
I just trying to help by gues, but try to get rid of these inline requires. const Login = require('./components/Auth/Login.vue'); right after the bootstrap line. If it still doesn't work, examine its value — oniondomes
– oniondomes, Commented Feb 10, 2018 at 22:55
Can you update your question and include code from bootstrap.js file in resources/assets/js folder? — Nikola Gavric
– Nikola Gavric, Commented Feb 10, 2018 at 23:53
@NikolaGavric its the default laravel setup...github.com/laravel/laravel — ahinkle
– ahinkle, Commented Feb 11, 2018 at 4:32

Slava Knyazev · Accepted Answer · 2018-02-10 23:58:26Z

3

I recall struggling with the same issue a few weeks back.

In short form, the fix is to not do it like that.

Instead, you want to register each component explicitly as such:

require('./bootstrap');

const Example =  require('./components/Example.vue');
const Login = require('./components/Auth/Login.vue');

const app = new Vue({
    el: '#app',
    components: { Example, Login }
});

The above has to be done not only for the Vue but for all nested components as well.

answered Feb 10, 2018 at 23:58

Slava Knyazev

6,0991 gold badge27 silver badges52 bronze badges

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

2 Comments

Nikola Gavric Over a year ago

While this might fix the issue, here is the reference registering global and local components: vuejs.org/v2/guide/components.html#Using-Components

ahinkle Over a year ago

Hmm, still having some issues. I'm trying to use the tag, <login-form> and with Laravel it seems like it's not even picking up this vue file in resources/js/app.js do I need to move this to public/js/..etc? This is the base install of Laravel - nothing changed.

Nikola Gavric · Accepted Answer · 2018-02-11 12:41:32Z

0

Your problem is what I thought it is, but I thought that line was in bootstrap.js thats why I wanted to see that file, anyhow, you will notice how you never imported the Vue inside of your app.js and from the laravel starter project, that line is inside app.js not bootstrap.js and just by looking at your app.js I saw you are missing

window.Vue = require('vue');

So my guess is by adding this line just under require('./bootstrap.js'); your app will register bothVue` components

answered Feb 11, 2018 at 12:41

Nikola Gavric

3,5331 gold badge10 silver badges16 bronze badges

Collectives™ on Stack Overflow

Vue JS - Issue adding multiple components

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related