Create a Component Library With Vite, Vue and Tailwind
summary
Step-by-step guide to build and publish a Vue component library using Vite, Tailwind and PostCSS, creating reusable skeleton loader components, exporting both a global plugin and individual components, and producing ES and CJS bundles for npm. Shows exact Vite config: Vite build library mode, rollup externals for Vue, and preserveModules for tree shaking, plus postcss-cli to emit dist/index.css. Demo app loads the skeletons, supports dark mode, and npm publish succeeds.
AI-written summary · about
chapters (10)
- 0:00Introduction and motivation
- 4:15Setting up the project
- 10:11File structure for components
- 13:59Designing skeleton loaders
- 17:12Creating the entry file
- 18:37Configuring Vite build
- 21:48Configuring package.json
- 25:00Building and publishing
- 26:25Testing the component library
- 30:14Testing and accessibility
related talks
24mCreate a Custom Component Library with Vue & Tailwind CSS
18mCreating a highly reusable VueJS Component library and publishing on NPM using @vue/cli 3.0
07mBuild Your Own Component Library, With `Shadcn-vue`
05mDocumenting Component Libraries with VitePress
31mBuilding Components for Vue 2&3 - an Attempt at solving the challenge
15mNew Ways to Vue
21mVue's Road to Vite
45mInside Vue Components