Vue: Add Vue3 support

Question

Vue: Add Vue3 support

p3k opened this issue 4 years ago · 157 comments

I just tried to run storybook with a Vue3 (beta) app and got some errors… A few I was able to work-around merging our Webpack config and pushing the Vue3 loader plugin:

const wltConfig = require('../apps/webpack-dev');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
	stories: ['../**/*.stories.[tj]s'],

	webpackFinal: (config, ...args) => {
		config.plugins.push(new VueLoaderPlugin());
		return { ...config, module: { ...config.module, rules: wltConfig().module.rules } };
	}
};

I still get a warning and an error in the shell:

WARN   Failed to load preset: "/home/tobi/Projects/modul/portal/client/node_modules/@storybook/vue/dist/server/framework-preset-vue.js"
ERR! Error: Cannot find module 'vue-loader/lib/plugin'

– nevertheless storybook builds and opens the browser. There I am stuck with this error message:

Uncaught TypeError: _vue.default is not a constructor
    at Object../node_modules/@storybook/vue/dist/client/preview/render.js (render.js:43)
    at __webpack_require__ (bootstrap:848)
    at fn (bootstrap:150)
    at Object../node_modules/@storybook/vue/dist/client/preview/index.js (index.js:24)
    at __webpack_require__ (bootstrap:848)
    at fn (bootstrap:150)
    at Object.<anonymous> (index.js:55)
    at Object../node_modules/@storybook/vue/dist/client/index.js (index.js:59)
    at __webpack_require__ (bootstrap:848)
    at fn (bootstrap:150)

Is there a better approach than this? I am a total n00b to storybook so would be glad about any pointer or assistance. (I searched the issues for vue3 without any meaningful results, at least as far as I can tell.)

p3k commented 4 years ago

bump

👍9

Answer 1 · 2020-05-05T17:36:46.000Z

Hmm.. We might need to do a vue3 preset

Answer 2 · 2020-05-07T14:25:35.000Z

Hmm.. We might need to do a vue3 preset

can i help?

Answer 3 · 2020-05-11T08:58:57.000Z

what i tried so far (only in dist files located in the node modules directory, though):

vue/dist/server/framework-preset.js

VueLoaderPlugin is now an export of vue-loader
replace vue-esm.js with vue.esm-browser.js

11c11
< var _plugin = _interopRequireDefault(require("vue-loader/lib/plugin"));
---
> var _plugin = _interopRequireDefault(require("vue-loader").VueLoaderPlugin);
34c34
<         vue$: require.resolve('vue/dist/vue.esm.js')
---
>         vue$: require.resolve('vue/dist/vue.esm-browser.js')

vue/dist/client/preview/render.js

app component is now instantiated with createApp(), all configuration etc. needs to be applied to the instance

