title: .Vue-File: Migrate structure from "template:'' to <template></template>
body: <p>I try to change the structure of my .vue files (used with laravel) from the working version as seen here: </p>
  
  <p><strong><em>OLD foo-component.vue:</em></strong></p>
  
  <pre><code>&lt;script&gt;
      Vue.component("foo-component", {
        data() {
        },
  
        props: {
        },
  
        methods: {
          },
        template: `
              &lt;div&gt; Some Content Here &lt;/div&gt;
              `
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>switch this to the other structure for .vue files:</p>
  
  <p><strong><em>NEW: foo-component.vue:</em></strong></p>
  
  <pre><code>&lt;template&gt;
          &lt;div&gt; Some Content Here &lt;/div&gt;
      &lt;/template&gt;
  
      &lt;script&gt;
          export default {
            name: 'foo-component',
            data() {
            },
  
            props: {
            },
  
            methods: {
  
            },
          }
      &lt;/script&gt;
  </code></pre>
  
  <p><strong><em>OLD: main app.js:</em></strong></p>
  
  <pre><code>Vue.component('foo-component', require('./components/foo-component.vue').default);
  
      const app = new Vue({
          el: '#app',
          components: {
              OtherComponents
                  },
          data:{
          },
          methods: {
          }
      });
  </code></pre>
  
  <p><strong><em>NEW: main app.js:</em></strong></p>
  
  <pre><code>Vue.component('foo-component', require('./components/foo-component.vue').default);
  
      const app = new Vue({
          el: '#app',
          components: {
              OtherComponents
                  },
          data:{
          },
          methods: {
          }
      }); 
  </code></pre>
  
  <p>But with that I get an error in the browser saying:</p>
  
  <pre><code>[Vue warn]: Unknown custom element: &lt;foo-component&gt; - did you register the component correctly? For recursive components, make sure to provide the "name" option.
  </code></pre>
  
  <p>I then added 'foo-component' to the components: {OtherComponents, foo-component} but then things got messy and the browser is saying: </p>
  
  <pre><code>Error: Module build failed: SyntaxError: X:/laragon/www/project/resources/assets/js/app.js: Unexpected token, expected , (38:35)
  </code></pre>
  
  <p>What am I doing wrong? </p>
  
  <p>Here's the HTML/View where I call the foo-component inside the laravel blade home.blade.php:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="app"&gt;
              &lt;foo-component&gt;&lt;/foo-component&gt;
      &lt;/div&gt;
      &lt;script src="{{ mix('/js/app.js') }}"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>