vuejs 템플릿 런타임 컴파일러 사용하기

<template>
  <dynamic-component />
</template>
<script>
const dynamicComponent = {
  template: `<div>dynamic-component {{ message }}</div>`,
  data: () => ({
    message: "created!"
  })
}

export default {
  components: { dynamicComponent }
}
</script>

코드 테스트 시, 여러파일로 만들기 귀차니즘에 인라인으로 컴포넌트를 정의해서 사용하면 아래와 같은 오류가 발생한다.

You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build

vue.config.js파일에 runtimeCompiler: true 설정을 추가하면 정상적으로 렌더링 된다.

module.exports = {
  runtimeCompiler: true,
}