Name for component?

Not sure if we are doing something wrong or is a bug on vue, let me explain:

When we create a component we usually add ‘Component’ to the name, for example: export class SwitchButtonBoxComponent extends SwitchButtonComponent {}

When we add this component to his parent the only way that we’ve found to change his tag name is:

@Component({
    components: {
        'switch-button-box': SwitchButtonBoxComponent
    }
})

We have to do that because we don’t want the ‘Component’ word on the tag name (I think is a normal thing)

But this is not the best scenario, we’ve tried that:

export class SwitchButtonBoxComponent extends SwitchButtonComponent {
     name: 'switch-button-box'
}

and on the other side

@Component({
    components: {
        SwitchButtonBoxComponent
    }
})

But is not working, is there any alternative or suggestion?

Thanks!

[eladcandroid]

Why can’t we use this approach? (taken from “vue-class-component”)

import Vue from “vue”; import Component from “vue-class-component”; @Component({ name: “AnotherName” }) export default class YourName extends Vue { }

[kaorun343]

@CKGrafico

Hi.

Here is an explanation of name option. https://vuejs.org/v2/api/#name

Vue components don’t use it for defining their tag name, whereas Angular components do so.

Therefore, I recommend you to do like this below.

import SwitchButtonBox from './YourSwitchButtonComponentBoxPath'

@Component({
  components: {
    SwitchButtonBox
  }
}
})
export class YourComponent {
}