❯
fn

createReusableTemplate

v0.0.14testeddemo

Define a template once and reuse it multiple times within the same component. Returns a [DefineTemplate, ReuseTemplate] pair (also destructurable as { define, reuse }). The template captured by DefineTemplate's default slot is rendered wherever ReuseTemplate appears, receiving its props/attrs as slot bindings. Supports a generic for typed bindings, typed slots, custom props, and inheritAttrs. Render-only and fully SSR-safe — it never touches window/document. The pair is created lazily and shares a single shallowRef for the captured render function, so there are no watchers and no per-render allocations beyond the vnode itself.

Source Tests

Examples

ts
const [DefineTemplate, ReuseTemplate] = createReusableTemplate();
// Template:
// <DefineTemplate><span>Hello</span></DefineTemplate>
// <ReuseTemplate /> <ReuseTemplate />
ts
// Typed bindings + custom props
const [DefineItem, ReuseItem] = createReusableTemplate<{ label: string }>();
// <DefineItem v-slot="{ label }">{{ label }}</DefineItem>
// <ReuseItem label="A" /> <ReuseItem label="B" />

Demo

Loading demo…

Signature

ts
export function createReusableTemplate<
  Bindings extends Record<string, any>,
  Slots extends SlotPropsMap = Record<'default', undefined>,
>(
  options: CreateReusableTemplateOptions<Bindings> ={ ... }

Type Parameters

Bindingsextends Record<string, any>
Slotsextends SlotPropsMap= Record<'default', undefined>

Parameters

ParameterTypeDescription
options?CreateReusableTemplateOptions<Bindings>name, inheritAttrs, and props

Returns

ReusableTemplatePair<Bindings, Slots>A [define, reuse] tuple, also accessible as { define, reuse }