Search code examples
scopecomponentsvue.jsvue-router

Vue component not rendered inside router-view

recently I've been using vue in frontend and vue-router with it to shape a SPA.

My problem is that I am not able to access a component defined in main Vue instance:

import ElementComponent from './Element';

const app = new Vue({
   el: '#app',
   router,
   components: { Element: ElementComponent }
});

Whenever I do <element></element> within the #app scope the component gets rendered but I can not use the element inside a route component.

My routes are defined like this:

var routes = [
{ path: '/section/part', component: require('../views/Part') }];

And then provided to router instance:

 new VueRouter({routes});

Breakpoint whenever I try to call <element></element> inside Part component template I get this in vuedevtools: [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. (found in at C:\Users\Doe\project\js\views\Part.vue)

Solution

  • You need to import the component into the views/Part component. So do the same thing that you did in the main Vue instance, but only in the part component.

    I believe if you want to make components global you need to do use

    Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

    reference https://v2.vuejs.org/v2/guide/components.html#Registration