From df534e4d23cdd89e040305be5609f9d0e8975c91 Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Mon, 9 Mar 2026 20:56:21 +0100
Subject: [PATCH 1/3] feat(client): allow to open potential lazy load
 components in editor

---
 client/app/pages/component-lazy-load.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/app/pages/component-lazy-load.vue b/client/app/pages/component-lazy-load.vue
index 818120c..3c3c0d8 100644
--- a/client/app/pages/component-lazy-load.vue
+++ b/client/app/pages/component-lazy-load.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useDevtoolsClient } from '@nuxt/devtools-kit/iframe-client'
 import type { ComponentLazyLoadData, DirectImportInfo } from '../../../src/runtime/lazy-load/schema'
 import { LAZY_LOAD_ROUTE } from '../utils/routes'
 
@@ -9,6 +10,7 @@ definePageMeta({
 })
 
 const nuxtApp = useNuxtApp()
+const devtoolsClient = useDevtoolsClient()
 
 const entries = computed(() =>
   nuxtApp.$lazyLoadHints.value.filter(
@@ -80,10 +82,14 @@ async function dismiss(id: string) {
                 <span class="text-xs text-neutral-400 ml-1">→ Lazy{{ imp.componentName }}</span>
               </td>
               <td class="py-2 text-xs text-neutral-500 dark:text-neutral-400 truncate max-w-48">
-                {{ imp.importSource }}
+                <a href="" @click="devtoolsClient?.devtools.rpc.openInEditor(imp.importSource)">
+                  {{ imp.importSource }}
+                </a>
               </td>
               <td class="py-2 text-xs text-neutral-500 dark:text-neutral-400 truncate max-w-48">
-                {{ imp.importedBy }}
+                <a href="" @click="devtoolsClient?.devtools.rpc.openInEditor(imp.importedBy)">
+                  {{ imp.importedBy }}
+                </a>
               </td>
             </tr>
           </tbody>

From 38a0851f43e36800f1f153d2ad9125619c3a73ad Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Mon, 9 Mar 2026 21:06:31 +0100
Subject: [PATCH 2/3] chore: add title

---
 client/app/pages/component-lazy-load.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/app/pages/component-lazy-load.vue b/client/app/pages/component-lazy-load.vue
index 3c3c0d8..232afe6 100644
--- a/client/app/pages/component-lazy-load.vue
+++ b/client/app/pages/component-lazy-load.vue
@@ -82,12 +82,12 @@ async function dismiss(id: string) {
                 <span class="text-xs text-neutral-400 ml-1">→ Lazy{{ imp.componentName }}</span>
               </td>
               <td class="py-2 text-xs text-neutral-500 dark:text-neutral-400 truncate max-w-48">
-                <a href="" @click="devtoolsClient?.devtools.rpc.openInEditor(imp.importSource)">
+                <a href="" title="open in editor" @click="devtoolsClient?.devtools.rpc.openInEditor(imp.importSource)">
                   {{ imp.importSource }}
                 </a>
               </td>
               <td class="py-2 text-xs text-neutral-500 dark:text-neutral-400 truncate max-w-48">
-                <a href="" @click="devtoolsClient?.devtools.rpc.openInEditor(imp.importedBy)">
+                <a href="" title="open in editor" @click="devtoolsClient?.devtools.rpc.openInEditor(imp.importedBy)">
                   {{ imp.importedBy }}
                 </a>
               </td>

From 6cc44f6308ebc0f4e9773ba4e9466b48915d1c5c Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Mon, 9 Mar 2026 22:10:52 +0100
Subject: [PATCH 3/3] use button

---
 client/app/pages/component-lazy-load.vue | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/client/app/pages/component-lazy-load.vue b/client/app/pages/component-lazy-load.vue
index 232afe6..9320a95 100644
--- a/client/app/pages/component-lazy-load.vue
+++ b/client/app/pages/component-lazy-load.vue
@@ -82,14 +82,24 @@ async function dismiss(id: string) {
                 <span class="text-xs text-neutral-400 ml-1">→ Lazy{{ imp.componentName }}</span>
               </td>
               <td class="py-2 text-xs text-neutral-500 dark:text-neutral-400 truncate max-w-48">
-                <a href="" title="open in editor" @click="devtoolsClient?.devtools.rpc.openInEditor(imp.importSource)">
+                <button
+                  type="button"
+                  title="open in editor"
+                  class="cursor-pointer text-inherit underline bg-transparent border-0 p-0"
+                  @click="devtoolsClient?.devtools.rpc.openInEditor(imp.importSource)"
+                >
                   {{ imp.importSource }}
-                </a>
+                </button>
               </td>
               <td class="py-2 text-xs text-neutral-500 dark:text-neutral-400 truncate max-w-48">
-                <a href="" title="open in editor" @click="devtoolsClient?.devtools.rpc.openInEditor(imp.importedBy)">
+                <button
+                  type="button"
+                  title="open in editor"
+                  class="cursor-pointer text-inherit underline bg-transparent border-0 p-0"
+                  @click="devtoolsClient?.devtools.rpc.openInEditor(imp.importedBy)"
+                >
                   {{ imp.importedBy }}
-                </a>
+                </button>
               </td>
             </tr>
           </tbody>