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

Question

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>

@C2486 thanks that answers my question. If you create an answer I can accept it. — sazr
– sazr, Commented Apr 17, 2018 at 8:49

tony19 · Accepted Answer · 2022-07-15 05:14:02Z

1

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

edited Jul 15, 2022 at 5:14

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Apr 17, 2018 at 9:03

skribe

3,6254 gold badges30 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related