Vue devtools #1708

miljan-aleksic · 2017-08-22T09:52:07Z

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.

The text was updated successfully, but these errors were encountered:

miljan-aleksic · 2017-08-22T10:01:17Z

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

Checking why...

miljan-aleksic · 2017-08-22T10:28:30Z

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

kazupon · 2017-08-22T14:48:34Z

related:
#1376
vuejs/devtools-v6#361

ndelangen · 2017-08-25T21:23:18Z

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 · 2018-01-22T03:38:17Z

any updates on this ?

davidm-public · 2018-01-24T21:39:47Z

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

ndelangen · 2018-01-24T22:24:34Z

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 · 2018-01-25T00:55:44Z

@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 · 2018-03-05T16:59:46Z

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 · 2018-03-07T23:48:28Z

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 · 2018-05-21T02:50:47Z

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

zephraph · 2018-05-21T12:15:41Z

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

davidmoshal · 2018-05-21T19:28:16Z

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

It's excellent

igor-dv · 2018-08-28T17:22:05Z

@ndelangen, didn't you fix this?

davidm-public · 2018-08-28T17:26:06Z

@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 · 2018-09-04T05:52:33Z

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

zephraph · 2018-09-05T15:46:05Z

That's a possibility. vuejs/devtools-v6#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 · 2018-09-06T09:54:12Z

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

ndelangen · 2018-09-06T10:46:13Z

@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 · 2018-09-06T17:58:36Z

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

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

ndelangen · 2018-09-06T18:06:20Z

@y-nk that is freaking awesome!

igor-dv · 2018-10-08T11:56:28Z

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

y-nk · 2018-10-09T06:00:15Z

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

ndelangen · 2018-10-10T12:12:42Z

@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!

following this storybookjs/storybook#1708 (comment) installed devtools globally (`yarn global add @vue/devtools`) because it requires electron which seems overkill to add in dev deps

* chore: add storybook custom head tag for dev tools following this storybookjs/storybook#1708 (comment) installed devtools globally (`yarn global add @vue/devtools`) because it requires electron which seems overkill to add in dev deps * chore: add storybook to now.sh build * fix: remove specific polygon mark render logic already contained in mixin * feat: add Area mark * feat: add prevRow/nextRow to forEachRow * chore: rename width to strokeWidth * chore: consistent stroke/fill prop naming Fixes #36 * feat: add opacity/strokeOpacity/fillOpacity props * docs: minimal Area prop documentation * chore: `style` in `CreateElement` not `attrs` * fix: update color/opacity props in `createScale` * refactor: optional options object to parseAesthetic.js * refactor: replaced sortX by sort prop * rename: MultiLine mixin to Path * refactor: Area mark render logic * docs: added docs for Area mark * fix: typo * refactor: set Mark aes defaults as component props

lfkwtz · 2019-01-15T18:30:43Z

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

github-actions · 2019-04-26T03:40:50Z

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

fgm · 2019-12-04T16:30:40Z

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 · 2019-12-04T16:31:49Z

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 ***@***.***> 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 <#1708?email_source=notifications&email_token=AAAKROROGQQRKIKWA5ZMKY3QW7LLDA5CNFSM4DXZQUZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEF5TRXI#issuecomment-561723613>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAKROU32Y6IUMWBS3Z36NTQW7LLDANCNFSM4DXZQUZA> .

fgm · 2019-12-04T18:18:34Z

~~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 · 2019-12-04T18:19:59Z

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 ***@***.***> 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 <#1708?email_source=notifications&email_token=AAAKROWXI7Y5274G3R4YYRTQW7X7XA5CNFSM4DXZQUZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEF574GY#issuecomment-561774107>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAKRORJDDCZPYQW43IYAGLQW7X7XANCNFSM4DXZQUZA> .

fgm · 2019-12-04T18:35:27Z

~~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.

Allows use of standalone Vue dev tools to get around issue with Vue not detecting components in iframes. See: storybookjs/storybook#1708 See: https://github.com/vuejs/vue-devtools/blob/master/shells/electron/README.md

niedzielski · 2020-05-18T15:34:28Z

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 😆 I happened upon this mode today though! It's the button second from the right:

ricardok1 · 2020-06-22T15:58:42Z

Is this still open?

