A simple yet complete TypeScript + Vue 3 library starter powered by:
- 🏎 Turborepo — High-performance build system for Monorepos
- 🚀 Vue — JavaScript library for user interfaces
- 🛠 Tsup — TypeScript bundler powered by esbuild
- 📖 Storybook — UI component environment powered by Vite
As well as a few others tools preconfigured:
- TypeScript for static type checking
- ESLint for code linting
- pnpm for package management
- Vitest for Vue components unit testing
- Jest for TypeScript scripts unit testing
Clone the design system example locally.
pnpm build- Build all packages including the Storybook sitepnpm dev- Run all packages locally and preview with Storybookpnpm lint- Check lint for all packagespnpm lint:fix- Lint all packagespnpm clean- Clean up allnode_modulesanddistfolders (runs each package's clean script)
Turborepo is a high-performance build system for JavaScript and TypeScript codebases. It was designed after the workflows used by massive software engineering organizations to ship code at scale. Turborepo abstracts the complex configuration needed for monorepos and provides fast, incremental builds with zero-configuration remote caching.
Using Turborepo simplifes managing your design system monorepo, as you can have a single lint, build, test, and release process for all packages. Learn more about how monorepos improve your development workflow.
This Turborepo includes the following packages and applications:
apps/docs: Component documentation site with Storybookpackages/@acme/ui: Core Vue componentspackages/@acme/utils: Shared TypeScript scriptspackages/@acme/tsconfig: Sharedtsconfig.jsons used throughout the Turborepopackages/eslint-config-acme: ESLint preset
Each package and app is 100% TypeScript. pNPM Workspaces enables us to "hoist" dependencies that are shared between packages to the root package.json. This means smaller node_modules folders and a better local dev experience. To install a dependency for the entire monorepo, use the -W workspaces flag with pnpm add.
This example sets up your .gitignore to exclude all generated files, other folders like node_modules used to store your dependencies.
To make the core library code work across all browsers, we need to compile the raw TypeScript code to plain JavaScript. We can accomplish this with tsup, which uses esbuild to greatly improve performance.
Running pnpm build from the root of the Turborepo will run the build command defined in each package's package.json file. Turborepo runs each build in parallel and caches & hashes the output to speed up future builds.
For acme-ui, use rely on Vite's build command.