utils

utils/ 디렉토리를 사용하여 애플리케이션 전체에 유틸리티 기능을 자동으로 임포트한다.

 

utils/ 디렉토리의 주요 목적은 Vue 컴포저블과 기타 자동으로 가져온 유틸리티 함수를 의미론적으로 구분하는 것이다.

 

사용법

방법 1 : 명명된 내보내기(export) 사용

 

utils/index.ts

// utils/index.ts

export const { format: formatNumber } = Intl.NumberFormat('en-GB', {
  notation: 'compact',
  maximumFractionDigits: 1
})

 

방법 2 : 기본 내보내기 사용

 

utils/random-entry.ts or utils/randomEntry.ts

// utils/random-entry.ts or utils/randomEntry.ts

// It will be available as randomEntry() (camelCase of file name without extension)
export default function (arr: Array<any>) {
  return arr[Math.floor(Math.random() * arr.length)]
}

 

이제 .js, .ts 및 .vue 파일에서 자동으로 임포트한 유틸리티 기능을 사용할 수 있다.

 

app.vue

<!--
app.vue
-->

<template>
  <p>{{ formatNumber(1234) }}</p>
</template>

 

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

 

utils/ 디렉토리 자동 임포트 및 검사 방법은 composables/ 디렉토리와 동일하다.

이러한 유틸리티는 앱의 Vue 부분에서만 사용할 수 있다. 서버에서는 server/utils 만 디렉토리로 자동으로 임포틓한다.