Uncaught ReferenceError: Home is not defined - Laravel Vue.js

Question

I am new to Vue and Laravel and I am trying to make a single page application. I set up my router and routes but it says that my component is not defined. I don't understand why exactly because I have a Home component which is located in resources/js/components/home. My routes.js is located in resources/js and my app.js is located in resources/js I feel like this is a noob question, but I just can't seem to figure it out.

app.js:53562 Uncaught ReferenceError: Home is not defined at Module../resources/js/routes.js (app.js:53562) at webpack_require (app.js:20) at Module../resources/js/app.js (app.js:53328) at webpack_require (app.js:20) at Object.0 (app.js:53585) at webpack_require (app.js:20) at app.js:84 at app.js:87 ./resources/js/routes.js @ app.js:53562 webpack_require @ app.js:20 ./resources/js/app.js @ app.js:53328 webpack_require @ app.js:20 0 @ app.js:53585 webpack_require @ app.js:20 (anonymous) @ app.js:84 (anonymous) @ app.js:87

app.js

require("./bootstrap");

import Vue from "vue";
import VueRouter from "vue-router";
import Vuex from "vuex";
import { routes } from "./routes";
import MainApp from "./components/MainApp.vue";

Vue.use(VueRouter);
Vue.use(Vuex);

const router = new VueRouter({
    routes,
    mode: "history"
});

window.app = new Vue({
    el: "#app",
    router,
    components: {
        MainApp
    }
});

routes.js

export const routes = [
    {
        path: "/components/home",
        name: "home",
        component: Home
    }
];

Home.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <!-- <button v-on:click="switchTable" type="button" class="btn btn-primary">Next Page</button> -->
            <li
                v-for="(column, idx) in table"
                :key="idx"
                class="col-md-8 mb-1"
                style="list-style-type:none"
            >
                <Card v-bind:title="column.title" v-bind:description="column.description"></Card>
            </li>
        </div>
    </div>
</template>

<script>
import Card from "../ui/Card.vue";
export default {
    name: "home",
    props: {
        currentUser: Object
    },
    components: {
        Card
    },
    data() {
        return {
            tableNames: ["campaign", "location"],
            currentTable: 0,
            table: []
        };
    },
    mounted() {
        this.getTableFromDatabase("null", this.tableNames[this.currentTable]);
    },
    methods: {
        getTableFromDatabase: function(user, tableName) {
            axios
                .get("./api/" + tableName)
                .then(response => (this.table = response.data));
        },
        switchTable: function(currentTable, nextTable) {
            console.log("");
        }
    }
};
</script>

<style scoped>
</style>

MarcRo MarcRo · Accepted Answer · 2019-09-18T18:58:30

You have to import your component in your router file if you want to reference it. (This is actually true for every variable you want to use across different modules in JacaScript)

In router.js add this line:

import Home from './path/to/components/home.vue';

Uncaught ReferenceError: Home is not defined - Laravel Vue.js

1 Answers