Manually mouted component is not exposed in Vue Dev Tools

[it-xtech-dev]

Version

5.3.4

Browser and OS info

Chrome 90.0.4430.93

Steps to reproduce

I'm mouting a component manually, just like docs says: https://vuejs.org/v2/api/#vm-mount

var MyComponent = Vue.extend({
  template: '<div>Hello!</div>'
})

// or, render off-document and append afterwards:
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

What is expected?

I expect that component will be revealed in vue devtools component tree.

What is actually happening?

Component tree stays the same event when I referesh (in vue devtools menu)

---

Sandbox: https://4l3w20zomw.csb.app/ (based on article https://css-tricks.com/creating-vue-js-component-instances-programmatically/)

[Akryum]

I don't think we can actually handle this case. BTW in Vue 3 the app doesn't replace the DOM element anymore.

[it-xtech-dev]

:(

Is there any other legitimate way to add a component "dynamically" that will be recognized by vue dev tools?

[pleek91]

In the previous devtools version there was refresh button and if you hit that it would pick up vue apps that were manually mounted like this. Is that an option? I have a large app with many manually mounted vue apps. Its a Vue2 app btw.

[kikyous]

      const ComponentClass = Vue.extend(app);
      instance = new ComponentClass({ parent: this, propsData: historyItem });
      instance.$mount();

you should pass parent instance, then you component will display in components tree

[pleek91]

@kikyous can you give a more detailed example? It seems like you're mounting an entire vue app which is what I'm doing. What is app and what context is this?

[pleek91]

@Akryum it seems a little weird there isn't a way to handle this because devtools is aware at some extent of the component because if you use the select tool it will highlight the component and show its name. But when you click on it nothing happens (I assume because the app isn't registered in devtools).

[fyuanz]

@kikyous great

[lk77]

Hello,

i'm using AgGridVue component and it does not show up in devtool (anonymous), what are the steps to make a third party imported component work with devtool ? i've tried to name it, but it says it's read only

thanks !