Installation

There are 2 ways to include Alpine into your project:

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://cdn.jsdelivr.net/npm/[email protected]/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://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

That's it! Alpine is now available for use inside your page.

Note that you will still need to define a component with x-data in order for any Alpine.js attributes to work. See https://github.com/alpinejs/alpine/discussions/3805 for more information.

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 calling Alpine.start().

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.

→ Read more about extending Alpine

← Upgrade From V2
State →

Code highlighting provided by Torchlight