[NodeJS/VueJS/NuxtJS] Nuxt.js 에서 외부라이브러리 연결에 대하여 (vue-owl-carousel 연결)

오늘도 맨땅에 헤딩을 엄청 하고 있습니다.

 

Nuxt 를 사용하여 토이 프로젝트를 구현하고 있었는데 시작부터 삐걱 거리네요.

 

이번에 간단하게 오늘 저를 괴롭게 했던 vue 관련 외부 라이브러리 추가에 대해 제가 겪었던 경험을

 

공유해볼까합니다.

 

일전에 포스팅 했었던 vue-owl-carousel 을 Nuxt 프로젝트에 설정하려고 했던것이 사건의 발단이었습니다.

 

Vue 와 동일하게 컴포넌트에 설정하고 Nuxt 로 실행하는 순간 그 단어가 보였습니다.

 

 

Document is not defined

 

 

 

처음엔 대수롭지 않게 생각했죠.

 

Nuxt 가 Vue 기반이지만 체계가 다른 프레임워크이기 때문에 설정이 다를 것은 당연한 것일 거라 예상했기 때문이죠

 

Nuxt 홈페이지를 방문해봅니다.

 

 

플러그인 페이지로 이동하여 살펴보고 그대로 실행해보지만 실패... (나중에 알게 되었지만 여기에 정답이 있긴 했었습니다)

 

구글에 에러 페이지의 단어로 검색하여 방법을 뒤지고 확인한 결과 결국엔 해결했습니다. (5시간 갈아넣음)

 

v-owl-carousel 은 vue-owl-carousel 과 동일한 기능의 라이브러리 입니다.

 

여기에 Nuxt 설정 방법이 나와 있더군요.

 

페이지의 내용을 토대로 설정 방법을 정리하면 다음과 같습니다.

 

plugins 폴더

 

owl.js 파일을 생성 (Vue 에 설치한 외부 라이브러리를 컴포넌트 형태로 연결하는 코드를 넣기 위함)

 

import Vue from 'vue'
import OwlCarousel from 'v-owl-carousel'

Vue.component('carousel', OwlCarousel)

 

nuxt.config.js

 

여기서 많이 해깔렸는데 코드 자체를 옮기니 참고해주세요.

 

중요한건 plugins 속성에 아까 생성했던 owl.js 파일을 객체 형태로 설정하여 연결하는 것, ssr 옵션이 false 라는 것 이 두가지네요.

 

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'nuxt-example',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  },
  plugins: [
    {src: 'plugins/owl.js', ssr: false} // Only works on client side
  ]
}

 

컴포넌트 사용 대상 vue 파일로 이동

 

owl.js 에서 컴포넌트 사용 설정을 해주었기 때문에 별도 import 설정을 하지 않아도 바로 사용 가능합니다.

 

대신 <no-ssr></no-ssr> 태그로 컴포넌트를 감싸주어야 할뿐이죠.

 

<template>
  <div class="carousel-item">
    <no-ssr>
      <carousel :autoplay="false" :items=1 :nav="false" :dots="false" :loop="true">
        <div>테스트 아이템1</div>
        <div>테스트 아이템2</div>
        <div>테스트 아이템3</div>
      </carousel>
    </no-ssr>
  </div>
</template>

 

이런식으로 사용하여 드디어 라이브러리를 연결하여 별탈없이 사용할 수 있었습니다.

 

다른 것도 이런식으로 적용하면 될 것 같네요.

 

 

 

 

이번에 적용하면서 느낀점은 Vue 관련 적용 내용들은 쉽게 찾아볼수 있었는데

 

Nuxt 라이브러리 연결 설정 관련 정보들이 많이 없기도 했고

 

관련 예제 코드가 부족해서 많이 헤메였었습니다.

 

다른 복잡한 설정을 통해서 좀 더 효율적으로 할수 있는 방법도 있을수 있으나

 

Nuxt 초보분들은 참고가 되었으면 좋겠습니다.

 

---

참고자료

• https://gist.github.com/1242035/805a3d8b6d713673e54e8b5f6df76831
• https://www.npmjs.com/package/v-owl-carousel
• https://nuxtjs.org/api/configuration-plugins
• https://ko.nuxtjs.org/guide/plugins