8. 플러그인(plugins)

Nuxt 는 Nuxt 혹은 Vue 앱이 생성될때 앱을 확장할 수 있는 플러그인 시스템을 갖추고 있다.

 

Nuxt 는 /pages, /components, /layouts 및 /composables 디렉터리를 자동으로 임포트 하는 것처럼 자동으로 /plugins 디렉터리를 자동으로 등록한다. 서버에서 쓰일 때는 .server, 클라이언트에서 쓰일때는 .client 접미사를 쓰면 된다. plugins/ 하위 디렉터리를 이용할 때는 nuxt.config.ts 에 plugins 속성에 해당 디렉터리 명을 배열로 등록한다.

 

자세한 내용은 이 곳을 참고하면 된다.

 

사용자 플러그인 작성

먼저 프로젝트 루트에서 /plugins 디렉토리를 생성한다. 해당 디렉토리에 myPlugin.ts 파일을 생성한다. plugin 선언은 defineNextPlugin 함수를 선언하면서 시작된다. 아래와 같이 코딩하자.

 

/plugins/myPlugin.ts

export default defineNuxtPlugin((nuxtApp) => {
    console.log(nuxtApp);
});

브라우저 개발자 도구에서 보면 nuxtApp 의 값을 볼 수 있다.

 

사용자 정의 헬퍼를 NuxtApp 에 등록하기 위해 provide 키를 활용해보자

 

/plugins/myPlugin.ts

export default defineNuxtPlugin(() => {
  return {
    provide: {
      sayHello: (msg: string) => `Hello ${msg}!`
    }
  }
})

 

브라우저를 새로고침하여 NuxtApp 의 상태를 확인하기 위해 /pages/index.vue 파일을 아래와 같이 바꾸자.

 

/pages/index.vue

<script setup lang="ts">
  const nuxtApp = useNuxtApp();
  console.log(nuxtApp);
</script>
<template>
  <div>
    <h1>Hello Nuxt 3</h1>
  </div>
</template>

 

화면을 새로 고침하고 개발자 도구를 보면 NuxtApp 에 우리가 정의한 'sayHello' 헬퍼가 정의되어 있는 걸 알 수있다.

 

index.vue 에서 활용해보자.

 

/pages/index.vue

<script setup lang="ts">
  const { $sayHello } = useNuxtApp();
  console.log ($sayHello('there!!!'));
</script>
<template>
  <div>
    <h1>Hello Nuxt 3</h1>
  </div>
</template>

 

브라우저 콘솔에 다음과 같이 출력될 것이다.

 

플러그인에 대한 설명으로 헬퍼함수를 등록하는 예제를 살펴보았다. 하지만  전역 네임스페이스를 오염시키지 않고 기본 번들 항목을 작게 유지하려면 플러그인 헬퍼함수를 제공하는 대신 컴포저블을 사용하는 것이 좋다.

 

Vue 디렉티브

플러그인 내에 사용자 정의 디렉티브를 정의하는 것도 가능하다.

아래 예는 페이지가 마운트 되었을 때 원하는 엘리먼트에 포커스를 주기 위한 사용자 디렉티브이다.

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.directive('focus', {
    mounted (el) {
      el.focus()
    },
    getSSRProps (binding, vnode) {
      // you can provide SSR-specific props here
      return {}
    }
  })
})