CODEWITHSUNDEEP
javascripthtmlvue.jseslint
Tushar Bhakare
Tushar Bhakare

Reputation: 589

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>

Upvotes: 50

Views: 92544

Answers (10)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

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

Upvotes: 1

Ey&#252;p Okur
Ey&#252;p Okur

Reputation: 251

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

Upvotes: 25

Milad MGM
Milad MGM

Reputation: 1

In your component

Export default {
Name : '( this name )'

This name should be multi-word For example

(mytepm)📛
(MyTemp)🟢

Upvotes: 0

Joshua
Joshua

Reputation: 19

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

Upvotes: 1

Mishen Thakshana
Mishen Thakshana

Reputation: 143

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

Upvotes: 1

jory
jory

Reputation: 802

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)

Upvotes: 64

Michel Fernandes
Michel Fernandes

Reputation: 1275

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

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

Upvotes: 0

Mohammad Hosseini Parto
Mohammad Hosseini Parto

Reputation: 761

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.

Upvotes: 7

Maximilian Stolz
Maximilian Stolz

Reputation: 459

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.

Upvotes: 31

nakli_batman
nakli_batman

Reputation: 741

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

Upvotes: 1

Related Questions