Installation
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>
...
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</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.
<script defer src="https://unpkg.com/alpinejs@3.10.2/dist/cdn.min.js"></script>
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()
.