[Vue.js] 템플릿 런타임 컴파일러 사용하기

1. 컴파일 에러

Vue 프로젝트를 진행하다가 아래와 같은 에러가 발생했다.

해당 에러는 Vue.js에서 동적 컴포넌트를 사용하려고 할 때 발생하는 에러다.

2. 동적 컴포넌트란?

동적 컴포넌트란 렌더링 되는 컴포넌트를 동적으로 변경 가능한 것으로 특정 조건에 따라 서로 다른 컴포넌트를 마운트 하는 것이 가능하다.

컴포넌트에 is 속성을 사용해서 전환 효과를 줄 수 있다.

<component v-bind:is="컴포넌트 명">

3. 해결 방법

그래서 에러 내용을 살펴보면 템플릿 컴파일러를 사용할 수 없는 Vue의 런타임 전용 빌드를 사용하고 있으니 템플릿을 렌더링 함수로 사전 컴파일 하거나 컴파일러에 포함된 빌드를 사용해라. 라고 안내하고 있다.

이는 Vue Cli 설정에서 동적 컴포넡트에 대한 컴파일의 기본 값이 false로 설정되어 있어 발생하는 것이다.
확장자가 .vue인 파일들은 vue-loader에 의해 JavaScript로 변환되서 동작하기 때문에, 서버 기동 중 바뀔 수 있는 동적 컴포넌트를 사용하고자 할 때에는 Runtime시 Compier가 함께 동작하게끔 처리해줘야 한다.

vue.config.js 파일에 아래와 같은 코드를 추가해준다.

module.exports = {
  runtimeCompiler: true,
}

서버가 동작하는 중(Runtime)에도 .vue 파일의 동적 컴포넌트들이 JavaScript화 되어 브라우저가 이해할 수 있도록 변환(Complie)해주는 옵션을 허용함으로써 에러를 해결할 수 있다.