注册第二个组件？ Vue.js Laravel6

Question

I have created a fresh Laravel6 project to work out how to register components...

I have cloned ExampleComponent.vue to ExampleComponent2.vue

// ExampleComponent2.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example2 Component</div>

                    <div class="card-body">
                        I'm an example2 component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

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

// app.js

Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('example-component2', require('./components/ExampleComponent2.vue').default);

// login.blade.php - I have placed this under the closing tag and @endsection to test on the login page...

<example-component2></example-component2>

I have run "npm run watch" in command line and there are no error messages...

When I load the login route, I open the console to see this error message?

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

(found in )

How do I register extra components???

Answer 1

// login.blade.php - I have placed this under the closing tag and @endsection to test on the login page...

You need an element with the id that you defined in your js/app.js:

const app = new Vue({
    el: '#app', // you need an element with id="app". Your vue component will replace this
});

Then put your component inside that element.

//login.blade.php

@extends('layouts.authentication')

@section('content')

<div id="app">
    <example-component2/>
</div>

@endsection