@lunarui/vue NPM

@ow3/hello-world-vue

This is the core of your component library.

💡 Get Started

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

# you may use this GitHub template or the following command:
npx degit openwebstacks/stacks-starter hello-world-stack
cd hello-world-stack

pnpm i -r # install deps for all packages
pnpm dev # stubs the libraries for local use
pnpm dev:vite-vue # starts the dev server
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

Because this project is optimized toward the development of easily reusable & composable component libraries, it's very easy to use (and distribute):

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

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

Tips

This project also includes a simple way to handle your versioning. Through semantic commit names, it will also generate the two changelogs: one as part of the GitHub releases & the one markdown file that's stored 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 follow the prompts

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

Dev Tools

TypeScript 4.7
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)
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
- 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

Composition API with <script setup> SFC syntax
ESLint - statically analyzes your code to quickly find problems

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