CODEWITHSUNDEEP
javascriptvue.jscomponentsfrontend
Kavipriya
Kavipriya

Reputation: 441

VueJs importing and using components with two different name

I have a component called Sidebar in SideBar.vue file and have imported in index.vue as below, It is working.

<template>
  <div>
    <side-bar @close="isOpen = false" />
  </div>
</template>

import SideBar from '@/common/SideBar';
export default {
  components: {
    SideBar,
  },
}

If I declared in the components like below, it is also working.

<template>
  <div>
    <some-thing @close="isOpen = false" />
  </div>
</template>

import SideBar from '@/common/SideBar';
export default {
  components: {
    'some-thing': SideBar,
  },
}

My question is how does vue map side-bar with SideBar automatically?

Upvotes: 0

Views: 1292

Answers (1)

s4k1b
s4k1b

Reputation: 3085

Vue automatically by default maps CamelCase components with kebab-case names. So your component name SideBar which is in camelCase automatically gets mapped with name side-bar which is in kebab-case. In the html template it is advised to use kebab case instead of camelCase and in Javascript it is advised to use camelCase instead of kebab-case. They are just styling conventions. You can use either of the styles in your html template or in javascript code. It will work.

I suggest you read more about it from here

Upvotes: 2

Related Questions