refactor: use explicit Inertia Link components

Author: connorabbas

resources/js/app.ts

@@ -2,7 +2,7 @@ import '../css/app.css'
 import '../css/tailwind.css'
 
 import { createApp, DefineComponent, h } from 'vue'
-import { createInertiaApp, router, Link } from '@inertiajs/vue3'
+import { createInertiaApp, router } from '@inertiajs/vue3'
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
 import { ZiggyVue } from 'ziggy-js'
 
@@ -73,7 +73,6 @@ createInertiaApp({
                 pt: globalPt,
             })
             .use(ToastService)
-            .component('InertiaLink', Link)
             .component('Container', Container)
             .component('PageTitleSection', PageTitleSection)
             .provide('colorMode', colorMode)

resources/js/components/primevue/menu/Breadcrumb.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, useTemplateRef } from 'vue'
+import { Link as InertiaLink } from '@inertiajs/vue3'
 import Breadcrumb, { type BreadcrumbPassThroughOptions, type BreadcrumbProps } from 'primevue/breadcrumb'
 import { ChevronRight } from 'lucide-vue-next'
 import type { MenuItem } from '@/types'

resources/js/components/primevue/menu/ContextMenu.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useTemplateRef } from 'vue'
+import { Link as InertiaLink } from '@inertiajs/vue3'
 import ContextMenu, { type ContextMenuProps } from 'primevue/contextmenu'
 import { ChevronRight } from 'lucide-vue-next'
 import type { MenuItem } from '@/types'

resources/js/components/primevue/menu/Menu.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useTemplateRef } from 'vue'
+import { Link as InertiaLink } from '@inertiajs/vue3'
 import Menu, { type MenuProps } from 'primevue/menu'
 import type { MenuItem } from '@/types'
 import { ptViewMerge } from '@/utils'

resources/js/components/primevue/menu/Menubar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useTemplateRef } from 'vue'
+import { Link as InertiaLink } from '@inertiajs/vue3'
 import Menubar, { type MenubarProps } from 'primevue/menubar'
 import { ChevronDown, ChevronRight } from 'lucide-vue-next'
 import type { MenuItem } from '@/types'

resources/js/components/primevue/menu/PanelMenu.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useTemplateRef } from 'vue'
+import { Link as InertiaLink } from '@inertiajs/vue3'
 import PanelMenu, { type PanelMenuPassThroughOptions, type PanelMenuProps } from 'primevue/panelmenu'
 import { ChevronDown, ChevronRight } from 'lucide-vue-next'
 import type { MenuItem } from '@/types'

resources/js/components/primevue/menu/TabMenu.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useTemplateRef, computed } from 'vue'
-import { usePage } from '@inertiajs/vue3'
+import { usePage, Link as InertiaLink } from '@inertiajs/vue3'
 import { route } from 'ziggy-js'
 import Tabs from 'primevue/tabs'
 import TabList, { type TabListProps } from 'primevue/tablist'
@@ -37,7 +37,7 @@ defineExpose({ $el: childRef })
         <TabList>
             <InertiaLink
                 v-for="item in componentProps.items"
-                :key="item.label"
+                :key="item.route"
                 :href="item.route ?? ''"
                 :class="['no-underline', { 'p-tab-active': item.active }]"
                 custom

resources/js/components/primevue/menu/TieredMenu.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useTemplateRef } from 'vue'
+import { Link as InertiaLink } from '@inertiajs/vue3'
 import TieredMenu, { type TieredMenuProps } from 'primevue/tieredmenu'
 import { ChevronRight } from 'lucide-vue-next'
 import type { MenuItem } from '@/types'

resources/js/layouts/GuestAuthLayout.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Link as InertiaLink } from '@inertiajs/vue3'
 import ApplicationLogo from '@/components/ApplicationLogo.vue'
 import FlashMessages from '@/components/FlashMessages.vue'
 </script>

resources/js/pages/Error.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { Head as InertiaHead } from '@inertiajs/vue3'
-import { ArrowLeft } from 'lucide-vue-next'
+import { computed } from 'vue';
+import { Head as InertiaHead, Link as InertiaLink } from '@inertiajs/vue3';
+import { ArrowLeft } from 'lucide-vue-next';
 
 const props = defineProps<{
     errorTitles: Record<number, string>