[Nuxt] SSR에서 Custom directives를 사용해서 스크롤 애니메이션 적용

우선 Directive란 무엇인가?

Vue 컴포넌트에 특별한 속성으로 사용되고 특정한 동작을 지정해주는 것이다.

Vue에서 흔히 사용하는 v-if, v-show, v-text 등이 디렉티브이다.

 

그렇다면 개발자가 어떤 특정한 기능을 공통적으로 속성에 적용하고 싶다면 커스텀 디렉티브를 이용해서 구현이 가능할 것이다. 추가적인 디렉티브 개념이 알고싶다면 아래의 링크 참고

https://kr.vuejs.org/v2/guide/custom-directive.html

사용자 지정 디렉티브 — Vue.js

 

나는 디렉티브를 이용해서 CSR Vue 프로젝트에 스크롤 애니메이션 효과를 구현한 적이 있다.

이번에 Nuxt로 전환하면서 해당 디렉티브 코드를 그대로 사용했더니 아래와 같은 에러가 떳다...

Nuxt 공식문서에도 안나와있는 너란 놈...

Intersection Observer is not defined

 

해결방법은 생각보다 간단했다.

1. plugins 폴더에 구현한 파일을 위치한다.

2. 중요한 것은 파일명이 단순히 ~.js가 아니라 ~.client.js 로 선언해줘야 한다...

3. nuxt.config.js에 plugins 추가

 

코드는 아래와 같다.

// ~.client.js
import Vue from 'vue'

const animatedScrollObserver = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if(entry.isIntersecting) {
        entry.target.classList.add('스크롤 도착 시 class 명');
        animatedScrollObserver.unobserve(entry.target);
      }
    })
  }
)

const 이름 = {
  // bind hook은 디렉티브가 요소에 처음 바인딩될 때 한 번만 호출된다.(일회성)
  bind(el) {
    el.classList.add('스크롤 도착 전 class명');
    animatedScrollObserver.observe(el);
  }
}

Vue.directive('animation', 이름);

// nuxt.config.js
 plugins: [
    '~/plugins/~.client.js',
  ],

// ~.vue 실제사용
<div v-animation />


<style>
.스크롤 전 클래스명 {
  // 애니메이션 효과..
}
.스크롤 후 클래스명 {
  // 애니메이션 효과..
}
</style>