[Vue warn]: Missing required prop

Total
1
Shares

I am using Nuxt and trying to create Heading component. when try to use this component, it renders h1 tag properly but the problem i am facing is in the console. It shows [Vue warn]: Missing required prop: “level”. i don’t know why. I’m new to Vue and Nuxt.

My Heading.vue file

<template>
  <component :is="type" :level="level" class="heading">
    <slot />
  </component>
</template>

<script>
export default {
  props: {
    level: {
      type: Number,
      required: true
    }
  },
  computed: {
    type() {
      if (this.level === 1) {
        return "h1";
      } else if (this.level === 2) {
        return "h2";
      } else if (this.level === 3) {
        return "h3";
      } else if (this.level === 4) {
        return "h4";
      } else if (this.level === 5) {
        return "h5";
      } else {
        return "h6";
      }
    }
  }
};
</script>

My Page.vue file where i am using this component

<script>
import Btn from '~/components/Button/Button.vue'
import Heading from '~/components/Heading.vue'
export default {
    components: {
      Btn,
      Heading
    },
    data: () => ({
    columns: [
      {
        image: "banner-1.jpg",
        columnHeading: 'Column 1',
        columnDesc: 'Lorem ipsum '
      },
      {
        image: "banner-2.jpg",
        columnHeading: 'Column 2',
        columnDesc: 'Lorem ipsum '
      },
      {
        image: "banner-3.jpg",
        columnHeading: 'Column 3',
        columnDesc: 'Lorem ipsum dolor'
      }
    ]
  })
}



</script>

<template>
    <b-container>
      <Heading :level="1">test</Heading>
        <b-row class="py-5">
            <b-col cols="12" md="4" v-for="(items, index) in columns" :key="index">
                <img :src="`images/${items.image}`" alt=""/>
                <h5 class="my-3">{{ items.columnHeading }}</h5>
                <p>{{ items.columnDesc }}</p>
            </b-col>
        </b-row>
        <Btn to="/about">I'm a Button</Btn>
    </b-container>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

</style>

The error shows in the terminal

My Hero.vue file

<template>
<div class="position-relative">
  <parallax :speed-factor="0.3">
    <img src="~/assets/images/man.jpg" alt="Zed-FED" />
  </parallax>
  <div class="hero-text text-center">
    <Heading :level="3">Hey, I'm Zuber</Heading>
    <Heading :level="2">Web Dev</Heading>
    <Heading>I am a senior Web Developer of Classy Theme. 
I love to code, travel, music &amp; foods.</Heading>
  </div>
</div>
</template>

<script>
  import Parallax from 'vue-parallaxy'
  import Heading from '~/components/Heading.vue'
  export default {
    components: {
      Parallax,
      Heading
    }
  }
</script>

Solution

The problem is this bit of Hero.vue:

 <Heading>I am a senior Web Developer of Classy Theme. 
I love to code, travel, music &amp; foods.</Heading>

You aren’t passing the level.

Unrelated but in Heading.vue you should be able to change this:

<component :is="type" :level="level" class="heading">

to:

<component :is="type" class="heading">

The level isn’t required there unless you want to add a level attribute to your <h1>. You should be able to see the effect in the developer tools if you inspect the resulting element. There’ll be a level="1" in the DOM that you probably don’t need.

Leave a Reply

Your email address will not be published. Required fields are marked *