Astro에 Vue 3를 설치하는 방법

이 섹션에서는 Astro에 vue 3을 설치합니다. 이 Astro 통합은 Vue 3 구성 요소에 대한 서버 측 렌더링 및 클라이언트 측 수화를 가능하게 합니다. css의 경우 astro가 Tailwind CSS를 쉽게 통합할 수 있으므로 Tailwind CSS를 사용합니다.

도구 사용

아스트로

Tailwind CSS(@astrojs/tailwind)

뷰 3(@astrojs/vue)

아스트로 프로젝트 만들기

자동 CLI로 Astro 만들기

# npm
npm create astro@latest

# yarn
yarn create astro

# pnpm
pnpm create astro@latest

프로젝트 이름을 지정하고 astro 템플릿을 선택합니다.

✔ Where would you like to create your new project? … astro-vue3
? Which template would you like to use? › - Use arrow-keys. Return to submit.
❯  Just the basics (recommended)
  Blog
  Portfolio
  Documentation Site
  Empty project

npm 종속성을 설치합니다.

✔ Would you like to install npm dependencies? (recommended) … yes

타이프스크립트를 선택합니다.

? How would you like to setup TypeScript? › - Use arrow-keys. Return to submit.
  Relaxed
❯  Strict (recommended) - Enable `strict` typechecking rules
  Strictest
  I prefer not to use TypeScript

프로젝트로 이동

cd astro-vue3 

Astro에 Tailwind CSS 설치

@astrojs/tailwind를 사용하여 astro에 tailwind css 설치

# Using NPM
npm run astro add tailwind
# Using Yarn
yarn astro add tailwind
# Using PNPM
pnpm astro add tailwind

Astro에 Vue 3 설치

@astrojs/vue를 사용하여 astro에 vue 3 설치

# Using NPM
npm run astro add vue
# Using Yarn
yarn astro add vue
# Using PNPM
pnpm astro add vue

### Astro에서 Vue 3 사용
Astro에서 vue 3을 사용하는 것은 매우 간단합니다. vue 구성 요소를 만들고 astro 파일을 가져오기만 하면 됩니다.

Vue 3를 사용한 Astro의 카운터 앱

src/components에 Counter.vue 생성

src/components/Counter.vue

<script setup>
import { ref } from 'vue';
const count = ref(0);
const heading = 'Astro with Vue 3 Counter APP';
</script>
<template>
  <div class="flex flex-col items-center m-5">
    <h1 class="text-xl font-bold text-purple-600">{{ heading }}</h1>
    <button
      @click="count++"
      class="px-4 py-2 text-sm text-white bg-green-600 rounded"
    >
      Increment
    </button>
    <p>Count is: {{ count }}</p>
    <button
      @click="count--"
      class="px-4 py-2 text-sm text-white bg-red-600 rounded"
    >
      Decrement
    </button>
  </div>
</template>

astro 파일에서 vue 3 카운터 구성요소 가져오기

src/페이지/index.astro

---
import Layout from '../layouts/Layout.astro';
import Counter from '../components/Counter.vue';
---

<Layout title="Welcome to Astro.">
  <main class="flex flex-col items-center justify-center h-screen">
    <div>
      <h1 class="text-3xl font-bold">
        Welcome to <span class="text-blue-600">Astro</span>
      </h1>
      <p class="">Install Astro + Tailwind CSS + Vue3</p>
    </div>
    <Counter client:load />
  </main>
</Layout>

서버 실행

npm run dev