Vue devtools

[miljan-aleksic]

Similar to the React devtools issue with iframes Vue devtools doesn't recognize the Storybooks components. Seems the solution is also similar using the __VUE_DEVTOOLS_GLOBAL_HOOK__, although I'm actually not sure if that's up to date.

Anyhow, if finally Vue devtools is not compatible with Storybooks there should be a BIG warning about that.

[miljan-aleksic]

Ok, I just saw it is already like that in the Vue iframe file, but is not working for me.

Checking why...

[miljan-aleksic]

I see Events are getting registered, but no components. Can somebody confirm this or say it does work for him?

[kazupon]

related:
#1376
vuejs/devtools-v6#361

[ndelangen]

So to answer here, Currently this does not work,

It's a remote issue being addressed inside the vue-devtools. There's progress being made to resolve the issue.

The reason it's not working, is because the preview and vue binding is happening in an iframe.

[davidm-public]

any updates on this ?

[davidm-public]

curiously, vue-devtools works fine with vue-play, which also uses an iframe:
https://github.com/vue-play/vue-play

[ndelangen]

Wow, that IS curious! @kazupon any idea how that'd work?

@davidm-public are you able to view the components inside the iframe? because vue-play's manager UI is written in Vue, maybe that's what's being picked up? Debugging that isn't too valuable for developers I imagen.. But if they indeed are somehow able to pull off letting vue devtools connect to the vue instance inside the iFrame, we'd really like to know how to do that in storybook too.

[miljan-aleksic]

@davidm-public, @ndelangen assumption is correct, vue-devtools is picking up the VuePlay app and totally ignoring the components from the stories, which are inside an iFrame.

[cmrd-senya]

That might be useful to note that one is able to use devtools if they take the iframe link from the DOM and open it in a separate tab

[just-be-dev]

That's a stopgap solution, but it's pretty cumbersome.

#1376 added the hook to be able to support switching the default iframe. vuejs/devtools-v6#361 is opened and labeled as a discussion of how to handle iframe switching, but if that PR was merged as is it would at least have this functionality working. Please drop by that issue and pitch in to the discussion or give your support if it's something you're interested in.

[y-nk]

still no update on that issue ? is there a way to make it work temporarly ?

[just-be-dev]

@ynk The issue from vue-devtools side hasn't been merged yet. I pinged one of the maintainers... hopefully it'll get merged. 🤞