Nuxt - Plugins

Plugin은 어떨때 사용해야 할까

Nuxt에는 composable, plugin, util 등 다양한 개념들이 많습니다. 이들을 각각의 용도에 맞게 사용하는 것이 중요하기 때문에 복습 차원에서 정리하고 플러그인에 대해 알아보겠습니다.

• Composable
  • Composition API를 활용한 재사용 가능한 로직 블록
  • 반응형 상태에 대한 비즈니스 로직
• Plugin
  • 전역에 특정 기능을 주입하거나, 초기 설정 및 라이브러리 통합을 처리할 때 사용
  • axios, i18n, auth 등 모든 컴포넌트에서 접근 가능한 전역적인 유틸리티나 서비스
• Util
  • 일반적으로 작은 범위의, 상태나 반응형 속성을 포함하지 않는 순수 함수
  • 단순한 비즈니스 로직을 담는 함수

주의할 점: 플러그인은 전역 네임스페이스에 정의되기 때문에, 지엽적인 사용은 플러그인이 아니라 composable을 사용해서 메인 번들 엔트리를 작세 유지해야 합니다.

---

Nuxt Plugins

플러그인은 plugins/ 디렉토리 내부에 작성하면 자동으로 import 됩니다. 서버 또는 클라이언트 측에서 플러그인을 로드하려면 파일 이름에 .server 또는 .client 접미사를 사용할 수 있습니다.

플러그인의 자동 등록은 아래와 같이 이루어집니다.

-| plugins/
---| foo.ts      // 스캔 대상인 플러그인
---| bar/
-----| baz.ts    // 스캔되지 않는 플러그인
-----| foz.vue   // 스캔되지 않는 Vue 파일
-----| index.ts  // 현재는 스캔되고 있지만, 사용이 권장되지 않는(deprecated) 상태인 플러그인입니다.

기본적으로 plugins 바로 하위의 파일들은 자동으로 스캔되고, plugins 의 하위 디렉토리 내의 index.ts도 자동 스캔됩니다. 하지만 하위 디렉토리 내의 index.ts는 현재 사용이 권장되지 않는 기능임을 기억하고, 사용하지 않도록 해야 합니다.
plugin이 너무 다양해서 디렉토리 관리가 필요할 경우 아래와 같이 직접 등록해서 사용하면 됩니다.

// nuxt.config.ts
export default defineNuxtConfig({
  plugins: [
    '~/plugins/bar/baz',
    '~/plugins/bar/foz'
  ]
})

---

플러그인 생성 방법

hello.ts에서 아래와 같이 플러그인을 간단하게 생성할 수 있습니다.

// plugins/hello.ts
export default defineNuxtPlugin(nuxtApp => {
	// nuxtApp으로 어떤 작업을 할 수 있습니다.
})

좀 더 고급의 설정을 하기 위해서는 아래처럼 객체 구문 플러그인으로 정의 가능합니다.

export default defineNuxtPlugin({
  name: 'my-plugin',
  parallel: true,
  enforce: 'pre', // 또는 'post'
  async setup(nuxtApp) {
    // 이 부분은 일반적인 함수형 플러그인의 동등한 부분입니다.
  },
  hooks: {
    // 여기에서 Nuxt 앱 런타임 훅을 직접 등록할 수 있습니다.
    'app:created'() {
      const nuxtApp = useNuxtApp()
      // 훅 내에서 작업 수행
    }
  },
  env: {
    islands: true
  }
})

• enforce: pre는 다른 플러그인들이 실행되기 전, post는 다른 플러그인들이 실행된 후 실행하겠다는 의미입니다.
• async setup(nuxtApp): 플러그인의 핵심 로직을 정의하는 곳입니다. 이곳에서는 플러그인이 설정되고 초기화될 때 실행되는 작업을 정의합니다.
• hooks: 훅을 정의하는 부분입니다. Nuxt에서 제공하는 여러 생명 주기 훅에 대응하여 플러그인에서 특정 시점에 작업을 실행할 수 있습니다.
• env: 플러그인이 어디서 실행될지를 제어하는 옵션입니다. 이 부분은 아일랜드 컴포넌트에 대한 이해가 필요합니다.

---

플러그인 등록 순서 제어

B라는 플러그인에서 A라는 플러그인을 사용하고 싶다고 가정하면, 등록되는 순서가 중요할 것입니다. 플러그인은 사전순으로 번호를 붙여 등록 순서를 제어할 수 있습니다. 여기서 주의할 점을 "사전순" 이라는 점입니다(숫자로 변환되는 것이 아님). 예를 들어, 10.myPlugin.ts는 2.myOtherPlugin.ts보다 먼저 등록될 것입니다(1이 2보다 앞서기 때문).

---

실습 - NuxtPlugin을 이용한 다국어 처리

디렉토리 구조

- plugins/
  - i18n.ts

plugins/i18n.ts 파일

import { createI18n } from 'vue-i18n'

export default defineNuxtPlugin((nuxtApp) => {
  // 언어 메시지 설정
  const messages = {
    en: {
      welcome: 'Welcome',
      hello: 'Hello {name}!',
    },
    fr: {
      welcome: 'Bienvenue',
      hello: 'Bonjour {name}!',
    }
  }

  // i18n 인스턴스 생성
  const i18n = createI18n({
    locale: 'en', // 기본 언어
    fallbackLocale: 'en', // 기본 언어를 찾을 수 없을 경우 대체 언어
    messages, // 다국어 메시지 설정
  })

  // Nuxt 애플리케이션에 i18n을 플러그인으로 사용
  nuxtApp.vueApp.use(i18n)
})

nuxt.config.ts에 플러그인 등록

export default defineNuxtConfig({
  plugins: [
    '~/plugins/i18n.ts' // i18n 플러그인 등록
  ]
})

예시 컴포넌트

<template>
  <div>
    <h1>{{ $t('welcome') }}</h1>
    <p>{{ $t('hello', { name: 'Nuxt User' }) }}</p>

    <!-- 언어 변경 버튼 -->
    <button @click="changeLanguage('en')">English</button>
    <button @click="changeLanguage('fr')">Français</button>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n'

const { locale } = useI18n()

// 언어 변경 함수
function changeLanguage(lang) {
  locale.value = lang
}
</script>