@template

Define inline reusable template blocks

The @template directive allows you to define reusable template blocks inline within your main template file. This is useful for small, component-specific templates that don't warrant separate include files.

Syntax

@template("templateName")
    <!-- Template content -->
@endtemplate

Then use it with @include:

@include("templateName")

When to Use @template

Use inline templates when:

  • The template is small and only used within the current component

  • You want to keep related code together in one file

  • Creating a separate include file feels like overkill

For larger or shared templates, consider using include files instead.

Examples

Basic Inline Template

Define a template at the start of your file, then use it:

Button Template with Parameters

Create a reusable button pattern:

Card Template

Define a card layout that's reused multiple times:

Icon Template

Create a reusable icon wrapper:

Alert Template

Define different alert styles:

Template Placement

Templates should be defined at the beginning of your template file, before any HTML output. This keeps your templates organized and makes them easy to find:

Scope and Properties

Inline templates have access to:

  1. Properties passed via @include - Explicitly passed values take precedence

  2. Parent template properties - All properties from the parent template are accessible

  3. Loop context - When included inside an @each loop, the loop variable is available

Example with Scope

Best Practices

  1. Keep templates small - If a template grows large, move it to an include file.

  2. Define templates at the top - Place all @template definitions before your main content.

  3. Use descriptive names - Name templates after their purpose: "list-item", "card", "button".

  4. Pass explicit properties when possible - This makes the template's dependencies clear.

  5. Don't nest template definitions - Define templates at the top level, not inside other blocks.

  • @include - Including external template files

  • @each - Looping over collections

Last updated

Was this helpful?