Component not rendering when importing

Question

I have a a component here in src/components/aboutUs.vue

<template>
  <div>
    <h1>This is a component test</h1>
  </div>
</template>

And i have another vue file called Home.vue importing the component aboutUs.

  <template>
   <div class="home">
     <div>HELLO !</div>
     <aboutUs/>
   </div>
  </template>

    <script>
    import aboutUs from "@/components/aboutUs.vue";

    export default {
    name: "HomePage",
    components: aboutUs
    };
    </script>

But my app.vue only renders "HELLO !" from Home.vue. and not the aboutUs component template. Help please.

Ana Liza Pandac Ana Liza Pandac · Accepted Answer · 2019-01-11T11:22:26

3

votes

You have to wrap your App components in {}. See docs

components: {
 aboutUs
}

Component not rendering when importing

1 Answers