Vue Component Library Starter

Vue Starter helps kick-start & maintain development of your next Vue component library. It is the most simple & comfortable solution for Vue developers to build highly-modular, widely-accepted & scalable component libraries. No matter whether you are a beginner or an expert, Stacks' approachable design allows you to learn more about its capabilities as you develop your library.

The clever way to build component libraries.

Develop beautiful reactive composable UIs without learning a new language. HTML, CSS, sprinkled with minimal JavaScript—dive in now!

☘️ Features

The ultimate goal of this Starter Kit is to help you create a component library. It is a ah optimized build process that automatically generates .mjs & .cjs library distributions for you, including its types. Other core features include:

• Automagically builds & distributes Vue 2 & 3 libraries for you
• Zero-config by default, yet highly-configurable—if needed
• Delightful Developer Experience (DX)
• Style with ease via UnoCSS (e.g. Tailwind CSS, Windi CSS, Heroicons, Bootstrap, etc.)
• Modern git commit conventions
• Automated npm package releases & semver versioning
• Pretty changelog generations (markdown & GitHub releases)
• Fully-typed, automatically (your components & composables)
• Optimized & automated GitHub PR dependency updates
• Bootstrapped documentation tooling & site to present library (via VitePress)

💡 Get Started

It's incredibly easy to get started. The only prerequisite is a basic understanding HTML & JavaScript. In other words, there is virtually no learning curve because "HTML with sprinkled JavaScript" will get you incredibly far.

# you may "Use this template" via the button in top right corner of this page
# or run the following commands:
npx degit openwebstacks/vue-starter hello-world-stack
cd hello-world-stack
npm run setup # WIP

To learn more, read more here

🤖 Usage

The following is a list of the most common ways to use interact with Stacks

pnpm install # install all dependencies (for all packages/workspaces)
pnpm fresh # fresh reinstall of all dependencies

pnpm dev # stubs the libraries for local use
pnpm build # builds the library for production-ready use
pnpm example # run one of the examples (follow CLI prompts)

pnpm commit # follow CLI prompts for committing changes
pnpm release # releases the library (packages) to npm

pnpm docs:dev # starts local server for the documentation site
pnpm docs:build # builds the documentation site
pnpm docs:serve # serves the documentation site

The package.json may contain additional useful snippets you want to be aware of.

Because we optimize toward the development of easily reusable & composable component libraries, our primary intention is always keep it simple, yet configurable:

<script setup lang="ts">
import HelloWorld from '@ow3/hello-world-vue'
</script>

<template>
  <HelloWorld name="J Doe" />
</template>

Read more about the setup & tips in the docs.

Developer Experience (DX)

This Starter Kit is a Component-First, UI & Build Framework. When developing your own library, this Starter Kit bootstraps the following for you:

• Powerful Build Engine - Stacks is a optimized Vite build engine
• Modern CSS Engine - pre-configured UnoCSS allows to create & manage your style guide with ease
• Fully Typed APIs - via TypeScript 4.8
• Be a Good Commitizen - pre-configured Commitizen & git-cz setup to simplify semantic git commits, versioning, and changelog generations
• Built With Testing In Mind - pre-configured unit & e2e-testing powered by Vitest
• Renovate - optimized & automated PR dependency updates
• GitHub Actions - runs your CI (fixes code style issues, tags releases & creates its changelogs, runs the test suite, etc.

Plugins & Extensions

• Automagically imports components
• Use framework functionalities without imports
  • VueUse - a collection of useful functions
• Deep VS Code Integration
  • IDE Capabilities - type hints, code completion, code formatting and more via Volar
  • Spell Checking - no more annoying typos to slip by!
  • Utility Class Intellisense - Tailwind CSS (or Windi CSS) class name sorter

Coding Style

• ESLint - statically analyzes, fixes and formats your code without the need of Prettier

When using this framework, feel free to adjust it to your needs. It is "simply" is a set of rules to help you quickly & efficiently bootstrap & design component libraries, using industry best-practices.

🧪 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 ❤️