CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvuetify.js
Tom
Tom

Reputation: 6004

VueJS error: "Failed to mount component: template or render function not defined"

I struggle to understand the component and template system in VueJS. I downloaded the VuetifyJS PWA example template and tried to replace the complete content of Hello.vue with the content of the VuetifyJS google-contacts.vue example template. I got this error message after npm run dev on localhost:8080:

> vue.esm.js?65d7:578 [Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Hello> at /home/a/my-project/src/components/Hello.vue
       <App> at /home/a/my-project/src/App.vue
         <Root>

Why is it not possible to just replace the <template></template> content and what do I need to change to use the google-contacts.vue template content instead of the Hello.vue content?

Upvotes: 1

Views: 674

Answers (1)

Richard Matsen
Richard Matsen

Reputation: 23533

I just followed the process and it works ok for me, so I'm guessing it's most likely a miss-step in your build, but so far can't reproduce it.

Note, it looks like docs/examples/layouts/google-contacts.vue is a replacement for the overall page layout rather than an individual component (thinking along the lines @B.Fleming mentions in comments), so it's more appropriate to replace App.vue than Hello.vue.

This is what I originally did (not reading your post thoroughly). But subsequently replacing Hello.vue gives me the same working Google Contacts page.

Upvotes: 1

Related Questions