Vue is not detecting component

Question

I have two components in my Vue, 'navbar' and 'articles'. 'articles' is working fine, 'navbar' is not. I am getting the error of "unknown custom element : did you register the component correctly?" Here is my code.

Navbar.vue

<template>
    <nav class="navbar navbar-expand-sm navbar-dark bg-info mb-2">
        <div class="container">
            <a href="#" class="navbar-brand">Testing Vue</a>
        </div>
    </nav>
</template>

app.js

Vue.component('navbar', require('./components/Navbar.vue'));
Vue.component('articles', require('./components/Articles.vue'));


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

blade.php

<body>
    <div id="app">
        <navbar></navbar>
        <div class="container">
            <articles></articles>
        </div>
    </div>


    <script src="{{asset('js/app.js')}}"></script>    
 </body>

Your Navbar.vue has no model. You cannot only use a template. You need a default export (or, as you're using require, module.exports = vm. — connexo
– connexo, Commented Mar 5, 2019 at 9:19
What is your frontend build setup? Webpack? Maybe you need to import the components instead of requiring them. There's also a chance the name should not be navbar as it might conflict with html tags. That's why you typically should prefix your custom components. E.g. Vue.component('vue-navbar' ...) — Frnak
– Frnak, Commented Mar 5, 2019 at 9:19

connexo · Accepted Answer · 2019-03-05 13:43:36Z

1

Your Navbar.vue has no model. You cannot only use a template. You need a default export (or, as you're using require, module.exports):

<template>
    <nav class="navbar navbar-expand-sm navbar-dark bg-info mb-2">
        <div class="container">
            <a href="#" class="navbar-brand">Testing Vue</a>
        </div>
    </nav>
</template>
<script>
  module.exports = {
    name: 'navbar',
    data: function() {
      return {}
    }
  }
</script>

edited Mar 5, 2019 at 13:43

answered Mar 5, 2019 at 9:24

connexo

57.2k15 gold badges112 silver badges149 bronze badges

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

Collectives™ on Stack Overflow

Vue is not detecting component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related