Skip to content

Latest commit

 

History

History
231 lines (179 loc) · 6.93 KB

vue.mdx

File metadata and controls

231 lines (179 loc) · 6.93 KB
Raw
type title description githubIntegrationURL category i18nReady
integration
@astrojs/vue
@astrojs/vue 프레임워크 통합을 사용하여 Astro 프로젝트에서 컴포넌트 지원을 확장하는 방법 알아보기
renderer
true

import PackageManagerTabs from '/components/tabs/PackageManagerTabs.astro'; import Since from '/components/Since.astro';

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

설치

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

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

```sh npx astro add vue ``` ```sh pnpm astro add vue ``` ```sh yarn astro add vue ```

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

수동 설치

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

```sh npm install @astrojs/vue ``` ```sh pnpm add @astrojs/vue ``` ```sh yarn add @astrojs/vue ```

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

```sh npm install vue ``` ```sh pnpm add vue ``` ```sh 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

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

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

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

Vue DevTools 사용자 정의

더 많은 사용자 정의를 위해 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" },
    }),
  ],
});