3 ms·
Storybook has been great working on an incrementally enhanced Vue app. The standard app doesn't really work with HMR and is a PITA when it comes to feedback loo
by Rapzid 6y ago
Storybook has been great working on an incrementally enhanced Vue app. The standard app doesn't really work with HMR and is a PITA when it comes to feedback loop.
Building out components in Storybook with all but the final page integration into the main app has been a great workflow thus far. Some custom API recording/playback utils have even made it a snap to work on larger "connected" components within Storybook. Even just being able to manually verify a bunch of different states after making a refactor by flipping through the component stories is a huge win over doing that in-app.
What was no so great with 5.x is getting it to build like a @vue/cli stock build with sass and full sourcemap support. This took quite a bit of Webpack knowledge of which I already had a fair bit but now have far more. Still the source lines are wrong in error messages for Vue compoments(at least with TypeScript) and I haven't looked too far into why yet.
I know they have put work into making Storybook 6.0 setup for Vue closer to the ecosystem defacto defaults, but I'm not super looking forward to upgrading and having to sort out any issues haha.
- raihansaputra 6y agoInterested on the incrementally enhanced part of your comment. Are you using Vue with the script tags and using .vue components?
- Rapzid 6y agoEssentially. We build out a bunch of separate entry points(pages in @vue/cli language) in two separate groups; components and pages. Both serve the same purpose in that the entry point is responsible for wiring the Vue components into the legacy page. Components may be included on every page or a number of pages, "page" entry points are meant to be included on certain routes. They are brought in via script tags in the legacy web framework.
- raihansaputra 6y agoWhat kind of webpack config are you using? Something similar to Laravel Mix?
- Rapzid 6y agoI just found out about Laravel Mix a month or so ago so I'm not sure. They are customized @vue/cli configs: Main UI: https://github.com/rundeck/rundeck/blob/main/rundeckapp/grails-spa/packages/ui/vue.config.js https://github.com/rundeck/rundeck/blob/main/rundeckapp/grai... Component lib: https://github.com/rundeck/rundeck/blob/main/rundeckapp/grails-spa/packages/ui-trellis/vue.config.js https://github.com/rundeck/rundeck/blob/main/rundeckapp/grai... Storybook: https://github.com/rundeck/rundeck/blob/main/rundeckapp/grails-spa/packages/ui-trellis/.storybook/main.js https://github.com/rundeck/rundeck/blob/main/rundeckapp/grai...
- raihansaputra 6y agoThank you for sharing!