Alpine.js

Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost.

You get to keep your DOM, and sprinkle in behavior as you see fit.

This module provides the Alpine.js library for any modules and themes that require it.

The library is installed from CDN, uses the module/nomodule pattern to ensure IE11 and legacy browser support and is also pinned to a specific version number (currently v2.5.0) to avoid unexpected breakage from newer versions.

Usage

1. Install this module as you would install any other Drupal module.

2. Your module or theme should declare Alpine.js module as a dependency:

dependencies:
  - alpinejs

Example: my_awesome_theme.info.yml

name: My Awesome Theme
type: theme
core: 8.x
dependencies:
  - alpinejs

You should also define the dependency in the composer.json file. See https://www.drupal.org/docs/creating-custom-modules/add-a-composerjson-file for more details on how to do that.

3. Include the library (alpinejs/alpine) as a dependency to your module or theme library:

  dependencies:
    - alpinejs/alpine

Example: my_awesome_theme.libraries.yml:

global-scripts:
  version: 1.0
  js:
    dist/index.js: { preprocess: false, minified: true }
  dependencies:
    - core/drupal
    - alpinejs/alpine

Alternatively, you can also attach the library directly in a Twig file:

{{ attach_library('alpinejs/alpine') }}

Versioning

The module versioning is intended to match semantically with Alpine.js versioning.