uce-template #

Source file extensions: .uce

uce-template is inspired by Vue 3, uce-template provides a custom builtin <template> element to define components in a Vue fashion.

Stories #

uce-template defines Custom Elements so they can be used in any story definition that supports HTML and optionally properties.

import './my-counter.uce';

export const story1 = () => '<my-counter></my-counter>';

uce-template is powered by uhtml so it's probably more idiomatic to use it. uhtml is also supported.

import './my-counter.uce';
import { html } from 'uhtml';

export const story1 = () => html`<my-counter .prop1=${3}></my-counter>`;

See uhtml documentation for more information.

References #

• uce-template
• uhtml

Quick example #

index.uce

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