title: [Vue warn]: Failed to mount component: template or render function not defined. Error
body: <p>I'm trying to build a Vue app, but I am getting this error on the console:</p>
  
  <blockquote>
    <p>[Vue warn]: Failed to mount component: template or render function not defined.</p>
  </blockquote>
  
  <p>This is my code:</p>
  
  <p><code>header.vue</code></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;header&gt;
      &lt;div class="page-logo"&gt;Foo.com&lt;/div&gt;
  &lt;/header&gt;
  &lt;nav&gt;
      &lt;ul class="nav"&gt;
          &lt;li&gt;My Account&lt;/li&gt;
          &lt;li&gt;Log In&lt;/li&gt;
          &lt;li&gt;Log Out&lt;/li&gt;
          &lt;li&gt;Sign Up&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>This is my <code>app.js</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>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 || {}); 
  </code></pre>
  
  <p>And I'm trying to build this with laravel Mix.
  But I get this error in the console:</p>
  
  <blockquote>
    <p>[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
           </p>
  </blockquote>
  
  <p>I searched in google and I found this answer: <a href="https://stackoverflow.com/questions/41983767/vue-template-or-render-function-not-defined-yet-i-am-using-neither">Vue template or render function not defined yet I am using neither?</a></p>
  
  <p>So I've tried to override the definition in mix. I did:</p>
  
  <pre class="lang-js prettyprint-override"><code> mix.webpackConfig({
      resolve: {
          alias: {
              'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
          }
      }
  });
  </code></pre>
  
  <p>That didn't work, so I tried to change the webpack config file</p>
  
  <p>I found there this line:</p>
  
  <pre class="lang-js prettyprint-override"><code> module.exports.resolve = {
       extensions: ['*', '.js', '.jsx', '.vue'],
  
      alias: {
           'vue$': 'vue/dist/vue.common.js'
      }
  };
  </code></pre>
  
  <p>I tried to replace common with esm, didn't help.</p>
  
  <p>What else should I do?</p>