Skip to content

Latest commit

 

History

History
68 lines (43 loc) · 1.78 KB

installation.md

File metadata and controls

68 lines (43 loc) · 1.78 KB
Raw
order title
1
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.3.5/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 calling Alpine.start().

→ Read more about extending Alpine