Vue component with subcomponent

Question

I'm new to vue and I'm trying to create a reusable component with a grid inside it.

I've created two components one for the main Features with the title and some text, and another component for each grid item. However, I get the following 15:9 error 'GridItem' is not defined no-undef during compile.

Here is my code:

FeaturesWGrid.vue

<template>
  <div class="bg-gray-200 py-20 px-6 xl:px-40">
    <div class="text-center mb-16">
      <h1 class="text-xl lg:text-2xl uppercase font-bold mb-2">{{ mainTitle }}</h1>
      <p class="text-base">{{ mainText }}</p>
    </div>

    <div class="px-2">
      <div class="flex flex-col lg:flex-row flex-wrap">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FeaturesWGrid",

  props: {
    mainTitle: String,
    mainText: String
  }
};
</script>

GridItem.vue

<template>
  <div class="w-full lg:w-1/3 px-2">
    <div
      class="bg-white shadow-md mb-4 p-8 rounded transition duration-300 ease-in-out transform hover:-translate-y-1 hover:bg-gray-400"
    >
      <i class="fas text-gray-900 text-3xl pb-4" :class="icon"></i>
      <h2 class="text-xl font-medium mb-2">{{ gridTitle }}</h2>
      <p class="text-sm">{{ gridText }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: GridItem,
  props: {
    gridTitle: String,
    icon: String,
    gridText: String
  }
};
</script>

Page.vue

<template>
  <section>
    <!-- hero -->
    <div class="w-full h-64 bg-auto bg-no-repeat bg-center lg:bg-cover relative mc-hero">
      <div class="w-full h-full flex flex-col justify-center items-center text-white px-6">
        <div class="hero-text rounded text-center py-8 px-12">
          <p class="text-base lg:text-md uppercase font-medium">Powerful, secure &amp; affordable</p>
          <h1 class="text-xl md:text-3xl lg:text-5xl uppercase font-bold">Minecraft hosting</h1>
          <p class="text-base lg:text-md">Plans suitable for all budgets.</p>
        </div>
      </div>
    </div>

    <!-- all features -->
    <FeaturesWGrid mainTitle="Features" mainText="All plans come with the following as standard">
      <GridItem
        icon="fa-server"
        gridTitle="FTP Access"
        gridText="With full FTP access you can upload and install files to enhance your playing experience quickly."
      />
      <GridItem
        icon="fa-user-clock"
        gridTitle="24/7 Support"
        gridText="We know that issues can arise at any point, so our support is available around the clock."
      />
      <GridItem
        icon="fa-users"
        gridTitle="Support for subusers"
        gridText="We know that worlds need to be managed so we allow you to have as many admins you need."
      />
      <GridItem
        icon="fa-users"
        gridTitle="MySQL Databases"
        gridText="All products we offer come with a unlimited MySQL databases, to store all of your records safely."
      />
      <GridItem
        icon="fa-toolbox"
        gridTitle="Scheduled Tasks"
        gridText="We allow you to create scheduled tasks giving you more flexibility in how you handle your server."
      />
      <GridItem
        icon="fa-hdd"
        gridTitle="Daily Backups"
        gridText="All products come with free daily backups to keep all of your data safe so you don't need to worry."
      />
    </FeaturesWGrid>
  </section>
</template>

<script>
import FeaturesWGrid from "../components/FeaturesWGrid";
import GridItem from "../components/GridItem";

export default {
  name: "MinecraftHosting",

  components: {
    FeaturesWGrid,
    GridItem
  }
};
</script>

<style scoped>
.mc-hero {
  background-image: url("../assets/images/mc-background.png");
}
.hero-text {
  background-color: var(--whiteOpacity);
  backdrop-filter: blur(6px);
}
</style>

Any help would be great.

Gabriel Willemann Gabriel Willemann · Accepted Answer · 2020-03-04T15:56:35

The name of component need to be a String, see the code below:

GridItem.vue

<template>
  ...
</template>

<script>
export default {
  name: 'GridItem', // CHANGE HERE
  props: {
    gridTitle: String,
    icon: String,
    gridText: String
  }
};
</script>

Vue component with subcomponent

1 Answers