title: Getting error "Failed to mount component: template or render function not defined." while using js file as Vue component
body: <p>I'm using Vue in Laravel 5.3. I have already worked with Laravel 5.2. But Laravel 5.3 and Vue.js is new for me. So I'm playing with these pair. I have completed <a href="https://laravel.com/docs/5.3/passport" rel="nofollow noreferrer">Laravel Passport</a> tutorial successfully. Now what I want to do is put my html template in blade file and js code in Vue component. But I'm getting this error:</p>
  
  <blockquote>
    <p>[Vue warn]: Failed to mount component: template or render function not defined. (found in component )</p>
  </blockquote>
  
  <p>So I can't understand reason of this error as I'm new in Vue.js. If any one knows answer, it will be appreciated. Here is my code.</p>
  
  <p><strong>Blade file</strong></p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="app"&gt;
          &lt;tasks&gt;&lt;/tasks&gt;
      &lt;/div&gt;
      &lt;template id="tasks-template"&gt;
          &lt;ul class="list-group"&gt;
              &lt;li class="list-group-item" v-for="task in list"&gt;
                  @{{task.body}}
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/template&gt;
      &lt;script src="/js/app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>/resources/assets/js/app.js</strong></p>
  
  <pre><code>require('./bootstrap');
  Vue.component('tasks', require('./components/Tasks'));
  const app = new Vue({
      el: '#app'
  });
  </code></pre>
  
  <p><strong>/resources/assets/js/components/Tasks.js</strong></p>
  
  <pre><code>export default {
      template: '#tasks-template',
      data: function () {
          return {
              list: ''
          };
      },
      created: function() {
          this.$http.get('/api/tasks').then((response) =&gt; {
              this.list = response.body;
          }, (response) =&gt; {
              alert(0);
          });
      }
  }
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p><strong>Blade file</strong></p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="app"&gt;
          &lt;tasks&gt;&lt;/tasks&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>/resources/assets/js/components/Tasks.js</strong></p>
  
  <pre><code>template: require('../components/tasks-template.html'),
  </code></pre>
  
  <p>instead of</p>
  
  <pre><code>template: '#tasks-template'
  </code></pre>
  
  <p><strong>/resources/assets/js/components/tasks-template.html</strong></p>
  
  <pre><code>&lt;ul class="list-group"&gt;
      &lt;li class="list-group-item" v-for="task in list"&gt;
          {{task.body}}
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>But now getting this error.</p>
  
  <blockquote>
    <p>Uncaught Error: Module parse failed: /var/www/html/casesync/resources/assets/js/components/tasks-template.html Unexpected token (1:0) 
    You may need an appropriate loader to handle this file type.
    | 
    |     
    |         @{{task.body}}</p>
  </blockquote>