feat(server-routes): send from app instead of devtools, close #253

packages/devtools-kit/build.config.ts

@@ -16,6 +16,7 @@ export default defineBuildConfig({
     'nitropack',
     'unimport',
     'unstorage',
+    'ofetch',
     'vue',
     'vue-router',
     'nuxt/dist/app/nuxt',

packages/devtools-kit/src/_types/client-api.ts

@@ -5,6 +5,7 @@ import type { NuxtApp } from 'nuxt/dist/app/nuxt'
 import type { Hookable } from 'hookable'
 import type { BirpcReturn } from 'birpc'
 import type { BuiltinLanguage } from 'shikiji'
+import type { $Fetch } from 'ofetch'
 import type { ServerFunctions } from './rpc'
 import type { HookInfo, LoadingTimeMetric, PluginMetric, VueInspectorClient, VueInspectorData } from './integrations'
 import type { TimelineMetrics } from './timeline-metrics'
@@ -94,6 +95,7 @@ export interface NuxtDevtoolsHostClient {
     appConfig: AppConfig
     colorMode: Ref<'dark' | 'light'>
     frameState: Ref<DevToolsFrameState>
+    $fetch: $Fetch
   }
 
   metrics: {

packages/devtools-kit/src/_types/options.ts

@@ -170,6 +170,7 @@ export interface NuxtDevToolsOptions {
     selectedRoute: ServerRouteInfo | null
     view: 'tree' | 'list'
     inputDefaults: Record<string, ServerRouteInput[]>
+    sendFrom: 'app' | 'devtools'
   }
   assets: {
     view: 'grid' | 'list'

packages/devtools-ui-kit/src/components/NSelect.vue

@@ -21,12 +21,13 @@ const input = useVModel(props, 'modelValue', emit, { passive: true })
 
 <template>
   <div
-    class="n-select flex flex items-center border n-border-base rounded px-2 py-1 focus-within:n-focus-base focus-within:border-context n-bg-base"
+    class="n-select flex flex items-center border rounded px-2 py-1 focus-within:n-focus-base focus-within:border-context n-bg-base"
+    :class="disabled ? 'border-gray:10' : 'n-border-base'"
   >
     <slot name="icon">
       <NIcon v-if="icon" :icon="icon" class="mr-0.4em text-1.1em op50" />
     </slot>
-    <select v-model="input" :disabled="disabled" class="w-full flex-auto n-bg-base !outline-none">
+    <select v-model="input" :disabled="disabled" class="w-full flex-auto n-bg-base !outline-none" :class="disabled ? 'appearance-none' : ''">
       <option v-if="placeholder" value="" disabled hidden>
         {{ placeholder }}
       </option>

packages/devtools/client/components/ServerRouteDetails.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import JsonEditorVue from 'json-editor-vue'
 import { createReusableTemplate } from '@vueuse/core'
+import type { $Fetch } from 'ofetch'
 import type { CodeSnippet, ServerRouteInfo, ServerRouteInput } from '~/../src/types'
 
 const props = defineProps<{
@@ -14,6 +15,7 @@ const emit = defineEmits<{
 const [DefineDefaultInputs, UseDefaultInputs] = createReusableTemplate()
 
 const config = useServerConfig()
+const client = useClient()
 
 const response = reactive({
   contentType: 'text/plain',
@@ -67,7 +69,16 @@ const routeInputs = reactive({
   headers: [{ key: 'Content-Type', value: 'application/json', type: 'string' }] as ServerRouteInput[],
 })
 const routeInputBodyJSON = ref({})
-const { inputDefaults } = useDevToolsOptions('serverRoutes')
+const {
+  inputDefaults,
+  sendFrom,
+} = useDevToolsOptions('serverRoutes')
+
+const resolvedSendFrom = computed(() => {
+  if (!client?.value?.app?.$fetch)
+    return 'devtools'
+  return sendFrom.value
+})
 
 const methods = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD']
 // https://github.com/unjs/h3/blob/main/src/utils/body.ts#L19
@@ -155,8 +166,12 @@ async function fetchData() {
 
   const start = Date.now()
 
+  const f = resolvedSendFrom.value === 'app'
+    ? client.value!.app!.$fetch
+    : $fetch as $Fetch
+
   try {
-    response.data = await $fetch(finalURL.value, {
+    response.data = await f(finalURL.value, {
       method: routeMethod.value.toUpperCase() as any,
       headers: parsedHeader.value,
       query: parsedQuery.value,
@@ -298,14 +313,16 @@ const copy = useCopy()
     <div flex="~ col gap-2" flex-none p4 navbar-glass>
       <div flex="~ gap2 items-center">
         <NButton
-          v-if="route.method" class="n-badge-base n-sm"
+          v-if="route.method"
+          class="n-badge-base n-sm"
           :class="getRequestMethodClass(routeMethod)"
           pointer-events-none font-mono tabindex="-1"
         >
           {{ routeMethod.toUpperCase() }}
         </NButton>
         <NSelect
-          v-else v-model="routeMethod"
+          v-else
+          v-model="routeMethod"
           class="n-badge-base n-sm"
           :class="getRequestMethodClass(routeMethod)"
         >
@@ -320,15 +337,24 @@ const copy = useCopy()
             p="x5 y2"
             n="sm"
           />
-          <NButton
-            v-tooltip="'Copy URL'"
-            title="Copy URL"
-            absolute right-2 top-1.5
-            n="xs blue"
-            icon="carbon:copy"
-            :border="false"
-            @click="copy(finalURL)"
-          />
+          <div absolute right-2 top-1.5 flex="~ gap-1">
+            <NButton
+              v-tooltip="'Copy URL'"
+              title="Copy URL"
+              n="xs blue"
+              icon="carbon:copy"
+              :border="false"
+              @click="copy(finalURL)"
+            />
+            <NButton
+              v-tooltip="'Open in Editor'"
+              title="Open in Editor"
+              icon="carbon-launch"
+              n="xs blue"
+              :border="false"
+              @click="openInEditor(route.filepath)"
+            />
+          </div>
         </div>
         <NButton n="primary solid" @click="fetchData">
           <NIcon icon="carbon:send" />
@@ -351,13 +377,21 @@ const copy = useCopy()
         </span>
       </NButton>
       <div flex-auto />
-      <NButton
-        v-tooltip="'Open in Editor'"
-        title="Open in Editor"
-        @click="openInEditor(route.filepath)"
+      <div text-xs op50>
+        Send from
+      </div>
+      <NSelect
+        v-model="resolvedSendFrom"
+        class="n-xs"
+        :disabled="!client?.app?.$fetch"
       >
-        <NIcon icon="carbon-launch" />
-      </NButton>
+        <option value="app">
+          App
+        </option>
+        <option value="devtools">
+          DevTools
+        </option>
+      </NSelect>
     </div>
     <div
       v-if="activeTab === 'params'"

packages/devtools/src/constant.ts

@@ -50,6 +50,7 @@ export const defaultTabOptions: NuxtDevToolsOptions = {
       body: [],
       headers: [],
     },
+    sendFrom: 'app',
   },
   assets: {
     view: 'grid',

packages/devtools/src/runtime/plugins/view/client.ts

@@ -3,6 +3,7 @@ import { computed, createApp, h, markRaw, nextTick, ref, shallowReactive, shallo
 import { createHooks } from 'hookable'
 import { debounce } from 'perfect-debounce'
 import type { Router } from 'vue-router'
+import type { $Fetch } from 'ofetch'
 import type { NuxtDevtoolsHostClient, TimelineEventRoute, TimelineMetrics } from '../../../types'
 import { initTimelineMetrics } from '../../function-metrics-helpers'
 import Main from './Main.vue'
@@ -92,6 +93,7 @@ export async function setupDevToolsClient({
       },
       colorMode,
       frameState: state,
+      $fetch: globalThis.$fetch as $Fetch,
     },
 
     metrics: {