Using Vite instead of Webpack?

[demiro]

Since whole building of webpack resources, typescript and sass took ages on webpack I decided to migrate the project to blazingly fast vite (sitll on vue 2 though)...

I am using a tool called webpack-to-vite which did the heavy lifting in creating basic stuff and now have a vite.config.js...

but the project still isn't working since the whole webpack process in creating docs and importing scss is not included...

is there a way you could help out with making the styleguidist work with vite?

[IanVS]

@demiro we use this package in the storybook vite builder, with a custom vite plugin. Maybe it will prove helpful to you: https://github.com/storybookjs/builder-vite/blob/889f9b563f9f5def4d0d546f3135302c2b7accde/packages/builder-vite/plugins/vue-docgen.ts.

[elevatebart]

Thank you Ian, yes you can try this approach. Though it would not solve the issue that the whole shell here is composed for webpack. I would replace vue-styleguidist by a combination of tools here:

• Vitepress to have a nice shell
• vue-docgen-cli to extract the props and slots into markdown files docs
• vue-live to render components docs
• a markdown-it plugin to tell markdown to render fenced code examples using vue-live above. inspiration

[elevatebart]

Here is my experiment with the idea: https://vue-styleguidist.github.io/Examples.html#docgen-vite

[He110te4m]

Here is my experiment with the idea: https://vue-styleguidist.github.io/Examples.html#docgen-vite

Can it support Vue2 with Vite? VitePress does not support Vue2, nor does VuePress2.

[elevatebart]

In this case, I would probably go with https://astro.build or https://www.11ty.dev. Anything that can render Markdown could render the outputs of docgen. Then use a remark/markdown-it plugin to follow the same concept I did right here and render the examples in vue-live 1.X (live examples for vue 2).

[He110te4m]

In this case, I would probably go with https://astro.build or https://www.11ty.dev. Anything that can render Markdown could render the outputs of docgen. Then use a remark/markdown-it plugin to follow the same concept I did right here and render the examples in vue-live 1.X (live examples for vue 2).

Thanks a lot, I know what I should do.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.