플러그인

Nuxt.js에서는 루트 vue.js 어플리케이션이 만들어지기 전에 실행할 js 플러그인을 정의할 수 있습니다. 직접 만든 라이브러리나 외부 모듈들 모두 사용 가능합니다.

외부 패키지

서버와 클라이언트 모두에서 HTTP 리퀘스트를 만들기 위해 axios라는 패키지를 사용한다는 가정을 해보겠습니다.
먼저 npm을 통해 설치합니다.

npm install --save axios

이를 페이지 컴포넌트에서 바로 사용할 수 있습니다.

<template>
  <h1>{{ title }}</h1>
</template>

<script>
import axios from 'axios'

export default {
  async asyncData ({ params }) {
    let { data } = await axios.get(`https://my-api/posts/${params.id}`)
    return { title: data.title }
  }
}
</script>

하지만 한 가지 문제가 있습니다. 만약 다른 페이지에서 axios를 import 한다면 페이지 번들에 중복 포함되기 때문입니다. axios를 한 번만 포함하기 위해서는 build.vendor 키를 nuxt.config.js에서 사용하면 됩니다.:

module.exports = {
  build: {
    vendor: ['axios']
  }
}

Vue 플러그인

만약 어플리케이션에서 알림을 표시하기 위해 vue-notification를 사용하고 싶다면, 먼저 앱이 실행되기 전에 플러그인을 셋업해야 합니다.
plugins/vue-notificatiosn.js파일입니다.

import Vue from 'vue'
import VueNotifications from 'vue-notifications'

Vue.use(VueNotifications)

이제 nuxt.config.js 내의 plugins 키에 파일을 추가합니다.:

module.exports = {
  plugins: ['~plugins/vue-notifications']
}

하지만 vue-notifications는 라이브러리이기 때문에 app 번들에 포함하는 것보다 vendor 번들에 포함하는 것이 캐싱에 더 좋습니다.
이를 위해서는 nuxt.config.js의 vendor 번들에 vue-notifications를 추가합니다.

module.exports = {
  build: {
    vendor: ['vue-notifications']
  },
  plugins: ['~plugins/vue-notifications']
}