@astrojs/ vue

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

설치

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

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

npx astro add vue

pnpm astro add vue

yarn astro add vue

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

수동 설치

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

npm install @astrojs/vue

pnpm add @astrojs/vue

yarn add @astrojs/vue

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

npm install vue

pnpm add vue

yarn add vue

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

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 문서 를 참조합니다.

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

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

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

export default defineConfig({
  // ...
  integrations: [vue({ appEntrypoint: '/src/pages/_app' })],
});

import type { App } from 'vue';
import i18nPlugin from 'my-vue-i18n-plugin';

export default (app: App) => {
  app.use(i18nPlugin);
};

jsx

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

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 문서 참조합니다.

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

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

devtools

Added in: @astrojs/vue@4.2.0

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

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

export default defineConfig({
  // ...
  integrations: [vue({ devtools: true })],
});

Vue DevTools 사용자 정의

Added in: @astrojs/vue@4.3.0 New

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

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

import { defineConfig } from "astro/config";
import vue from "@astrojs/vue";

export default defineConfig({
  // ...
  integrations: [
    vue({
      devtools: { launchEditor: "webstorm" },
    }),
  ],
});