Vue Component Library Starter Kit

This is an opinionated Vue Component Library Starter kit to help kick-start development of your next component library.

💡 Get Started

It's incredibly easy to get your component library started with this slightly opinionated starter kit. The only prerequisite is a basic understanding of how to design/develop Vue Single File Components (SFCs). In other words, HTML with sprinkled JavaScript will get you really far!

# you may use this GitHub template or the following command:
npx degit meemalabs/vue-component-library-starter my-lib
cd my-lib

# ensure you also now update your vite.config.ts with your library name

 # if you don't have pnpm installed, run `npm i -g pnpm`
pnpm i # install all deps
pnpm dev # starts the local server at http://localhost:3333 & watches for changes
pnpm build # builds the library for production-ready use

Additionally, the package.json contains some useful snippets you likely want to be aware of.

🤖 Usage

<script setup lang="ts">
import { HelloWorld } from 'my-lib'
</script>

<template>
  <HelloWorld />
</template>

👩🏽‍💻 Dev Tools

• Vite 2.9 - "Next Generation Frontend Tooling"
• Vue 3.2 - make easy use of Vue's powerful SFCs
• UnoCSS - create your own style guide with ease (e.g. Tailwind CSS)
• TypeScript 4.6
• Commitizen & commitlint - Automate git commits, versioning, and CHANGELOG generation
• Vitest - Unit testing powered by Vite
• Cypress - E2E testing
• Renovate - automatic PR dependency updates
• GitHub Actions - automatically fixes code style issues, tags releases, and runs the test suite
• VS Code Extensions
  • Volar - Vue 3 <script setup> IDE support
  • cspell - spell checking
  • Windi Intellisense - Tailwind CSS (or Windi CSS) class name sorter

🧩 Plugins

• unplugin-vue-components - components auto import
• unplugin-auto-import - Directly use Vue Composition API and others without importing
• VueUse - Collection of useful composition APIs

🥰 Coding Style

• Use Composition API with <script setup> SFC syntax
• Reactivity Transform enabled
• ESLint - statically analyzes your code to quickly find problems

When using this template, feel free to adjust it to your needs. This is simply a framework to help you quickly & efficiently develop and design components using industry best-practices.

Tips

This project also includes a simple way to handle your versioning. Through semantic commit names, it will also generate the 2 changelogs: one as part of the GitHub releases & the one markdown file that's created within the root of the project.

# how to create a git commit?
git add . # select the changes you want to commit
pnpm run commit # then simply answer the questions

# after you have successfully committed, you may create a "release"
pnpm run release # automates git commits, versioning, and CHANGELOG generation

# how to test your library locally?
pnpm pack # packs the library into a tarball

🧪 Testing

pnpm test

📈 Changelog

Please see our releases page for more information on what has changed recently.

💪🏼 Contributing

Please see CONTRIBUTING for details.

🏝 Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Discussions on GitHub

For casual chit-chat with others using this package:

Join the Open Web Discord Server

📄 License

The MIT License (MIT). Please see LICENSE for more information.

Made with ❤️ by Open Web Labs. And many thanks to antfu!