Unknown custom element Vue with Laravel

Question

I'm keep getting in a new project the following console error:

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

But I registered like every other component, but it's not working in a new project.

This is the app.js:

require('./bootstrap');
window.Vue = require('vue');
Vue.component('login-component', require('./components/LoginComponent.vue'));
const app = new Vue({
    el: '#app',
});

It's the default Vue from Laravel.

The LoginCompontent looks like this:

<template>
    <form class="default-form">
        <h1>Login</h1>
    </form>
</template>

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

But what am I doing wrong that it doesn't recognize it?

Erubiel Erubiel · Accepted Answer · 2018-08-28T13:59:27

Try with this, since i cannot see where are you mounting your "app"

import LoginComponent from './components/LoginComponent';

const app = new Vue({
    el: '#app',
    render: h => h(LoginComponent)
});

I usually do something like:

import LoginApp from './components/LoginApp.vue';

const app = new Vue({
    el: '#app',
    render: h => h(LoginApp)
});

Then in LoginApp.vue i would do something like this:

<template>
   <div>
      <login-component></login-component>
   </div>
</template>

Vue.component('LoginComponent', require('.components/LoginComponent'));
<script>
    export default {
        mounted() {
            console.log('Login Component mounted.');
        },
    }
</script>

Unknown custom element Vue with Laravel

1 Answers