composables

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

 

사용법

방법 1 : 명명된 내보내기

// composables/useFoo.ts

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

 

방법 2 : 기본 내보내기

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

// It will be available as useFoo() (camelCase of file name without extension)
export default function () {
  return useState('foo', () => 'bar')
}

 

 

 

 

 이제 자동으로 임포트된 .js, .ts and .vue 파일을 사용할 수 있다.

<!--
app.vue
-->

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

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

참고) Nuxt-개요 > 주요 개념, Auto-imports

 

Type

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

 

Nuxt 가 타입을 생성하도록 하려면 nuxi prepare, nuxi dev 또는 nuxi build 을 실행해야 한다는 점에 유의하자.

개발 서버를 실행하지 않고 컴포저블을 만들면 TypeScript에서 다음과 같은 오류가 발생합니다. Cannot find name 'useBar'.

 

사용 예

중첩된 컴포저블

자동 가져오기를 사용하면 다른 컴포저블 내에서 컴포저블을 사용할 수 있다.

//composables/test.ts

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

 

플러그인 인젝션에 액세스

컴포저블에서 플러그인 인젝션에 액세스할 수 있습니다.

// composables/test.ts

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

 

 

파일을 검사하는 방법

Nuxt는 composables/  디렉토리의 최상위 수준에 있는 파일만 검사한다.

| composables/
---| index.ts     // scanned
---| useFoo.ts    // scanned
-----| nested/
-------| utils.ts // not scanned

위 디렉토리 구조에 composables/index.ts 및 composables/useFoo.ts만 임포트를 검색한다.

 

중첩된 모듈에 대해 자동 가져오기가 작동하도록 하려면 해당 모듈을 다시 내보내거나(권장) 중첩된 디렉터리를 포함하도록 스캐너를 구성할 수 있다.

 

예: composables/index.ts 파일에서 필요한 컴포저블을 다시 내보낸다.

// composables/index.ts

// Enables auto import for this export
export { utils } from './nested/utils.ts'

 

예: composables/ 폴더 내부에 중첩된 디렉터리 검색

// nuxt.config.ts

export default defineNuxtConfig({
  imports: {
    dirs: [
      // Scan top-level modules
      'composables',
      // ... or scan modules nested one level deep with a specific name and file extension
      'composables/*/index.{ts,js,mjs,mts}',
      // ... or scan all modules within given directory
      'composables/**'
    ]
  }
})