If you have other app-level settings you’d like to be able to mess with while building/testing your components, you should put them here. The props and watch sections of my wrapper are there so you can toggle between languages (i18n) and the dark|light themes when viewing your components in Storybook. extend Vue to use Vuetify around the wrapped component wrap the passed component within the passed context storybook/preview.js // Imports for configuring Vuetify There’s probably a more elegant way to do this, but I’m slowly, slowly learning that working code is better than perfect code. The newer version of Storybook (6.x) lets you put a “decorator” right in the. Free Bootstrap Admin Templates & Themes by KeenThemes serve as a solid foundation for any project that requires high-quality and cost-efficient front-end. No matter, it appears the plugin is designed for the old version of Storybook (5.x). Shit, now that I’m writing this, I realize there’s a new version of that plugin. Last time I followed John Leider’s approach and created a custom add-on with a decorator to wrap all my component stories in Vuetify clothing. I almost always have to look this up, and it always seems to take forever to find the docs. Also, if using SCSS, then I might not need the indentedSyntax rule. This is an example of how to create a switch that toggles between light and dark mode, using Vuetify. Note that if I decide to switch to SCSS or to save the variables.sass file in a different directory ( must be either sass|scss|styles), I need to update this rule to match. The trickiest part is getting the SASS rule typed in correctly. return the updated Storybook configuration PrependData: path.resolve(_dirname, './'), used in the Vue = path.resolve(_dirname, '.', 'src') the alias points to the `src/` directory, a common alias so I can import from '~storybook/util/helpers'Ĭ = path.resolve(_dirname) storybook/main.js const path = require('path') // used for resolving aliases How many actual components could you actually have built in that same span of time? Who knows, but we <3 progress. □Īnd of course, enough time has passed that you don’t really remember the details of why you configured it the way you did the last time, so you have to spend most of a day re-learning it to figure out how to make it work again. There’s a new version of (node|ecmascript|vue|shiny-new-best-practice)Īnd of course, even if you have a perfectly valid working version of Storybook already configured in your last project– it doesn’t work anymore.(BTW, if you don’t know what Storybook is, the 2-ish minute video below gives a pretty decent overview.) So you go to install it and you find that one or more of the following things has happened since the last time you did this: And considering you all are developers, Im willing to bet a ton of you pr. Hmmm… I think I’d like to use Storybook to build and test my components in relative isolation. More and more websites have a dark mode available to fit their users preferences. You go to start a brand new Vue + Vuetify project.
0 Comments
Leave a Reply. |