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

Mohamed Gharib · Accepted Answer · 2023-06-09 03:58:22Z

3

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.

answered Jun 9, 2023 at 3:58

Mohamed Gharib

2,6071 gold badge18 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Samuel Eiche · Accepted Answer · 2023-05-24 08:03:56Z

0

You are using RouterLink component somewhere in your code, which is part of the VueRouter library. You either need to remove it from the code if you're not using it (try checking App.vue) or add VueRouter if it's needed for your Primevue components.

answered May 24, 2023 at 8:03

Samuel Eiche

1759 bronze badges

2 Comments

floork Over a year ago

I looked into the code of the Menubar from Primevue and they use router-link, but i cannot remove it from there. So can I do anything to prevent this warn in a other way?

Samuel Eiche Over a year ago

Then Primevue probably expects VueRouter to be used in the app, at least for the MenuBar, try installing that. Rr exclude it in the compilerOptions like the warning says if you don't use routing in MenuBar at all.

Collectives™ on Stack Overflow

Vue router-link warn

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related