CODEWITHSUNDEEP
vue.jsvuejs2vue-component
sazr
sazr

Reputation: 25928

How does Vue.js know this markup is the component?

How does Vue.js know <my-component> equals/is MyComponent?

<template>
    <!-- Vue.js correctly inserts the component here
         But how does it know my-component = MyComponent? -->
    <my-component></my-component>
</template>

<script type="text/javascript">
import MyComponent from '../MyComponent.vue'

export default {

    components: {
        MyComponent
    }
}

</script>

Upvotes: 1

Views: 563

Answers (1)

skribe
skribe

Reputation: 3615

It is a fairly standard convention that APIs like Vue has will convert between kebab-case and PascalCase / camelCase because HTML is case insensitive.

See this info here: https://v2.vuejs.org/v2/style-guide/#Component-name-casing-in-JS-JSX-strongly-recommended

More specifically it "knows" because vue contains methods to parse camelCase, kebab-case (snake-case) in strings, props, etc.

You can see how this might be done in the util.js file found in vue/src/shared/util.js around line 157. see camelize and hyphenate

I believe PascalCase is simply handled using camelize combined with thecapitalize utility. Something like...

var camelized = camelize();
var pascalized = capitalize(camelized);

Upvotes: 1

Related Questions