composables

composables/ 디렉터리를 사용하여 Vue composable을 애플리케이션에 자동으로 임포트합니다.

사용법

방법 1: 이름이 있는 export 사용

app/composables/useFoo.ts
export const useFoo = () => {
  return useState('foo', () => 'bar')
}

방법 2: 기본 export 사용

app/composables/use-foo.ts or composables/useFoo.ts
// 확장자를 제외한 파일 이름을 camelCase로 변환한 useFoo() 로 사용할 수 있습니다
export default function () {
  return useState('foo', () => 'bar')
}

사용법: 이제 .js, .ts, .vue 파일에서 자동 임포트된 composable을 사용할 수 있습니다

app/app.vue
<script setup lang="ts">
const foo = useFoo()
</script>

<template>
  <div>
    {{ foo }}
  </div>
</template>
Nuxt의 app/composables/ 디렉터리는 코드에 추가적인 반응성 기능을 제공하지 않습니다. 대신, composable 내의 모든 반응성은 ref 및 reactive 같은 Vue의 Composition API 메커니즘을 사용하여 구현됩니다. 또한 반응형 코드는 app/composables/ 디렉터리의 경계에 제한되지 않는다는 점에 유의하세요. 애플리케이션에서 필요한 곳이라면 어디에서든 자유롭게 반응성 기능을 사용할 수 있습니다.
Read more in Docs > 4 X > Guide > Concepts > Auto Imports.
Read and edit a live example in Docs > 4 X > Examples > Features > Auto Imports.

타입

내부적으로 Nuxt는 타입을 선언하기 위해 .nuxt/imports.d.ts 파일을 자동으로 생성합니다.

Nuxt가 타입을 생성할 수 있도록 nuxt prepare, nuxt dev 또는 nuxt build를 실행해야 한다는 점에 유의하세요.

dev 서버를 실행하지 않은 상태에서 composable을 생성하면 TypeScript는 Cannot find name 'useBar'. 와 같은 오류를 발생시킵니다.

예시

중첩 Composable

자동 임포트를 사용하여 한 composable 안에서 다른 composable을 사용할 수 있습니다:

app/composables/test.ts
export const useFoo = () => {
  const nuxtApp = useNuxtApp()
  const bar = useBar()
}

플러그인 인젝션에 접근하기

composable에서 플러그인 인젝션에 접근할 수 있습니다:

app/composables/test.ts
export const useHello = () => {
  const nuxtApp = useNuxtApp()
  return nuxtApp.$hello
}

파일이 스캔되는 방식

Nuxt는 app/composables/ 디렉터리의 최상위 레벨에 있는 파일만 스캔합니다. 예:

Directory Structure
-| composables/
---| index.ts     // 스캔됨
---| useFoo.ts    // 스캔됨
---| nested/
-----| utils.ts   // 스캔되지 않음

app/composables/index.ts 와 app/composables/useFoo.ts 만 임포트를 위해 검색됩니다.

중첩 모듈에 대해 자동 임포트를 동작하게 하려면, (권장되는 방식인) 재-export를 하거나 스캐너를 설정하여 중첩 디렉터리를 포함하도록 할 수 있습니다:

예시: app/composables/index.ts 파일에서 필요한 composable을 재-export 합니다:

app/composables/index.ts
// 이 export에 대해 자동 임포트를 활성화합니다
export { utils } from './nested/utils.ts'

예시: app/composables/ 폴더 내부의 중첩 디렉터리를 스캔합니다:

nuxt.config.ts
export default defineNuxtConfig({
  imports: {
    dirs: [
      // 최상위 composable을 스캔
      '~/composables',
      // ... 또는 한 단계 중첩된, 특정 이름과 파일 확장자를 가진 composable을 스캔
      '~/composables/*/index.{ts,js,mjs,mts}',
      // ... 또는 지정된 디렉터리 내의 모든 composable을 스캔
      '~/composables/**',
    ],
  },
})