Vue warn: failed to resolve components

Question

I'm new here and beginner at some aspects of Vue, such as Router. i am going to create my vue app with router and I encountered an error. I saw similar questions, but have not found satisfactory solution. I tried to entroduce these solutions, but it don't help me, or I'm doing something wrong. Problems are:

Vue Warn: Failed to resolve component: router-link If this is a native custom element, make sure to exclude it from component resolution via compiler Options is Custom Element.

Vue Warn: Failed to resolve component: router-view If this is a native custom element, make sure to exclude it from component resolution via compiler Options is Custom Element

My code is below:

Main.js:

//main.js

import { createApp } from 'vue';
import VWave from 'v-wave';
import { createRouter, createWebHistory } from 'vue-router';
import MainComponent from './components/MainComponent.vue';
import SurveyCode from './components/Routes/SurveyCode.vue';
import TodayCode from './components/Routes/TodayCode.vue';

import App from './App.vue'

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/components',
            component: MainComponent,
            children: [{
                path: '/Routes',
                component: SurveyCode,
            },
        {
            path: '/Routes',
            component: TodayCode,
        }]
        },
    ],
  });


 const app = createApp(App)
//.use(router)
app.use(VWave, router)

app.mount('#app')

ListComponent

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<template>
    <div class="header-buttons-menu">
<router-link  :to="{ path: '/components/MainComponent'}"><button class="basic" v-wave="{ color: '#eca1a6', duration: 2, initialOpacity: 2, easing: 'ease-in',}">Home</button></router-link>
<router-link  :to="{ path: '/components/Routes/SurveyCode'}"><button class="basic" v-wave="{ color: '#eca1a6', duration: 2, initialOpacity: 2, easing: 'ease-in',}">Survey</button></router-link>           
<router-link  :to="{ path: '/components/Routes/Today'}"><button class="basic" v-wave="{ color: '#eca1a6', duration: 2, initialOpacity: 2, easing: 'ease-in',}">Today</button></router-link>           
  </div>
  <router-view></router-view>
</template>

App

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<template>
<div>
  <the-header></the-header>
  <list-component></list-component>
  <slider-component></slider-component>
<the-footer></the-footer>
</div>
</template>

one mistake I see is `app.use(VWave, router)` when you're supposed to only provide app.use with a single plugin. call app.use() multiple times for each plugin: `app.use(VWave); app.use(router)`. Or you can chain them like this: `createApp(App).use(VWave).use(router).mount('#app');` — yoduh, Oct 18 '22 at 01:35
Thank you, Yodu. It is unthinkable, that using external library and her entry caused this problem. I used it and corrected paths and then everything works fine. — Jakub K, Oct 18 '22 at 13:26

Vue warn: failed to resolve components

0 Answers0