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

user_17104990 0
Viewed 32904

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>
eslint vue.js html javascript
9 Answers

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)

user_23751870

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.

user_114979510

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

user_185901940

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.

user_93535390

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

user_173920160

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
})
user_148402320

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

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

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

In your component

Export default {
Name : '( this name )'

This name should be multi-word For example

(mytepm)
(MyTemp)
user_192553170
Related