CODEWITHSUNDEEP
vuejs2
Tony Merryfield
Tony Merryfield

Reputation: 403

Component rendering just the element name not the template contents

I have just started with Vue and am having an issue where the component isn't rendering for me.

<template>

    <div>
        <GalleryCollectionBlueBottles />
    </div>

</template>

<script>

    import GalleryCollectionBlueBottles from '@/components/collections/GalleryCollectionBlueBottles.vue'

    export default {
        name: 'GalleryCollections'
    }

</script>

When I inspect the page in a browser all I see is an element with the component name, not the contents of the component as usual.

The component above is called GalleryCollections and the component I'm importing is called GalleryCollectionBlueBottles.

Hope someone can help, also hoping this is something simple I've overlooked :)

Upvotes: 0

Views: 29

Answers (1)

onuriltan
onuriltan

Reputation: 3898

You need to also declare the component inside your script tag within the keyword components{ ... } like;

<script>
import GalleryCollectionBlueBottles from '@/components/collections/GalleryCollectionBlueBottles.vue'

export default {
  name: 'GalleryCollections',
  components: {
    GalleryCollectionBlueBottles
  }
}
</script>

Upvotes: 2

Related Questions