Pirate Wiki

Toggle Theme

Installation ​

There are 2 ways to include Alpine into your project:

  • Including it using 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.

Using <script> tag ​

This is the simplest way to get started with Alpine.js. Include the following <script> tag in the head of your HTML page:

html
<html>
    <head>
        ...
 
        <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
    </head>
    ...
</html>

NOTE

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.

html
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

Find the latest version here

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.

sh
npm install alpinejs

Now import Alpine into your bundle and initialize it like so:

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

NOTE

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.

WARNING

Ensure that Alpine.start() is only called once per page. Calling it more than once will result in multiple "instances" of Alpine running at the same time.