Vuejs import component in another component

Question

I created a dashboard.vue component and I imported table.vue component into it but the table.vue doesn't appear in my web page and in the vue.dev tools.

When I import the table.vue in app.vue there's no issue.

Below my files.

Thanks in advance!

//dashboard.vue

<template>
  <div>

  <table></table>

  </div>
</template>

<script>


import table from "./table";

 export default {
  name: 'Dashboard',
  component: {
    table, 
  }

}
</script>


<style >

</style>

//table.vue

<template>
  <div>
      <p>Test</p>

  </div>
</template>

<script>





export default {
  name: 'Table',

}
  </script>

Welcome, can you upload your code on here: codesandbox.io

Ebrahim
– Ebrahim

2020-04-10 19:03:18 +00:00
Commented Apr 10, 2020 at 19:03 — Ebrahim
– Ebrahim, Commented Apr 10, 2020 at 19:03

Ohgodwhy · Accepted Answer · 2023-01-09 22:02:48Z

2

You cannot name components the same as reserved HTML elements. Change it to my-table.

You'll need to map it:

components: {
    'my-table': table, 
  }

edited Jan 9, 2023 at 22:02

answered Apr 10, 2020 at 17:00

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

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

4 Comments

Mehdi Over a year ago

I replaced all table by mytable and I get

Mehdi Over a year ago

Unknown custom element: <mytable> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> <Dashboard> at src/components/Dashboard.vue <App> at src/App.vue <Root>

Mehdi Over a year ago

when I import it in the app.vue there's no issue with both "table" and 'mytable"

Query Over a year ago

shouldn't it be "components" not "component"?

Collectives™ on Stack Overflow

Vuejs import component in another component

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related