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

Question

I'm learning to use Vue.js with Laravel from this series the narrator doesn't get any error but I've encountered the following error while I click to change the route.

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

Below code is from my app.js:

require('./bootstrap');

window.Vue = require('vue');

import VueRouter from 'vue-router'
Vue.use(VueRouter)

let routes = [{
    path: '/dashboard',
    component: require('./components/Dashboard.vue')
  },
  {
    path: '/profile',
    component: require('./components/Profile.vue')
  }
]

const router = new VueRouter({
  routes
})

Vue.component('example-component', require('./components/ExampleComponent.vue'));

const app = new Vue({
  el: '#app',
  router
});

Code snippet from my Dashboard.vue:

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Dashboard Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    mounted() {
      console.log('Component mounted.')
    }
  }
</script>

Code snippet from my master.blade.php layout:

//sidebar
<ul>
  <li>
    <router-link to="/dashboard" class="nav-link">Dashboard</li>
  <li>
    <router-link to="/profile" class="nav-link">Profile</li>
</ul>
//content
<div class="container-fluid">
  <router-view></router-view>
</div>

I'm running app at localhost:3000with browserSync and npm run watch. Does it has anything to do with error ?

zcoop98 · Accepted Answer · 2021-02-01 22:43:17Z

31

Try adding .default to your component requires:

let routes = [{
    path: '/dashboard',
    component: require('./components/Dashboard.vue').default
  },
  {
    path: '/profile',
    component: require('./components/Profile.vue').default
  }
]

edited Feb 1, 2021 at 22:43

zcoop98

3,2852 gold badges26 silver badges38 bronze badges

answered Feb 8, 2019 at 14:30

CodeBoyCode

2,27715 silver badges29 bronze badges

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

3 Comments

psudo Over a year ago

Thanks. It worked. Could you please help me understand what your suggested code just did ?

CodeBoyCode Over a year ago

no worries! Glad to help :) - you could also do component: () => import('../components/Test.vue') aswell I believe :)

CodeBoyCode Over a year ago

I'm not sure 100% why it doesn't work without it, just that it has something to do with async components - could you mark my answer as correct please :)

Will Palmer · Accepted Answer · 2019-10-21 16:03:15Z

While not applicable to the specifics of this question, the error message above can also be encountered when failing to wrap one's HTML in <template>...</template> tags. This would cause vue to not detect a template, as none has been defined via tags or object properties.

For example, within Dashboard.vue, if one were to write (within Dashboard.vue):

<!-- EXAMPLE OF INCORRECT SYNTAX: missing <template> tag -->
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Dashboard Component</div>

                <div class="card-body">
                    I'm an example component.
                </div>
            </div>
        </div>
    </div>
</div>

<script>
  export default {
    mounted() {
      console.log('Component mounted.')
    }
  }
</script>

rather than:

<template> <!-- NOTE THE <template> tag, here -->
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Dashboard Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template> <!-- NOTE THE </template> tag, here -->

<script>
  export default {
    mounted() {
      console.log('Component mounted.')
    }
  }
</script>

one would receive the error message: Vue.js Failed to mount component: template or render function not defined

Priyank Patel · Accepted Answer · 2020-06-02 14:12:46Z

0

// Just add "import Vue from 'vue'" and the component will be shown !

require('./bootstrap');


window.Vue = require('vue');

import VueRouter from 'vue-router'
Vue.use(VueRouter)

let routes = [{
    path: '/dashboard',
    component: require('./components/Dashboard.vue')
  },
  {
    path: '/profile',
    component: require('./components/Profile.vue')
  }
]

const router = new VueRouter({
  routes
})

Vue.component('example-component', require('./components/ExampleComponent.vue'));

const app = new Vue({
  el: '#app',
  router
});

answered Jun 2, 2020 at 14:12

Priyank Patel

116 bronze badges

Comments

Mat J · Accepted Answer · 2020-09-20 09:43:05Z

0

This was bugging me for so long, the change is so small that I could barely notice it in two different router files, among which one works, one doesn't.

Instead of

let routes = [{
    path: '/dashboard',
    component: require('./components/Dashboard.vue')
  }]

you should use

let routes = [{
        path: '/dashboard',
        component:()=> import('./components/Dashboard.vue')
      }]

The point is component property will also accept a function, and in that function, you can return an imported component which will only be called when it is required. If you give require() directly, it is imported immediately.

answered Sep 20, 2020 at 9:43

Mat J

5,6616 gold badges45 silver badges60 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related