WebReflection / uce-template

A Vue 3 inspired Custom Elements toolless alternative.
https://medium.com/@WebReflection/a-new-web-components-wonder-f9e042785a91
ISC License
108 stars 7 forks source link
components components-and-templates web web-components

Āµce-template

Downloads CSP friendly

winter sky

Social Media Photo by Federico Bottos on Unsplash

A tiny toolless library with tools included. Live demo


šŸ“£ Community Announcement

Please ask questions in the dedicated discussions repository, to help the community around this project grow ā™„


Inspired by Vue 3 "One Piece", uce-template provides a custom builtin <template> element to define components in a Vue fashion.

<template is="uce-template">

  <style scoped>
  span { color: green }
  </style>

  <the-green>
    The <span>{{thing}}</span> is green
  </the-green>

  <script type="module">
  export default {
    setup() {
      return {thing: 'world'}
    }
  }
  </script>

</template>

Add this library to the equation, and see it bootstrapping all defined components.


Getting Started

Features
* **SSR** compatibility out of the box: components definitions land *once* so no duplicated templates are needed in both layout and *JS* * a simple **CLI** that converts any html page or component into its minified version and, optionally, *Babel* transpilation * **Custom Elements** based, including builtin extends, so that *IE11*, *Safari*, or any other browser, will work right away * optionally **lazy** `