Get access to components name? about discussion HOT 10 CLOSED

A component's name and the registered ID is a one-to-many relationship, since the same constructor can be registered as a sub-component in multiple other components.

You can just give it a custom option when extending it:

Vue.component('my-thing', {
    name: 'mything'
})
// later
vm.$options.name // 'mything'

from discussion.

@adi518 it's been a long time, I've forgotten all of that,
but maybe you can try the code below? It's code from raven-js.
https://github.com/getsentry/raven-js/blob/master/plugins/vue.js

function formatComponentName(vm) {
  if (vm.$root === vm) {
    return 'root instance';
  }
  var name = vm._isVue ? vm.$options.name || vm.$options._componentTag : vm.name;
  return (
    (name ? 'component <' + name + '>' : 'anonymous component') +
    (vm._isVue && vm.$options.__file ? ' at ' + vm.$options.__file : '')
  );
}

from discussion.

Uh I'm a bit late to the party here, but as of Vue 2.4.2 I just tried using a global mixin:

Vue.mixin({
    created() {
        console.log(this.$options.name)
    }
});

And this does exactly what @malkomalko seems to be asking for. I'd wager a guess that this can be done from any single specific component and does not need to be done from from a global mixin. Hope this helps!

from discussion.

Sounds good, thanks.

from discussion.

@yyx990803 Can we have the name coming from the prop, my component looks like this

  name: 'name',
  props: ['name', 'data'],
  template: ``,

Now, I want the name to be whatever the parent sends me. Can I do that? I want to use these components for routing later.

Thanks

from discussion.

Does vue-loader provide a property to the component instance where we can find the original filename?
I need the automatically determined filename to be the component name, (without giving the name manually).

from discussion.

Oops, just found it out: https://github.com/vuejs/vue-devtools/blob/8e42bfec667489bb52e13b9885c1e684e0f1cc2a/src/backend/index.js#L328

const file = instance.$options.__file // injected by vue-loader
if (file) {
  return classify(basename(file, '.vue'))
}

from discussion.

@fritx does that work for you in production?

from discussion.

I'll give it a shot, thanks.

from discussion.

I noticed $options.__file isn't available if you try to read it in a global mixin, which is exactly what I need.

from discussion.