shared

Vue 앱과 Nitro 서버 간에 기능을 공유하기 위해 shared/ 디렉토리를 사용하세요.

shared/ 디렉토리는 Vue 앱과 Nitro 서버 모두에서 사용할 수 있는 코드를 공유할 수 있게 해줍니다.

shared/ 디렉토리는 Nuxt v3.14+에서 사용할 수 있습니다.

shared/ 디렉토리의 코드는 Vue 또는 Nitro 코드를 import할 수 없습니다.

기존 프로젝트에서의 변경을 방지하기 위해 Nuxt v3에서는 자동 import가 기본적으로 활성화되어 있지 않습니다.

이 자동 import된 유틸리티와 타입을 사용하려면 먼저 nuxt.config.ts에서 future.compatibilityVersion: 4를 설정해야 합니다.

사용법

방법 1: Named export

shared/utils/capitalize.ts

export const capitalize = (input: string) => {
  return input[0] ? input[0].toUpperCase() + input.slice(1) : ''
}

방법 2: Default export

shared/utils/capitalize.ts

export default function (input: string) {
  return input[0] ? input[0].toUpperCase() + input.slice(1) : ''
}

이제 Nuxt 앱과 server/ 디렉토리에서 자동 import된 유틸리티를 사용할 수 있습니다.

app.vue

<script setup lang="ts">
const hello = capitalize('hello')
</script>

<template>
  <div>
    {{ hello }}
  </div>
</template>

server/api/hello.get.ts

export default defineEventHandler((event) => {
  return {
    hello: capitalize('hello')
  }
})

파일 스캔 방법

shared/utils/ 및 shared/types/ 디렉토리의 파일만 자동으로 import됩니다. 이러한 디렉토리의 하위 디렉토리에 있는 파일은 imports.dirs 및 nitro.imports.dirs에 추가하지 않는 한 자동으로 import되지 않습니다.

shared/utils 및 shared/types의 자동 import 작동 방식과 스캔 방식은 composables/ 및 utils/ 디렉토리와 동일합니다.

이것도 참고 guide > directory-structure > composables#how-files-are-scanned

Directory Structure

-| shared/
---| capitalize.ts        # 자동 import되지 않음
---| formatters
-----| lower.ts           # 자동 import되지 않음
---| utils/
-----| lower.ts           # 자동 import됨
-----| formatters
-------| upper.ts         # 자동 import되지 않음
---| types/
-----| bar.d.ts           # 자동 import됨

shared/ 폴더에 생성한 다른 파일은 Nuxt에 의해 자동으로 구성된 #shared alias를 사용하여 수동으로 import해야 합니다:

// shared 디렉토리에 직접 있는 파일의 경우
import capitalize from '#shared/capitalize'

// 중첩된 디렉토리에 있는 파일의 경우
import lower from '#shared/formatters/lower'

// utils 내의 폴더에 중첩된 파일의 경우
import upper from '#shared/utils/formatters/upper'

이 alias는 import하는 파일의 위치에 관계없이 애플리케이션 전반에 걸쳐 일관된 import를 보장합니다.

이것도 참고 guide > concepts > auto-imports

※이 페이지는 Nuxt.js 공식 문서의 비공식 번역 페이지입니다.

공식 문서의 해당 페이지는 여기 있습니다:
https://nuxt.com/docs/3.x/guide/directory-structure/shared