Vue js cannot resolve component "router-link"

Question

does anyone knows a fix for this problem? I'm new to vue and i have the exact same problem like the person who initially asked the question.

Further details:

Here is my custom component: NavigationBar.vue:

<template>
 <nav class="site-navigation">
   <router-link to="/">Home </router-link>
 </nav>
</template>
<script>
 export default { name: "NavigationBar" }
</script>

The App.vue:

<template>
  <navigation-bar />
  <main>
    <router-view />
  </main>
</template>
<script>
import NavigationBar from "./components/NavigationBar.vue";

export default {
  components: { NavigationBar },
};
</script>

The main.js file:

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

import "./assets/style/style.scss";

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

The router

import { createRouter, createWebHashHistory } from "vue-router";

const routes = [
 ...
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

The error/warning message:

Failed to resolve component: rounter-link If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

Thank you!

Vue js cannot resolve component "router-link"

0 Answers0