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

Question

I'm trying to build a Vue app, but I am getting this error on the console:

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

This is my code:

header.vue

<header>
    <div class="page-logo">Foo.com</div>
</header>
<nav>
    <ul class="nav">
        <li>My Account</li>
        <li>Log In</li>
        <li>Log Out</li>
        <li>Sign Up</li>
    </ul>
</nav>
</header>

This is my app.js:

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

var App = (function (App) {
    App.appComp = {
        header : Vue.component('mainMenu', require('./components/app/header.vue'))
    };
    const router = new VueRouter({
    routes: [
        {
          path: '/',
          components: {
            header: App.appComp.header,
          }
        }
      ]
    });
    App.app = new Vue({
        router
    }).$mount('#app');
    return App;
})(App || {});

And I'm trying to build this with laravel Mix. But I get this error in the console:

[Vue warn]: Failed to mount component: template or render function not defined. found in ---> at /opt/lampp/htdocs/gif/resources/assets/js/components/app/header.vue

I searched in google and I found this answer: Vue template or render function not defined yet I am using neither?

So I've tried to override the definition in mix. I did:

 mix.webpackConfig({
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
        }
    }
});

That didn't work, so I tried to change the webpack config file

I found there this line:

 module.exports.resolve = {
     extensions: ['*', '.js', '.jsx', '.vue'],

    alias: {
         'vue$': 'vue/dist/vue.common.js'
    }
};

I tried to replace common with esm, didn't help.

What else should I do?

Bert Bert · Accepted Answer · 2017-05-20T16:43:00

Your HTML in a single file component needs to be wrapped in template tags.

<template>
  <div>
    <header>
      <div class="page-logo">Foo.com</div>
    </header>
    <nav>
      <ul class="nav">
        <li>My Account</li>
        <li>Log In</li>
        <li>Log Out</li>
        <li>Sign Up</li>
       </ul>
    </nav>
  </div>
<template>

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

1 Answers