kaygero
5 months ago
206
7
Vue

Laravel Vuejs [Vue warn]: Unknown custom element: <router-link>

Posted 5 months ago by kaygero

Hi everyone! I'm trying to make this crud app with authentication. But i'm experiencing this error:

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

found in

---> <Navbar> at resources/js/components/Navbar.vue
       <Root>

I already installed vue router via npm and imported vue-router in my app.js

app.js:



require('./bootstrap');

window.Vue = require('vue');

import VueRouter from 'vue-router'

Vue.use(VueRouter)



 Vue.component('navbar', require('./components/Navbar.vue').default);
Vue.component('customers', require('./components/Customers.vue').default);
Vue.component('login', require('./components/auth/Login.vue').default);


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

Navbar.vue:

<template>
  <div id="app">
    <nav class="navbar navbar-expand-sm navbar-light mb-2 " style="background-color: #007E33;">
        <div class="container">
            <div class="container">
            </div>
            <form class="form-inline my-2 my-lg-0 navbar-nav ml-auto">
            <ul class="nav" >
                <li class="form-inline" v-if="!loggedIn"><router-link :to="{ name: 'login' }" style="color: #fafafa;"> Login </router-link></li>
                <li v-if="!loggedIn"><router-link :to="{ name: 'register' }" style="color: #fafafa;"> Register </router-link></li>
                <li v-if="loggedIn"><router-link :to="{ name: 'logout' }" style="color: #fafafa;"> Logout </router-link></li>
            </ul>
        </form>
        <!-- Login  -->
        </div>
    </nav>
  </div>
</template>


Thanks and Cheers!

Please sign in or create an account to participate in this conversation.