Failed to mount component: template or render function not defined?

Question

I am creating website using node.js, express, pug, vue.js. I have one problem regarding Vue.js

app.js

window.Vue = require('vue');
Vue.component('work-list', require('../views/components/WorkList.vue'));

const app = new Vue({
  el: '#app',
  data: {
    message: 'Welcome'
  }
});

WorkList.vue

<script>
  export default {
    name: 'WorkList',
    data: function () {
      return {
        message: 'WorkList Page'
      }
    }
  }
</script>

index.pug

(HTML Code..)
body
    #app.container
        h1 {{ message}}
        .row
            block content
        a(href="/worklist") Go to worklist
  script(src="bundle.js")

worklist.pug

extends index.pug

block content
work-list {{ message }}

When I try to access worklist page, browser is returning following error message.

How can I make WorkList in Root element?

my code url: github.com/ofleaf/webview

ofleaf
– ofleaf

2018-01-23 08:42:16 +00:00
Commented Jan 23, 2018 at 8:42 — ofleaf
– ofleaf, Commented Jan 23, 2018 at 8:42

Erich · Accepted Answer · 2019-09-17 15:51:29Z

8

This might also occur even when a <template></template> is defined in your Vue single file component. In addition to require('/path/to/your/Component.vue') as the second parameter to Vue.component() when registering the component globally in your app.js, you also have to specify .default:

Vue.component('work-list', require('../views/components/WorkList.vue').default);
                                                                      ^^^^^^^^

answered Sep 17, 2019 at 15:51

Erich

2,64622 silver badges46 bronze badges

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

2 Comments

Cotton Over a year ago

This must have changed from an older Vue version. I dusted off a project after a few months and this fixed this issue.

Andres Felipe Over a year ago

I would give you more than 1 upvote if I could, thanks.

tony19 · Accepted Answer · 2022-07-15 02:55:32Z

4

Your component file 'WorkList.vue' needs a template defined. The most straight forward way to construct a '.vue' component is with three sections.

<template>
   //template code goes here.
</template>

<script>
   // vue javascript here
</script>

<style>
   // applicable styles here
</style>

Your component is expecting the <template> markup.

There are other ways to define the template as well. https://v2.vuejs.org/v2/guide/render-function.html

When defining your component

Vue.component('my-component', {
    template: `<div> markup here</div>`,
    data(){
      ...
    }
});

X-Templates (similar to above)

Vue.component('my-component', {
    template: `#someElementId`,
    ....

 //then in a separate component.js file

 <script type="text/x-template" id="someElementId">
   <div> markup here </div>
</script>

Using the render function

export default {
    data() {
     ...
    }
    render(createElement) {
        return createElement(
            'div', {....}
        ....

edited Jul 15, 2022 at 2:55

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 23, 2018 at 9:13

skribe

3,6254 gold badges30 silver badges36 bronze badges

3 Comments

ofleaf Over a year ago

I tried Vue.component('work-list', { template: (...) }); it works. But <template>...</template><script>...</script> in WorkList.vue doesn't work. Returned same error. WorkList element out of Root element.

skribe Over a year ago

Are you building your .vue component using webpack? I have never used Pug as a pre-processor so it may be a problem there?

ofleaf Over a year ago

I changed app.js file. Using import WorkList from '...'; and component to register app. It works. Thanks for reply.

Precastic · Accepted Answer · 2020-10-06 11:06:49Z

3

Following on from Erich's answer, if you are using ES6 imports it would be:

import WorkList from '../views/components/WorkList'; // .vue is extension not required

Vue.component('work-list', WorkList);

answered Oct 6, 2020 at 11:06

Precastic

4,0422 gold badges27 silver badges30 bronze badges

Comments

Shadow · Accepted Answer · 2022-03-09 04:30:48Z

2

In my case, I forgot to put my dynamic import inside an arrow function.

Wrong:

{
    path: "/example/",
    component: import("@/pages/Example"),
}

Correct:

{
    path: "/example/",
    component: () => import("@/pages/Example"),
}

edited Mar 9, 2022 at 4:30

answered Mar 9, 2022 at 3:59

Shadow

9,5474 gold badges50 silver badges60 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-16 04:42:42Z

0

I believe the problem is the alias for vue in your webpack config.

Check out the different types of Vue builds.

Try using vue.min.js or vue.common.js

//webpack.config.js
...
alias: {
  'vue$': 'vue/dist/vue.common.js'
},
...

edited Jul 16, 2022 at 4:42

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 23, 2018 at 19:40

ralphpig

992 silver badges3 bronze badges

Collectives™ on Stack Overflow

Failed to mount component: template or render function not defined?

5 Answers 5

2 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related