Vuejs: no-unused-vars

Question

I have a simple code in Vuejs and I need to import a component. I took a look at the documentation and looked it up online, but I can’t see where I’m going wrong. From what I understand, just use the component name as a tag, right? So why do I keep getting error no-unused-vars?

The export:

<script>
export default {
    name: "HelloWorld",
    props: {
        msg: String
    }
};
</script>

Importing:

import HelloWorld from "./components/HelloWorld"

And a part of the place where I call the component:

<template>

  <div>

    <div id="slogan" class="text-center">

      <h1>NameGator <span class="fa fa-coffee"></span></h1>
      <br/>
      <h6 class="text-secondary">Gerador de nomes utilizando <kbd>Vue.JS</kbd></h6>

    </div>

    <HelloWorld></HelloWorld>

I didn’t want to add all the code because it would be too long, and that’s not my goal.

Answer 1

In the scripts section of your Vue code, you should add the key components. As follows:

<template>
  <div>
    <LeadInfo></LeadInfo>
    <Container></Container>
  </div>
</template>

<script>
import LeadInfo from "@/components/LeadInfo.vue";
import Container from "@/components/Container.vue";
export default {
  name: "Home",
  components: {
    LeadInfo,
    Container
  }
};
</script>

As soon as you add this code the error message will disappear.

Mainly check the code that is inside the tag script. Add the Components key, then add the component you want to use to your template.

I hope I’ve helped.