Skip to main content

Vue.js Component vs HTML Tag Names

So, here's a snippet taken from a Vue.js project:

export default {
    name: 'Room',
    components: {
        InfiniteLoading,
        Loader,
        SvgIcon,
        ...

But we don't see SvgIcon anywhere in the HTML template. We see this instead:

    <svg-icon name="emoji" :param="emojiReaction ? 'reaction' : ''" />

How does SvgIcon become svg-icon? By magic, it seems.

Oh, how I love C and its (almost) no-surprises syntax!