vue-storybook

Introduction

This repo contains a proof-of-concept Vue CLI application. It demonstrates the use of CLI plugins to configure the project to use both Storybook and Tailwind. Additionally, the project's build script builds the project as a library intended to be consumed by other Vue applications.

It seems clear to me that using the CLI plugins are the best way to implement these types of configurations. Trying to manually override the Webpack configuration is quite complicated to track down all the needed options. I was unsuccessful configuring Storybook with Tailwind.

This configuration is nice in that Storybook shares the main Vue app's Webpack configuration, so there is no need to keep them in sync.

Finally, this configuration implements PurgeCSS and the generated CSS file contains only the Tailwind rules that are used.

Resources

• GitHub - storybookjs/vue-cli-plugin-storybook: Vue CLI plugin for Storybook
• GitHub - forsartis/vue-cli-plugin-tailwind: vue-cli plugin for Tailwind CSS
• How to create, publish and use your own VueJS Component library on NPM using @vue/cli 3.0

Basic Configuration

$ vue create new-app
$ cd new-app

# Make sure to accept the option for the docs addon
# This automatically configures for MDX stories
$ vue add storybook

$ vue add tailwind

# See the final resource link to read about configuring as a component library 

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Build and publish component library

npm run build
npm publish --access public

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.