Vue 템플릿에서 새로운 ES Syntax 사용하기(Optional Chaining, Nullish Coalescing)

Vue 컴포넌트를 작성할 때 템플릿 영역에는 Optional Chaining(?.), Nullish Coalescing(??) 등 ES2015 이후의 새로운 Syntax를 사용할 수 없습니다. 단일 파일 컴포넌트(SFC) 형태로 Vue 템플릿을 작성하면 빌드타임에 vue-loader에 의해 템플릿이 자바스크립트 코드로 컴파일 되는데, vue-loader에 포함된 템플릿 컴파일러인 vue-template-complier와 vue-template-es2015-compiler가 새로운 Syntax를 지원하지 않기 때문에 오류가 발생합니다.

특히 <script> 영역엔 이러한 문법들을 이용하여 코드를 작성할 수 있지만 막상 템플릿에서는 사용할 수 없어 불편함이 있었는데, 다행히 이를 개선한 vue-template-babel-compilier라는 라이브러리가 있습니다. 기존 컴파일러 위에 새로운 ES Syntax를 사용할 수 있도록 Babel 기반으로 확장했다고 합니다.

설치

npm install vue-template-babel-compiler --save-dev

설치한 후, 약간의 설정이 필요합니다.

Nuxt

nuxt.config.js에서 webpack 설정을 다음과 같이 설정해줍니다.

build: {
  loaders: {
    vue: {
      compiler: require('vue-template-babel-compiler')
    }
  },
},

vue-cli

vue.config.js에서 webpack 설정을 다음과 같이 설정해줍니다.

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule("vue")
      .use("vue-loader")
      .tap((options) => {
        options.compiler = require("vue-template-babel-compiler")
        return options
      })
  },
}

다시 앱을 빌드하면 정상적으로 새로운 Syntax를 사용할 수 있습니다.