title: Laravel Mix Vuejs component Syntax error on <template />
body: <p>I'm using a Windows 10 OS for development and I created a laravel 8, mix with VueJs project. The file on my <code>./components/app.vue</code> is returning a <code>SyntaxError: Unexpected token (1:0)</code></p>
  <p>This is what's inside the app.vue file</p>
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          Event Calendar VueJs x Laravel
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      name: &quot;App&quot;,
      data(){
          return{
              event: &quot;&quot;,
              event_from: &quot;&quot;,
              event_to: &quot;&quot;,
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  <p>I also set up this vue component on the <code>/resources/js/app.js</code>, here's what it looks like</p>
  <pre><code>require('./bootstrap');
  
  import Vue from &quot;vue&quot;;
  
  import App from &quot;./components/app.vue&quot;;
  
  const app = new Vue({
      el: &quot;#app&quot;,
      components: {
          App
      }
  });
  </code></pre>
  <p><code>webpack.mix.js file:</code></p>
  <pre><code>const mix = require('laravel-mix');
  
  mix.js('resources/js/app.js', 'public/js')
      .postCss('resources/css/app.css', 'public/css', [
          //
  ]);
  </code></pre>
  <p><code>package.json</code></p>
  <pre><code>{
      &quot;private&quot;: true,
      &quot;scripts&quot;: {
          &quot;dev&quot;: &quot;npm run development&quot;,
          &quot;development&quot;: &quot;mix&quot;,
          &quot;watch&quot;: &quot;mix watch&quot;,
          &quot;watch-poll&quot;: &quot;mix watch -- --watch-options-poll=1000&quot;,
          &quot;hot&quot;: &quot;mix watch --hot&quot;,
          &quot;prod&quot;: &quot;npm run production&quot;,
          &quot;production&quot;: &quot;mix --production&quot;
      },
      &quot;devDependencies&quot;: {
          &quot;axios&quot;: &quot;^0.21&quot;,
          &quot;laravel-mix&quot;: &quot;^6.0.6&quot;,
          &quot;lodash&quot;: &quot;^4.17.19&quot;,
          &quot;postcss&quot;: &quot;^8.1.14&quot;,
          &quot;vue-loader&quot;: &quot;^15.9.6&quot;,
          &quot;vue-template-compiler&quot;: &quot;^2.6.12&quot;
      },
      &quot;dependencies&quot;: {
          &quot;vue&quot;: &quot;^2.6.12&quot;
      }
  }
  </code></pre>
  <p>I'm at my dead end, I don't get it why <code>npm run hot</code> says it's a <code>SyntaxError</code></p>