Fix usage of deprecated property of PrimeVue's MenuItem.

app.vue

@@ -54,12 +54,16 @@ const menuPassThroughOptions: MenuPassThroughOptions = {
     <template #default>
       <Menu :model="navMenuItems" :pt="menuPassThroughOptions">
         <template #item="{ label, item, props }">
-          <RouterLink :to="item.to!" v-slot="{ href, route, navigate, isActive, isExactActive }" custom>
+          <RouterLink v-if="item.route" :to="item.route" v-slot="{ href, route, navigate, isActive, isExactActive }" custom>
             <a :href="href" v-bind="props.action" @click="navigate($event).then(() => isSidebarVisible = false)" :class="{ 'router-link-active': isActive, 'router-link-exact-active': isExactActive }">
               <span v-bind="props.icon" />
               <span v-bind="props.label">{{ label }}</span>
             </a>
           </RouterLink>
+          <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+            <span v-bind="props.icon" />
+            <span v-bind="props.label">{{ label }}</span>
+          </a>
         </template>
       </Menu>
 
@@ -71,7 +75,7 @@ const menuPassThroughOptions: MenuPassThroughOptions = {
 
   <div class="flex flex-col items-center min-h-screen">
     <div class="flex justify-between items-center w-full p-1">
-      <RouterLink :to="homeMenuItem.to!" :title="homeMenuItem.label" class="inline-block p-2">
+      <RouterLink :to="homeMenuItem.route" :title="homeMenuItem.label" class="inline-block p-2">
         <img :src="`${config.app.baseURL}favicon/favicon-32x32.png`" :alt="homeMenuItem.label as string" />
       </RouterLink>
 

data/nav.ts

@@ -1,38 +1,40 @@
-import type { MatcherLocationAsPath } from "vue-router";
 import type { MenuItem } from "primevue/menuitem";
 
 export const homeMenuItem: MenuItem = {
     key: 'home',
     label: 'Home',
     icon: 'pi pi-home pi-fw',
-    //TODO deprecated
-    to: { path: '/' } as MatcherLocationAsPath
+    route: '/'
 };
 export const lineupMenuItem: MenuItem = {
     key: 'lineup',
     label: 'Lineup',
     icon: 'pi pi-user-edit pi-fw',
-    //TODO deprecated
-    to: { path: '/lineup' } as MatcherLocationAsPath
+    route: '/lineup'
 };
 export const scoreboardMenuItem: MenuItem = {
     key: 'scoreboard',
     label: 'Scoreboard',
     icon: 'pi pi-play pi-fw',
-    //TODO deprecated
-    to: { path: '/scoreboard' } as MatcherLocationAsPath
+    route: '/scoreboard'
 };
 export const aboutMenuItem: MenuItem = {
     key: 'about',
     label: 'About',
     icon: 'pi pi-info-circle pi-fw',
-    //TODO deprecated
-    to: { path: '/about' } as MatcherLocationAsPath
+    route: '/about'
 };
+// export const externalLinkExample: MenuItem = {
+//     key: 'external',
+//     label: 'External',
+//     icon: 'pi pi-external-link pi-fw',
+//     url: 'https://site.example',
+//     target: '_blank',
+// };
 
 export const navMenuItems: MenuItem[] = [
     homeMenuItem,
     lineupMenuItem,
     scoreboardMenuItem,
-    aboutMenuItem
+    aboutMenuItem,
 ];