Integration with Vue Dev Tools

[jonagoldman]

It seems that Vue Dev Tools does not detect Voie components tree. It seems to detect only the root component.

[inca]

Yep, even without looking into Vue Dev Tools I can tell that currently normal parent-child relationship between Vue component is not maintained (e.g. child views are not accessible in this.$children of parent and this.$parent is not set on child).

Looks like I need to look for a way to integrate views a bit "deeper" into Vue component tree model than just calling new SubViewComponent({ el: nearestViewSlot }).

[inca]

Ok, on a closer look it turns out to be pretty straightforward: all we need is to specify parent on component instantiation. I'll ship new minor release within a day or two, hopefully, it would also fix devtools :)

[jonagoldman]

👍 thanks!

[inca]

739fa2d fixes parent-children relationships between components, so they now show up in DevTools.

Another problem is that all subviews are shown there as "Anonymous Component" (setting component name doesn't help). I'd appreciate any suggestions :)

[jonagoldman]

Great! And I'll take a look at the "Anonymous Component" issue.

[inca]

Also it does not detect changes in "Live mode", but it may be related to how Vue DevTools work

[jonagoldman]

I tried to set the component name in two ways.

1. Inside the component itself:

// MyComponent.vue
<script>
export default {
  name: 'MyComponent'
};
</script>

2. Inside the component object in Voie state:

// root.js
app.add('myroute', {
  component: {
    template: MyComponent,
    name: 'MyComponent'
  }
});

Digging inside the code I see that in both ways the component name is set correctly by Vue, but I could not find why it's not shown in Vue Dev Tools.

I found that in vue-router, only option 2 will correctly set the name so I looked through their code too, but I can't really figure out how the internals works.

[inca]

Good news, in v0.5.1 component names are assigned automatically, so we can see a pretty picture in Dev Tools without any additional hassle:

The second problem (Dev Tools not responding to navigation) still persists though :(

[inca]

Closing it since Vue Dev Tools doesn't perform scan when children are destroyed and re-attached (which is a part of Vue.js instance lifecycle). Please open an issue in Vue DevTools.

[airtonix]

Seems VueDevTools properly responds to navigation now. If it isn't then it's because a component is in error (template is a fragment is the most common cause)