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
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.