Компонент рендеринг только имя элемента, а не содержимое шаблона

Question

Я только что начал с Vue, и у меня возникла проблема, когда компонент не рендерится для меня.

<template>

    <div>
        <GalleryCollectionBlueBottles />
    </div>

</template>

<script>

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

    export default {
        name: 'GalleryCollections'
    }

</script>

Когда я проверяю страницу в браузере, все, что я вижу, это элемент с компонентомимя, а не содержимое компонента, как обычно.

Компонент выше называется GalleryCollections, а компонент, который я импортирую, называется GalleryCollectionBlueBottles.

Надеюсь, кто-то может помочь, такженадеясь, что это что-то простое, я упустил из виду:)

Answer 1

Вам также необходимо объявить компонент внутри тега скрипта в ключевом слове компоненты {...} like;

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

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