createReusableTemplate

v0.0.15testeddemo

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

const [DefineTemplate, ReuseTemplate] = createReusableTemplate();
// Template:
// <DefineTemplate><span>Hello</span></DefineTemplate>
// <ReuseTemplate /> <ReuseTemplate />

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

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

Parameter	Type	Default	Description
`options`?	`CreateReusableTemplateOptions<Bindings>`	`{}`	`name`, `inheritAttrs`, and `props`

Returns

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