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: https://github.com/storybooks/storybook/pull/1376 https://github.com/vuejs/vue-devtools/pull/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

[zephraph]

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

https://github.com/storybooks/storybook/pull/1376 added the hook to be able to support switching the default iframe. https://github.com/vuejs/vue-devtools/pull/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 ?

[zephraph]

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

[davidmoshal]

Try https://github.com/asvae/vue-component-tree

It's excellent

[igor-dv]

@ndelangen, didn't you fix this?

[davidm-public]

@igor-dv vue-component-tree has been renamed vue-book: https://github.com/asvae/vue-book it's pure Vue, no need to run Vue inside react.

[y-nk]

@zephraph shouldn't it be like vue-devtools should add a manual "please select an iframe to inspect" kindof feature ?

[zephraph]

That's a possibility. https://github.com/vuejs/vue-devtools/pull/361 really already does everything that's needed though. Sure, if they wanted, they could actually support it in the UI. Ultimately this would be enough... unfortunately, it doesn't look like there's any movement from that side.

[y-nk]

@zephraph i'll try my luck and ask ; in the meantime, what are the possibilities to fix this issue on storybook side ?

[ndelangen]

@y-nk In the next version I'll introduce an eject button to 'eject' the iframe from the manager.

This will give the dev tools direct access there.

Hope that helps.

[y-nk]

@zephraph @ndelangen I kinda made the devtools work with iframes, at least in its dev environment. I commented my progress here : https://github.com/vuejs/vue-devtools/pull/361

My next goal is to try to build this devtools version to make it testable with storybook. hopefully it should work fine.

[ndelangen]

@y-nk that is freaking awesome!

[igor-dv]

@ndelangen, maybe it worth fixing it for the v4?

[y-nk]

@ndelangen sadly the Vue team doesn't seem to respond, i wonder if they have seen the post.

[ndelangen]

@kazupon Do you think you could help us out here? if @y-nk can help getting this feature working that'd be amazing for vue users!

[gapipro]

Current solution is to use this: https://github.com/vuejs/vue-devtools/blob/master/shells/electron/README.md

And inject script tag into iframe using https://storybook.js.org/configurations/add-custom-head-tags/

By doing so you get a standalone DevTools with working inspection.

[jackkoppa]

Can confirm the above solution worked well as a stopgap for me, thanks a lot @gapipro. Though it seems we only have the option to install the devtools package globally (rather than as a project dependency), so as to still be able to inject the script into the iframe. And it's not immediately obvious how to strip out the Storybook <script> tag when deploying Storybook to a live environment.

Any efforts from the Storybook team on this would be very much appreciated.

[y-nk]

@gapipro @jackkoppa this doesn't solve the bug on the Vue.js part, rather fixing it for storybook only... the problem is the lack of choice of frame in the devtools, which would solve storybook and all the other environments using iframes, without having to force people to use the electron app. I've added a quick and dirty fix months ago as a proof of concept but no-one seems to care.

[ndelangen]

@y-nk (over at storybook) We do care, I think at the devTools people care too, but are likely overloaded with work.

Did anyone reply to your POC?

What are the steps to take this POC to a real production worthy solution? Perhaps the reason you're not getting any feedback is that a POC implies it still needs a lot of work from current maintainers to get right.

If we can minimize the amount of work they need to do to get this released, I think we have a better chance of it getting out there.

I'm super appreciative of your efforts.

[jahsome]

Thanks for the workaround, @gapipro.

Just a note for any copy-paste warriors like myself, don't forget to restart storybook once the config file has been created if using the standalone dev tools instance as described above.

[y-nk]

@ndelangen i've been submitting to them a workable fork, that you can checkout and build properly to test the feature rather than a PR. I made a pretty long post on the most active discussion about iframe support in their repo about it, to make sure I'd get attention.

I decided to go this way because I believe that the current architecture of vue-devtools is honestly not ideal and i really don't want to contribute to add more spaghetti code than there already is.

I provided a POC on purpose, but I'm also trying to find time at home to restructure it totally without any breaking changes (quite a challenge), for which i will probably submit a PR around Christmas. I hope it will be appreciated, but I have a feeling it will probably get rejected as it looks a lot like the project has been almost rewritten from scratch...

The current state of this POC only lacks of styling for now, which i honestly didn't code bc/ i wanted to go as fast as possible with the most minimal impact.

The only process you need to do to appreciate the work would be to clone the fork and build the electron app. Then, to evaluate the code, only a diff of my commits from the latest "not my commit" state. There are approximately... 50 lines of dirty javascript as is so i don't think it's such an effort but I would understand they have better target with Vue3 than maintaining such a mess – for which, I would love to do (if any Vue people read this...)

Sorry it went off topic a bit, and thanks a lot for your support. It means to me :)

[lfkwtz]

@jackkoppa global install isn't required, running fine here on a dev dependency

[github-actions[bot]]

Automention: Hey @backbone87 @elevatebart, you've been tagged! Can you give a hand here?

[fgm]

In the meantime, zero-code/zero-conf hack: inspect the iframe in devtools, and right-click on "Open in new tab" on its "src" attribute, and you get the inspected component with the working devtools. Of course, you'll need to do it again every time you want to inspect another component.

