Invalid route component in new VueJs Project

September 23, 2023

I’m working on a Vue.js project and encountered an error that says "Error: Invalid route component." I’m having trouble figuring out the root cause of this issue. Can someone please help me diagnose and resolve it?

import { createRouter, createWebHistory } from "vue-router";
import Home from '../views/Home.vue' 
const routes = [
  {
    path: "/",
    name: "home",
    component: "Home",
  },
];
const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

<template> 
  <router-view />
</template>

<script setup> 

</script>

<style scoped> 
</style>

import { createApp } from "vue";
import router from "./router";
import "./style.css";
import App from "./App.vue";

createApp(App)
    .use(router)
    .mount("#app");

<template>
    Home
</template>

<script setup>
</script>

>Solution :

Have a look at the component value, it’s a string, it should be a reference to your Home import:

import Home from '../views/Home.vue' 
const routes = [
  {
    path: "/",
    name: "home",
    component: Home, // <---- use Home, not "Home"
  },
];

Give it a go.