Little pieces that do something.

One file: markup, settings, behaviour, style.

A component has up to four parts, each a tab in Data > Components: the template it draws, the props a page can set (with defaults and labels), the script that makes it respond, and optional style that stays inside it and never leaks into your page.

The editor recompiles the preview as you type. Components export and import as a bundle, so you can move one from site to site. Tools can ship components of their own too.

The counter, most of it

<template>
  <div class="value">{{count}}</div>
  <button data-action="dec">-</button>
  <button data-action="inc">+</button>
</template>
<props>
  { "initial": {"type": "number", "default": 0},
    "step":    {"type": "number", "default": 1} }
</props>
<script>
export default {
  data() { return { count: 0 }; },
  methods: {
    inc() { this.set({ count: this.data.count + this.props.step }); },
    dec() { this.set({ count: this.data.count - this.props.step }); }
  },
  onMount() { this.set({ count: this.props.initial }); }
};
</script>