21c21
< var _vue = _interopRequireDefault(require("vue"));
---
> var _vue = _interopRequireDefault(require("vue").createApp);
43c43
< var root = new _vue["default"]({
---
> var root = _vue["default"]({
67c67
<   _vue["default"].config.errorHandler = showException;
---
>   root.config.errorHandler = showException;
88c88
<     root.$mount('#root');
---
>     root.mount('#root');

i am now stuck with vue/dist/client/preview/index.js because the app instance is needed there, e.g. to define the extends property – and that seems only feasible to implement with a proper storybook build…

hopefully these baby steps are of some use.

Answer 4 · 2020-06-02T07:57:33.000Z

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

Answer 5 · 2020-06-06T12:40:47.000Z

@pksunkara @graup @Aaron-Pool does anybody have time to dig into this? if there are breaking changes we need and we can get those into 6.0, now would be the best time to do it!

Answer 6 · 2020-06-06T12:47:58.000Z

We would still need to support Vue2 for quite a while after Vue3 is released. One thing we need to check is if we can somehow support both of them at the same time.

Also considering that Vue3 is not yet out of beta, and supposing that we want to get storybook v6 out, I would postpone the vue3 support to be after the v6 release

Answer 7 · 2020-06-06T12:48:32.000Z

I'm planning to look into this soon, but can't give an ETA. Haven't had a chance to try Vue 3 yet.

I agree with @pksunkara that this isn't urgent for 6.0 as it's still beta anyway.

Answer 8 · 2020-06-06T12:54:07.000Z

Thanks @graup. I also agree it isn't urgent -- we shouldn't be expected to support unreleased software in Storybook. My only concern is that, for example, we release 6.0 in July, Vue3 launches in August, we go to support it in September, and find that there's a breaking change required. And we can't get that breaking change in without a major version bump in October, which should be happening in June 2021 instead.

Answer 9 · 2020-06-06T12:55:39.000Z

I was just trying to get some lights on the discord channel just now on how do I go to attempt to make it work with Vue 3, it would require a new preset as the logic to bootstrap the framework is a bit different.. I dont think the current code in the vue folder will work with vue 3..

Answer 10 · 2020-06-06T12:59:38.000Z

I understand @shilman. Let me clarify a bit more since it looks I didn't get my point across correctly.

From what I understand with @p3k's attempts and @milewski's comment, we not only need a new preset but we also need to do breaking changes in the @storybook/vue package.

But we would still need to support Vue v2 for quite a while, not everyone would be moving to Vue v3. So, unless we want to say that Vue v2 is not supported anymore, it would be better if we create a new @storybook/vue3 package.

But if we do decide to cut off Vue v2 support, then yes, I agree that we should probably do breaking changes before Storybook v6.

Answer 11 · 2020-06-06T13:04:40.000Z

@pksunkara Your proposed solution sounds great. 💯

I don't think we can cut off vue2 support anytime soon, so we would want to run those two packages in parallel, and maybe make a full cut-over in some future major release (7.0? 8.0? never?). After the two packages are released we can use npm download stats to determine when is the right time to remove Vue2 support. WDYT?

cc @ndelangen

Answer 12 · 2020-06-06T16:35:59.000Z

I gave it a shoot: https://github.com/milewski/storybook/tree/vue3 this is essentially working for me with vue3 ..

however, there was a block of code that I'm unsure what it was supposed to do https://github.com/milewski/storybook/blob/vue3/app/vue/src/client/preview/index.ts#L41-L58 I haven't actually used storybook ever before.. I just wanted to start using it now with my vue3 project..

so as far as I can tell https://storybook.js.org/docs/guides/guide-vue/ following the instruction on this guide I got my component using vue 3 rendered successfully... without that piece of code I left off... Perhaps it is needed to work with some specific plugin? can someone tell me with which config/addon/plugin that code would be useful for? so I can find a way to fix that and someone can get some inspiration on my version and properly follow the code procedures to release a new preset in here?

Answer 13 · 2020-06-06T17:30:36.000Z

Great work @milewski -- super exciting!!! 🚀

Answer 14 · 2020-06-07T03:34:28.000Z

I figured out what that code did.. it was necessary to apply the options given from knobs .. i have fixed that .. can you try it out as it seems you have been using storybook for longer? @p3k

You can install it by running:

git clone --branch vue3 https://github.com/milewski/storybook.git
cd storybook
yarn bootstrap --core
yarn build (select vue)
cd app/vue
yarn link

then cd to your project and:

yarn link @storybook/vue

Answer 15 · 2020-06-08T07:27:20.000Z

thanks a lot for your efforts @milewski – i am just trying out your branch and got an error when running yarn bootstrap --core:

…
$ node ../../scripts/prepare.js
TSFILE: /home/tobi/Projects/modul/storybook/app/mithril/dist/src/client/preview/globals.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/mithril/dist/src/client/preview/types.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/mithril/dist/src/client/preview/render.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/mithril/dist/src/client/preview/index.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/mithril/dist/src/client/index.d.ts
Built: @storybook/mithril@6.0.0-beta.22
lerna ERR! yarn run prepare exited 1 in '@storybook/vue'
lerna ERR! yarn run prepare stdout:
$ node ../../scripts/prepare.js
src/server/framework-preset-vue.ts(5,17): error TS4058: Return type of exported function has or is using name 'VueLoaderPlugin' from external module "/home/tobi/Projects/modul/storybook/app/vue/node_modules/vue-loader/dist/plugin" but cannot be named.
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/client/preview/globals.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/client/preview/types.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/client/preview/render.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/client/preview/util.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/client/preview/index.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/client/index.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/server/options.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/server/build.d.ts
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

lerna ERR! yarn run prepare stderr:
ERR! FAILED (ts) :  
ERR! FAILED to compile ts: @storybook/vue@6.0.0-beta.22 
error Command failed with exit code 1.

lerna ERR! yarn run prepare exited 1 in '@storybook/vue'
lerna WARN complete Waiting for 3 child processes to exit. CTRL-C to exit immediately.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Answer 16 · 2020-06-08T07:33:40.000Z

Uhm. There was an issue with typescript. I just disabled the ts checking for now.. pull the latest code from my branch and try again

Answer 17 · 2020-06-08T07:48:25.000Z

yes, now the command ran without errors.

re yarn build (select vue) i get the message storybook WARN build Nothing to build! – is that correct?

Answer 18 · 2020-06-08T07:50:59.000Z

No on the interactive menu that appears you need to press the space bar to select

Answer 19 · 2020-06-08T08:09:21.000Z

ah! sorry, my bad, sure.

now it built fine and i can run storybook with my first vue3 component – splendid! thanks again, @milewski

Answer 20 · 2020-06-08T08:24:02.000Z

@milewski Great work! Just tested and it seems to work.

As far as I can tell, the only big breaking changes are imports and the createApp stuff, right? Maybe it's possible to write backwards-compatible code that checks the installed vue version and does the right thing automatically? Then we could avoid having two versions of the preset.

I tried updating our vue examples but it seems that some of the stuff used there doesn't have vue3 versions yet. Generally there still seem to be a lot of beta and mismatched packages, so it might be better to wait a bit before trying to update the whole storybook codebase, including the addons etc etc. There'll be quite a lot of work to do.

Answer 21 · 2020-06-08T08:42:47.000Z

As far as I can tell, the only big breaking changes are imports and the createApp stuff, right?

yes i would say so, too.

from the things i initially tried (see my initial comment) all i kept was the configuration merge – the push of the VueLoaderPlugin is not necessary, anymore, thanks to @milewski’s contribution, i assume 🐱

(re-)initializing storybook was straightforward as described in the docs: npm install @storybook/vue --save-dev; i did not even need to install any other peer dependencies (might be due to because we already install them for our project, anyway).

Then we could avoid having two versions of the preset.

i assume that would be very preferable, and maybe even make it possible to have the changes in the next storybook release…?

regarding the vue examples maybe i couldhelp creating vue3-compatible versions of (some of) them? (i am not a vue expert, yet, though.)

Answer 22 · 2020-06-08T08:51:43.000Z

@graup

As far as I can tell, the only big breaking changes are imports and the createApp stuff, right? Maybe it's possible to write backwards-compatible code that checks the installed vue version and does the right thing automatically? Then we could avoid having two versions of the preset.

I faced issues with the reactivity too, I tried to follow the way the current version was setting/extending object but vue3 no longer tracks changes on that type of objects, specially the ones created inside the render function, I had to create references with ref() or reactive() for it to trigger updates..

I tried updating our vue examples but it seems that some of the stuff used there doesn't have vue3 versions yet. Generally there still seem to be a lot of beta and mismatched packages, so it might be better to wait a bit before trying to update the whole storybook codebase, including the addons etc etc. There'll be quite a lot of work to do.

I tried using that one as a starting point but it tried to install vue2 stuff even thou I had explicitly set the version on the packagejson ... vue 3 doesnt work at all if you have vue-template-compiler or the old vue loader installed .. there might have some dependencies on there that is importing thoses

@p3k

(re-)initializing storybook was straightforward as described in the docs: npm install @storybook/vue --save-dev; i did not even need to install any other peer dependencies (might be due to because we already install them for our project, anyway).

I think this happened because I included vue3 and vue-loader^16 as a dependency on the packages.json

Answer 23 · 2020-06-08T09:15:54.000Z

I'd be fine with a @storybook/vue3 package if that's really needed.

Answer 24 · 2020-06-08T10:38:56.000Z

FYI, I just fixed a core rendering bug in the Storybook Vue2 code: #11076

This causes the "force refresh behavior" used by addon-knobs and addon-controls to actually force a refresh. I'm not sure if it has any bearing on the Vue3 code, but just FYI if you're testing, please merge in that update.

Answer 25 · 2020-06-08T10:52:16.000Z

Done also applied on the forked version!

Answer 26 · 2020-06-08T13:07:58.000Z

Just to put in my two cents, it looks like vite will be the defacto tooling used for vue 3, much like the vue-cli was used for vue 2. We had several users have issues with having to do all config setup twice when using vue-cli with storybook, a probalem @pksunkara did a great job of solving with his vue-cli storybook plugin. We should ensure whatever preset/package we setup works pretty seamlessly with vite, if possible.

Edit: I just realized that this could be tricky, because Vite uses rollup under the hood, rather than webpack 😬

Answer 27 · 2020-06-08T13:21:54.000Z

I think I should really look into seeing if Storybook can just use the users webpack/build system and not need it's own config at all.

Thoughts aside, I think I haven't checked out vite, but maybe they will adapt the vue cli plugin system

Answer 28 · 2020-07-07T05:45:00.000Z

We don't think or aim for Vite to become "the" tooling. A great number of projects will need the power and flexibility that webpack provides, and vite's goal is not to cater to all of these needs.

So I wouldn't worry too much about vite for now, and certainly not for the Vue3 support for storybook itself.

Answer 29 · 2020-07-07T12:59:09.000Z

@LinusBorg the reason I specifically brought that up is that we often ran into a similar issue with Vue 2, where 90% of the community created their projects with vue-cli, and the fact that storybook couldn't detect and use a Vue-cli managed build system caused a substantial amount of confusion for Vue users.

Do you not see us running into a similar issue with vite as people try to integrate storybook into a vite based project?

Answer 30 · 2020-07-07T16:59:35.000Z

not really, no. Vite itself is pretty bare-bones compared to a Vue CLI setup.

What Vite provides is covered by any simple Webpack config that has rules for handling .vue, ts(x) and .css files. And while it is extensible, that API is pretty close to the metal so we don't expect people adding custom transforms and stuff left and right.

It doesn't have an extensive plugin API by design. if people need fancy custom magic for their projects, chances are they will need Webpack anyway sooner than later, so go with Vue CLI.

Vite doesn't see "extensibility for any use case" as one of its goals.

So I would say that any Vite project should usually work with storybook/vue as long as its webpack config covers the basic rules that I laid out, which I think it does

Answer 31 · 2020-07-07T17:26:42.000Z

@LinusBorg Ok, that makes sense. Thankful for the input 👍 Any guidance from the Core Vue team is always very appreciated!

Answer 32 · 2020-07-07T20:05:27.000Z

Thanks for the work everyone is putting into storybook, can't wait to use it for my Vue 3 project :)

Answer 33 · 2020-07-18T11:26:45.000Z

Since Vue3 is now in RC, it might be worthwhile reevaluating whether or not adding Vue3 support to v6 should be considered.

Answer 34 · 2020-07-18T13:25:59.000Z

@hollandThomas we're already mid-RC so vue3 will have to come in 6.1. That said, we should be releasing the first 6.1 alphas in a few weeks so if anybody wants to start putting this together, I'm sure there is a large audience that's hungry for this!

Answer 35 · 2020-08-31T12:20:51.000Z

Are there any active branches we can use or contribute to, to help with getting Vue 3 support ready?

In our org our Vue ui-component library touches all of our Vue projects, so it's one of the first things blocking from us trying out Vue 3, and we'd be eager to help test or migrate if needed. I would guess that others are in the same boat.

There's also now a v2 -> v3 migration guide in the docs https://v3.vuejs.org/guide/migration/introduction.html#overview

Answer 36 · 2020-08-31T18:37:13.000Z

@milewski @graup @Aaron-Pool @elevatebart we're in 6.1-alpha now. anybody want to take a shot at a PR for this?

Answer 37 · 2020-09-01T00:38:57.000Z

@p3k thanks. just created with your descriptions, for me looks like work, didn't test so much functionality
webpack config can be easily fixed in main.js like

webpackFinal: async (config, {configType}) => {

    config.resolve.alias['vue$'] = 'vue/dist/vue.esm-browser.js'

    return config
  }

and loader can be to

with render.js stuck a little bit how to configure in .storybook

Answer 38 · 2020-09-01T13:03:12.000Z

@shilman is this version '6.1.0-alpha.1' is compatible with vue3 ?

Answer 39 · 2020-09-01T13:53:05.000Z

not sure but looks like no. still second version supported..

Answer 40 · 2020-09-01T14:33:10.000Z

Nope, not yet. I'm hoping somebody here will contribute it, per my comment above

Answer 41 · 2020-09-01T14:34:40.000Z

@shilman I've still not had a chance to use Vue 3 yet 😞 My work has a deadline for a Vue 2 based product release this month, so I haven't had time to dabble.

Answer 42 · 2020-09-08T21:28:52.000Z

So the tasks are basically

copy app/vue to app/vue3
make sure to modify all framework refs
apply changes done by @milewski in https://github.com/milewski/storybook/tree/vue3
modify or create new kitchensink examples
try different story / vue3 component definition method combinations and check if they work

?

Answer 43 · 2020-09-09T22:53:06.000Z

@chartinger sounds like the most direct path to me. if we can figure out out how conditionally apply those changes based on the version of vue you're using and maintain a single package, that would be even better.

Answer 44 · 2020-09-10T18:12:55.000Z

I did a view experiments in https://github.com/chartinger/storybook/tree/app-vue3 (needed some changes from the above fork) what i found so far:

Good:

Basic vue3 components will render
Changes from Controls are live updated

Bad:

Can't seem to get class-decorated vue components to load
No idea if knobs works, i wanted to learn storybook with vue3 so no demo code or past projects to test
No auto-detection of control-attributes from props

Other:

Importing the component in StoryMeta does nothing, has to be in the Story
Global components are now bound to the app instance, is it possible to provide it to the .storybook/preview.js or some other way? (is it needed?)

Answer 45 · 2020-09-11T01:13:25.000Z

@elevatebart What's the status of vue-docgen-api for vue3? ☝️

Answer 46 · 2020-09-11T04:04:33.000Z

It is overall compatible. But event emitting in the setup function is not dealt with yet.

For this, I still need a performant way to enter setup functions and detect those emits.

Since the functions can be in multiple files it might take a little time.

Answer 47 · 2020-09-11T07:59:34.000Z

@chartinger want to update your branch with some of the experiments? i'd like to dig in on the "autodetection of control attributes" problem you found, and i can probably get somebody to look at the class-decorated issue.

Answer 48 · 2020-09-11T10:51:08.000Z

@shilman I added a vue3 example, based on vue-cli and migrated the button example to composition and class api (i called it annotation in the code, which has to change but will do for now). Somehow the class api components loaded this time.

For testing don't forget to npm link and npm link @storybook/vue3 accordingly.

Answer 49 · 2020-09-17T08:26:48.000Z

FYI: I just published @andoshin11/storybook-vue3 to npm, so feel free to try it out 👇

https://www.npmjs.com/package/@andoshin11/storybook-vue3

Answer 50 · 2020-09-23T22:57:39.000Z

btw, Vue 3 is officially out of the beta.

PS. Thanks for your fork/version of storybook @andoshin11

//edit: just read the thread and great job guys.. I might take a shot at this :)

Answer 51 · 2020-09-24T08:32:51.000Z

Awesome work everybody. I'd love to get this into the 6.1 release. Does anybody want to take this on? It will be a very high impact contribution. Ideally we support vue3 and vue2 in the same package, doing some autodetection or user configuration to figure out which version to use.

Scope of this work:

Making the necessary changes to support vue3
Adding e2e tests for vue3 a vue project (we already have a template for this, and it shouldn't be too hard)
Updating the documentation
Being available for bugfixes and support as we promote it in the prerelease

Please contact me on our discord if you'd like to work on this -- I've created a #vue3 temp channel to discuss! https://discord.com/invite/UUt2PJb

Answer 52 · 2020-09-30T23:24:39.000Z

There is a little bit of work done at #12632. Noting it down here so that it doesn't get lost.

Answer 53 · 2020-10-03T14:29:26.000Z

Since Vue 3 is out of beta and will be available in latest tag in couple of months, is there an ETA available for Vue 3 support in storybook?

Also, it would be helpful to add a CHANGELOG to @storybook/vue - https://github.com/storybookjs/storybook/tree/master/app/vue, so that we can get an idea on what changed with @storybook/vue versions.

Answer 54 · 2020-10-03T16:17:54.000Z

@palerdot i'd love to get vue3 support shipped as part of storybook 6.1. looking for somebody to contribute this -- are you interested? #10654 (comment)

as for the CHANGELOG, we have one for the entire monorepo and it's not realistic to maintain an additional one for each framework. however, i'll consider doing framework-specific summaries with each release announcement, which is probably what you actually want as a user.

Answer 55 · 2020-10-05T04:26:56.000Z

@shilman

looking for somebody to contribute this -- are you interested?

Unfortunately, I will not be able to commit time on this currently (not to mention I'm not that familiar with storybook codebase).

i'll consider doing framework-specific summaries with each release announcement, which is probably what you actually want as a user.

Thank you. That would be better. You are correct. As a user I just want to know what framework is supported (like Vue 3 for instance) with every release. So, adding that info to the main CHANGELOG will be helpful.

Answer 56 · 2020-10-13T07:11:57.000Z

Just dropping a data point that I would love to have Vue3 work with storybook as well. Maybe some of the Vue core/tooling developers could help here, like @Akryum ?

Answer 57 · 2020-10-24T09:00:31.000Z

@shilman
I think i found the solution for working storybook with vue2 & vue3. I try to make a POC of it if i hopefully find the time for it ;-). No promise. ^^
But i thought i share my idea already.
I found Vue Demi that seems promising to solve the problem of using one package for vue2 & vue3.
Of course there is still the work to be done with compostion api. But i think with that package its one step forward to a promising package

Answer 58 · 2020-11-23T15:03:56.000Z

#13224 same problem. @shilman should we wait for Vue 3 support in the next Storybook version?

Answer 59 · 2020-11-23T15:13:38.000Z

Yes, hopefully it will land in 6.2. still looking for somebody to make it happen!

Answer 60 · 2020-12-25T09:42:01.000Z

Any idea when 6.2 will be ready? :)

Answer 61 · 2020-12-30T05:33:58.000Z

Current estimate is mid-Feb. We should have an alpha with Vue3 support in a couple weeks. Track the release here: #13160

Answer 62 · 2021-01-13T16:24:25.000Z

Anyone who is interested in a temporary workaround:

// packages.json
"scripts": {
  "serve": "start-storybook -p 9009"
},
"devDependencies": {
  "@storybook/vue3": "https://gitpkg.now.sh/zipme/storybook/app/vue3?30547456ff",
  "@storybook/addon-a11y": "https://gitpkg.now.sh/zipme/storybook/addons/a11y?30547456ff",
  "@storybook/addon-actions": "https://gitpkg.now.sh/zipme/storybook/addons/actions?30547456ff",
  "@storybook/addon-backgrounds": "https://gitpkg.now.sh/zipme/storybook/addons/backgrounds?30547456ff",
  "@storybook/addon-essentials": "https://gitpkg.now.sh/zipme/storybook/addons/essentials?30547456ff",
  "@storybook/addon-knobs": "https://gitpkg.now.sh/zipme/storybook/addons/knobs?30547456ff",
  "@storybook/addon-links": "https://gitpkg.now.sh/zipme/storybook/addons/links?30547456ff",
  "@storybook/addon-storysource": "https://gitpkg.now.sh/zipme/storybook/addons/storysource?30547456ff",
  "@storybook/addon-viewport": "https://gitpkg.now.sh/zipme/storybook/addons/viewport?30547456ff",
  "@storybook/source-loader": "https://gitpkg.now.sh/zipme/storybook/lib/source-loader?30547456ff"  
}

Basically, the format of the URL is:

  // for addons
  "@storybook/<addon-name>": "https://gitpkg.now.sh/zipme/storybook/addons/<addon-name>?30547456ff"

  // lib
  "@storybook/<lib-name>": "https://gitpkg.now.sh/zipme/storybook/lib/<lib-name>?30547456ff"  

  // app
 "@storybook/<app-name>": "https://gitpkg.now.sh/zipme/storybook/app/<app-name>?30547456ff"

Answer 63 · 2021-01-13T16:30:27.000Z

@zipme thanks. I will try it. 👍

Answer 64 · 2021-01-14T09:26:06.000Z

Anyone who is interested in a temporary workaround:

// packages.json
"scripts": {
  "serve": "start-storybook -p 9009"
},
"devDependencies": {
  "@storybook/vue3": "https://gitpkg.now.sh/zipme/storybook/app/vue3?vue-3-support",
  "@storybook/addon-a11y": "https://gitpkg.now.sh/zipme/storybook/addons/a11y?vue-3-support",
  "@storybook/addon-actions": "https://gitpkg.now.sh/zipme/storybook/addons/actions?vue-3-support",
  "@storybook/addon-backgrounds": "https://gitpkg.now.sh/zipme/storybook/addons/backgrounds?vue-3-support",
  "@storybook/addon-essentials": "https://gitpkg.now.sh/zipme/storybook/addons/essentials?vue-3-support",
  "@storybook/addon-knobs": "https://gitpkg.now.sh/zipme/storybook/addons/knobs?vue-3-support",
  "@storybook/addon-links": "https://gitpkg.now.sh/zipme/storybook/addons/links?vue-3-support",
  "@storybook/addon-storysource": "https://gitpkg.now.sh/zipme/storybook/addons/storysource?vue-3-support",
  "@storybook/addon-viewport": "https://gitpkg.now.sh/zipme/storybook/addons/viewport?vue-3-support",
  "@storybook/source-loader": "https://gitpkg.now.sh/zipme/storybook/lib/source-loader?vue-3-support"  
}

thanks, I ran into some versioning issues, which I solved by limiting versioning.selective version resolutions

  "resolutions": {
    "@storybook/core": "^6.2.0-alpha.7",
    "@storybook/addons": "^6.2.0-alpha.7",
    "vue-loader": "^16.0.0-beta.7"
  },

Answer 65 · 2021-01-14T15:21:54.000Z

thanks @zipme @meteor199

Answer 66 · 2021-01-15T07:02:49.000Z

Maybe it's because i'm new to storybook, but i've not found any answers on this on the web so i post the solution here.

based on @zipme solution, if you are building a component library used as a vue plugin you will need to add this in .storybook/preview.js

import { app } from "@storybook/vue3";

import YourPlugin from "../src/index"; // whatever your plugin entry point is

app.use(YourPlugin);

Answer 67 · 2021-01-15T12:37:51.000Z

@fabien-ml You saved my day!

Answer 68 · 2021-01-15T15:08:03.000Z

@zipme @meteor199 @fabien-ml thanks. I uploaded a example repo with vue3 and storybook 6.2 (forked)

https://github.com/litan1106/20200814-vue-storybook/tree/upate-vue3.0-storybook6.2

Answer 69 · 2021-01-19T21:44:36.000Z

I also updated the vue-cli-plugin-storybook for vue3. (I like to use vue-cli for storybook because I don't need to copy the custom vue.config.js to .storybook/main.js)
yarn add 'https://gitpkg.now.sh/litan1106/vue-cli-plugin-storybook?update-vue3'

Answer 70 · 2021-01-20T22:41:34.000Z

I getting the error when running npm i

npm WARN ERESOLVE overriding peer dependency
npm WARN Found: @vue/compiler-svfc@undefined
npm WARN node_modules/@vue/compiler-svfc
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer @vue/compiler-svfc@"^3.0.0" from @storybook/vue3@6.2.0-alpha.7
npm WARN node_modules/@storybook/vue3
npm WARN   dev @storybook/vue3@"https://gitpkg.now.sh/zipme/storybook/app/vue3?vue-3-support" from the root project
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: @storybook/vue@5.3.19
npm ERR! node_modules/@storybook/vue
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peerOptional @storybook/vue@"6.2.0-alpha.7" from @storybook/addon-essentials@6.2.0-alpha.7
npm ERR! node_modules/@storybook/addon-essentials
npm ERR!   dev @storybook/addon-essentials@"https://gitpkg.now.sh/zipme/storybook/addons/essentials?vue-3-support" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: vue@2.6.12
npm ERR! node_modules/vue
npm ERR!   peer vue@"^2.6.8" from @storybook/vue@6.2.0-alpha.7
npm ERR!   node_modules/@storybook/vue
npm ERR!     peerOptional @storybook/vue@"6.2.0-alpha.7" from @storybook/addon-essentials@6.2.0-alpha.7
npm ERR!     node_modules/@storybook/addon-essentials
npm ERR!       dev @storybook/addon-essentials@"https://gitpkg.now.sh/zipme/storybook/addons/essentials?vue-3-support" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Answer 71 · 2021-01-22T19:58:04.000Z

@zipme Thanks! That works great, though any idea why addon-docs doesn't also work?

"@storybook/addon-docs": "https://gitpkg.now.sh/zipme/storybook/addons/docs?vue-3-support"
is what I have in my package.json

I'd use the one nested in essentials (which seems to work) if I didn't need to configure the docs addon specifically.

Answer 72 · 2021-01-22T20:01:38.000Z

Hi @Mootook , can you show me a sample repo how you can work with vue3? does this require me to use vue typescript? thankyou brother

Answer 73 · 2021-01-22T20:06:11.000Z

@aacassandra, @litan1106 posted an example repo above #10654 (comment)

It doesn't require Typescript. My project is not using typescript. I would recommend forking that and looking through it. It's configured for ts, but a lot of that can be purged if you're looking to add storybook to your vue3 application.

Answer 74 · 2021-01-23T19:39:19.000Z

@zipme Thanks! That works great, though any idea why addon-docs doesn't also work?

"@storybook/addon-docs": "https://gitpkg.now.sh/zipme/storybook/addons/docs?vue-3-support"
is what I have in my package.json

I'd use the one nested in essentials (which seems to work) if I didn't need to configure the docs addon specifically.

addon-docs should work too now, you can try this commit:

@storybook/addon-docs": "https://gitpkg.now.sh/zipme/storybook/addons/docs?30547456f

You might need to update other storybook packages to 30547456f as well

Answer 75 · 2021-01-25T14:42:12.000Z

Installing the repo without any changes @litan1106 has linked with npm ci which includes @zipme's fix throws the error @aacassandra has above #10654 (comment)
I have tried with both the 30547456f and vue-3-support versions of storybook

Answer 76 · 2021-01-25T14:45:34.000Z

Using 30547456f i got Cannot find @storybook/vue.
Using 30547456ff just docs is not working.

Answer 77 · 2021-01-25T15:27:51.000Z

@fabien-ml folks, you should try out the git test repo and inspect the package.json
https://github.com/litan1106/20200814-vue-storybook/blob/44de2dbfa42d2463d7e989bf05b4f15fa635a390/package.json#L29

Answer 78 · 2021-01-25T15:38:07.000Z

Installing the repo without any changes @litan1106 has linked with npm ci which includes @zipme's fix throws the error @aacassandra has above #10654 (comment)
I have tried with both the 30547456f and vue-3-support versions of storybook

Can you maybe post a snippet of your package.json?

Answer 79 · 2021-01-25T15:41:04.000Z

@zipme can you try yarn --update-checksums with the git test repo?

Answer 80 · 2021-01-25T16:14:52.000Z

@zipme @litan1106
The package.json is what's in the commit so if I just run the following, it will fail:

git clone https://github.com/litan1106/20200814-vue-storybook.git && cd 20200814-vue-storybook && git checkout 44de2dbfa42d2463d7e989bf05b4f15fa635a390 && npm install --exact

Answer 81 · 2021-01-25T16:36:48.000Z

My bad. I was using yarn and I forgot about the npm lock file...

Here is the updated git test repo.

npm install 'https://gitpkg.now.sh/litan1106/20200814-vue-storybook?upate-vue3.0-storybook6.2'

Answer 82 · 2021-01-25T17:02:21.000Z

Right, okay, with the commit has 91d46fd5cc7b3ebe7cddd97593ea1da2cdb7a1a it works now with yarn.
I'm using npm 7 which rewrites the lock to "lockfileversion": 2 and with that, it didn't work. Didn't try below npm@7.

Answer 83 · 2021-01-25T18:32:56.000Z

@zipme That still didn't work, and is throwing the same error:
Error: Cannot find module '@storybook/vue'.. not entirely sure why. I updated all the dependencies to use 30547456f.
Here is my package json.

"devDependencies": {
    "@storybook/addon-a11y": "https://gitpkg.now.sh/zipme/storybook/addons/a11y?30547456f",
    "@storybook/addon-actions": "https://gitpkg.now.sh/zipme/storybook/addons/actions?30547456f",
    "@storybook/addon-backgrounds": "https://gitpkg.now.sh/zipme/storybook/addons/backgrounds?30547456f",
    "@storybook/addon-docs": "https://gitpkg.now.sh/zipme/storybook/addons/docs?30547456f",
    "@storybook/addon-essentials": "https://gitpkg.now.sh/zipme/storybook/addons/essentials?30547456f",
    "@storybook/addon-knobs": "https://gitpkg.now.sh/zipme/storybook/addons/knobs?30547456f",
    "@storybook/addon-links": "https://gitpkg.now.sh/zipme/storybook/addons/links?30547456f",
    "@storybook/addon-storysource": "https://gitpkg.now.sh/zipme/storybook/addons/storysource?30547456f",
    "@storybook/addon-viewport": "https://gitpkg.now.sh/zipme/storybook/addons/viewport?30547456f",
    "@storybook/source-loader": "https://gitpkg.now.sh/zipme/storybook/lib/source-loader?30547456f",
    "@storybook/vue3": "https://gitpkg.now.sh/zipme/storybook/app/vue3?30547456f"
  },
  "resolutions": {
    "@storybook/core": "^6.2.0-alpha.18",
    "@storybook/addons": "^6.2.0-alpha.18",
    "vue-loader": "^16.0.0-beta.7"
  }

Answer 84 · 2021-01-25T18:46:50.000Z

@Mootook can you try deleting node_modules and yarn again? Also, you don't need resolutions anymore, the latest commit resolves the issue.

Here is my package.json

    "@storybook/addon-a11y": "https://gitpkg.now.sh/zipme/storybook/addons/a11y?30547456ff",
    "@storybook/addon-actions": "https://gitpkg.now.sh/zipme/storybook/addons/actions?30547456ff",
    "@storybook/addon-backgrounds": "https://gitpkg.now.sh/zipme/storybook/addons/backgrounds?30547456ff",
    "@storybook/addon-essentials": "https://gitpkg.now.sh/zipme/storybook/addons/essentials?30547456ff",
    "@storybook/addon-knobs": "https://gitpkg.now.sh/zipme/storybook/addons/knobs?30547456ff",
    "@storybook/addon-links": "https://gitpkg.now.sh/zipme/storybook/addons/links?30547456ff",
    "@storybook/addon-storysource": "https://gitpkg.now.sh/zipme/storybook/addons/storysource?30547456ff",
    "@storybook/addon-viewport": "https://gitpkg.now.sh/zipme/storybook/addons/viewport?30547456ff",
    "@storybook/source-loader": "https://gitpkg.now.sh/zipme/storybook/lib/source-loader?30547456ff",
    "@storybook/vue3": "https://gitpkg.now.sh/zipme/storybook/app/vue3?30547456ff",

Answer 85 · 2021-01-25T18:47:51.000Z

@Mootook and you don't need addon-docs if you already install addon-essentials (https://www.npmjs.com/package/@storybook/addon-essentials)

Answer 86 · 2021-01-25T19:00:30.000Z

@zipme, thanks. I removed the resolutions, deleted node_modules and yarn installed. Same error unfortunately. (Note, I can get this working without storybook/addon-docs).
I understand docs is packaged with essentials, but I wanted to use additional configuration with the docs addon, which from my understanding requires manually installing the addon you want to configure.

Answer 87 · 2021-01-25T19:42:23.000Z

@Mootook and you don't need addon-docs if you already install addon-essentials (https://www.npmjs.com/package/@storybook/addon-essentials)

i can't get Docs work for Vue3 without @storybook/addon-docs installed

@Mootook
as a temporary workaround i've edited node_modules/@storybook/addon-docs/dist/cjs/frameworks/vue/preset.js line 16 to paths: [require.resolve('@storybook/vue3')] and it works

here is snippet of my package.json (i didn't update resolutions yet, maybe leave it like this until stable)

"devDependencies": {
    "@babel/core": "^7.12.10",
    "@storybook/addon-a11y": "https://gitpkg.now.sh/zipme/storybook/addons/a11y?vue-3-support",
    "@storybook/addon-actions": "https://gitpkg.now.sh/zipme/storybook/addons/actions?vue-3-support",
    "@storybook/addon-backgrounds": "https://gitpkg.now.sh/zipme/storybook/addons/backgrounds?vue-3-support",
    "@storybook/addon-essentials": "https://gitpkg.now.sh/zipme/storybook/addons/essentials?vue-3-support",
    "@storybook/addon-knobs": "https://gitpkg.now.sh/zipme/storybook/addons/knobs?vue-3-support",
    "@storybook/addon-links": "https://gitpkg.now.sh/zipme/storybook/addons/links?vue-3-support",
    "@storybook/addon-storysource": "https://gitpkg.now.sh/zipme/storybook/addons/storysource?vue-3-support",
    "@storybook/addon-viewport": "https://gitpkg.now.sh/zipme/storybook/addons/viewport?vue-3-support",
    "@storybook/addon-docs": "https://gitpkg.now.sh/zipme/storybook/addons/docs?vue-3-support",
    "@storybook/source-loader": "https://gitpkg.now.sh/zipme/storybook/lib/source-loader?vue-3-support",
    "@storybook/vue3": "https://gitpkg.now.sh/zipme/storybook/app/vue3?vue-3-support",
    "@vue/compiler-sfc": "^3.0.4",
    "babel-loader": "^8.2.2",
    "node-sass": "^5.0.0",
    "sass": "^1.32.5",
    "sass-loader": "^10.1.1",
    "vue-loader": "^16.0.0-beta.7"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "resolutions": {
    "@storybook/core": "^6.2.0-alpha.7",
    "@storybook/addons": "^6.2.0-alpha.7",
    "vue-loader": "^16.0.0-beta.7"
  }

Answer 88 · 2021-01-25T19:46:36.000Z

@Mootook Indeed, there might still be other compatibility issues with addon-docs, and I only fixed the issues when using it with addon-essential. Since this is just a temporary solution I would wait for 6.2.0 official release

Answer 89 · 2021-01-25T19:50:17.000Z

@zipme Sounds good. Thanks for the temp workaround though!

@kyosheek Thanks. I'll try that out.

Answer 90 · 2021-01-25T20:56:46.000Z

thanks everyone. this is a good temp solution.

Answer 91 · 2021-01-27T15:32:42.000Z

Hi @zipme , sorry i ran the wrong repo and now it works, thanks zipme for your time

Answer 92 · 2021-02-02T01:50:19.000Z

Shiver me timbers!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.0-alpha.20 containing PR #13775 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

Answer 93 · 2021-02-02T01:52:07.000Z

Still in progress: addon-docs and storyshots support coming soon!

Thanks @phated for getting this across the line and to @SasanFarrokh, @andoshin11, @milewski and everybody else who helped get it this far. Looking forward to shipping in 6.2!!!

Answer 94 · 2021-02-02T06:17:26.000Z

Hi @shilman, I have this error with last update

Answer 95 · 2021-02-02T06:23:47.000Z

@MironenkoDeveloper You'll want to use "@storybook/vue3": "^6.2.0-alpha.20", in place of @storybook/vue and remove any reference to the latter. I had to delete my node_modules and reinstall to get everything working.

Answer 96 · 2021-02-02T06:49:27.000Z

Thanks @radicalpi @MironenkoDeveloper for testing this out! we'll write up some upgrade docs and QA instructions once the addon-docs updates are merged. 🙏

Answer 97 · 2021-02-02T09:54:22.000Z

awesome! i just re-added storybook to our setup and it’s looking good. thanks to all of you involved in implementing, fixing and integrating this.

i even see my knobs test (an input field that should change a label of a component) – though, changing the input does not apply to the component. should this be working already?

Update: Here is the error from the console.

TypeError: Cannot set property 'value' of undefined
    at Object.knobChanged (registerKnobs.js:38)
    at index.js:188
    at Array.forEach (<anonymous>)
    at Channel.handleEvent (index.js:187)
    at PostmsgTransport.<anonymous> (index.js:77)
    at PostmsgTransport.handler (index.js:126)
    at PostmsgTransport.handleEvent (index.js:300)

Answer 98 · 2021-02-02T16:36:03.000Z

thanks team.

yarn global remove @@storybook/cli
yarn global add @storybook/cli@next
npx sb upgrade --prerelease or npx sb init --prerelease

Answer 99 · 2021-02-02T20:26:03.000Z

I've tried upgrading (I had a working version in a vue3 project with @zipme's workaround), but I am now getting a few different errors.
Getting a version of this for every storied component:

ERROR in ./src/components/_base/BaseUserAvatar.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.

(Tried adding vue-template-compiler as a peer dependency.)
Also getting a version of this for every storied component:

ERROR in ./src/components/_base/BaseUserAvatar.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined

The relevant portion of my package.json:

{
    "@storybook/addon-actions": "^6.2.0-alpha.20",
    "@storybook/addon-backgrounds": "^v6.2.0-alpha.20",
    "@storybook/addon-essentials": "^v6.2.0-alpha.20",
    "@storybook/addon-links": "^v6.2.0-alpha.20",
    "@storybook/addon-storysource": "^v6.2.0-alpha.20",
    "@storybook/addon-viewport": "^v6.2.0-alpha.20",
    "@storybook/source-loader": "^v6.2.0-alpha.20",
    "@storybook/vue3": "^v6.2.0-alpha.20"
}