[Vue warn]: Failed to mount component: template or render function not defined. 에러

 

개발을 진행하는 도중 만난 에러. 굉장히 기초스러운 에러이지만 괴로웠다.  회사에서 미리 만들어논 형식대로 컴포넌트를 추가하고 싶은데, 저 에러가 자꾸떠서 그냥 라우터에  header와 footer을 사용하지 않고 기능 진행했었다.

물론 이글을 쓰는 이유가 해결을 했으니까이지만... 당시엔 거의 하루넘게 마음 한구석이 찝찝했다ㅜ.

 

 

 

[에러 화면]

 

 

[해결 방법]

1. 우선 근본적인 원인을 해결 못했을 때, 사용했던 방법.

https://stackoverflow.com/questions/54594406/vue-js-failed-to-mount-component-template-or-render-function-not-defined

Vue.js Failed to mount component: template or render function not defined

요기 나와있는 방법처럼 

{
   path: '/dashboard',
   component: require('./components/Dashboard.vue').default
 }

이런식으로 require을 사용하면 불러오고자했던 vue가 보여진다.

 

 

하지만 나는 header와 footer을 같이 선언하는 메소드를 사용하고 싶었고(기존에 존재했던 코드) component에 형식그대로 가져다가 써도 오류가 났었다.(이름확인을 몇번을 했는지......) 

 

 

2. 해결방법

정말 어처구니없게도....진짜 알고나서 너무 허탈했지만..

component가 아니라 components로 해야한다.  "s" 를 붙여야한다ㅜㅜㅜㅜㅜㅜㅜㅜㅜ

그러면 잘나온다...알아챘을때 얼마나 스스로가 멍청하다고 생각했는지 ..하하하 

여튼 자식컴포넌트를 넣을 땐 component를 쓰지만 하나의 컴포넌트를 라우터에 추가 시킬때 components 를 사용한다!!