Naming of ComponentInstance in ComponentTree view can be better for files ending in index.vue

[yongjun21]

A common pattern in directory structuring for hierarchical components is to use a index.vue file inside a directory containing all the sub components. Eg.

L App.vue
L ViewOne
  L index.vue
  L SubComponentA.vue
  L SubComponentB.vue
L ViewTwo
  L index.vue
  L SubComponentC.vue

In App.vue we will

import ViewOne from './ViewOne'
import ViewTwo from './ViewTwo'

In this case ViewOne and ViewTwo will show up as components named "Index" in the component tree contrary to the intention of the code writer.

I acknowledge an easy workaround is to have the developer add a "name" option to their components but think we should still open this up for discussion whether it should be included as a feature.

Ref: https://github.com/vuejs/vue-devtools/blob/master/src/backend/index.js#L344

Updated: It seems this problem only affects components loaded in using vue-router. May need to look into why $options._componentTag is not defined for components loaded with vue-router

[posva]

Can you show an example of your index.vue? It's the very first time I see this...
It makes sense for js files but I'm very sceptical for vue files

[yongjun21]

@posva Here's an example of how I organize my components in a directory. For example in DetailView folder, you can find the file index.vue.

Reason this work is because I've set up webpack to resolve .vue extensions

But I think the underlying problem is still $options._componentTag is not defined for components loaded with vue-router.

[posva]

In that case, can you boil down the error and provide a repro using this template?
Thanks!

[posva]

Closing due to inactivity. Please open a new issue with a reference to this one if you can follow up with more information.