@astrojs/ alpinejs

이 Astro 통합 은 프로젝트에 Alpine.js를 추가하므로 페이지 어디에서나 Alpine.js를 사용할 수 있습니다.

설치

Astro에는 공식 통합 설정을 자동화하는 astro add 명령이 포함되어 있습니다. 원하는 경우 대신 통합을 수동으로 설치할 수 있습니다.

@astrojs/alpinejs를 설치하려면 프로젝트 디렉터리에서 다음을 실행하고 프롬프트를 따르세요.

npx astro add alpinejs

pnpm astro add alpinejs

yarn astro add alpinejs

문제가 발생하면 GitHub에 언제든지 보고하고 아래 수동 설치 단계를 시도해 보세요.

수동으로 설치하기

먼저 @astrojs/alpinejs 패키지를 설치하세요.

npm install @astrojs/alpinejs

pnpm add @astrojs/alpinejs

yarn add @astrojs/alpinejs

대부분의 패키지 관리자는 관련 피어 종속성도 설치합니다. 그러나 Astro를 시작할 때 “Cannot find package ‘alpinejs’” (또는 이와 유사한) 경고가 표시되면 Alpine.js를 직접 설치해야 합니다.

npm install alpinejs @types/alpinejs

pnpm add alpinejs @types/alpinejs

yarn add alpinejs @types/alpinejs

그런 다음 integrations 속성을 사용하여 astro.config.* 파일에 통합을 적용합니다.

import { defineConfig } from 'astro/config';
import alpine from '@astrojs/alpinejs';

export default defineConfig({
  // ...
  integrations: [alpine()],
});

사용

통합이 설치되면 모든 Astro 컴포넌트에서 Alpine.js 지시어와 구문을 사용할 수 있습니다. Alpine.js 스크립트는 웹사이트의 모든 페이지에 자동으로 추가되고 활성화됩니다.

통합에 대한 자세한 내용은 Astro 통합 문서를 확인하세요.

한계

Alpine.js 통합은 스크립트가 로드되거나 초기화되는 방법을 제어할 수 없습니다. 이 컨트롤이 필요한 경우 Alpine.js를 수동으로 설치하고 사용하는 것이 좋습니다. Astro는 Astro 컴포넌트의 <script> 태그를 사용하여 공식적으로 문서화된 모든 Alpine.js 수동 설정 지침을 지원합니다.

현재 이 컴포넌트를 사용할 때 Alpine.js를 확장하는 것은 불가능합니다. 이 기능이 필요한 경우 Astro 스크립트 태그를 사용하는 대신 수동 Alpine.js 설정을 따르는 것이 좋습니다.

---
---

<!-- 예: 단일 페이지에 AlpineJS를 로드합니다. -->
<script>
  import Alpine from 'alpinejs';

  // Optional: Extend Alpine.js
  // Alpine.directive('foo', ...)

  window.Alpine = Alpine;
  Alpine.start();
</script>