alpine-web-components

This library helps you with using AlpineJS with web components. This includes web components using shadow root.

Install

1. Make sure you have AlpineJS installed and ready.
2. Install this library by running npm i alpine-web-components
3. Use classes AlpineWebComponent or AlpineComponent as base classes.

How to use it

The following example shows you a basic "Counter" example.

import AlpineWebComponent from "alpine-shadow-component";
import type {State} from "../../AlpineWebComponent";

interface CounterState extends State {
    counter: number,
}

class Counter extends AlpineWebComponent {
    
    state: CounterState = {
        attributes: {},
        counter: 1,
    }
    
    template = `
        <span x-text=""></span>
        <button @click="counter++">+1</button>
        <button @click="component.resetCounter()">Reset</button>
    `
    
    resetCounter() {
        this.state.counter = 1
    }
    
    useShadow(): boolean {
        return false;
    }
}

window.customElements.define('my-counter', Counter);

You should now be able to reference the counter with <my-counter></my-counter>

Please see directory example for example on how to bind / update attributes etc..