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 50 · Answer 1 · answered May 06 '22 at 15:32

50

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

654
5
3

5

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
updated `package.json` and still getting the error... don't have a `eslintrc.js` file, so I don't know where this should set... – monkut Sep 15 '22 at 01:20
@monkut Just create it in the project's root folder (the folder where .gitignore, README.md are located). – Seangle Dec 24 '22 at 08:10

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

26

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

6,050
11
57
94

answered Feb 21 '22 at 12:10

Maximilian Stolz

409
4
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
31

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
3

@JasonGoemaat It's like that because in the future default HTML tags may be created that can conflict with how you used components in your code. But it's kinda pointless, instead just force developers to have components in PascalCase. That way Vue knows if a tag has a capital letter, it's 100% a component. Also since it's declared in the 'components' object anyway, I don't know if this rule should really exist, just overwrite the potential HTML tag and that's all. – Seangle Oct 06 '22 at 10:02

score 23 · Answer 3 · edited Sep 23 '22 at 01:12

23

Add "rules": {"vue/multi-word-component-names": "off"} to eslintConfig in package.json

edited Sep 23 '22 at 01:12

Penny Liu

15,447
5
79
98

answered Jul 08 '22 at 19:54

Eyüp Okur

231
2
2

This had no impact. – Sn3akyP3t3 Jan 05 '23 at 21:10

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

7

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

6,050
11
57
94

answered Feb 26 '22 at 11:23

Mohammad Hosseini

575
2
7

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
2

@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 1 · Answer 5 · 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 1 · Answer 6 · answered May 28 '22 at 14:35

1

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

143
1
12

1

Why would you use kebab-case and how does it help here? Kebab case is the cause that this pointless rule exists, and it's only useful if you're not using SFC. – Seangle Dec 24 '22 at 08:14

score 0 · Answer 7 · answered Apr 19 '22 at 10:56

0

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,187
9
8

score 0 · Answer 8 · answered Jun 20 '22 at 11:11

0

Go to vue.config.js file

const { defineConfig } = require('@vue/cli-service')
  module.exports = defineConfig({
  transpileDependencies: true,
  // Add this line of code to disable lintOnSave
  lintOnSave: false
})

answered Jun 20 '22 at 11:11

Joshua

9
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Ethan Jun 20 '22 at 23:50
1

This answer is potentially harmful (to the workflow). It's like disabling ESLint but not completely. Better just disable the rule. Use @Joshua's answer only after reading [this](https://cli.vuejs.org/config/#lintonsave) – Seangle Oct 06 '22 at 10:06
1

Yeah this just disables linting until you explicitly lint the project. Don't follow this answer – Seangle Dec 24 '22 at 08:13

score 0 · Answer 9 · edited Aug 02 '22 at 06:17

0

In your component

Export default {
Name : '( this name )'

This name should be multi-word For example

(mytepm)
(MyTemp)

edited Aug 02 '22 at 06:17

Abdulla Nilam

36,589
17
64
85

answered Jul 30 '22 at 09:19

Milad MGM

1

score 0 · Answer 10 · answered Oct 28 '22 at 07:12

In <script setup> syntax the component name is inferred from the file name which should be written in PascalCase format like

TempComp.vue

or in kebab-case format :

temp-comp.vue

other format like tempComp or temp-Comp are accepted but they look bad

for more details please check rule-details

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

10 Answers10

Linked

Related