Nuxt2 에서 Vue Composition API 사용방법

Vue Composition API 는 Vue2 에서도 사용할 수 있도록 라이브러리를 지원한다. Nuxt2 에서도 해당 라이브러리를 사용할려고 했는데 호환이 맞지 않는 문제가 발생했다. (Nuxt 에서 Vue 관련 에러가 발생...)

그래서 찾아보니 @nuxtjs/composition-api 라는 것을 지원한다. 이를 사용해보자.

참고: https://composition-api.nuxtjs.org/getting-started/introduction

nuxt composition api

설치 방법

yarn add @nuxtjs/composition-api

 

모듈 설치 이후, nuxt.config.js 에 가서 아래 설정을 해주자.

// nuxt.config.js
{
  ...,
  buildModules: [
    '@nuxtjs/composition-api/module'
  ],
  ...
}

 

사용 예제

<template>
  <div>
    <button @click="increment">숫자 세기: {{ count }}</button>
    <div>
      <h2>{{ customTitle }}</h2>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { onMounted } from '@nuxtjs/composition-api'

export default {
  setup() {
    const count = ref(0)
    const customTitle = ref('타이틀') // 변수명 변경

    function increment() {
      count.value++
    }

    onMounted(() => {
      console.log(`숫자를 세기 위한 초기값은 ${count.value} 입니다.`)
    })
    return {
      count,
      customTitle,
      increment,
    }
  },
}
</script>

 

유의 사항

@vue/composition-api 와 같이 사용하게 되면 충돌나서 오류가 발생할 확률이 높다.

@vue/cli-plugin-babel/preset 를 별도로 사용하고 있으면, 지워주자. 충돌날 가능성이 크기 때문에 만약 정말 사용하고 싶다면, nuxt.config.js 에서 별도로 설정해주는 방법으로 우회하면 된다.