[NuxtJS] Plugin

플러그인은 Nuxt.js 애플리케이션의 전역적으로 사용할 수 있는 기능을 확장하는 JavaScript 파일이다. 플러그인은 애플리케이션 초기화 시 실행되며, Vue 컴포넌트, Vue 인스턴스, Vuex 스토어 등에서 공통적으로 사용할 수 있는 메서드나 서비스를 정의한다.

 

플러그인 정의

플러그인은 plugins 디렉토리 또는 nuxt.config.js에서 설정된 다른 경로에 저장된다. 플러그인의 정의는 기본적으로 다음과 같은 형식으로 이루어진다:

// plugins/my-plugin.js
export default (context, inject) => {
  // context는 Nuxt.js의 컨텍스트 객체이다.
  // inject 함수는 전역으로 사용할 수 있는 메서드를 등록한다.

  inject('myMethod', (msg) => {
    console.log('My Method:', msg);
  });

  // 비동기 데이터 로딩
  inject('fetchData', async (url) => {
    const response = await fetch(url);
    return response.json();
  });
}

위 예제에서 inject 함수는 myMethod와 fetchData라는 메서드를 애플리케이션 전역에 등록한다. 이 메서드들은 모든 Vue 컴포넌트와 페이지에서 접근할 수 있다.

 

플러그인 등록

플러그인은 nuxt.config.js 파일의 plugins 배열에 등록하여 사용할 수 있다. 플러그인의 등록 순서는 중요하며, 다른 플러그인에 의존하는 플러그인은 순서에 주의하여 등록해야 한다.

// nuxt.config.js
export default {
  plugins: [
    '~/plugins/my-plugin.js',
    '~/plugins/another-plugin.js' // my-plugin이 먼저 로드된 후 실행된다.
  ]
}

 

플러그인 사용

등록된 플러그인은 Vue 컴포넌트에서 this.$myMethod와 같은 방식으로 사용할 수 있다. 전역 메서드를 정의하여 애플리케이션 전반에서 공통된 기능을 쉽게 사용할 수 있다.

<template>
  <div>
    <button @click="showMessage">Show Message</button>
    <button @click="loadData">Load Data</button>
    <div v-if="data">{{ data }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null
    };
  },
  methods: {
    showMessage() {
      this.$myMethod('Hello from plugin!');
    },
    async loadData() {
      this.data = await this.$fetchData('https://api.example.com/data');
    }
  }
}
</script>

 

비동기 플러그인 사용

비동기 작업이 필요한 플러그인은 async로 정의하여 비동기 작업이 완료된 후 결과를 주입할 수 있다.

// plugins/async-plugin.js
export default async (context, inject) => {
  const data = await fetch('https://api.example.com/data')
    .then(response => response.json());

  inject('asyncData', data);
}

<template>
  <div>
    <p>{{ asyncData }}</p>
  </div>
</template>

<script>
export default {
  async asyncData({ $asyncData }) {
    return {
      asyncData: $asyncData
    };
  }
}
</script>

 

플러그인 로딩 순서

플러그인은 nuxt.config.js의 plugins 배열에 등록된 순서대로 로드된다. 플러그인 간의 의존성이 있을 경우, 순서를 신경 써야 한다. 예를 들어, A 플러그인이 B 플러그인에 의존한다면, A 플러그인을 먼저 등록해야 한다.

// nuxt.config.js
export default {
  plugins: [
    '~/plugins/first-plugin.js',   // 먼저 로드된다.
    '~/plugins/second-plugin.js'   // 나중에 로드된다.
  ]
}

 

플러그인에서 사용할 수 있는 Nuxt.js 컨텍스트

플러그인에서 사용할 수 있는 Nuxt.js의 컨텍스트 객체는 다음과 같다:

• app: 애플리케이션 인스턴스
• router: Vue Router 인스턴스
• store: Vuex 스토어 인스턴스 (Nuxt 2) 또는 Pinia 스토어 인스턴스 (Nuxt 3)
• error: 오류 핸들러
• nuxt: Nuxt 애플리케이션 인스턴스

 

Vue.js와 Nuxt.js 플러그인 등록의 차이

• Vue.js 플러그인: Vue 인스턴스에 전역 메서드나 기능을 추가한다. Nuxt.js 애플리케이션 내에서 Vue 인스턴스에만 영향을 미친다.
• Nuxt.js 플러그인: Nuxt.js 애플리케이션의 전역 컨텍스트에 기능을 주입한다. 클라이언트 사이드와 서버 사이드에서 모두 사용할 수 있다.
• 둘 모두에 등록해야 하는 경우: Vue.js 플러그인과 Nuxt.js 플러그인 각각의 목적이 다를 때, 두 방식 모두에 등록하여 Vue 인스턴스와 Nuxt.js 애플리케이션 전역 컨텍스트 모두에서 기능을 사용할 수 있도록 할 수 있다.
• 둘 중 하나만 등록해야 하는 경우:
  • Vue.js 플러그인만 사용: Nuxt.js 애플리케이션의 서버 사이드 렌더링이 필요 없고, 클라이언트 사이드에서만 기능을 추가하고 싶을 때
  • Nuxt.js 플러그인만 사용: Nuxt.js의 서버 사이드 렌더링과 클라이언트 사이드 렌더링 모두에서 전역 기능을 추가하고 싶을 때.