VUE: Module parse failed: Unexpected token (1:0)

Question

In the Net Ninja Vue Tutorial 19 on YouTube, I am going through nested components where I wish to display a ul list using v-for and v-bind: key.

I keep getting the following error and it won't compile. I am new to Vue, can Guru out there please help me out here. Currently, my vue version is @vue/cli 4.4.6 and the npm is at 6.13.4.

<template>
    <ul>
        <li v-for="(ninja, index) in ninjas" v-bind:key="index"></li>
    </ul>
</template>

<script>
export default {
  data () {
    return {
      ninjas: ['Ryu','Ken','Yoshi']
    }
  }
}
</script>

ERROR

ERROR in ./src/Ninjas.Vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|     <ul>
|         <li v-for="(ninja, index) in ninjas" v-bind:key="index"></li>
 @ ./src/main.js 3:0-34
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

Answer 1

You need also to check if you have added the below code in your webpack.mix.js file:

 mix.js('resources/js/app.js', 'public/js').vue(); 

We added the .vue() function because now with latest update, webpack configurations are changed so we need to make changes according to it.

Hope it helps someone out

Answer 2

In Laravel 8 if you want to compile Vue, before running make sure you have installed "vue-template-compiler" & "vue-loader" with npm.

If it's not installed try this:

npm install vue-template-compiler

npm install vue-loader

Now you can run npm run watch.