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

Question

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?

From what I've seen, there are typically two ways to handle Vue components: 1) the classic way in which you use the template property of a component, and 2) exporting individual components and then importing them later. It sounds like the second is what you're aiming for and that you're doing it incorrectly. Unfortunately we can't determine whether or not this is the case. Please provide code snippets so that we may have a clearer picture of your problem. — B. Fleming
– B. Fleming, Commented Dec 26, 2017 at 18:23
I linked the code I used in my question (bold text) and the complete template too. (These are both examples of VuetifyJS ) — Tom
– Tom, Commented Dec 26, 2017 at 19:44
Possible duplicate of Use vue component in other vue component file — ramazan793
– ramazan793, Commented Dec 26, 2017 at 20:04
@ramazan793 I tried the suggest solution but it didn't work. Error: <hello> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> <App> at /home/a/my-project/src/App.vue <Root> — Tom
– Tom, Commented Dec 26, 2017 at 21:05
@Tom try to register your component globally in main.js: import Hello from '~/components/hello.vue' Vue.component('Hello', Hello); As in the second answer to that question — ramazan793
– ramazan793, Commented Dec 27, 2017 at 7:26

Richard Matsen · Accepted Answer · 2017-12-26 22:06:11Z

1

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.

answered Dec 26, 2017 at 22:06

Richard Matsen

20.9k3 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tom Over a year ago

It was a build problem. Thank you

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related