There are 2 ways to include Alpine into your project:
- Including it from a
- Importing it as a module
Either is perfectly valid. It all depends on the project's needs and the developer's taste.
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/[email protected]/dist/cdn.min.js"></script> </head> ... </html>
Don't forget the "defer" attribute in 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/[email protected]/dist/cdn.min.js"></script>
That's it! Alpine is now available for use inside your page.
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()
window.Alpine = Alpinebit 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
Alpineglobal object, and when you initialize Alpine by calling