Неизвестный пользовательский элемент Vue с Laravel

Question

Я продолжаю получать в новом проекте следующую ошибку консоли:

[Vue warn]: неизвестный пользовательский элемент: - вы правильно зарегистрировали компонент? Для рекурсивных компонентов обязательно укажите опцию «name».

Но я зарегистрировался, как и любой другой компонент, но он не работает в новом проекте.

Это app.js:

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

Это Vue по умолчанию от Laravel.

Компонент Login выглядит следующим образом:

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

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

Но что я делаю не так, что он не распознает это?

Answer 1

Попробуйте с этим, так как я не могу видеть, где вы монтируете свое "приложение"

import LoginComponent from './components/LoginComponent';

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

Я обычно делаю что-то вроде:

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

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

Тогда в LoginApp.vue я бы сделал что-то вроде этого:

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

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