Vue2 Compatibility

[heykc]

Description

This is my attempt at making @storybook/builder-vite compatible with Vue 2. specifically Vue 2.7. Most of the credit should go to @Djaler, as I pretty much just referenced their work and added a few ternaries to allow both Vue 2 and 3.

What's changed

I tried to keep my commits as clear as possible, but here are the highlights:

• duplicated vue example to make vue2 example
  • renamed all the necessary language and added necessary packages for vue2
• renamed vue example to vue3 and adjusted yarn scripts accordingly
• checking for vue or vue3 in vite-config.ts and requiring respective @vitejs/plugin-X build

Not Resolved

I wasn't able to get both the vue2 and vue3 examples to work within the same repo. I don't have a ton of experience with Yarn and it looked as if Yarn was only allowing one version of @vitejs/plugin-(vue|vue2) in the root devDependencies. The only way I was able to get it to have both is if I yarn add'd the package directly into the root package file, which seemed not ideal.

I would love to see if anyone could contribute to this PR to get both examples working. the Vue3 example still works, and I've confirmed that the Vue2 option works with my own Vue2.7 build of Storybook by yarn packing and installing it via tarball. It really does seem like the issue lies in the fact that both these examples are trying to live within the same monorepo. Any advice is appreciated.

[IanVS]

Thanks for this! I'll give it a review soon. I wouldn't worry too much about the examples, because there are plans to move this project inside the storybook main monorepo and they're completely changing the way they do examples to avoid this exact kind of problem.

[Djaler]

maybe we can support vue < 2.7 here too? We just need to check vue version and require another plugin (vite-plugin-vue2)

[IanVS]

Hi @heykc, what do you think of this?

[heykc]

Hey @Djaler / @IanVS, sorry I totally forgot to circle back to this.

I think this makes sense! Although after thinking about this a little, would it be so bad to have the user install the correct package themselves within viteFinal? We could just put a bit of documentation, probably in the README, depicting which vite plugin to use based on which vue plugin and vue version, and we can default to @vitejs/plugin-vue here. All the user would have to do is spread all existing plugins then have their correct vitejs plugin after

[IanVS]

I think I'm fine with that. @Djaler you've got more experience with running / supporting vue 2. What's your feeling on this idea?

[Djaler]

Personally, I prefer this plugin to support all three variations out of the box. I don't think we'll see more vue/vite-vue-plugin versions, so this setup will be stable for a long time

[VisionYi]

Is there anything updated? @IanVS @Djaler
I hope storybook builder-vite can do Vue2 Compatibility. Please 🥺👏👏
Because the official plugin @vitejs/plugin-vue2 has been released.

reference https://blog.vuejs.org/posts/vue-2-7-naruto.html

And I don't want to use another workaround storybook-builder-vite-vue2 and the unofficial plugin vite-plugin-vue2.

[IanVS]

@VisionYi Right now I'm focused on getting the vite builder working in storybook 7.0. @heykc to move forward with this, how about you remove the vue2 example, and just stick with 2.7+ for now. If we get lots of requests for 2.6, we can see what we can do there, but trying to support both will be extra complexity. Might as well take it one step at a time. Do you have time to make the updates?

[heykc]

Sure thing. I can get to it sometime this week ✌🏽

[VisionYi]

@VisionYi Right now I'm focused on getting the vite builder working in storybook 7.0. @heykc to move forward with this, how about you remove the vue2 example, and just stick with 2.7+ for now. If we get lots of requests for 2.6, we can see what we can do there, but trying to support both will be extra complexity. Might as well take it one step at a time. Do you have time to make the updates?

Thanks for your reply, I got it.

[emosheeep]

I got solution after suffering, wish could help you. You can set npm alias for @vitejs/plugin-vue with npm:@vitejs/plugin-vue2 in package.json, which works well with my project

"@vitejs/plugin-vue": "npm:@vitejs/plugin-vue2",

and here is my config file(.storybook/main.js)

