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.


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.


Quick example


<template is="uce-template">
  <style scoped>
    span {
      color: green;

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

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