sid-vue-components

Vue 3 + Vite Library Build

This project is an experiment to see how easy it is replicate our Vue 2 component library & Storybook. It uses Vue 3, Tailwind, Vite, and Storybook. All pieces were added using documented configuration processes in the individual projects. Figuring out exporting components and including CSS is still a little fussy but no worse than what we had before (probably a little bit better). I will publish a companion repository called vite-consumer that illustrates using the library.

Helpful documentation:

• https://vitejs.dev/guide/build.html#library-mode
• https://tailwindcss.com/docs/guides/vue-3-vite
• https://storybook.js.org/blog/storybook-vue3/
• https://storybook.js.org/blog/storybook-for-vite/
• https://storybook.js.org/docs/vue/api/mdx
• https://storybook.js.org/docs/vue/essentials/controls

The library exposes:

• Vue 3 components w/Tailwind styling
• A purged stylesheet for the component library
• A Tailwind configuration that can be reused in a consumer application

Running the project

# First run
$ yarn install

# Run in dev mode
$ yarn dev

# Library builds in /dist directory
$ yarn build

# Publishes to my (Denny's) NPM account
# This probably won't work for others
$ npm publish --public

# Use yarn link for local development
# Check out this repo and from the project root run:
$ yarn link

# Then in a consumer project, run:
$ yarn link @ais-public/ais-components