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

Question

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>

score 13 · Accepted Answer · edited Apr 06 '22 at 03:12

13

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.

edited Apr 06 '22 at 03:12

emen

5,678
10
56
92

answered Feb 21 '22 at 12:10

Maximilian Stolz

244
2
3

How does one do that in a vue app? – AntonyMN Apr 15 '22 at 10:19
Right click the file name and rename it to whatever you'd like. – Dgloria Apr 27 '22 at 10:23
5

Are you seriously supposed to add meaningless words to a component that best fits as a single word? That seems like a horrible rule to be the default. – Jason Goemaat May 14 '22 at 18:10

score 4 · Answer 2 · edited Apr 06 '22 at 03:14

4

There are several things you can do to help:

To name two floods
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.

edited Apr 06 '22 at 03:14

emen

5,678
10
56
92

answered Feb 26 '22 at 11:23

Mohammad Hosseini

159
4

4

If you want to disable the rule, better specify it as off: ``` 'vue/multi-word-component-names': 'off', ``` – lifecoder Apr 18 '22 at 15:17
what is the name of file where i have to update above json? – sairfan Apr 25 '22 at 22:39
Hello, where do I add these lines specifically? – Lenin Zapata May 02 '22 at 15:38
1

@LeninZapata You can add this code on ```.eslintrc.js```. also you can check below link: https://stackoverflow.com/questions/70570973/how-to-disable-vue-multi-word-component-names-eslint-rule-for-just-one-vue-file – Mohammad Hosseini May 07 '22 at 12:47

score 3 · Answer 3 · answered May 06 '22 at 15:32

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)

answered May 06 '22 at 15:32

jory

51
2

My rules were listed under "eslintConfig" in `package.json`, and I had to *restart* VS Code for the change to take effect – Prid Jun 02 '22 at 14:59

score 0 · Answer 4 · answered Feb 27 '22 at 07:55

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

score 0 · Answer 5 · answered May 28 '22 at 14:35

0

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 />

answered May 28 '22 at 14:35

Mishen Thakshana

133
10

score -1 · Answer 6 · answered Apr 19 '22 at 10:56

-1

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

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

answered Apr 19 '22 at 10:56

Michel Fernandes

1,015
9
8

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

6 Answers6