composables

composables/ 디렉토리를 사용하여 Vue composables를 애플리케이션에 자동으로 가져올 수 있습니다.

사용법

방법 1: 명명된 export 사용

composables/useFoo.ts

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

방법 2: 기본 export 사용

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

// 파일 이름의 확장자를 제외한 camelCase로 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/ 디렉토리는 코드에 추가적인 반응성 기능을 제공하지 않습니다. 대신, composables 내의 모든 반응성은 ref 및 reactive와 같은 Vue의 Composition API 메커니즘을 사용하여 달성됩니다. 반응성 코드는 composables/ 디렉토리의 경계에 제한되지 않는다는 점에 유의하세요. 애플리케이션에서 필요한 곳 어디에서나 반응성 기능을 사용할 수 있습니다.

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

샘플 코드 편집 및 미리보기examples > features > auto-imports

타입

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

Nuxt가 타입을 생성하도록 하려면 nuxt prepare, nuxt dev 또는 nuxt build를 실행해야 합니다.

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

예제

중첩된 Composables

자동 가져오기를 사용하여 다른 composable 내에서 composable을 사용할 수 있습니다:

composables/test.ts

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

플러그인 주입 접근

composables에서 플러그인 주입에 접근할 수 있습니다:

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만 가져오기를 위해 검색됩니다.

중첩된 모듈에 대해 자동 가져오기를 작동시키려면, 이를 다시 export 하거나(권장) 스캐너를 구성하여 중첩된 디렉토리를 포함하도록 할 수 있습니다:

예제: 필요한 composables를 composables/index.ts 파일에서 다시 export:

composables/index.ts

// 이 export에 대해 자동 가져오기를 활성화
export { utils } from './nested/utils.ts'

예제: composables/ 폴더 내의 중첩된 디렉토리를 스캔:

nuxt.config.ts

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

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

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