78 lines
2.2 KiB
Markdown
78 lines
2.2 KiB
Markdown
# Alpine.js Documentation - Essentials
|
|
|
|
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](#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>
|
|
|
|
|
|
n<head>
|
|
|
|
|
|
n...
|
|
|
|
|
|
n<script defer src="https://cdn.jsdelivr.net/npm/[email\(protected\)]/dist/cdn.min.js"></script>
|
|
|
|
|
|
n</head>
|
|
|
|
|
|
n...
|
|
|
|
|
|
n</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](#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'
|
|
|
|
|
|
nwindow.Alpine = Alpine
|
|
|
|
|
|
nAlpine.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](/advanced/extending)
|
|
|
|
Code highlighting provided by [Torchlight](https://torchlight.dev/) |