컨텐츠로 건너뛰기

@astrojs/ vue

이 **Astro 통합**을 통해 Vue 3 컴포넌트에 대한 서버 측 랜더링 및 클라이언트 측 하이드레이션이 가능해집니다.

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

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

Terminal window
npx astro add vue

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

우선, @astrojs/vue 패키지를 설치합니다.

Terminal window
npm install @astrojs/vue

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

Terminal window
npm install vue

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

astro.config.mjs
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';
export default defineConfig({
// ...
integrations: [vue()],
});

Astro에서 첫 번째 Vue 컴포넌트를 사용하려면 UI 프레임워크 문서로 이동합니다. 다음을 확인할 수 있습니다.

  • 📦 프레임워크 컴포넌트가 로드되는 방식,
  • 💧 클라이언트 측 하이드레이션 옵션,
  • 🤝 프레임워크를 함께 혼합하고 중첩할 수 있는 기회

도움이 필요하면 Discord#support 채널을 확인합니다. 우리의 친절한 지원팀 멤버들이 도와드리겠습니다!

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

이 패키지는 Astro의 코어 팀에서 유지관리 합니다. 문제를 보고하거나 PR을 제출하는 것은 언제든 환영합니다!

이 통합은 @vitejs/plugin-vue 의 도움을 받습니다. Vue 컴파일러를 커스터마이징 하기 위해서는, 통합에 옵션을 제공할 수 있습니다. 자세한 사항은 @vitejs/plugin-vue 문서 를 참조합니다.

astro.config.mjs
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';
export default defineConfig({
// ...
integrations: [
vue({
template: {
compilerOptions: {
// ion- 으로 시작하는 모든 태그를 맞춤 요소로 처리합니다.
isCustomElement: (tag) => tag.startsWith('ion-'),
},
},
// ...
}),
],
});

appEntrypoint 옵션을 루트 상대 가져오기 지정자로 설정하여 (예: appEntrypoint: "/src/pages/_app") Vue app 인스턴스를 확장할 수 있습니다.

이 파일의 기본 내보내기는 랜더링 전에 Vue app 인스턴스를 전달받는 함수여야 하며, 사용자 정의 Vue 플러그인, app.use 및 고급 사용 사례를 위한 기타 사용자 정의를 허용합니다.

astro.config.mjs
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';
export default defineConfig({
// ...
integrations: [vue({ appEntrypoint: '/src/pages/_app' })],
});
src/pages/_app.ts
import type { App } from 'vue';
import i18nPlugin from 'my-vue-i18n-plugin';
export default (app: App) => {
app.use(i18nPlugin);
};

jsx: true를 설정하여 Vue JSX를 사용할 수 있습니다.

astro.config.mjs
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';
export default defineConfig({
// ...
integrations: [vue({ jsx: true })],
});

이렇게 하면 Vue 및 Vue JSX 컴포넌트 모두 렌더링이 가능합니다. Vue JSX 컴파일러를 사용자정의 하려면, 옵션을 객체 대신 Boolean 값으로 전달합니다. 자세한 사항은 @vitejs/plugin-vue-jsx 문서 참조합니다.

astro.config.mjs
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';
export default defineConfig({
// ...
integrations: [
vue({
jsx: {
// ion- 으로 시작하는 모든 태그를 맞춤 요소로 처리합니다.
isCustomElement: (tag) => tag.startsWith('ion-'),
},
}),
],
});

Added in: @astrojs/vue@4.2.0

devtools: true가 포함된 객체를 vue() 통합 구성에 전달하여 개발 모드에서 Vue DevTools를 활성화할 수 있습니다.

astro.config.mjs
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';
export default defineConfig({
// ...
integrations: [vue({ devtools: true })],
});

Added in: @astrojs/vue@4.3.0

더 많은 사용자 정의를 위해 Vue DevTools Vite 플러그인이 지원하는 옵션을 전달할 수 있습니다. (참고: appendTo는 지원되지 않습니다.)

예를 들어 Visual Studio Code를 사용하지 않는 경우 launchEditor를 원하는 편집기로 설정할 수 있습니다.

astro.config.mjs
import { defineConfig } from "astro/config";
import vue from "@astrojs/vue";
export default defineConfig({
// ...
integrations: [
vue({
devtools: { launchEditor: "webstorm" },
}),
],
});

더 많은 통합

UI 프레임워크

SSR 어댑터

기타 통합