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/
---| 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를 보장합니다.