Alpine JS Component

Reusable HTML components powered by Alpine JS reactivity 🛸

Install

With a CDN

<script
  defer
  src="https://unpkg.com/alpinejs-component@latest/dist/component.min.js"
></script>

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

With a Package Manager

npm install -D alpinejs-component

yarn add -D alpinejs-component

import Alpine from 'alpinejs'
import component from 'alpinejs-component'

Alpine.plugin(component)

Alpine.start()

Example

On Page Components

You can render on page components by using a <template> with an id that matches the template attribute on the component.

Here we are rendering the component HTML found in <template id="person"> element.

<div
  x-data="{
    people: [
      { name: 'John', age: '25', skills: ['JavaScript', 'CSS'] },
      { name: 'Jane', age: '30', skills: ['Laravel', 'MySQL', 'jQuery'] }
    ]
  }"
>
  <ul>
    <template x-for="person in people">
      <x-component-wrapper
        x-component
        template="person"
        x-data="{ item: person }"
      ></x-component-wrapper>
    </template>
  </ul>
</div>

<template id="person">
  <li>
    <h2 x-text="item.name"></h2>

    <p x-text="item.age"></p>

    <ul>
      <template x-for="skill in item.skills">
        <li x-text="skill"></li>
      </template>
    </ul>
  </li>
</template>

Global Components

If you don't want on page components you can use the url attribute which accepts a path to the HTML component.

Here we are telling Alpine JS to fetch the HTML from /public/person.html within the codebase.

<div
  x-data="{
    people: [
      { name: 'John', age: '25', skills: ['JavaScript', 'CSS'] },
      { name: 'Jane', age: '30', skills: ['Laravel', 'MySQL', 'jQuery'] }
    ]
  }"
>
  <ul>
    <template x-for="person in people">
      <x-component-wrapper
        x-component
        url="/public/person.html"
        x-data="{ item: person }"
      ></x-component-wrapper>
    </template>
  </ul>
</div>

Then we'd have a file /public/person.html which could look like this.

<li>
  <h2 x-text="item.name"></h2>

  <p x-text="item.age"></p>

  <ul>
    <template x-for="skill in item.skills">
      <li x-text="skill"></li>
    </template>
  </ul>
</li>

Styling Components

As this plugin uses the "Shadow DOM" components cannot use global CSS.

Instead you need to add a <style> element with the components CSS to the component itself.

<div>
  <style>
    .example {
      background: #00f;
    }
  </style>

  <p class="example" x-text="message"> </p>
</div>

gexiangying/alpinejs-component