Template

The template directive makes it easy to insert and initialize an Alpine.js snippet inside a referenced <template> element. When used in combination with Alpine’s x-for directive, it enables recursive template rendering on the client side.

Usage

Use the template directive to reuse HTML snippets and generate repeated or nested content efficiently. The template should be clearly structured and maintainable. Avoid overcomplicating recursive structures, as deeply nested templates can impact performance and readability.

INFO

Similar to Alpine's x-for directive, the referenced <template> element MUST contain only one root element.

API Reference

Component attubute(s)

x-h-template

Arguments

Attribute	Type	Required	Description
self	$ref.<template>	true	Reference to the template that contains the code that should be inserted and initialized.
x-data	object	true	The properties defined in an x-data directive will be available to the rendered tempate element.

Examples

Tree with recursive rendering

<div x-data="app">
  <ul style="list-style-type: disc">
    <template x-for="listNode in tree" :key="listNode.id">
      <template x-h-template="$refs.listItemTemplate" x-data="{ node: listNode }"></template>
    </template>
  </ul>

  <template x-ref="listItemTemplate">
    <li>
      <span x-text="node.label"></span>

      <template x-if="node.children && node.children.length">
        <ul class="pl-8" style="list-style-type: disc">
          <template x-for="listNode in node.children" :key="listNode.id">
            <template x-h-template="$refs.listItemTemplate" x-data="{ node: listNode }"></template>
          </template>
        </ul>
      </template>
    </li>
  </template>
</div>
<script>
  Alpine.data('app', () => ({
    tree: [
      {
        id: 'docs',
        label: 'Documents',
        children: [
          {
            id: 'harmonia',
            label: 'Harmonia.pdf',
          },
          {
            id: 'alpine',
            label: 'alpine.pdf',
          },
          {
            id: 'tailwind',
            label: 'tailwind.pdf',
          },
        ],
      },
      {
        id: 'photos',
        label: 'Photos',
        children: [
          {
            id: 'holiday',
            label: 'Holiday',
            children: [
              {
                id: 'p1',
                label: 'Photo 1.jpg',
              },
              {
                id: 'p2',
                label: 'Photo 2.jpg',
              },
              {
                id: 'p3',
                label: 'Photo 3.jpg',
              },
            ],
          },
          {
            id: 'img1',
            label: 'Image 1.jpg',
          },
          {
            id: 'img2',
            label: 'Image 2.jpg',
          },
          {
            id: 'img3',
            label: 'Image 3.jpg',
          },
          {
            id: 'img4',
            label: 'Image 4.jpg',
          },
        ],
      },
      {
        id: 'hjs',
        label: 'harmonia.js',
      },
      {
        id: 'hcss',
        label: 'harmonia.css',
      },
    ],
  }));
</script>