Alpine.js: Installing Alpine

Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026

The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.


Installing Alpine can be as simple as including the script tag in your HTML page:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

Or, you can add it as a JavaScript module into your project:

npm install alpinejs

And you can initialize it with

import Alpine from 'alpinejs'
 
window.Alpine = Alpine
 
Alpine.start()

You can choose the way you prefer.

Adding the script tag is the simplest as you automatically have the Alpine object available in the global object, and already initialized (you don’t have to manually call Alpine.start())

Lessons in this unit:

0: Introduction
1: ▶︎ Installing Alpine
2: The basics of Alpine
3: Events
4: Defining data
5: Looping
6: Binding user input to variables
7: Watching variables change
8: Stores