Vue: Add Vue3 support #10654
Comments
|
Hmm.. We might need to do a vue3 preset |
can i help? |
|
what i tried so far (only in dist files located in the node modules directory, though): vue/dist/server/framework-preset.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.jsapp component is now instantiated with 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
hopefully these baby steps are of some use. |
|
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! |
|
bump |
|
@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! |
|
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 |
|
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. |
|
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. |
|
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.. |
|
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 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 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. |
|
@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 |
|
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? |
|
Great work @milewski -- super exciting!!! 🚀 |
|
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: |
|
thanks a lot for your efforts @milewski – i am just trying out your branch and got an error when running |
|
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 |
|
@alex-w0 I'm not sure what you mean, the other packages are just addons that you might want to use. You can't use the "latest" version of the CLI to init a Vue 3 project, you need to use |
|
@phated Thanks, that works. I was just a bit confused because the readme of the package is still targeting to the latest version of the cli command. |
|
I started using NPM 7 and everything worked fine until I tried to update Storybook dependencies: It looks like Can you please remove the dependency between |
|
@livthomas unfortunately, the way everything is laid out right now, it is required to have the peerDependencies. @shilman and I were already talking about ways to make those go away because we are having issues supporting Vue 2 and Vue 3 in parallel and this might be the thing that pushes that work to the forefront. In the meantime, you probably want to create an npmrc in your project that sets the |
|
@alex-w0 Yeah, unfortunately, we don't have an automated way to keep the docs in-sync between "next" and "master", so we just keep everything referencing the happy-path and have things be a little more friction for users on the alpha/beta/rc releases. Sorry about that. |
|
@merceyz you added the AFAICT essentials itself doesn't depend on vue, but it depends on docs, which has an optional peer dep on vue. Is there any chance we can remove the peer dep from essentials? See @livthomas 's comment above. |
@shilman I think this is just a bug with npm, but without a repro I can't really test anything to answer either
@livthomas It shouldn't do that for optional peer dependencies, if it does you should file a bug report with npm |
|
When rendering a vue 3 component I get the error
My Setup: "dependencies": {
"@ionic/core": "^5.5.4",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@storybook/addon-actions": "^6.2.0-alpha.28",
"@storybook/addon-essentials": "^6.2.0-alpha.28",
"@storybook/addon-links": "^6.2.0-alpha.28",
"@storybook/vue3": "^6.2.0-alpha.28",
"@types/jest": "^24.0.19",
"@typescript-eslint/eslint-plugin": "^2.33.0",
"@typescript-eslint/parser": "^2.34.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-plugin-unit-jest": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"@vue/eslint-config-typescript": "^5.0.2",
"@vue/test-utils": "^2.0.0-0",
"babel-loader": "^8.2.2",
"eslint": "^6.7.2",
"eslint-import-resolver-typescript": "^2.3.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-vue": "^7.0.0-0",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"typescript": "~3.9.3",
"vue-jest": "^5.0.0-0"
}Story: import myButton from './Button.vue';
export default {
title: 'Components/Button',
component: myButton,
argTypes: {},
};
const Template = () => ({
components: { myButton },
template: '<my-button />',
});
export const Primary = Template.bind({});Component: <template>
<button>Button</button>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "Button",
});
</script>Has anyone faced a similar issue yet? |
|
Okay, I had to install the |
you mean It still does not run on my machine. Same error you had. |
|
@geilix10 The version marked as |
|
@geilix10 I was probably having the same problem as you. Did you also try installing the dependencies using Yarn instead of NPM? I ran into the same problem. I added When I ran I was able to fix this by adding the following section to my "resolutions": {
"vue-loader": "^16.1.2"
},By doing this, you're "forcing" Yarn to use I hope this fixes the issue for you as well! |
|
For anyone having problem with Storybook with Vue 3 + TypeScript, here's what I did:
"resolutions": {
"vue-loader": "^16.0.0"
}Adding const path = require('path');
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-postcss"
],
webpackFinal: async (config, { configType }) => {
config.module.rules.push({
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../'),
});
config.resolve.alias = {
'@': path.resolve(__dirname, "../src")
}
return config;
},
}
|
|
In addition to the above comment I can add, that the config.module.rules.push({
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
additionalData: `
@import "@/libs/ui/styles/variables.scss";
@import "@/libs/ui/styles/global.scss";
`,
},
},
],
}); |
|
The installation broke our existing project in Quasar: UpdateRunning the |
|
@shilman No got the message: Here my package.json |
|
Ah sorry I have to add (this was not added by npx init) than it works |
|
Hello. Now get this: Same issue was before I run Repo is here: https://github.com/noff/nuxt3storybook |
|
I have the same issue after upgrading an existing repo to vue3. After running
This is my package.json |
|
I ran into the same issue. Error: My observations. But
P.S. I had already tried |
This worked for you? I also tried installing vue as a dev dependency, but the error persists, when I run Have you done anything else to get it to work? What package versions have you installed now? |
|
I just noticed, we have different error.
This file is no longer part of the vue package. But storybook tries to import it here: This is my error stack: And my |
|
This is my package.json for reference. Edit: I installed it using Screenshot: https://i.imgur.com/jSbrxLl.png |
and others
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:
I still get a warning and an error in the shell:
– 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.)
The text was updated successfully, but these errors were encountered: