Vue router-link warn

Question

Hello Guys I am currently working on a Vuejs3 Project, and I installed Primevue i added it to my main.js and imported the Menubar from it into my App.vue. I tested it and i got the this warning, I don't know how I can get rid of it, because everything is working just fine except that my console gets spammed with the warn. App.vue

<template>
  <div class="card relative z-2">
    <i class="pi pi-sliders-h" @click="toggleMenu" style="font-size: 1.5rem" id="settings2" />
    <Menubar v-if="showMenu" :model="items" />
  </div>
</template>
<script>
import Menubar from 'primevue/menubar';
export default {
  name: "App",
  components: {
    Menubar,
  },
  setup() {
const showMenu = ref(false);
    const items = ref([
      {
        label: 'Colors',
        icon: 'pi pi-fw pi-palette',
        items: [
          {
            label: 'Default',
            icon: 'pi pi-fw pi-check',
            command: () => {
              updateSelectedColorPalette('default');
            },
          },
          {
            label: 'Vibrant Palette',
            icon: 'pi pi-fw pi-check',
            command: () => {
              updateSelectedColorPalette('vibrant-palette');
            },
          },
          {
            label: 'Monochromatic Palette',
            icon: 'pi pi-fw pi-check',
            command: () => {
              updateSelectedColorPalette('monochromatic-palette');
            },
          },
          {
            label: 'Contrasting Palette 1',
            icon: 'pi pi-fw pi-check',
            command: () => {
              updateSelectedColorPalette('contrasting-palette-1');
            },
          },
          {
            label: 'Contrasting Palette 2',
            icon: 'pi pi-fw pi-check',
            command: () => {
              updateSelectedColorPalette('contrasting-palette-2');
            },
          },
        ],
      },
      {
        label: 'Background',
        icon: 'pi pi-fw pi-pencil',
        items: [
          {
            label: 'white',
            icon: 'pi pi-fw pi-check',
            command: () => {
              updateBackground(false);
            },
          },
          {
            label: 'grey',
            icon: 'pi pi-fw pi-check',
            command: () => {
              updateBackground(true);
            },
          },
        ],
      }
    ]);

    function toggleMenu() {
      showMenu.value = !showMenu.value;
    }

    function updateSelectedColorPalette(value) {
      <!-- some code -->
    }

    function updateBackground(value) {
      <!-- some code -->
    }

    return {
      items,
      showMenu,
      toggleMenu,
    };
  },
};
</script>

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import "primevue/resources/themes/saga-blue/theme.css";
import "primevue/resources/primevue.min.css";
import "primeicons/primeicons.css";
import { createPinia } from "pinia";
import { plugin as VueTippy } from "vue-tippy";
import "tippy.js/dist/tippy.css";
import sharedFunctions from "./sharedFunctions.js";

const app = createApp(App)
  .use(createPinia())
  .use(PrimeVue)
  .use(VueTippy, {
    directive: "tippy",
    component: "tippy",
    componentSingleton: "tippy-singleton",
    defaultProps: {
      allowHTML: true,
    },
  });

for (const key in sharedFunctions) {
  app.config.globalProperties[key] = sharedFunctions[key];
}

app.mount("#app");

but i get this warn and it reappears when i hover over the elements

[Vue warn]: Failed to resolve component: router-link
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <MenubarSub ref=fn<bound menubarRef> id=undefined class="p-menubar-root-list"  ... > 
  at <Menubar key=0 model= 
Array [ {…}, {…} ]
 > 
  at <App> runtime-core.esm-bundler.js:41

Answer 1

I had a single page app that uses Primevue and didn't need a router but the Menu component complained about the missing router-link component, so I solved the problem by installing vue-router and only registering this component :

// main.js
import { createApp } from 'vue'
import { RouterLink } from 'vue-router';
import PrimeVue from 'primevue/config';
import App from './App.vue'

// ...

const app = createApp(App);

// register router-link so Primevue doesn't complain
app.component('router-link', RouterLink);

This way you don't have to actually setup the router if you don't use it.