I recently completed a project using Vue.js 3.2.13 and Vue-Router 4.0.14. Despite my efforts to ensure everything was set up correctly, I encountered an error in the browser that said "[Vue warn]: Failed to resolve component: router-view". The specific line where this occurs is unclear.
In my router.js file:
import { createRouter, createWebHistory } from "vue-router";
const routes = [
{
path: "/",
name: "index",
component: () => import("@/views/HomePage.vue"),
},
{
path: "/signin",
name: "signin",
component: () => import("@/views/SignIn.vue"),
},
{
path: "/signup",
name: "signup",
component: () => import("@/views/SignUp.vue"),
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
In my main.js file;
import { createApp } from "vue";
import App from "./App.vue";
import { router } from "./router";
createApp(App).component("fa", FontAwesomeIcon).use(router).mount("#app");
Furthermore, in my App.vue file:
<template>
<div id="app">
<HeaderNavbar />
<router-view></router-view>
</div>
</template>
Upon running the project, the warning message appears in the browser console:
[Vue warn]: Failed to resolve component: router-view
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.