Alpine reactivity

Vue reactivity for Alpine.

Bring the powerful reactivity system from Vue into your Alpine projects.

What is Vue reactivity system?

• Fundamentals
• In depth

Example:

import { ref, computed, watch, setAlpine } from 'alpine-reactivity';

// If the Alpine package is NOT available under window.Alpine, set it here
setAlpine(Alpine);

document.addEventListener('alpine:init', () => {
  Alpine.data('button', () => {
    const counter = ref(0);

    const countFormatted = computed(() => `Clicked ${counter.value} times!`);

    watch(counter, () => {
      this.$dispatch('clicked', counter.value);
    });

    const onClick = () => {
      counter.value += 1;
    };

    return {
      counter,
      countFormatted,
      onClick,
    };
  });
});

<div x-data="button">
  <span x-text="countFormatted"></span>
  <button @click="onClick">Click me!</button>
</div>

How it works

Alpine is built on top of Vue's reactivity system.

However, Alpine is loosely coupled to Vue. It uses only reactive, effect, stop, and toRaw, and Alpine allows you to provide your own reactivity system.

Because of this, importing and using Vue reactivity system directly is not advised.

Instead, alpine-reactive reimplements the rest of the Vue reactivity methods like ref or computed using only the four building blocks.

Installation

Via CDN

<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

const { ref, computed, watch } = AlpineReactivity;

ref(123);

Via NPM

npm install alpine-reactivity

import { ref, computed, watch } from 'alpine-reactivity';

ref(123);

Reference

See the docs