shared/ 디렉터리를 사용하면 Vue 앱과 Nitro 서버 모두에서 사용할 수 있는 코드를 공유할 수 있습니다.
shared/ 디렉터리는 Nuxt v3.14+에서 사용할 수 있습니다.shared/ 디렉터리의 코드는 어떤 Vue 또는 Nitro 코드도 import할 수 없습니다.방법 1: 이름이 있는 export
export const capitalize = (input: string) => {
return input[0] ? input[0].toUpperCase() + input.slice(1) : ''
}
방법 2: 기본 export
export default function (input: string) {
return input[0] ? input[0].toUpperCase() + input.slice(1) : ''
}
이제 Nuxt 앱과 server/ 디렉터리에서 자동 import되는 유틸리티를 사용할 수 있습니다.
<script setup lang="ts">
const hello = capitalize('hello')
</script>
<template>
<div>
{{ hello }}
</div>
</template>
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.ts # 자동 import됨
shared/ 폴더에 생성하는 그 외의 파일은 Nuxt에서 자동으로 설정하는 #shared 별칭을 사용해 수동으로 import해야 합니다:
// shared 디렉터리 바로 아래에 있는 파일의 경우
import capitalize from '#shared/capitalize'
// 중첩 디렉터리에 있는 파일의 경우
import lower from '#shared/formatters/lower'
// utils 내부의 폴더에 중첩된 파일의 경우
import upper from '#shared/utils/formatters/upper'
이 별칭은 가져오는 파일의 위치와 관계없이 애플리케이션 전반에서 일관된 import를 보장합니다.