Installation
There are 2 ways to include Alpine into your project:
- Including it from a
<script>
tag - Importing it as a module
Either is perfectly valid. It all depends on the project's needs and the developer's taste.
From a script tag
This is by far the simplest way to get started with Alpine. Include the following <script>
tag in the head of your HTML page.
<html> <head> ... </head> ...</html>
Don't forget the "defer" attribute in the
<script>
tag.
Notice the @3.x.x
in the provided CDN link. This will pull the latest version of Alpine version 3. For stability in production, it's recommended that you hardcode the latest version in the CDN link.
That's it! Alpine is now available for use inside your page.
As a module
If you prefer the more robust approach, you can install Alpine via NPM and import it into a bundle.
Run the following command to install it.
npm install alpinejs
Now import Alpine into your bundle and initialize it like so:
import Alpine from 'alpinejs' window.Alpine = Alpine Alpine.start()
The
window.Alpine = Alpine
bit is optional, but is nice to have for freedom and flexibility. Like when tinkering with Alpine from the devtools for example.
If you imported Alpine into a bundle, you have to make sure you are registering any extension code IN BETWEEN when you import the
Alpine
global object, and when you initialize Alpine by callingAlpine.start()
.
→ Read more about extending Alpine
Code highlighting provided by Torchlight