AlpineJS components

Frontend

Creating and using AlpineJS components requires 3 steps: create the component, declare it, use it in Liquid.

Create a component

• Create a new .ts file in your theme’s Brush directory. Example: brush/src/components/hello-world.ts
• Build it like a standard AlpineJS component:

brush/src/components/hello-world.ts

export default function () {
  Alpine.data("HelloWorld", () => ({
    message: "Hello world!",
  }));
}

Declare the component

• Update the brush/src/components/index.ts file to declare your component.

brush/src/components/index.ts

import HelloWorld from "./hello-world";

export function registerAlpineComponents() {
  HelloWorld();
  // Add components here
}

Use the component in a Liquid file

brush/src/components/index.ts

<div x-data="HelloWorld()"><span x-text="message"></span></div>