๐Ÿ Opinionated Web Components Starter template to help kick-start development of a cross-framework component library.

Overview

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

๐Ÿงฉ Plugins

๐Ÿฅฐ Coding Style

๐Ÿ’ก 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:

Discussions on GitHub

For casual chit-chat with others using this package:

Join the Meema Discord Server

๐Ÿ“„ License

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

Made with โค๏ธ by Meema Labs. And many thanks to antfu!

Comments
Releases(v0.8.0)
Owner
Open Web Labs
Open Web Labs
Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Onsen UI - Cross-Platform Hybrid App and PWA Framework Onsen UI is an open source framework that makes it easy to create native-feeling Progressive We

null 8.7k Jan 4, 2023
๐Ÿฆ‡ Opinionated Vite Starter Template

because our first commits never have parents I bet your parents taught you that you mean something, that you're here for a reason. My parents taught m

gamachexx 62 Dec 22, 2022
Production-ready fullstack Nuxt 3 starter with a well-working, opinionated configuration

sidebase sidebase is a modern, best-practice, batteries-included fullstack-app starter based on Nuxt 3 and TypeScript. With this nuxt 3 starter you ge

sidestream 392 Jan 1, 2023
A template repository / quick start to build Azure Static Web Apps with a Node.js function. It uses Vue.js v3, Vue Router, Vuex, and Vite.js.

Azure Static Web App Template with Node.js API This is a template repository for creating Azure Static Web Apps that comes pre-configured with: Vue.js

Marc Duiker 6 Jun 25, 2022
๐Ÿ““ The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Storybook 75.9k Jan 9, 2023
Vite-plugin-web-extension - A vite plugin for generating cross browser platform, ES module based web extensions.

vite-plugin-web-extension A vite plugin for generating cross browser platform, ES module based web extensions. Features Manifest V2 & V3 Support Compl

Ruben Medina 81 Dec 31, 2022
Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native Visit our website at vue-native.io or read the official documentation here. Build native mobile apps using Vue Vue Native is a framework to

GeekyAnts 8.4k Jan 6, 2023
Veloce: Starter template that uses Vue 3, Vite, TypeScript, SSR, Pinia, Vue Router, Express and Docker

Veloce Lightning-fast cold server start Instant hot module replacement (HMR) and dev SSR True on-demand compilation Tech Stack Vue 3: UI Rendering lib

Alan Morel 10 Oct 7, 2022
Libraries for sidebase, the confident nuxt 3 starter template

Sidebase Libraries This is the repository containing the packages that power sidebase. Open packages/ to see the packages. Usage We use lerna to manag

sidestream 0 Oct 20, 2022
Carpatin is a React JS Admin Dashboard Template that focuses on the management flows of a back-office application. We leverage the Material-UI power of stylizing the components in a way that feels more professional.

Carpatin Dashboard Free Carpatin is a React Js Admin Dashboard Template that focuses on the management flows of a back-office application. We leverage

Devias 64 Dec 12, 2022
Vue2.x plugin to create scoped or global shortcuts. No need to import a vue component into the template.

vue2-shortcut Vue2.x plugin to create scoped or global shortcuts. No need to import a vue component into the template. Install $ npm install --save vu

Graxi 37 Aug 14, 2022
quickly start your Vue dev server

vue-fast-dev-server 10ๅ€็ผฉ็Ÿญๆ‚จ็š„vue dev serverๅฏๅŠจๆ—ถ้—ด ๅฎ‰่ฃ… npm install vue-fast-dev-server --save-dev vue.config.js const path = require('path') module.exports

null 22 Feb 28, 2022
๐Ÿ‰ Material Component Framework for Vue

Supporting Vuetify Vuetify is a MIT licensed project that is developed and maintained full-time by John Leider and Heather Leider; with support from t

vuetify 36.2k Jan 3, 2023
New Framework Components for Vue.js 2

Supporting through Patreon Vuesax is an open source MIT project if you want to contribute to keep improving, If you are interested in supporting this

Lusaxweb 5.5k Dec 30, 2022
Admin UI Template is a modern, responsive, and customizable admin UI template for your business.

Admin UI Template is a modern, responsive, and customizable admin UI template for your business. It contains reusable components, theme color, and design support along with dark theme support.

Open Template Hub 7 Dec 18, 2022
Catamyst Frontend Stack - Discussion and demo for Frontend Web Development with Modern Tech Stack

Catamyst Frontend Stack Discussion and demo for Frontend Web Development with Modern Tech Stack. Made by M Haidar Hanif from Catamyst. Haidar is the F

Catamyst Community 48 Dec 24, 2022
Build performant, native and cross-platform desktop applications with native Vue + powerful CSS like styling.๐Ÿš€

Vue NodeGui Build performant, native and cross-platform desktop applications with Vue. ?? Vue NodeGUI is powered by Vue ?? and Qt5 ?? which makes it C

NodeGui 765 Dec 30, 2022
Integrate Tauri in a Vite project to build cross-platform apps.

vite-plugin-tauri Integrate Tauri in a Vite project to build cross-platform apps Install Make sure to setup your environment for Tauri development. Th

Amr Bashir 95 Dec 15, 2022
Clarity is a scalable, accessible, customizable, open-source design system built with web components.

Clarity is an open source design system that brings together UX guidelines, design resources, and coding implementations with Web Components

VMware Clarity 90 Dec 30, 2022