Alpine.js: Installing Alpine

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

<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/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
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. Launching May 21, 2024. Join the waiting list!