From 808e493b01a439859df700c2e75d7b7df0dd3789 Mon Sep 17 00:00:00 2001
From: Anthony Fu <github@antfu.me>
Date: Thu, 19 Sep 2024 16:04:15 +0200
Subject: [PATCH] chore: reorder imports

---
 docs/content/2.module/0.guide.md              |  4 +-
 docs/tailwind.config.ts                       |  2 +-
 eslint.config.mjs                             |  3 +
 local.ts                                      |  2 +-
 packages/devtools-kit/src/index.ts            |  4 +-
 .../devtools-kit/src/runtime/host-client.ts   |  2 +-
 .../devtools-kit/src/runtime/iframe-client.ts |  2 +-
 .../src/components/NCodeBlock.vue             |  2 +-
 .../src/components/NNotification.vue          |  4 +-
 packages/devtools-ui-kit/src/unocss.ts        |  6 +-
 .../client/components/AssetDetails.vue        |  2 +-
 .../client/components/AssetFontPreview.vue    |  2 +-
 .../client/components/BuildAnalyzeDetails.vue |  2 +-
 .../devtools/client/components/CodeDiff.vue   |  2 +-
 .../client/components/ComponentDetails.vue    |  2 +-
 .../client/components/ComponentName.vue       |  2 +-
 .../client/components/ComponentsGraph.vue     |  2 +-
 .../client/components/ComponentsList.vue      |  2 +-
 .../client/components/CronCollection.vue      |  2 +-
 .../client/components/DataSchemaDrawer.vue    |  2 +-
 .../client/components/ModuleInstallList.vue   |  2 +-
 .../components/OpenGraphMissingTabs.vue       |  4 +-
 .../client/components/ServerRouteDetails.vue  |  4 +-
 .../client/components/ServerTaskDetails.vue   |  4 +-
 .../client/components/SideNavItem.vue         |  2 +-
 .../client/components/TerminalView.vue        |  2 +-
 .../client/components/TimelineTable.vue       |  2 +-
 packages/devtools/client/composables/npm.ts   |  2 +-
 packages/devtools/client/composables/rpc.ts   |  2 +-
 .../client/composables/state-commands.ts      |  2 +-
 .../devtools/client/composables/state-tabs.ts |  2 +-
 packages/devtools/client/composables/state.ts |  2 +-
 .../client/composables/storage-options.ts     | 86 ++++++++++++-------
 .../devtools/client/composables/storage.ts    |  2 +-
 packages/devtools/client/composables/utils.ts |  2 +-
 packages/devtools/client/modules/markdown.ts  |  2 +-
 .../client/pages/modules/analyze-build.vue    |  2 +-
 .../devtools/client/pages/modules/assets.vue  |  2 +-
 .../devtools/client/pages/modules/imports.vue |  2 +-
 .../client/pages/modules/server-routes.vue    |  2 +-
 .../client/pages/modules/server-tasks.vue     |  2 +-
 packages/devtools/src/constant.ts             |  2 +-
 .../src/integrations/analyze-build.ts         |  4 +-
 .../devtools/src/integrations/timeline.ts     |  4 +-
 .../devtools/src/integrations/vite-inspect.ts |  4 +-
 packages/devtools/src/integrations/vscode.ts  |  2 +-
 .../devtools/src/integrations/vue-devtools.ts |  2 +-
 .../src/integrations/vue-inspector.ts         |  4 +-
 packages/devtools/src/module-main.ts          |  8 +-
 packages/devtools/src/module.ts               |  2 +-
 packages/devtools/src/npm/index.ts            |  2 +-
 .../src/runtime/function-metrics-helpers.ts   |  2 +-
 packages/devtools/src/runtime/nitro/inline.ts |  4 +-
 .../src/runtime/plugins/devtools.client.ts    |  4 +-
 .../src/runtime/plugins/devtools.server.ts    |  2 +-
 .../src/runtime/plugins/view/FrameBox.vue     |  2 +-
 .../src/runtime/plugins/view/Main.vue         |  2 +-
 .../src/runtime/plugins/view/client.ts        | 10 +--
 .../src/runtime/plugins/view/state.ts         |  2 +-
 .../src/runtime/plugins/view/utils.ts         |  2 +-
 packages/devtools/src/runtime/settings.ts     |  4 +-
 .../devtools/src/runtime/use-nuxt-devtools.ts |  2 +-
 .../devtools/src/server-rpc/analyze-build.ts  |  4 +-
 packages/devtools/src/server-rpc/assets.ts    |  2 +-
 packages/devtools/src/server-rpc/general.ts   | 10 +--
 packages/devtools/src/server-rpc/index.ts     | 12 +--
 packages/devtools/src/server-rpc/npm.ts       |  4 +-
 packages/devtools/src/server-rpc/options.ts   |  2 +-
 .../devtools/src/server-rpc/server-routes.ts  |  2 +-
 .../devtools/src/server-rpc/server-tasks.ts   |  2 +-
 packages/devtools/src/server-rpc/telemetry.ts |  2 +-
 packages/devtools/src/server-rpc/timeline.ts  |  2 +-
 packages/devtools/src/server-rpc/wizard.ts    |  2 +-
 packages/devtools/src/utils/fs.ts             |  2 +-
 packages/devtools/src/wizard/enable-pages.ts  |  2 +-
 .../module-starter/client/pages/index.vue     |  2 +-
 playgrounds/module-starter/src/devtools.ts    |  2 +-
 playgrounds/module-starter/src/module.ts      |  2 +-
 78 files changed, 166 insertions(+), 141 deletions(-)

