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>

Answer 1

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, 
  }