[blocka]

the latest versions of storybook have a "pop out" mode, which basically does this for you

On Wed, Dec 4, 2019 at 11:30 AM Frédéric G. MARAND notifications@github.com wrote:

In the meantime, zero-code/zero-conf hack: inspect the iframe in devtools, and right-click on "Open in new tab" on its "src" attribute, and you get the inspected component with the working devtools. Of course, you'll need to do it again every time you want to inspect another component.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/storybookjs/storybook/issues/1708?email_source=notifications&email_token=AAAKROROGQQRKIKWA5ZMKY3QW7LLDA5CNFSM4DXZQUZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEF5TRXI#issuecomment-561723613, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAKROU32Y6IUMWBS3Z36NTQW7LLDANCNFSM4DXZQUZA .

[fgm]

That's what I thought, and was my first idea, but it doesn't actually enable the Vue devtools, for some reason I couldn't guess. EDIT: I was not using the same button mentioned by @blocka.

[blocka]

it does...it opens up the iframe in a new window.

On Wed, Dec 4, 2019 at 1:18 PM Frédéric G. MARAND notifications@github.com wrote:

That's what I thought, and was my first idea, but it doesn't actually enable the Vue devtools, for some reason I couldn't guess.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/storybookjs/storybook/issues/1708?email_source=notifications&email_token=AAAKROWXI7Y5274G3R4YYRTQW7X7XA5CNFSM4DXZQUZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEF574GY#issuecomment-561774107, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAKRORJDDCZPYQW43IYAGLQW7X7XANCNFSM4DXZQUZA .

[fgm]

It looks like it should but it does not. Here are two screenshots, one with the popout mode:

...which doesn't enable the tools, and the other one with the manual open which enables the Vue tools

EDIT: my bad, we were not talking about the same button. So for whomever reads this, the "pop out" button is the second one, not the first one. Due the icon being similar to the one used by macOS to share content, I thought it was a share link, and only considered the maximizing button.

[niedzielski]

the latest versions of storybook have a "pop out" mode, which basically does this for you

I was scouring the internet for "pop out mode" and didn't find anything :laughing: I happened upon this mode today though! It's the button second from the right:

[ricardok1]

Is this still open?

[jackkoppa]

I'd be OK closing, after we can update the docs section here to explain the "Pop Out" mode, which does indeed solve the problems described here much more simply than enabling a local dev tools, for example

https://github.com/storybookjs/storybook/blob/next/docs/src/pages/guides/guide-vue/index.md

[blocka]

it's still annoying to have to go into popout mode. Is it not possible to do at all when it's in an iframe? Do react dev tools have the same issue in storybook?

On Mon, Jun 22, 2020 at 6:26 PM Jack Koppa notifications@github.com wrote:

I'd be OK closing, after we can update the docs section here to explain the "Pop Out" mode, which does indeed solve the problems described here much more simply than enabling a local dev tools, for example

https://github.com/storybookjs/storybook/blob/next/docs/src/pages/guides/guide-vue/index.md

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/storybookjs/storybook/issues/1708#issuecomment-647629593, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAKROXVKFCLTN23ZYNMMYDRX6A3RANCNFSM4DXZQUZA .

[shilman]

@blocka i think react devtools works using this hook:

https://github.com/storybookjs/storybook/blob/master/lib/core/src/server/templates/base-preview-head.html#L71-L73

somebody also added a hook for Vue devtools, but I guess Vue devtools doesn't support it

[blocka]

So something has to be done in vue devtools for this to work?

[shilman]

I'm not familiar with Vue devtools, but that's my guess. I believe the way we support React devtools is through an API that they provide and we write to, since there is no general way to solve this iframe issue without security implications.

[braddialpad]

I'd be OK closing, after we can update the docs section here to explain the "Pop Out" mode, which does indeed solve the problems described here much more simply than enabling a local dev tools, for example

https://github.com/storybookjs/storybook/blob/next/docs/src/pages/guides/guide-vue/index.md

Link seems to be broken now, what is this "Pop Out" mode mentioned?

[unr]

@braddialpad I eventually found it through several other discussions on the same thing. They meant "pop out" the iframe, as in view the iframe source directly.

This will let you use vue dev tools.

[yannbf]

@braddialpad @unr There is a button on top right that opens the story in its own url:

@domyen I feel like this feature should have a proper name to avoid confusion. WDYT? Currently it says "open canvas in a new tab", some people say "pop out", others say "eject"...

[ndelangen]

Yann is correct, that button is for this purpose exactly. Storybook will make sure all args and globals will be set correctly.

[sethidden]

Good news

If you download the latest beta of Vue devtools and open the storybook main page you'll see this:

---

As you can see that's the main storybook page, not the bare iframe view.

This works for both Vue 2/3-based storybooks

If you want to quickly jump in to check it out, here are repro steps with a repro script that didn't work on beta.13 for me and now works on beta.14: https://github.com/vuejs/vue-devtools/issues/353#issuecomment-856967904

[shilman]

Awesome. Going to close this issue! Thanks for the heads up @3nuc !!!