I have a project build with Vue.js 3.2.13
and Vue-Router 4.0.14
. I think I do everything right but the browser raises an error "[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.
at "
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;
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");
Additionally App.vue:
<template>
<div id="app">
<HeaderNavbar />
<router-view></router-view>
</div>
</template>
When I run the project I get the warning on 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.
The problem in your case is exporting
router
asdefault
fromrouter.js
but importing it as named import inmain.js
.Therefore, replacing
with
will make VueRouter work as expected. (I doubt routing currently works in your project. It shouldn't.)
Alternatively, adding a named export of
router
torouter.js
(and keeping the current import syntax inmain.js
) would also make the problem go away.You can do that by adding
export
in front ofconst router = createRouter(/* etc... */
, in that file. If you do this,export default router
becomes obsolete (unused).