Vue component won't load: did you register the component correctly?

0
votes

My router has:

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [{
            path: '/',
            name: 'login',
            component: Login,
        },
        {
            path: '/app',
            component: Container,
            children: [{
                path: '',
                name: 'home',
                component: Home
            }]

        },
    ],
});

My Container.vue has:

<template>
  <div>
    <Navigation />
    <router-view />
  </div>
</template>

<script>
import Navigation from "./Navigation.vue";
export default {
  name: "Container",
  props: {
    msg: String
  }
};
</script>

But I get an error:

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

found in

---> at src/components/Container.vue at src/App.vue

In my Navigation.vue, I have

<template>
  <nav class="nav nav-pills flex-column flex-sm-row">
    <a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a>
    <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
    <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
    <a
      class="flex-sm-fill text-sm-center nav-link disabled"
      href="#"
      tabindex="-1"
      aria-disabled="true"
    >Disabled</a>
  </nav>
</template>

<script>
export default {
  name: "Navigation"
};
</script>
1
javascriptvue.jsvuejs2vue-component

1 Answers

1
votes

You're missing to add components:{Navigation} in Container.vue component

export default {
  name: "Container",
  props: {
    msg: String
  },
components:{Navigation}
};