diff --git a/docs/content/2.module/0.guide.md b/docs/content/2.module/0.guide.md
index f2d28b66c..4c588734a 100644
--- a/docs/content/2.module/0.guide.md
+++ b/docs/content/2.module/0.guide.md
@@ -128,9 +128,9 @@ export interface ClientFunctions {
 And then in your module code:
 
 ```ts
+import type { ClientFunctions, ServerFunctions } from './rpc-types'
 import { extendServerRpc, onDevToolsInitialized } from '@nuxt/devtools-kit'
 import { defineNuxtModule } from '@nuxt/kit'
-import type { ClientFunctions, ServerFunctions } from './rpc-types'
 
 const RPC_NAMESPACE = 'my-module-rpc'
 
@@ -156,8 +156,8 @@ export default defineNuxtModule({
 And on the embedded iframe client side, you can do:
 
 ```ts
-import { onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'
 import type { ClientFunctions, ServerFunctions } from './rpc-types'
+import { onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'
 
 const RPC_NAMESPACE = 'my-module-rpc'
 
diff --git a/docs/tailwind.config.ts b/docs/tailwind.config.ts
index b88541569..cfd458a3d 100644
--- a/docs/tailwind.config.ts
+++ b/docs/tailwind.config.ts
@@ -1,5 +1,5 @@
-import defaultTheme from 'tailwindcss/defaultTheme'
 import type { Config } from 'tailwindcss'
+import defaultTheme from 'tailwindcss/defaultTheme'
 
 export default <Partial<Config>>{
   theme: {
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 09f35014b..e8b9f54d9 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -11,4 +11,7 @@ export default antfu(
       'vue/no-v-text-v-html-on-component': 'off',
     },
   },
+  {
+    ignores: ['**/foo/**'],
+  },
 )
diff --git a/local.ts b/local.ts
index 2d5aaf902..f4432a9aa 100644
--- a/local.ts
+++ b/local.ts
@@ -1,3 +1,4 @@
+import type { ModuleOptions } from './packages/devtools/src/types'
 /**
  * Local development module entry
  *
@@ -25,7 +26,6 @@ import { defaultOptions } from './packages/devtools/src/constant'
 import { packageDir } from './packages/devtools/src/dirs'
 import { enableModule } from './packages/devtools/src/module-main'
 import { startSubprocess } from './packages/devtools-kit/src/index'
-import type { ModuleOptions } from './packages/devtools/src/types'
 
 export type { ModuleOptions }
 
diff --git a/packages/devtools-kit/src/index.ts b/packages/devtools-kit/src/index.ts
index efa8b0c3e..7a688c15c 100644
--- a/packages/devtools-kit/src/index.ts
+++ b/packages/devtools-kit/src/index.ts
@@ -1,7 +1,7 @@
-import { useNuxt } from '@nuxt/kit'
-import { execa } from 'execa'
 import type { BirpcGroup } from 'birpc'
 import type { ModuleCustomTab, NuxtDevtoolsInfo, NuxtDevtoolsServerContext, SubprocessOptions, TerminalState } from './types'
+import { useNuxt } from '@nuxt/kit'
+import { execa } from 'execa'
 
 /**
  * Hooks to extend a custom tab in devtools.
diff --git a/packages/devtools-kit/src/runtime/host-client.ts b/packages/devtools-kit/src/runtime/host-client.ts
index 58db526ce..2b6581d4c 100644
--- a/packages/devtools-kit/src/runtime/host-client.ts
+++ b/packages/devtools-kit/src/runtime/host-client.ts
@@ -1,6 +1,6 @@
-import { shallowRef } from 'vue'
 import type { NuxtDevtoolsHostClient } from '@nuxt/devtools-kit/types'
 import type { Ref } from 'vue'
+import { shallowRef } from 'vue'
 
 let clientRef: Ref<NuxtDevtoolsHostClient | undefined> | undefined
 const fns = [] as ((client: NuxtDevtoolsHostClient) => void)[]
diff --git a/packages/devtools-kit/src/runtime/iframe-client.ts b/packages/devtools-kit/src/runtime/iframe-client.ts
index 7866f4818..f1092c158 100644
--- a/packages/devtools-kit/src/runtime/iframe-client.ts
+++ b/packages/devtools-kit/src/runtime/iframe-client.ts
@@ -1,6 +1,6 @@
-import { shallowRef, triggerRef } from 'vue'
 import type { NuxtDevtoolsIframeClient } from '@nuxt/devtools-kit/types'
 import type { Ref } from 'vue'
+import { shallowRef, triggerRef } from 'vue'
 
 let clientRef: Ref<NuxtDevtoolsIframeClient | undefined> | undefined
 const hasSetup = false
diff --git a/packages/devtools-ui-kit/src/components/NCodeBlock.vue b/packages/devtools-ui-kit/src/components/NCodeBlock.vue
index 46a1c120b..ce27f7efb 100644
--- a/packages/devtools-ui-kit/src/components/NCodeBlock.vue
+++ b/packages/devtools-ui-kit/src/components/NCodeBlock.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import type { BuiltinLanguage } from 'shiki'
 // This components requires to run in DevTools to render correctly
 import { computed, nextTick } from 'vue'
-import type { BuiltinLanguage } from 'shiki'
 import { devToolsClient } from '../runtime/client'
 
 const props = withDefaults(
diff --git a/packages/devtools-ui-kit/src/components/NNotification.vue b/packages/devtools-ui-kit/src/components/NNotification.vue
index b552212b1..04e909157 100644
--- a/packages/devtools-ui-kit/src/components/NNotification.vue
+++ b/packages/devtools-ui-kit/src/components/NNotification.vue
@@ -1,8 +1,8 @@
 <script setup lang='ts'>
-import { ref } from 'vue'
+import type { DevtoolsUiShowNotificationPosition } from '../composables/notification'
 
+import { ref } from 'vue'
 import { devtoolsUiProvideNotificationFn } from '../composables/notification'
-import type { DevtoolsUiShowNotificationPosition } from '../composables/notification'
 
 const show = ref(false)
 const icon = ref<string>()
diff --git a/packages/devtools-ui-kit/src/unocss.ts b/packages/devtools-ui-kit/src/unocss.ts
index c7389444a..6a2b3b1ab 100644
--- a/packages/devtools-ui-kit/src/unocss.ts
+++ b/packages/devtools-ui-kit/src/unocss.ts
@@ -1,3 +1,6 @@
+import type { Preset, RuleContext } from '@unocss/core'
+import type { UnocssNuxtOptions } from '@unocss/nuxt'
+import type { Theme } from '@unocss/preset-uno'
 import { theme as unoTheme } from '@unocss/preset-mini'
 import { fonts } from '@unocss/preset-mini/rules'
 import { parseColor } from '@unocss/preset-mini/utils'
@@ -11,9 +14,6 @@ import {
   transformerDirectives,
   transformerVariantGroup,
 } from 'unocss'
-import type { Preset, RuleContext } from '@unocss/core'
-import type { UnocssNuxtOptions } from '@unocss/nuxt'
-import type { Theme } from '@unocss/preset-uno'
 
 // @unocss-include
 
diff --git a/packages/devtools/client/components/AssetDetails.vue b/packages/devtools/client/components/AssetDetails.vue
index 2668f978d..1dbc16e20 100644
--- a/packages/devtools/client/components/AssetDetails.vue
+++ b/packages/devtools/client/components/AssetDetails.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useTimeAgo } from '@vueuse/core'
 import type { AssetInfo, CodeSnippet } from '~/../src/types'
+import { useTimeAgo } from '@vueuse/core'
 
 const props = defineProps<{
   modelValue: AssetInfo
diff --git a/packages/devtools/client/components/AssetFontPreview.vue b/packages/devtools/client/components/AssetFontPreview.vue
index d589d1c8c..b44323a17 100644
--- a/packages/devtools/client/components/AssetFontPreview.vue
+++ b/packages/devtools/client/components/AssetFontPreview.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { hash } from 'ohash'
 import type { AssetInfo } from '~/../src/types'
+import { hash } from 'ohash'
 
 const props = defineProps<{
   asset: AssetInfo
diff --git a/packages/devtools/client/components/BuildAnalyzeDetails.vue b/packages/devtools/client/components/BuildAnalyzeDetails.vue
index ec274d70f..f35d9cd08 100644
--- a/packages/devtools/client/components/BuildAnalyzeDetails.vue
+++ b/packages/devtools/client/components/BuildAnalyzeDetails.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import type { AnalyzeBuildMeta } from '../../src/types'
 import { useRuntimeConfig } from '#imports'
 import { formatTimeAgo } from '@vueuse/core'
-import type { AnalyzeBuildMeta } from '../../src/types'
 
 const props = defineProps<{
   current: AnalyzeBuildMeta
diff --git a/packages/devtools/client/components/CodeDiff.vue b/packages/devtools/client/components/CodeDiff.vue
index db53191b2..5f8d402ed 100644
--- a/packages/devtools/client/components/CodeDiff.vue
+++ b/packages/devtools/client/components/CodeDiff.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import type { BuiltinLanguage } from 'shiki'
 import { unrefElement } from '@vueuse/core'
 import { diffLines } from 'diff'
-import type { BuiltinLanguage } from 'shiki'
 
 const props = defineProps<{
   from: string
diff --git a/packages/devtools/client/components/ComponentDetails.vue b/packages/devtools/client/components/ComponentDetails.vue
index 9a7e7caa7..3a3c62567 100644
--- a/packages/devtools/client/components/ComponentDetails.vue
+++ b/packages/devtools/client/components/ComponentDetails.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { pascalCase } from 'scule'
 import type { Component } from 'nuxt/schema'
+import { pascalCase } from 'scule'
 
 const props = defineProps<{
   component: Component
diff --git a/packages/devtools/client/components/ComponentName.vue b/packages/devtools/client/components/ComponentName.vue
index e0f6ed847..bee4f5ab4 100644
--- a/packages/devtools/client/components/ComponentName.vue
+++ b/packages/devtools/client/components/ComponentName.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { pascalCase } from 'scule'
 import type { Component } from 'nuxt/schema'
+import { pascalCase } from 'scule'
 
 const props = defineProps<{
   component: Component
diff --git a/packages/devtools/client/components/ComponentsGraph.vue b/packages/devtools/client/components/ComponentsGraph.vue
index f22a921ff..b2ce9e092 100644
--- a/packages/devtools/client/components/ComponentsGraph.vue
+++ b/packages/devtools/client/components/ComponentsGraph.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { Network } from 'vis-network'
 import type { ComponentRelationship } from '~/../src/types'
 import type { Component, NuxtLayout, NuxtPage } from 'nuxt/schema'
 import type { Data, Node, Options } from 'vis-network'
+import { Network } from 'vis-network'
 
 const props = defineProps<{
   components: Component[]
diff --git a/packages/devtools/client/components/ComponentsList.vue b/packages/devtools/client/components/ComponentsList.vue
index 75ab1299f..2f93e089e 100644
--- a/packages/devtools/client/components/ComponentsList.vue
+++ b/packages/devtools/client/components/ComponentsList.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import Fuse from 'fuse.js'
 import type { Component } from 'nuxt/schema'
 import type { ComponentRelationship, ComponentWithRelationships } from '../../types'
+import Fuse from 'fuse.js'
 
 const props = defineProps<{
   components: Component[]
diff --git a/packages/devtools/client/components/CronCollection.vue b/packages/devtools/client/components/CronCollection.vue
index 814a30a30..711d64f5f 100644
--- a/packages/devtools/client/components/CronCollection.vue
+++ b/packages/devtools/client/components/CronCollection.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import cronstrue from 'cronstrue'
 import type { CronCollection } from '../../src/types/tasks'
+import cronstrue from 'cronstrue'
 
 const props = defineProps<{
   collection: CronCollection
diff --git a/packages/devtools/client/components/DataSchemaDrawer.vue b/packages/devtools/client/components/DataSchemaDrawer.vue
index e2ad01486..d9c188c49 100644
--- a/packages/devtools/client/components/DataSchemaDrawer.vue
+++ b/packages/devtools/client/components/DataSchemaDrawer.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import type { BuiltinLanguage } from 'shiki'
 import { InputData, jsonInputForTargetLanguage, quicktype } from 'quicktype-core'
 import { all as languages } from 'quicktype-core/dist/language/All'
-import type { BuiltinLanguage } from 'shiki'
 
 const input = useSchemaInput()
 
diff --git a/packages/devtools/client/components/ModuleInstallList.vue b/packages/devtools/client/components/ModuleInstallList.vue
index 77144d766..9c2cc0a42 100644
--- a/packages/devtools/client/components/ModuleInstallList.vue
+++ b/packages/devtools/client/components/ModuleInstallList.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import type { ModuleStaticInfo } from '../../src/types'
 import Fuse from 'fuse.js'
 // @ts-expect-error missing types
 import { RecycleScroller } from 'vue-virtual-scroller'
-import type { ModuleStaticInfo } from '../../src/types'
 
 type SortingFunction<T> = (a: T, b: T) => number
 
diff --git a/packages/devtools/client/components/OpenGraphMissingTabs.vue b/packages/devtools/client/components/OpenGraphMissingTabs.vue
index 147cf5278..853c4bc64 100644
--- a/packages/devtools/client/components/OpenGraphMissingTabs.vue
+++ b/packages/devtools/client/components/OpenGraphMissingTabs.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { defu } from 'defu'
 import type { MetaFlatInput } from '@unhead/schema'
 import type { ReactiveHead } from '@unhead/vue'
-import { ogTags } from '../data/open-graph'
 import type { NormalizedHeadTag } from '../../src/types'
+import { defu } from 'defu'
+import { ogTags } from '../data/open-graph'
 
 const props = defineProps<{
   tags: NormalizedHeadTag[]
diff --git a/packages/devtools/client/components/ServerRouteDetails.vue b/packages/devtools/client/components/ServerRouteDetails.vue
index 1e3882dd6..1fd0f59e7 100644
--- a/packages/devtools/client/components/ServerRouteDetails.vue
+++ b/packages/devtools/client/components/ServerRouteDetails.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { createReusableTemplate, watchDebounced } from '@vueuse/core'
-import JsonEditorVue from 'json-editor-vue'
 import type { CodeSnippet, ServerRouteInfo, ServerRouteInput } from '~/../src/types'
 import type { $Fetch } from 'ofetch'
+import { createReusableTemplate, watchDebounced } from '@vueuse/core'
+import JsonEditorVue from 'json-editor-vue'
 
 const props = defineProps<{
   route: ServerRouteInfo
diff --git a/packages/devtools/client/components/ServerTaskDetails.vue b/packages/devtools/client/components/ServerTaskDetails.vue
index 818385aa8..c425f8741 100644
--- a/packages/devtools/client/components/ServerTaskDetails.vue
+++ b/packages/devtools/client/components/ServerTaskDetails.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { createReusableTemplate } from '@vueuse/core'
-import JsonEditorVue from 'json-editor-vue'
 import type { ServerRouteInput, ServerTaskInfo } from '~/../src/types'
 import type { $Fetch } from 'ofetch'
+import { createReusableTemplate } from '@vueuse/core'
+import JsonEditorVue from 'json-editor-vue'
 
 const props = defineProps<{
   task: ServerTaskInfo
diff --git a/packages/devtools/client/components/SideNavItem.vue b/packages/devtools/client/components/SideNavItem.vue
index 1c712d537..25c2b0497 100644
--- a/packages/devtools/client/components/SideNavItem.vue
+++ b/packages/devtools/client/components/SideNavItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { NuxtLink } from '#components'
 import type { ModuleBuiltinTab, ModuleCustomTab } from '~/../src/types'
+import { NuxtLink } from '#components'
 
 const props = withDefaults(
   defineProps<{
diff --git a/packages/devtools/client/components/TerminalView.vue b/packages/devtools/client/components/TerminalView.vue
index 1042985bc..65a0006bf 100644
--- a/packages/devtools/client/components/TerminalView.vue
+++ b/packages/devtools/client/components/TerminalView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import type { TerminalInfo } from '../../src/types'
 import { FitAddon } from '@xterm/addon-fit'
 import { Terminal } from '@xterm/xterm'
-import type { TerminalInfo } from '../../src/types'
 import '@xterm/xterm/css/xterm.css'
 
 const props = defineProps<{
diff --git a/packages/devtools/client/components/TimelineTable.vue b/packages/devtools/client/components/TimelineTable.vue
index 1777dc48c..cbf4faf4d 100644
--- a/packages/devtools/client/components/TimelineTable.vue
+++ b/packages/devtools/client/components/TimelineTable.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import type { TimelineEvent, TimelineEventNormalized, TimelineMetrics } from '../../types'
 import { clamp } from '@antfu/utils'
 import { segmentTimelineEvents } from '~/composables/timeline'
-import type { TimelineEvent, TimelineEventNormalized, TimelineMetrics } from '../../types'
 
 const props = defineProps<{
   data: TimelineMetrics
diff --git a/packages/devtools/client/composables/npm.ts b/packages/devtools/client/composables/npm.ts
index d573a4d3d..8ed1c4da7 100644
--- a/packages/devtools/client/composables/npm.ts
+++ b/packages/devtools/client/composables/npm.ts
@@ -1,5 +1,5 @@
-import semver from 'semver'
 import type { NpmCommandOptions } from '../../src/types'
+import semver from 'semver'
 
 export type PackageUpdateState = 'idle' | 'running' | 'updated'
 
diff --git a/packages/devtools/client/composables/rpc.ts b/packages/devtools/client/composables/rpc.ts
index 66538b81e..fda99a918 100644
--- a/packages/devtools/client/composables/rpc.ts
+++ b/packages/devtools/client/composables/rpc.ts
@@ -1,8 +1,8 @@
+import type { ClientFunctions, ServerFunctions } from '../../src/types'
 import { createBirpc } from 'birpc'
 import { parse, stringify } from 'flatted'
 import { tryCreateHotContext } from 'vite-hot-client'
 import { WS_EVENT_NAME } from '../../src/constant'
-import type { ClientFunctions, ServerFunctions } from '../../src/types'
 
 export const wsConnecting = ref(false)
 export const wsError = ref<any>()
diff --git a/packages/devtools/client/composables/state-commands.ts b/packages/devtools/client/composables/state-commands.ts
index 9f6585bce..a7c5e0779 100644
--- a/packages/devtools/client/composables/state-commands.ts
+++ b/packages/devtools/client/composables/state-commands.ts
@@ -1,5 +1,5 @@
-import { randomStr } from '@antfu/utils'
 import type { MaybeRefOrGetter } from 'vue'
+import { randomStr } from '@antfu/utils'
 
 export interface CommandItem {
   id: string
diff --git a/packages/devtools/client/composables/state-tabs.ts b/packages/devtools/client/composables/state-tabs.ts
index 5e505cbd1..fcceed7f9 100644
--- a/packages/devtools/client/composables/state-tabs.ts
+++ b/packages/devtools/client/composables/state-tabs.ts
@@ -1,6 +1,6 @@
-import { objectPick } from '@antfu/utils'
 import type { MaybeRef } from 'vue'
 import type { CategorizedTabs, ModuleBuiltinTab, ModuleCustomTab, RouteInfo, TabCategory } from '../../src/types'
+import { objectPick } from '@antfu/utils'
 
 export function useAllTabs() {
   const customTabs = useCustomTabs()
diff --git a/packages/devtools/client/composables/state.ts b/packages/devtools/client/composables/state.ts
index 16ba1fb87..20a569c44 100644
--- a/packages/devtools/client/composables/state.ts
+++ b/packages/devtools/client/composables/state.ts
@@ -1,6 +1,6 @@
-import { objectPick } from '@antfu/utils'
 import type { Ref } from 'vue'
 import type { HookInfo, RouteInfo } from '../../src/types'
+import { objectPick } from '@antfu/utils'
 
 export function useServerPages() {
   return useAsyncState('getServerPages', () => rpc.getServerPages())
diff --git a/packages/devtools/client/composables/storage-options.ts b/packages/devtools/client/composables/storage-options.ts
index 4933d0d82..f52d321a3 100644
--- a/packages/devtools/client/composables/storage-options.ts
+++ b/packages/devtools/client/composables/storage-options.ts
@@ -1,36 +1,58 @@
+import type { NuxtDevToolsOptions } from '../../types'
 import { toRefs, watchDebounced } from '@vueuse/core'
-
-// Assets
-const assetsOptions = ref(await rpc.getOptions('assets'))
-const assets = toRefs(assetsOptions)
-
-watchDebounced(assetsOptions, async (options) => {
-  rpc.updateOptions('assets', options)
-}, { deep: true, flush: 'post', debounce: 500, maxWait: 1000 })
-
-// Server Routes
-const serverRouteOptions = ref(await rpc.getOptions('serverRoutes'))
-const serverRoutes = toRefs(serverRouteOptions)
-
-watchDebounced(serverRouteOptions, async (options) => {
-  rpc.updateOptions('serverRoutes', options)
-}, { deep: true, flush: 'post', debounce: 500, maxWait: 1000 })
-
-// Server Tasks
-const serverTasksOptions = ref(await rpc.getOptions('serverTasks'))
-const serverTasks = toRefs(serverTasksOptions)
-
-watchDebounced(serverTasksOptions, async (options) => {
-  rpc.updateOptions('serverTasks', options)
-}, { deep: true, flush: 'post', debounce: 500, maxWait: 1000 })
-
-// Options List
-const list = {
-  serverRoutes,
-  serverTasks,
-  assets,
+import { ref } from 'vue'
+import { defaultTabOptions } from '../../src/constant'
+import { rpc } from './rpc'
+
+let instance: ReturnType<typeof init> | null = null
+
+function init() {
+  // Assets
+  const assetsOptions = ref<NuxtDevToolsOptions['assets']>(defaultTabOptions.assets)
+  rpc.getOptions('assets').then((options) => {
+    assetsOptions.value = options
+  })
+  const assets = toRefs(assetsOptions)
+
+  watchDebounced(assetsOptions, async (options) => {
+    rpc.updateOptions('assets', options)
+  }, { deep: true, flush: 'post', debounce: 500, maxWait: 1000 })
+
+  // Server Routes
+  const serverRouteOptions = ref<NuxtDevToolsOptions['serverRoutes']>(defaultTabOptions.serverRoutes)
+  rpc.getOptions('serverRoutes').then((options) => {
+    serverRouteOptions.value = options
+  })
+  const serverRoutes = toRefs(serverRouteOptions)
+
+  watchDebounced(serverRouteOptions, async (options) => {
+    rpc.updateOptions('serverRoutes', options)
+  }, { deep: true, flush: 'post', debounce: 500, maxWait: 1000 })
+
+  // Server Tasks
+  const serverTasksOptions = ref<NuxtDevToolsOptions['serverTasks']>(defaultTabOptions.serverTasks)
+  rpc.getOptions('serverTasks').then((options) => {
+    serverTasksOptions.value = options
+  })
+  const serverTasks = toRefs(serverTasksOptions)
+
+  watchDebounced(serverTasksOptions, async (options) => {
+    rpc.updateOptions('serverTasks', options)
+  }, { deep: true, flush: 'post', debounce: 500, maxWait: 1000 })
+
+  // Options List
+  const list = {
+    serverRoutes,
+    serverTasks,
+    assets,
+  }
+
+  return list
 }
 
-export function useDevToolsOptions<T extends keyof typeof list>(tab: T) {
-  return list[tab]
+export function useDevToolsOptions<T extends keyof ReturnType<typeof init>>(tab: T) {
+  if (!instance) {
+    instance = init()
+  }
+  return instance[tab]
 }
diff --git a/packages/devtools/client/composables/storage.ts b/packages/devtools/client/composables/storage.ts
index 497b3e394..48c2c737e 100644
--- a/packages/devtools/client/composables/storage.ts
+++ b/packages/devtools/client/composables/storage.ts
@@ -1,5 +1,5 @@
-import { toRefs } from '@vueuse/core'
 import type { DevToolsFrameState } from '~~/../src/types'
+import { toRefs } from '@vueuse/core'
 
 export const isFirstVisit = useLocalStorage('nuxt-devtools-first-visit', true)
 
diff --git a/packages/devtools/client/composables/utils.ts b/packages/devtools/client/composables/utils.ts
index b7d5b51fd..56c21f978 100644
--- a/packages/devtools/client/composables/utils.ts
+++ b/packages/devtools/client/composables/utils.ts
@@ -1,8 +1,8 @@
-import { relative } from 'pathe'
 import type { AsyncDataOptions } from '#app'
 import type { ComponentRelationship, ComponentWithRelationships, NormalizedHeadTag, SocialPreviewCard, SocialPreviewResolved } from '~/../src/types'
 import type { Component } from 'nuxt/schema'
 import type { Ref } from 'vue'
+import { relative } from 'pathe'
 
 export function isNodeModulePath(path: string) {
   return !!path.match(/[/\\]node_modules[/\\]/) || isPackageName(path)
diff --git a/packages/devtools/client/modules/markdown.ts b/packages/devtools/client/modules/markdown.ts
index 6c74ea483..896d11356 100644
--- a/packages/devtools/client/modules/markdown.ts
+++ b/packages/devtools/client/modules/markdown.ts
@@ -1,9 +1,9 @@
+import type { BuiltinLanguage } from 'shiki'
 import { defineNuxtModule } from '@nuxt/kit'
 import LinkAttributes from 'markdown-it-link-attributes'
 import { createHighlighter } from 'shiki'
 import { bundledLanguages } from 'shiki/langs'
 import Markdown from 'unplugin-vue-markdown/vite'
-import type { BuiltinLanguage } from 'shiki'
 
 export default defineNuxtModule({
   async setup(_, nuxt) {
diff --git a/packages/devtools/client/pages/modules/analyze-build.vue b/packages/devtools/client/pages/modules/analyze-build.vue
index 5e4e6a5bb..bd4b4c49d 100644
--- a/packages/devtools/client/pages/modules/analyze-build.vue
+++ b/packages/devtools/client/pages/modules/analyze-build.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { formatTimeAgo } from '@vueuse/core'
 import type { AnalyzeBuildMeta } from '~/../src/types'
+import { formatTimeAgo } from '@vueuse/core'
 import { satisfyNuxtVersion } from '~/composables/npm'
 import { telemetry } from '~/composables/telemetry'
 
diff --git a/packages/devtools/client/pages/modules/assets.vue b/packages/devtools/client/pages/modules/assets.vue
index 1412fa887..a555ef417 100644
--- a/packages/devtools/client/pages/modules/assets.vue
+++ b/packages/devtools/client/pages/modules/assets.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import type { AssetInfo } from '~/../src/types'
 import { onKeyDown } from '@vueuse/core'
 import Fuse from 'fuse.js'
-import type { AssetInfo } from '~/../src/types'
 
 definePageMeta({
   icon: 'carbon-image-copy',
diff --git a/packages/devtools/client/pages/modules/imports.vue b/packages/devtools/client/pages/modules/imports.vue
index bee6e805e..a8b899c2d 100644
--- a/packages/devtools/client/pages/modules/imports.vue
+++ b/packages/devtools/client/pages/modules/imports.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import Fuse from 'fuse.js'
 import type { Import } from 'unimport'
+import Fuse from 'fuse.js'
 
 definePageMeta({
   icon: 'carbon-function',
diff --git a/packages/devtools/client/pages/modules/server-routes.vue b/packages/devtools/client/pages/modules/server-routes.vue
index 1a1223005..42064d66e 100644
--- a/packages/devtools/client/pages/modules/server-routes.vue
+++ b/packages/devtools/client/pages/modules/server-routes.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import Fuse from 'fuse.js'
 import type { ServerRouteInfo } from '~/../../src/types'
+import Fuse from 'fuse.js'
 
 definePageMeta({
   icon: 'carbon-cloud',
diff --git a/packages/devtools/client/pages/modules/server-tasks.vue b/packages/devtools/client/pages/modules/server-tasks.vue
index 521cec00f..aef496149 100644
--- a/packages/devtools/client/pages/modules/server-tasks.vue
+++ b/packages/devtools/client/pages/modules/server-tasks.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import Fuse from 'fuse.js'
 import type { ServerTaskInfo } from '~/../../src/types'
+import Fuse from 'fuse.js'
 import ServerTaskListItem from '~/components/ServerTaskListItem.vue'
 
 definePageMeta({
diff --git a/packages/devtools/src/constant.ts b/packages/devtools/src/constant.ts
index 3b6c8fc40..04b2ae8ce 100644
--- a/packages/devtools/src/constant.ts
+++ b/packages/devtools/src/constant.ts
@@ -1,5 +1,5 @@
-import { provider } from 'std-env'
 import type { ModuleOptions, NuxtDevToolsOptions } from './types'
+import { provider } from 'std-env'
 
 export const WS_EVENT_NAME = 'nuxt:devtools:rpc'
 
diff --git a/packages/devtools/src/integrations/analyze-build.ts b/packages/devtools/src/integrations/analyze-build.ts
index e91b5c1f9..cf0900804 100644
--- a/packages/devtools/src/integrations/analyze-build.ts
+++ b/packages/devtools/src/integrations/analyze-build.ts
@@ -1,9 +1,9 @@
+import type { Nuxt } from 'nuxt/schema'
+import type { AnalyzeBuildMeta, ModuleOptions } from '../types'
 import { addVitePlugin } from '@nuxt/kit'
 import { join } from 'pathe'
 import Inspect from 'vite-plugin-inspect'
-import type { Nuxt } from 'nuxt/schema'
 import { getFolderSize } from '../utils/fs'
-import type { AnalyzeBuildMeta, ModuleOptions } from '../types'
 
 export async function setup(nuxt: Nuxt, options: ModuleOptions) {
   if (options.viteInspect !== false) {
diff --git a/packages/devtools/src/integrations/timeline.ts b/packages/devtools/src/integrations/timeline.ts
index 69bf18a03..1fdb456ea 100644
--- a/packages/devtools/src/integrations/timeline.ts
+++ b/packages/devtools/src/integrations/timeline.ts
@@ -1,8 +1,8 @@
+import type { Import } from 'unimport'
+import type { NuxtDevtoolsServerContext } from '../types'
 import { resolve } from 'pathe'
 import semver from 'semver'
-import type { Import } from 'unimport'
 import { runtimeDir } from '../dirs'
-import type { NuxtDevtoolsServerContext } from '../types'
 
 export function setup({ nuxt, options }: NuxtDevtoolsServerContext) {
   const helperPath = resolve(runtimeDir, 'function-metrics-helpers')
diff --git a/packages/devtools/src/integrations/vite-inspect.ts b/packages/devtools/src/integrations/vite-inspect.ts
index bc65fbbbb..69e695e27 100644
--- a/packages/devtools/src/integrations/vite-inspect.ts
+++ b/packages/devtools/src/integrations/vite-inspect.ts
@@ -1,8 +1,8 @@
+import type { ViteInspectAPI } from 'vite-plugin-inspect'
+import type { NuxtDevtoolsServerContext } from '../types'
 import { addCustomTab } from '@nuxt/devtools-kit'
 import { addVitePlugin } from '@nuxt/kit'
 import Inspect from 'vite-plugin-inspect'
-import type { ViteInspectAPI } from 'vite-plugin-inspect'
-import type { NuxtDevtoolsServerContext } from '../types'
 
 export function setup({ nuxt, rpc }: NuxtDevtoolsServerContext) {
   const plugin = Inspect()
diff --git a/packages/devtools/src/integrations/vscode.ts b/packages/devtools/src/integrations/vscode.ts
index 98929ba14..d49451e73 100644
--- a/packages/devtools/src/integrations/vscode.ts
+++ b/packages/devtools/src/integrations/vscode.ts
@@ -1,3 +1,4 @@
+import type { NuxtDevtoolsServerContext } from '../types'
 import { existsSync } from 'node:fs'
 import fs from 'node:fs/promises'
 import { hostname } from 'node:os'
@@ -8,7 +9,6 @@ import { execa } from 'execa'
 import { checkPort, getPort } from 'get-port-please'
 import which from 'which'
 import { LOG_PREFIX } from '../logger'
-import type { NuxtDevtoolsServerContext } from '../types'
 
 export async function setup({ nuxt, options, openInEditorHooks, rpc }: NuxtDevtoolsServerContext) {
   const installed = !!await which('code-server').catch(() => null)
diff --git a/packages/devtools/src/integrations/vue-devtools.ts b/packages/devtools/src/integrations/vue-devtools.ts
index 9ae85981e..bf52886e7 100644
--- a/packages/devtools/src/integrations/vue-devtools.ts
+++ b/packages/devtools/src/integrations/vue-devtools.ts
@@ -1,7 +1,7 @@
+import type { NuxtDevtoolsServerContext } from '../types'
 import { addVitePlugin } from '@nuxt/kit'
 import { join } from 'pathe'
 import { runtimeDir } from '../dirs'
-import type { NuxtDevtoolsServerContext } from '../types'
 
 export function setup({ nuxt }: NuxtDevtoolsServerContext) {
   if (!nuxt.options.dev || nuxt.options.test)
diff --git a/packages/devtools/src/integrations/vue-inspector.ts b/packages/devtools/src/integrations/vue-inspector.ts
index c785ff890..b34d06fb6 100644
--- a/packages/devtools/src/integrations/vue-inspector.ts
+++ b/packages/devtools/src/integrations/vue-inspector.ts
@@ -1,7 +1,7 @@
-import { addVitePlugin } from '@nuxt/kit'
-import VueInspector from 'vite-plugin-vue-inspector'
 import type { Plugin } from 'vite'
 import type { NuxtDevtoolsServerContext } from '../types'
+import { addVitePlugin } from '@nuxt/kit'
+import VueInspector from 'vite-plugin-vue-inspector'
 
 export function setup({ nuxt, options }: NuxtDevtoolsServerContext) {
   if (!nuxt.options.dev || nuxt.options.test)
diff --git a/packages/devtools/src/module-main.ts b/packages/devtools/src/module-main.ts
index 1750c02cf..3fbcc27a0 100644
--- a/packages/devtools/src/module-main.ts
+++ b/packages/devtools/src/module-main.ts
@@ -1,3 +1,7 @@
+import type { ServerResponse } from 'node:http'
+import type { Nuxt } from 'nuxt/schema'
+import type { ViteDevServer } from 'vite'
+import type { ModuleOptions, NuxtDevToolsOptions } from './types'
 import { existsSync } from 'node:fs'
 import fs from 'node:fs/promises'
 import os from 'node:os'
@@ -6,16 +10,12 @@ import { colors } from 'consola/utils'
 import { join } from 'pathe'
 import sirv from 'sirv'
 import { searchForWorkspaceRoot } from 'vite'
-import type { ServerResponse } from 'node:http'
-import type { Nuxt } from 'nuxt/schema'
-import type { ViteDevServer } from 'vite'
 import { version } from '../package.json'
 import { defaultTabOptions } from './constant'
 import { getDevAuthToken } from './dev-auth'
 import { clientDir, isGlobalInstall, packageDir, runtimeDir } from './dirs'
 import { setupRPC } from './server-rpc'
 import { readLocalOptions } from './utils/local-options'
-import type { ModuleOptions, NuxtDevToolsOptions } from './types'
 
 export async function enableModule(options: ModuleOptions, nuxt: Nuxt) {
   // Disable in test mode
diff --git a/packages/devtools/src/module.ts b/packages/devtools/src/module.ts
index d4ac7cf6f..1b8a7a5f1 100644
--- a/packages/devtools/src/module.ts
+++ b/packages/devtools/src/module.ts
@@ -1,7 +1,7 @@
+import type { ModuleGlobalOptions, ModuleOptions } from './types'
 import { defineNuxtModule } from '@nuxt/kit'
 import { defaultOptions } from './constant'
 import { isGlobalInstall } from './dirs'
-import type { ModuleGlobalOptions, ModuleOptions } from './types'
 
 export type { ModuleOptions }
 
diff --git a/packages/devtools/src/npm/index.ts b/packages/devtools/src/npm/index.ts
index b2e6cb771..88bf1c91b 100644
--- a/packages/devtools/src/npm/index.ts
+++ b/packages/devtools/src/npm/index.ts
@@ -1,10 +1,10 @@
+import type { PackageUpdateInfo } from '../types'
 import { createRequire } from 'node:module'
 import { logger, useNuxt } from '@nuxt/kit'
 import { getPackageInfo } from 'local-pkg'
 import { fetch } from 'ofetch'
 import { readPackageJSON } from 'pkg-types'
 import semver from 'semver'
-import type { PackageUpdateInfo } from '../types'
 
 export async function getMainPackageJSON(nuxt = useNuxt()) {
   return readPackageJSON(nuxt.options.rootDir)
diff --git a/packages/devtools/src/runtime/function-metrics-helpers.ts b/packages/devtools/src/runtime/function-metrics-helpers.ts
index 9cab2ad42..1a621c650 100644
--- a/packages/devtools/src/runtime/function-metrics-helpers.ts
+++ b/packages/devtools/src/runtime/function-metrics-helpers.ts
@@ -1,7 +1,7 @@
+import type { TimelineEventFunction, TimelineMetrics } from '@nuxt/devtools/types'
 // @unimport-disable
 import { parse as parseStrackTrace } from 'error-stack-parser-es'
 import { markRaw, reactive } from 'vue'
-import type { TimelineEventFunction, TimelineMetrics } from '@nuxt/devtools/types'
 import { useObjectStorage } from './plugins/view/utils'
 
 const nonLiteralSymbol = Symbol('nuxt-devtools-fn-metrics-non-literal')
diff --git a/packages/devtools/src/runtime/nitro/inline.ts b/packages/devtools/src/runtime/nitro/inline.ts
index bece5faae..ee2206e32 100644
--- a/packages/devtools/src/runtime/nitro/inline.ts
+++ b/packages/devtools/src/runtime/nitro/inline.ts
@@ -1,8 +1,8 @@
+import type { NitroAppPlugin } from 'nitropack'
+
 // @ts-expect-error injected
 import { script } from '#nuxt-devtools-inline'
 
-import type { NitroAppPlugin } from 'nitropack'
-
 export default <NitroAppPlugin> function (nitro) {
   nitro.hooks.hook('render:html', (htmlContext) => {
     htmlContext.head.push(`<script>${script}</script>`)
diff --git a/packages/devtools/src/runtime/plugins/devtools.client.ts b/packages/devtools/src/runtime/plugins/devtools.client.ts
index 5dca02013..9e1c9f841 100644
--- a/packages/devtools/src/runtime/plugins/devtools.client.ts
+++ b/packages/devtools/src/runtime/plugins/devtools.client.ts
@@ -1,7 +1,7 @@
-import { shallowReactive, watchEffect } from 'vue'
-
 import type { TimelineServerState } from '@nuxt/devtools/types'
+
 import type { Router } from 'vue-router'
+import { shallowReactive, watchEffect } from 'vue'
 
 import { setupHooksDebug } from '../shared/hooks'
 // eslint-disable-next-line ts/ban-ts-comment
diff --git a/packages/devtools/src/runtime/plugins/devtools.server.ts b/packages/devtools/src/runtime/plugins/devtools.server.ts
index 70abb32b4..82e19216c 100644
--- a/packages/devtools/src/runtime/plugins/devtools.server.ts
+++ b/packages/devtools/src/runtime/plugins/devtools.server.ts
@@ -1,5 +1,5 @@
-import { defineNuxtPlugin, useState } from '#imports'
 import type { TimelineServerState } from '@nuxt/devtools/types'
+import { defineNuxtPlugin, useState } from '#imports'
 
 export default defineNuxtPlugin(() => {
   // record ssr start time
diff --git a/packages/devtools/src/runtime/plugins/view/FrameBox.vue b/packages/devtools/src/runtime/plugins/view/FrameBox.vue
index 4934b46d7..120816189 100644
--- a/packages/devtools/src/runtime/plugins/view/FrameBox.vue
+++ b/packages/devtools/src/runtime/plugins/view/FrameBox.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref, watchEffect } from 'vue'
 import type { NuxtDevtoolsHostClient } from '@nuxt/devtools/types'
+import { ref, watchEffect } from 'vue'
 import { PANEL_MAX, PANEL_MIN, popupWindow, state } from './state'
 import { useEventListener } from './utils'
 
diff --git a/packages/devtools/src/runtime/plugins/view/Main.vue b/packages/devtools/src/runtime/plugins/view/Main.vue
index b9f2073d6..c190e5e75 100644
--- a/packages/devtools/src/runtime/plugins/view/Main.vue
+++ b/packages/devtools/src/runtime/plugins/view/Main.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref, watchEffect } from 'vue'
 import type { NuxtDevtoolsHostClient } from '@nuxt/devtools/types'
 import type { CSSProperties } from 'vue'
+import { computed, onMounted, reactive, ref, watchEffect } from 'vue'
 import { settings } from '../../settings'
 import FrameBox from './FrameBox.vue'
 import { state } from './state'
diff --git a/packages/devtools/src/runtime/plugins/view/client.ts b/packages/devtools/src/runtime/plugins/view/client.ts
index e5618e040..bef9625dd 100644
--- a/packages/devtools/src/runtime/plugins/view/client.ts
+++ b/packages/devtools/src/runtime/plugins/view/client.ts
@@ -1,13 +1,13 @@
-import { setIframeServerContext } from '@vue/devtools-kit'
-import { createHooks } from 'hookable'
-import { debounce } from 'perfect-debounce'
-import { computed, createApp, h, markRaw, ref, shallowReactive, shallowRef, watch } from 'vue'
-
 import type { NuxtDevtoolsHostClient, TimelineEventRoute, TimelineMetrics } from '@nuxt/devtools/types'
 import type { $Fetch } from 'ofetch'
 import type { Ref } from 'vue'
 import type { Router } from 'vue-router'
 
+import { setIframeServerContext } from '@vue/devtools-kit'
+import { createHooks } from 'hookable'
+import { debounce } from 'perfect-debounce'
+import { computed, createApp, h, markRaw, ref, shallowReactive, shallowRef, watch } from 'vue'
+
 import { initTimelineMetrics } from '../../function-metrics-helpers'
 import Main from './Main.vue'
 import { popupWindow, state } from './state'
diff --git a/packages/devtools/src/runtime/plugins/view/state.ts b/packages/devtools/src/runtime/plugins/view/state.ts
index f7ebfb229..a8f4149dd 100644
--- a/packages/devtools/src/runtime/plugins/view/state.ts
+++ b/packages/devtools/src/runtime/plugins/view/state.ts
@@ -1,5 +1,5 @@
-import { shallowRef } from 'vue'
 import type { DevToolsFrameState } from '@nuxt/devtools/types'
+import { shallowRef } from 'vue'
 import { useObjectStorage } from './utils'
 
 export const PANEL_PADDING = 10
diff --git a/packages/devtools/src/runtime/plugins/view/utils.ts b/packages/devtools/src/runtime/plugins/view/utils.ts
index 88777e226..c960a31f8 100644
--- a/packages/devtools/src/runtime/plugins/view/utils.ts
+++ b/packages/devtools/src/runtime/plugins/view/utils.ts
@@ -1,5 +1,5 @@
-import { computed, getCurrentInstance, getCurrentScope, onMounted, onScopeDispose, ref, toValue, watch } from 'vue'
 import type { Ref } from 'vue'
+import { computed, getCurrentInstance, getCurrentScope, onMounted, onScopeDispose, ref, toValue, watch } from 'vue'
 
 export function useObjectStorage<T>(key: string, initial: T, listenToStorage = true): Ref<T> {
   const raw = localStorage.getItem(key)
diff --git a/packages/devtools/src/runtime/settings.ts b/packages/devtools/src/runtime/settings.ts
index a40f2291d..00aa744ed 100644
--- a/packages/devtools/src/runtime/settings.ts
+++ b/packages/devtools/src/runtime/settings.ts
@@ -1,8 +1,8 @@
+import type { NuxtDevToolsOptions } from '@nuxt/devtools/types'
+
 // @ts-expect-error virtual module
 import _settings from '#build/devtools/settings'
 
-import type { NuxtDevToolsOptions } from '@nuxt/devtools/types'
-
 export const settings = _settings as {
   ui: NuxtDevToolsOptions['ui']
 }
diff --git a/packages/devtools/src/runtime/use-nuxt-devtools.ts b/packages/devtools/src/runtime/use-nuxt-devtools.ts
index 494ddab31..833d31561 100644
--- a/packages/devtools/src/runtime/use-nuxt-devtools.ts
+++ b/packages/devtools/src/runtime/use-nuxt-devtools.ts
@@ -1,6 +1,6 @@
-import { shallowRef } from 'vue'
 import type { NuxtDevtoolsHostClient } from '@nuxt/devtools/types'
 import type { Ref } from 'vue'
+import { shallowRef } from 'vue'
 
 /**
  * Get Nuxt DevTools client for host app
diff --git a/packages/devtools/src/server-rpc/analyze-build.ts b/packages/devtools/src/server-rpc/analyze-build.ts
index ffdfcdb96..36dce1cae 100644
--- a/packages/devtools/src/server-rpc/analyze-build.ts
+++ b/packages/devtools/src/server-rpc/analyze-build.ts
@@ -1,11 +1,11 @@
+import type { NuxtAnalyzeMeta } from '@nuxt/schema'
+import type { AnalyzeBuildMeta, NuxtDevtoolsServerContext, ServerFunctions } from '../types'
 import fs from 'node:fs'
 import fsp from 'node:fs/promises'
 import { startSubprocess } from '@nuxt/devtools-kit'
 import { dirname, join } from 'pathe'
 import Git from 'simple-git'
 import { glob } from 'tinyglobby'
-import type { NuxtAnalyzeMeta } from '@nuxt/schema'
-import type { AnalyzeBuildMeta, NuxtDevtoolsServerContext, ServerFunctions } from '../types'
 
 export function setupAnalyzeBuildRPC({ nuxt, refresh, ensureDevAuthToken }: NuxtDevtoolsServerContext) {
   let builds: AnalyzeBuildMeta[] = []
diff --git a/packages/devtools/src/server-rpc/assets.ts b/packages/devtools/src/server-rpc/assets.ts
index f135d07c4..4aa3f0cbf 100644
--- a/packages/devtools/src/server-rpc/assets.ts
+++ b/packages/devtools/src/server-rpc/assets.ts
@@ -1,3 +1,4 @@
+import type { AssetEntry, AssetInfo, AssetType, ImageMeta, NuxtDevtoolsServerContext, ServerFunctions } from '../types'
 import fsp from 'node:fs/promises'
 import { parse, relative } from 'node:path'
 import { imageMeta } from 'image-meta'
@@ -5,7 +6,6 @@ import { join, resolve } from 'pathe'
 import { debounce } from 'perfect-debounce'
 import { glob } from 'tinyglobby'
 import { defaultAllowedExtensions } from '../constant'
-import type { AssetEntry, AssetInfo, AssetType, ImageMeta, NuxtDevtoolsServerContext, ServerFunctions } from '../types'
 
 export function setupAssetsRPC({ nuxt, ensureDevAuthToken, refresh, options }: NuxtDevtoolsServerContext) {
   const _imageMetaCache = new Map<string, ImageMeta | undefined>()
diff --git a/packages/devtools/src/server-rpc/general.ts b/packages/devtools/src/server-rpc/general.ts
index 77c8daafe..0aa6536f8 100644
--- a/packages/devtools/src/server-rpc/general.ts
+++ b/packages/devtools/src/server-rpc/general.ts
@@ -1,17 +1,17 @@
+import type { ModuleOptions, NuxtLayout } from '@nuxt/schema'
+import type { Component, NuxtApp, NuxtPage } from 'nuxt/schema'
+import type { Import, Unimport } from 'unimport'
+import type { AutoImportsWithMetadata, HookInfo, NuxtDevtoolsServerContext, ServerFunctions } from '../types'
 import { existsSync } from 'node:fs'
 import { logger } from '@nuxt/kit'
 import { colors } from 'consola/utils'
 import destr from 'destr'
 import { resolve } from 'pathe'
+
 import { snakeCase } from 'scule'
 import { resolveBuiltinPresets } from 'unimport'
-import type { ModuleOptions, NuxtLayout } from '@nuxt/schema'
-import type { Component, NuxtApp, NuxtPage } from 'nuxt/schema'
-
-import type { Import, Unimport } from 'unimport'
 import { getDevAuthToken } from '../dev-auth'
 import { setupHooksDebug } from '../runtime/shared/hooks'
-import type { AutoImportsWithMetadata, HookInfo, NuxtDevtoolsServerContext, ServerFunctions } from '../types'
 
 export function setupGeneralRPC({
   nuxt,
diff --git a/packages/devtools/src/server-rpc/index.ts b/packages/devtools/src/server-rpc/index.ts
index 403de8204..80d220cd5 100644
--- a/packages/devtools/src/server-rpc/index.ts
+++ b/packages/devtools/src/server-rpc/index.ts
@@ -1,12 +1,13 @@
-import { logger } from '@nuxt/kit'
-import { createBirpcGroup } from 'birpc'
-import { colors } from 'consola/utils'
-
-import { parse, stringify } from 'flatted'
 import type { ChannelOptions } from 'birpc'
 import type { Nuxt } from 'nuxt/schema'
 import type { Plugin } from 'vite'
+
 import type { WebSocket } from 'ws'
+import type { ClientFunctions, ModuleOptions, NuxtDevtoolsServerContext, ServerFunctions } from '../types'
+import { logger } from '@nuxt/kit'
+import { createBirpcGroup } from 'birpc'
+import { colors } from 'consola/utils'
+import { parse, stringify } from 'flatted'
 import { WS_EVENT_NAME } from '../constant'
 import { getDevAuthToken } from '../dev-auth'
 import { setupAnalyzeBuildRPC } from './analyze-build'
@@ -22,7 +23,6 @@ import { setupTelemetryRPC } from './telemetry'
 import { setupTerminalRPC } from './terminals'
 import { setupTimelineRPC } from './timeline'
 import { setupWizardRPC } from './wizard'
-import type { ClientFunctions, ModuleOptions, NuxtDevtoolsServerContext, ServerFunctions } from '../types'
 
 export function setupRPC(nuxt: Nuxt, options: ModuleOptions) {
   const serverFunctions = {} as ServerFunctions
diff --git a/packages/devtools/src/server-rpc/npm.ts b/packages/devtools/src/server-rpc/npm.ts
index 2abf5d543..9b3c9b230 100644
--- a/packages/devtools/src/server-rpc/npm.ts
+++ b/packages/devtools/src/server-rpc/npm.ts
@@ -1,13 +1,13 @@
+import type { PackageManager } from 'nypm'
+import type { NpmCommandOptions, NpmCommandType, NuxtDevtoolsServerContext, PackageUpdateInfo, ServerFunctions } from '../types'
 import fs from 'node:fs/promises'
 import { startSubprocess } from '@nuxt/devtools-kit'
 import isInstalledGlobally from 'is-installed-globally'
 import { parseModule } from 'magicast'
 import { addNuxtModule, getDefaultExportOptions } from 'magicast/helpers'
 import { detectPackageManager } from 'nypm'
-import type { PackageManager } from 'nypm'
 import { checkForUpdateOf } from '../npm'
 import { magicastGuard } from '../utils/magicast'
-import type { NpmCommandOptions, NpmCommandType, NuxtDevtoolsServerContext, PackageUpdateInfo, ServerFunctions } from '../types'
 
 export function setupNpmRPC({ nuxt, ensureDevAuthToken }: NuxtDevtoolsServerContext) {
   let detectPromise: Promise<PackageManager | undefined> | undefined
diff --git a/packages/devtools/src/server-rpc/options.ts b/packages/devtools/src/server-rpc/options.ts
index 0b35f06f6..31f7fc154 100644
--- a/packages/devtools/src/server-rpc/options.ts
+++ b/packages/devtools/src/server-rpc/options.ts
@@ -1,6 +1,6 @@
+import type { NuxtDevToolsOptions, NuxtDevtoolsServerContext, ServerFunctions } from '../types'
 import { defaultTabOptions } from '../constant'
 import { clearLocalOptions, readLocalOptions, writeLocalOptions } from '../utils/local-options'
-import type { NuxtDevToolsOptions, NuxtDevtoolsServerContext, ServerFunctions } from '../types'
 
 let options: NuxtDevToolsOptions | undefined
 
diff --git a/packages/devtools/src/server-rpc/server-routes.ts b/packages/devtools/src/server-rpc/server-routes.ts
index 7e2a7b594..469686ede 100644
--- a/packages/devtools/src/server-rpc/server-routes.ts
+++ b/packages/devtools/src/server-rpc/server-routes.ts
@@ -1,6 +1,6 @@
-import { debounce } from 'perfect-debounce'
 import type { Nitro } from 'nitropack'
 import type { NuxtDevtoolsServerContext, ServerFunctions, ServerRouteInfo } from '../types'
+import { debounce } from 'perfect-debounce'
 
 export function setupServerRoutesRPC({ nuxt, refresh }: NuxtDevtoolsServerContext) {
   let nitro: Nitro
diff --git a/packages/devtools/src/server-rpc/server-tasks.ts b/packages/devtools/src/server-rpc/server-tasks.ts
index 1f216200f..df8d6c847 100644
--- a/packages/devtools/src/server-rpc/server-tasks.ts
+++ b/packages/devtools/src/server-rpc/server-tasks.ts
@@ -1,6 +1,6 @@
-import { debounce } from 'perfect-debounce'
 import type { Nitro } from 'nitropack'
 import type { NuxtDevtoolsServerContext, ScannedNitroTasks, ServerFunctions } from '../types'
+import { debounce } from 'perfect-debounce'
 
 export function setupServerTasksRPC({ nuxt, refresh }: NuxtDevtoolsServerContext) {
   let nitro: Nitro
diff --git a/packages/devtools/src/server-rpc/telemetry.ts b/packages/devtools/src/server-rpc/telemetry.ts
index f620b4585..ab0187b62 100644
--- a/packages/devtools/src/server-rpc/telemetry.ts
+++ b/packages/devtools/src/server-rpc/telemetry.ts
@@ -1,8 +1,8 @@
 import type { NuxtHooks } from '@nuxt/schema'
 import type { } from '@nuxt/telemetry'
+import type { NuxtDevtoolsServerContext } from '../types'
 import { version } from '../../package.json'
 import { getOptions } from './options'
-import type { NuxtDevtoolsServerContext } from '../types'
 
 const SEND_DELAY = 5_000
 
diff --git a/packages/devtools/src/server-rpc/timeline.ts b/packages/devtools/src/server-rpc/timeline.ts
index 884dd09c3..a7f20d171 100644
--- a/packages/devtools/src/server-rpc/timeline.ts
+++ b/packages/devtools/src/server-rpc/timeline.ts
@@ -1,8 +1,8 @@
+import type { NuxtDevtoolsServerContext, ServerFunctions } from '../types'
 import fs from 'node:fs/promises'
 import { parseModule } from 'magicast'
 import { getDefaultExportOptions } from 'magicast/helpers'
 import { magicastGuard } from '../utils/magicast'
-import type { NuxtDevtoolsServerContext, ServerFunctions } from '../types'
 
 export function setupTimelineRPC({ nuxt }: NuxtDevtoolsServerContext) {
   return {
diff --git a/packages/devtools/src/server-rpc/wizard.ts b/packages/devtools/src/server-rpc/wizard.ts
index b0f6127f7..60b51e8fb 100644
--- a/packages/devtools/src/server-rpc/wizard.ts
+++ b/packages/devtools/src/server-rpc/wizard.ts
@@ -1,6 +1,6 @@
+import type { NuxtDevtoolsServerContext, ServerFunctions, WizardActions } from '@nuxt/devtools-kit/types'
 import { logger } from '@nuxt/kit'
 import { colors } from 'consola/utils'
-import type { NuxtDevtoolsServerContext, ServerFunctions, WizardActions } from '@nuxt/devtools-kit/types'
 import { LOG_PREFIX } from '../logger'
 import { wizard } from '../wizard'
 
diff --git a/packages/devtools/src/utils/fs.ts b/packages/devtools/src/utils/fs.ts
index df276af05..eb1789a7a 100644
--- a/packages/devtools/src/utils/fs.ts
+++ b/packages/devtools/src/utils/fs.ts
@@ -1,6 +1,6 @@
+import type { Dirent } from 'node:fs'
 import { lstat, readdir } from 'node:fs/promises'
 import { resolve } from 'pathe'
-import type { Dirent } from 'node:fs'
 
 export async function getFolderSize(
   dir: string,
diff --git a/packages/devtools/src/wizard/enable-pages.ts b/packages/devtools/src/wizard/enable-pages.ts
index f6905e240..c99fc7347 100644
--- a/packages/devtools/src/wizard/enable-pages.ts
+++ b/packages/devtools/src/wizard/enable-pages.ts
@@ -1,8 +1,8 @@
+import type { Nuxt } from 'nuxt/schema'
 import fs from 'node:fs'
 import fsp from 'node:fs/promises'
 import { logger } from '@nuxt/kit'
 import { dirname, join } from 'pathe'
-import type { Nuxt } from 'nuxt/schema'
 
 const pagesIndexTemplate = `<script setup lang="ts">
 const route = useRoute()
diff --git a/playgrounds/module-starter/client/pages/index.vue b/playgrounds/module-starter/client/pages/index.vue
index 00681af61..68e7e9636 100644
--- a/playgrounds/module-starter/client/pages/index.vue
+++ b/playgrounds/module-starter/client/pages/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { onDevtoolsClientConnected, useDevtoolsClient } from '@nuxt/devtools-kit/iframe-client'
 import type { ClientFunctions, ServerFunctions } from '../../types'
+import { onDevtoolsClientConnected, useDevtoolsClient } from '@nuxt/devtools-kit/iframe-client'
 
 const client = useDevtoolsClient()
 
diff --git a/playgrounds/module-starter/src/devtools.ts b/playgrounds/module-starter/src/devtools.ts
index 666c621cb..64323e284 100644
--- a/playgrounds/module-starter/src/devtools.ts
+++ b/playgrounds/module-starter/src/devtools.ts
@@ -1,6 +1,6 @@
-import { existsSync } from 'node:fs'
 import type { Resolver } from '@nuxt/kit'
 import type { Nuxt } from 'nuxt/schema'
+import { existsSync } from 'node:fs'
 
 const DEVTOOLS_UI_ROUTE = '/__my-module'
 const DEVTOOLS_UI_LOCAL_PORT = 3300
diff --git a/playgrounds/module-starter/src/module.ts b/playgrounds/module-starter/src/module.ts
index 6277f4618..4d1a0c0ba 100644
--- a/playgrounds/module-starter/src/module.ts
+++ b/playgrounds/module-starter/src/module.ts
@@ -1,7 +1,7 @@
+import type { ClientFunctions, ServerFunctions } from '../types'
 import { extendServerRpc, onDevToolsInitialized } from '@nuxt/devtools-kit'
 import { addPlugin, createResolver, defineNuxtModule } from '@nuxt/kit'
 import { setupDevToolsUI } from './devtools'
-import type { ClientFunctions, ServerFunctions } from '../types'
 
 // Module options TypeScript interface definition
 export interface ModuleOptions {