Vue component not being rendered with props [duplicate]

Question

I am beginner in Vue. I created a custom component and tried to bind everything exactly as shown in the starter Vue cli template. Here is the code.

Circle.vue

<template>
    <div :style="custom">
    </div>
</template>

<script>
export default {
    name:'Circle',
    props:{
        size:String,
        color:String
    },
    computed:{
        custom(){
            return {
                background:this.color,
                height:this.size,
                width:this.size
            }
        }
    }
}
</script>

inside my View.vue file

<script>
// :class="['']"
import Circle from '@/components/Circle.vue'
export default {
  name: "Landing",
  components:{
    Circle
  }
};
</script>

I tried to use it so

<Circle size="100px" color="#222222"/>

I tried printing the props as it is but it also doesnt work

<template>
    <div :style="custom">
        {{size}} {{color}}
    </div>
</template>

Nothing is being shown on the screen after I do this. I took help from here

Thanks for your time!

Answer 1

As mentioned in the docs:

Component names should always be multi-word, except for root App components, and built-in components provided by Vue, such as <transition> or <component>.

This prevents conflicts with existing and future HTML elements, since all HTML elements are a single word.

You have two options when defining component names:

With kebab-case

Vue.component('my-circle', { /* ... */ })

When defining a component with kebab-case, you must also use kebab-case when referencing its custom element, such as in <my-circle>.

With PascalCase

Vue.component('MyCircle', { /* ... */ })

When defining a component with PascalCase, you can use either case when referencing its custom element. That means both <my-circle> and <MyCircle> are acceptable.

Demo:

Vue.component('my-circle', {
  props: {
    size: String,
    color: String
  },
  template: '<div :style="custom"></div>',
  computed: {
    custom() {
      return {
        background: this.color,
        height: this.size,
        width: this.size
      }
    }
  }
})

new Vue({
  el: "#myApp"
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="myApp">
  <my-circle size="100px" color="#222222" />
</div>