Storybook + Laravel Mix + Vue 3 + Tailwind 2
Sometimes is hard to use a software like Storybook which has been mainly developed with React and for React (and makes sense, after all, React is more UI focused than Vue).
In this article we’ll show how’d we setup Laravel Mix with Storybook to display and test visually our Vue 3 components, getting rid on all the problems.
Let’s give it a start!
First of all we’ll need to start a new Storybook project, so run the following command on the root folder of your project:
npx sb@next init — builder webpack5
After that you’ll see a couple of folders added to your project and some scripts on your package.json.
We’ll also need a PostCSS addon for Storybook, we can install it like so:
yarn add -D @storybook/addon-postcss
So after this we’ll need to write a couple of resolutions on this same file so we make sure that this doesn’t generate any conflicts with Tailwind’s PostCSS (in which PostCSS v8 is required in Tailwind v2), as we can read here.
After this run a yarn install.
Remember that this resolutions are Yarn only, if you’re using NPM you should use something like npm-force-resolutions.
Finally, this is how the 2 files generated by Storybook should look like:
On the first main.js file, we just added a third item as an object on addons for use PostCSS with our own version (previously specified on the resolutions).
And last important bit, remember to add the CSS file of your application on the preview.js as Storybook doesn’t know it by default.
If you wanna see this working: See our example repository on Github.
Remember, this is an alpha version of Storybook on the date which this article is written. So any other problem related to it, just go to their repository and search or fill a new issue.
