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>