composables

composables/ 디렉토리를 사용하여 Vue composable을 애플리케이션에 자동으로 임포트하세요.

사용법

방법 1: 네임드 익스포트 사용

composables/useFoo.ts

export const useFoo = () => {
  return useState('foo', () => 'bar')
}

방법 2: 디폴트 익스포트 사용

composables/use-foo.ts or composables/useFoo.ts

// useFoo()로 사용할 수 있습니다 (확장자를 제외한 파일 이름의 카멜케이스)
export default function () {
  return useState('foo', () => 'bar')
}

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

app.vue

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

<template>
  <div>
    {{ foo }}
  </div>
</template>

Nuxt의 composables/ 디렉토리는 코드에 추가적인 반응성 기능을 제공하지 않습니다. 대신, composable 내의 모든 반응성은 ref와 reactive와 같은 Vue의 Composition API 메커니즘을 사용하여 구현됩니다. 반응성 코드는 composables/ 디렉토리의 경계에만 국한되지 않는다는 점에 유의하세요. 애플리케이션에서 필요한 곳 어디에서든 반응성 기능을 자유롭게 사용할 수 있습니다.

Read more in Docs > Guide > Concepts > Auto Imports.

Read and edit a live example in Docs > Examples > Features > Auto Imports.

타입

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

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

개발 서버를 실행하지 않은 상태에서 composable을 생성하면 TypeScript에서 Cannot find name 'useBar'.와 같은 오류가 발생할 수 있습니다.

예시

중첩 Composable

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

composables/test.ts

export const useFoo = () => {
  const nuxtApp = useNuxtApp()
  const bar = useBar()
}

플러그인 인젝션 접근

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

composables/test.ts

export const useHello = () => {
  const nuxtApp = useNuxtApp()
  return nuxtApp.$hello
}

파일 스캔 방식

Nuxt는 composables/ 디렉토리의 최상위 파일만 스캔합니다. 예시:

Directory Structure

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

composables/index.ts와 composables/useFoo.ts만 임포트 대상으로 검색됩니다.

중첩 모듈에 대해 자동 임포트를 사용하려면, (권장) 재익스포트하거나 스캐너가 중첩 디렉토리를 포함하도록 설정할 수 있습니다:

예시: 필요한 composable을 composables/index.ts 파일에서 재익스포트하세요:

composables/index.ts

// 이 익스포트에 대해 자동 임포트 활성화
export { utils } from './nested/utils.ts'

예시: composables/ 폴더 내 중첩 디렉토리를 스캔하도록 설정:

nuxt.config.ts

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