راهنمای راه‌اندازی Alpine.js

برای استفاده از کامپوننت‌ها یا کالکشن‌هایی که با Alpine.js توسعه داده میشن، ابتدا باید Alpine رو به پروژه‌ی خودتون اضافه کنید.
دو روش اصلی برای افزودن Alpine.js وجود داره: نصب از طریق npm یا استفاده از CDN.

۱. نصب از طریق npm

اگه از ابزارهایی مانند Vite یا Webpack و.. استفاده می‌کنید، بهتره Alpine.js رو با npm نصب کنید:

npm install alpinejs

سپس Alpine رو در فایل اصلی جاوااسکریپت خودتون ایمپورت کنید:

import Alpine from "alpinejs";

window.Alpine = Alpine;

Alpine.start();

نصب اختیاری: افزونه Persist

اگه کامپوننت شما نیاز به حفظ داده‌ها (مانند ذخیره در localStorage) داره، باید افزونه Persist رو هم نصب کنید:

npm install @alpinejs/persist

و سپس آن را به Alpine اضافه کنید:

import persist from "@alpinejs/persist";

Alpine.plugin(persist);

اگه از چندین افزونه استفاده می‌کنید، قبل از Alpine.start() آن‌ها را ثبت کنید.به این شکل:

import Alpine from "alpinejs";
import persist from "@alpinejs/persist";

Alpine.plugin(persist);

window.Alpine = Alpine;

Alpine.start();

۲. افزودن از طریق CDN

برای پروژه‌های ساده یا تست سریع، می‌توانید Alpine.js رو از طریق CDN اضافه کنید:

<script
    defer
    src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
></script>

افزودن افزونه Persist از طریق CDN

اگه به افزونه Persist نیز نیاز دارید:

<script
    defer
    src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"
></script>

توجه داشته باشید که باید افزونه رو قبل از فایل اصلی Alpine.js اضافه کنید.

نکات

همیشه از آخرین نسخه‌ی پایدار Alpine.js استفاده کنید تا بهترین عملکرد و امنیت را داشته باشید.

اگه از چندین افزونه استفاده می‌کنید، قبل از Alpine.start() آن‌ها را ثبت کنید.