Vue js build is failing

Question

I've got an existing web app made using Laravel. I'm moving my project's frontend to Vuejs. So I've modified my view app.blade.php to be:

@include('layout.header')
<div id="app">
    <router-view></router-view>
</div>
@include('layout.footer')

My web.php route file now is:

Route::get('/{any}', function() {
    return view('layout.app');
})->where('any', '.*');

Within resources/js/ I have my routes file which uses Vue-router (already installed):

import NotFound from './pages/NotFound'
import Home from "./pages/Home"


export default {
    mode: 'history',

    routes: [
        {
            path: '*',
            component: NotFound
        },
        {
            path: '/',
            component: Home
        }
    ]
}

and my app.js file is:

import './bootstrap'
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

Vue.use(VueRouter)

const app = new Vue({
    el: '#app',
    router: new VueRouter(routes)
});

For testing purposes I created a simple Home.vue component located in resources\\js\\pages . This is the component:

<template>
    <div>
        <h1>This is home</h1>
    </div>
</template>

<script>
    export default {}
</script>

but it never loads. When compiling I'm getting the following error:

ERROR Failed to compile with 1 errors 7:54:59 PM

error in ./resources/js/pages/Home.js

Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: ENOENT: no such file or directory, open '/Users/bigweld/Sites/championshiprecords/resources/js/pages/Home.js'

@ ./resources/js/routes.js 2:0-32 10:15-19 @ ./resources/js/app.js @ multi ./resources/js/app.js ./resources/sass/app.scss

by the way, my webpack.mix.js is simply:

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

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .copy('resources/images', 'public/images', true);

Any idea what's going on here?

Answer 1

You are very close but you are missing something while importing

SO

FROM

import NotFound from './pages/NotFound'
import Home from "./pages/Home"

TO

import NotFound from './pages/NotFound.vue'
import Home from "./pages/Home.vue"

You are missing the vue extension