TheMiles197
TheMiles197

Reputation: 13

Vue router not recognizing child component of View

The router does not load the components inside my view...

this is the structure:

the view: (test works, finMain does not)

 <template>
  <div>
    <finMain></finMain>
    <p>test</p>

  </div>
</template>

<script>


export default {
  name: 'FinView',
  component: {
    finMain: () => import("../components/finance/finMain"),
  }
};
</script>

the router:

export default new Router({
    routes: [
        {
            path: "/financial",
            name: "financial",
            component: () => import("@/views/finView")
        }

    ],
});

if i put component: () => import("../components/finance/finMain") in my router it works... but not if I wrap the component inside the View..

This is the error i get:

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

found in

---> <FinView>
       <VApp>
         <App> at src/App.vue
           <Root>

Upvotes: 1

Views: 90

Answers (1)

liborkozak
liborkozak

Reputation: 482

I think that it's just misspelling, change component: { to components: {.

Upvotes: 1

Related Questions