const { resolve } = require('path');
const { mergeConfig, loadConfigFromFile } = require('vite');
const vueJsx = require('@vitejs/plugin-vue2-jsx')

module.exports = {
  framework: '@storybook/vue',
  core: { builder: '@storybook/builder-vite' },
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-links',
  ],
  async viteFinal(config) {
    config.plugins.push(vueJsx());
    return config
  },
};

[ardakkk]

is there any update?

[fazulk]

@emosheeep was there any other setup you needed to get this working for yourself? My attempt only produced a ton of errors related to vue-docgen api.

[emosheeep]

@VisionYi Do you update all The dependencies version to the latest. Show me your code

[VisionYi]

@VisionYi Do you update all The dependencies version to the latest. Show me your code

I think you tagged the wrong person. Do you want to tag @fazulk ?

By the way. I refer to your code to @vitejs/plugin-vue with npm:@vitejs/plugin-vue2 in package.json.
Then, it also happened some errors.

So, I my solution that is to add the code resolve.alias: { find: 'vue', replacement: 'vue/dist/vue.esm.js' } on my config file(.storybook/main.js)

async viteFinal (config) {
    return mergeConfig(config, {
      resolve: {
        alias: [
          // fix issue vue2 with Vite
          { find: 'vue', replacement: 'vue/dist/vue.esm.js' }
        ],
        extensions: ['.vue', '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
      },
    })
  }

Maybe @fazulk you can try to add it.

[emosheeep]

@VisionYi Do you update all The dependencies version to the latest. Show me your code

I think you tagged the wrong person. Do you want to tag @fazulk ?

Oh！I‘m sorry for this. Yeah I supposed to tag @fazulk ~

[fazulk]

Thanks for the tip all- I did get it working with the example @VisionYi provided.

[emosheeep]

@VisionYi Do you update all The dependencies version to the latest. Show me your code

I think you tagged the wrong person. Do you want to tag @fazulk ?

By the way. I refer to your code to @vitejs/plugin-vue with npm:@vitejs/plugin-vue2 in package.json.

Then, it also happened some errors.

So, I my solution that is to add the code resolve.alias: { find: 'vue', replacement: 'vue/dist/vue.esm.js' } on my config file(.storybook/main.js)

async viteFinal (config) {

    return mergeConfig(config, {

      resolve: {

        alias: [

          // fix issue vue2 with Vite

          { find: 'vue', replacement: 'vue/dist/vue.esm.js' }

        ],

        extensions: ['.vue', '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']

      },

    })

  }

Maybe @fazulk you can try to add it.

Haha，thanks for your reminding. In fact, I added this line at first as below,

async viteFinal(config) {
  config.resolve.alias.vue = 'vue/dist/vue.esm.js'; // at the beginning
  config.plugins.push(vueJsx());
  return config;
}

but later found it was not the core problem, so I deleted it. The reason why this problem occurs is that we use template to write stories. If we use jsx or render function, this problem will not occur.

By the way，do you encounter this problem #488

[IanVS]

For anyone here who's a Vue2 user, it would be awesome if you're willing to help us out setting things up for Storybook 7. It sounds like @shilman might need to run some thoughts past someone who knows vue2 well, to adjust the way our vue2 renderer works: storybookjs/storybook#19165 (comment). Once that renderer is working correctly, it will be pretty simple to get things set up for Vite as well.

[shilman]

@IanVS I implemented the fix described in that comment here storybookjs/storybook#19207

However, there are still more problems with the Vue2 renderer that need to be solved, described in that PR. Would LOVE to work with anybody who's interested to get this into shape. With someone who knows both Vue 2 and 3, I bet we could get something working in an hour or two

[prashantpalikhe]

Hey @shilman I can spend some time with you tomorrow to look into this if you are up for it.

[shilman]

@prashantpalikhe that would be amazing! Let's do it. When is good for you?

[IanVS]

I sucked some of these commits into #503, which adds vue 2.6 and 2.7 support. Thanks for all the help and discussion here!