jackkoppa · 2020-06-22T16:26:17Z

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 · 2020-06-22T16:33:24Z

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 ***@***.***> 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 <#1708 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAKROXVKFCLTN23ZYNMMYDRX6A3RANCNFSM4DXZQUZA> .

shilman · 2020-06-23T12:32:36Z

@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 · 2020-06-23T12:37:34Z

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

shilman · 2020-06-23T12:49:44Z

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 · 2021-05-12T23:49:04Z

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 · 2021-05-31T14:16:47Z

@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 · 2021-05-31T18:52:55Z

@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 · 2021-06-03T14:09:43Z

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

sethidden · 2021-06-09T17:00:38Z

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: vuejs/devtools-v6#353 (comment)

shilman · 2021-06-10T05:05:00Z

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

magersoft · 2022-09-15T13:06:52Z

I have devtools version 6.2.1, vue 3 and @storybook/vue3: ^6.5.12
for me not working, Vue.js not detected. How to fix it?

kazupon added the vue label Aug 22, 2017

ndelangen added compatibility with other tools in progress labels Aug 25, 2017

ndelangen added this to the v4.0.0 milestone Sep 6, 2018

ndelangen mentioned this issue Sep 6, 2018

WIP Tech/overhaul ui #4086

Merged

82 tasks

ndelangen removed this from the v4.0.0 milestone Oct 12, 2018

shilman removed this from the next milestone Apr 26, 2019

shilman mentioned this issue May 2, 2019

Addon-docs: Vue inline rendering support #6706

Closed

Hypnosphi mentioned this issue Oct 3, 2019

Remove duplicate code #8285

Merged

niedzielski mentioned this issue May 14, 2020

[docs] Add common Vue.js devtools workarounds #10775

Merged

gtsiolis mentioned this issue Jan 11, 2021

Vue.js Chrome Extension support gitpod-io/gitpod#2715

Closed

shilman closed this as completed Jun 10, 2021

Vue devtools #1708

Vue devtools #1708

Comments

miljan-aleksic commented Aug 22, 2017 • edited Loading

miljan-aleksic commented Aug 22, 2017

miljan-aleksic commented Aug 22, 2017 • edited Loading

kazupon commented Aug 22, 2017

ndelangen commented Aug 25, 2017

davidm-public commented Jan 22, 2018

davidm-public commented Jan 24, 2018

ndelangen commented Jan 24, 2018

miljan-aleksic commented Jan 25, 2018

cmrd-senya commented Mar 5, 2018

zephraph commented Mar 7, 2018

y-nk commented May 21, 2018

zephraph commented May 21, 2018

davidmoshal commented May 21, 2018

igor-dv commented Aug 28, 2018

davidm-public commented Aug 28, 2018

y-nk commented Sep 4, 2018

zephraph commented Sep 5, 2018

y-nk commented Sep 6, 2018

ndelangen commented Sep 6, 2018

y-nk commented Sep 6, 2018 • edited Loading

ndelangen commented Sep 6, 2018

igor-dv commented Oct 8, 2018

y-nk commented Oct 9, 2018

ndelangen commented Oct 10, 2018

lfkwtz commented Jan 15, 2019

github-actions bot commented Apr 26, 2019

fgm commented Dec 4, 2019

blocka commented Dec 4, 2019 via email

fgm commented Dec 4, 2019 • edited Loading

blocka commented Dec 4, 2019 via email

fgm commented Dec 4, 2019 • edited Loading

niedzielski commented May 18, 2020

ricardok1 commented Jun 22, 2020

jackkoppa commented Jun 22, 2020

blocka commented Jun 22, 2020 via email

shilman commented Jun 23, 2020 • edited Loading

blocka commented Jun 23, 2020

shilman commented Jun 23, 2020

braddialpad commented May 12, 2021

unr commented May 31, 2021

yannbf commented May 31, 2021

ndelangen commented Jun 3, 2021

sethidden commented Jun 9, 2021 • edited Loading

shilman commented Jun 10, 2021

magersoft commented Sep 15, 2022

miljan-aleksic commented Aug 22, 2017 •

edited

Loading

miljan-aleksic commented Aug 22, 2017 •

edited

Loading

y-nk commented Sep 6, 2018 •

edited

Loading

fgm commented Dec 4, 2019 •

edited

Loading

fgm commented Dec 4, 2019 •

edited

Loading

shilman commented Jun 23, 2020 •

edited

Loading

sethidden commented Jun 9, 2021 •

edited

Loading