'Component name "Temp" should always be multi-word vue/multi-word-component-names

I am new In Vue.js Technology. I am getting an error while running my Vue application. Don't know where I am wrong, please try to fix my error.

This is the Temp File where I am getting an Error.

Temp.vue

<template>
  <div>
    <h1>Hello Ashish</h1>
    <h2>{{name}}</h2>
  </div>
</template>

<script>
export default {
  name: "Temp",
};
</script>

App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <!-- <HomeComp msg="Hello Harshal"/> -->
  <!-- <ForLoop/> -->
  <Temp/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
// import HomeComp from './components/HomeComp.vue';
// import ForLoop from './components/ForLoop.vue';
import Temp from './components/Temp.vue';


export default {
  name: 'App',
  components: {
    HelloWorld,
    // HomeComp,
    // ForLoop
    // Demo,
    Temp
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
javascripthtmlvue.js


Solution 1:[1]

Your linter just tells you, that your component name should be a multi word like MyTemp instead of just Temp.

You could rename the component or disable the linting rule.

Solution 2:[2]

There are several things you can do to help:

  1. To name two floods
  2. That you can add this code to your project:
{
   "vue/multi-word-component-names": ["error", {
      "ignores": []
   }]
}

Be sure to look at the full document on this site.

Solution 3:[3]

Add this to the "rules"-section at eslintrc.js if you don't want to change component names:

'vue/multi-word-component-names': 'off',

(Taken from the response of @lifecoder above, but can't add it as a comment due to my reputation)

Solution 4:[4]

So I also encounter the same error, All you have to do is change the name of the component from Temp to MyTemp or any other two word combination.

Here, you can also see and take the idea from the vue/multi-word-component-names Documentation, They explained things very clearly and is very helpful :-

https://eslint.vuejs.org/rules/multi-word-component-names.html

Solution 5:[5]

I recommend to change the name of the Component. Temp to MyTemp.

So replace every where you have Temp to MyTemp

And try by renaming the declaring part like this instead of MyTemp

<my-temp />

Solution 6:[6]

Just use a multiple word name, like "MyCounters", not only "Counter".

export default {
  name: "MeusContadores",
  components: {
    "app-contador": MeuContador,
  },
};

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 emen
Solution 2 emen
Solution 3 jory
Solution 4 nakli_batman
Solution 5 Mishen Thakshana
Solution 6 Michel Fernandes

Related Questions