javascript - Laravel Mix Vuejs component Syntax error on <template />

Question

I'm using a Windows 10 OS for development and I created a laravel 8, mix with VueJs project. The file on my ./components/app.vue is returning a SyntaxError: Unexpected token (1:0)

This is what's inside the app.vue file

<template>
    <div>
        Event Calendar VueJs x Laravel
    </div>
</template>

<script>
export default {
    name: "App",
    data(){
        return{
            event: "",
            event_from: "",
            event_to: "",
        }
    }
}
</script>

I also set up this vue component on the /resources/js/app.js, here's what it looks like

require('./bootstrap');

import Vue from "vue";

import App from "./components/app.vue";

const app = new Vue({
    el: "#app",
    components: {
        App
    }
});

webpack.mix.js file:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
]);

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vue-loader": "^15.9.6",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "vue": "^2.6.12"
    }
}

I'm at my dead end, I don't get it why npm run hot says it's a SyntaxError

question from:https://stackoverflow.com/questions/65651048/laravel-mix-vuejs-component-syntax-error-on-template

Answer 1

You're using laravel mix v6 which adds .vue() to mix.js(...) :

mix.js('resources/js/app.js', 'public/js').vue({ version: 2 })
   
mix.postCss('resources/css/app.css', 'public/css', [
        //
]);

for Vue 3 check this answer