Web Component Library Starter Kit

"Why create components for a specific framework when it can be written to be understood by all — including browsers?"

🤝 Introduction

Before you get started, it is important to understand what a Web Component is. Think of it as a (custom) HTML element. This custom element can natively be used within your framework-of-choice. That being said, this is an opinionated starter kit, employing many best-practices, to help you expedite the development of your web component library.

👩🏽‍💻 Dev Tools

• Vite 3.1 - "Next Generation Frontend Tooling"
• Vue 3.2 - write Web Components the same way you would write SFCs
• UnoCSS - create your own style guide with ease (e.g. Tailwind CSS)
• TypeScript 4.8
• Commitizen & commitlint - Automate git commits, versioning, and CHANGELOG generation
• Vitest - Unit & e2e testing powered by Vite
• 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.

💡 Get Started

It's very easy to get started, especially if you have designed/developed Vue Single File Components before. Check out the index.html and how the HelloWorld-component is defined within this repo. Feel free to create any component.

npx degit ow3org/web-components-library-starter my-lib
cd my-lib
pnpm i # if you don't have pnpm installed, run `npm install -g pnpm`

# starts the local server at http://localhost:3333 & watches for changes
pnpm dev

# builds the component library for production-ready use
pnpm build

# check out the `package.json` to see the remainder of scripts

Tips

When using VS Code as your code editor, you may want to consider keeping the vscode.html-data.json file updated. It provides hints to your code editor and you can find more examples here.

# 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

🖥️ Browsers

This starter kit is built for the modern web and avoids bloated polyfills and outdated environments as much as possible. Currently, it supports all browsers that fully implement the Custom Elements V1.

• Edge 79+
• Firefox 63+
• Chrome 67+
• Safari 13.1+
• Opera 64+
• iOS Safari 13.7+
• Android Browser 81+
• Opera Mobile 59+
• Chrome for Android 88+

🧪 Testing

yarn 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!