What is the name of my Vue component?

Viewed 4410

I'm trying to use Vue for a little project. I started with only client code. So when I did

const mv = new Vue({...});

I was able to access to the component from outside with a mv.
Now I'm using Vue.cli, so I define my component inside a mv.vue and then I have

export default {
    data () {}
    }

Here, how can I get the nme of my component?

Thanks for any reply or hint :)

3 Answers

To expand on the very good @vamsi-krishna answer, and update it, I've discovered that Vue now often puts a prefix on the $vnode.tag along the lines of vue-component-3-YourComponentName.

You can fix this by using the following code. And perhaps, just in case of a missing tag, fall back to the ID of the root element in the component.

Occasionally, Vue doesn't pass back a component at all in its errorHandler and warnHandler global events. So I've handled that scenario first.

if (!vm){
    return '[unknown]'
}

if (vm.$vnode.tag) {
    const res = vm.$vnode.tag
    return res.replace(/vue-component-\d+-/i, '')
}

if (vm.$el.id) {
    return vm.$el.id
}
Related