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's is important to understand what a Web Component is. Think of it as a (custom) HTML element. That being said, this is an opinionated starter kit to help you expedite the development of your component library.
๐ฉ๐ฝโ๐ป Dev Tools
- TypeScript 4.6
- Vue 3.2 - write Web Components the same way you would write SFCs
- Vitest - Unit testing powered by Vite
- Cypress - E2E testing
- Tailwind CSS - create your own style guide with ease
- Renovate - Automatically PR dependency updates
- GitHub Actions - Commit code style fixes automatically, tag releases, and run the test suite
- VS Code Extensions
๐งฉ
Plugins
unplugin-vue-components
- components auto importunplugin-auto-import
- Directly use Vue Composition API and others without importing- VueUse - Collection of useful composition APIs
- Vitebook - A modern open source Storybook alternative
๐ฅฐ
Coding Style
- Use Composition API with
<script setup>
SFC syntax- Reactivity Transform enabled
- ESLint - statically analyzes your code to quickly find problems
- Prettier - Opinionated code formatting, like Tailwind class name sorting
๐ก
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 meemalabs/web-components-library-starter my-wc-library
cd my-wc-library
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 library for production-ready use
pnpm build
Additionally, the package.json
contains some useful snippets you likely want to be aware of.
๐ฅ๏ธ
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:
For casual chit-chat with others using this package:
๐
License
The MIT License (MIT). Please see LICENSE for more information.
Made with