refactor: use explicit import, improve eslint config

eslint.config.mjs

@@ -1,4 +1,5 @@
 import antfu from '@antfu/eslint-config'
+import { extend } from 'eslint-flat-config-utils'
 
 export default antfu(
   {
@@ -11,7 +12,13 @@ export default antfu(
       'vue/no-v-text-v-html-on-component': 'off',
     },
   },
-  {
-    ignores: ['**/foo/**'],
-  },
 )
+  .append(
+    extend(
+      import('./packages/devtools/client/.nuxt/eslint.config.mjs').then(mod => mod.default()),
+      'packages/devtools/client',
+    ),
+  )
+  .removeRules(
+    'vue/no-multiple-template-root',
+  )

package.json

@@ -27,6 +27,7 @@
     "@antfu/ni": "catalog:",
     "@nuxt/devtools": "workspace:*",
     "@nuxt/devtools-ui-kit": "workspace:*",
+    "@nuxt/eslint": "^0.5.7",
     "@nuxt/module-builder": "catalog:",
     "@nuxt/schema": "catalog:",
     "@opentelemetry/api": "catalog:",
@@ -38,11 +39,13 @@
     "bumpp": "catalog:",
     "conventional-changelog-cli": "catalog:",
     "eslint": "catalog:",
+    "eslint-flat-config-utils": "^0.4.0",
     "eslint-plugin-format": "catalog:",
     "esno": "catalog:",
     "execa": "catalog:",
     "lint-staged": "catalog:",
     "nuxt": "catalog:",
+    "nuxt-eslint-auto-explicit-import": "^0.1.0",
     "pathe": "catalog:",
     "simple-git-hooks": "catalog:",
     "taze": "catalog:",

packages/devtools/client/app.vue

@@ -1,6 +1,14 @@
 <script setup lang="ts">
-import { useEyeDropper } from '@vueuse/core'
-import { splitScreenAvailable } from '~/composables/storage'
+import { useRoute } from '#app/composables/router'
+import { useHead } from '@unhead/vue'
+import { useEventListener, useEyeDropper } from '@vueuse/core'
+import { computed, onMounted, watch, watchEffect } from 'vue'
+import { getColorMode, showConnectionWarning, useClient, useInjectionClient } from '~/composables/client'
+import { devAuthToken, isDevAuthed } from '~/composables/dev-auth'
+import { useCopy } from '~/composables/editor'
+import { rpc } from '~/composables/rpc'
+import { registerCommands } from '~/composables/state-commands'
+import { splitScreenAvailable, splitScreenEnabled, useDevToolsUIOptions } from '~/composables/storage'
 import { setupClientRPC } from './setup/client-rpc'
 import { setupVueDevTools } from './setup/vue-devtools'
 

packages/devtools/client/components/AssetDetails.vue

@@ -1,6 +1,12 @@
 <script setup lang="ts">
 import type { AssetInfo, CodeSnippet } from '~/../src/types'
-import { useTimeAgo } from '@vueuse/core'
+import { devtoolsUiShowNotification } from '#imports'
+import { computedAsync, useTimeAgo, useVModel } from '@vueuse/core'
+import { computed, ref } from 'vue'
+import { ensureDevAuthToken } from '~/composables/dev-auth'
+import { useCopy, useOpenInEditor } from '~/composables/editor'
+import { rpc } from '~/composables/rpc'
+import { useServerConfig } from '~/composables/state'
 
 const props = defineProps<{
   modelValue: AssetInfo

packages/devtools/client/components/AssetDropZone.vue

@@ -1,5 +1,11 @@
 <script lang="ts" setup>
 import type { AssetEntry } from '~/../src/types'
+import { devtoolsUiShowNotification } from '#imports'
+import { useEventListener, useVModel } from '@vueuse/core'
+import { ref } from 'vue'
+import { ensureDevAuthToken } from '~/composables/dev-auth'
+import { rpc, wsConnecting, wsError } from '~/composables/rpc'
+import { telemetry } from '~/composables/telemetry'
 
 const props = defineProps({
   modelValue: {

packages/devtools/client/components/AssetFontPreview.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { AssetInfo } from '~/../src/types'
+import { useStyleTag } from '@vueuse/core'
 import { hash } from 'ohash'
+import { computed } from 'vue'
 
 const props = defineProps<{
   asset: AssetInfo

packages/devtools/client/components/AssetGridItem.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { AssetInfo } from '~/../src/types'
+import { computed } from 'vue'
 
 const props = defineProps<{
   asset: AssetInfo

packages/devtools/client/components/AssetListItem.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import type { AssetInfo } from '~/../src/types'
+import { useVModel } from '@vueuse/core'
+import { computed, ref } from 'vue'
 
 const props = withDefaults(defineProps<{
   item: any

packages/devtools/client/components/AuthRequiredPanel.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { devAuthToken, isDevAuthed, requestForAuth, updateDevAuthToken } from '~/composables/dev-auth'
+import { rpc } from '~/composables/rpc'
+
 onMounted(async () => {
   if (!isDevAuthed.value) {
     if (devAuthToken.value) {

packages/devtools/client/components/BuildAnalyzeDetails.vue

@@ -2,6 +2,10 @@
 import type { AnalyzeBuildMeta } from '../../src/types'
 import { useRuntimeConfig } from '#imports'
 import { formatTimeAgo } from '@vueuse/core'
+import { computed, ref } from 'vue'
+import { ensureDevAuthToken } from '~/composables/dev-auth'
+import { rpc } from '~/composables/rpc'
+import { formatDuration } from '~/composables/utils'
 
 const props = defineProps<{
   current: AnalyzeBuildMeta
@@ -37,10 +41,6 @@ function formatFileSize(bytes: number) {
   return `${(bytes / 1024 / 1024 / 1024).toFixed(1)}GB`
 }
 
-function formatDuration(build: AnalyzeBuildMeta) {
-  return `${((build.endTime - build.startTime) / 1000).toFixed(1)}s`
-}
-
 async function clear(name: string) {
   return rpc.clearAnalyzeBuilds(await ensureDevAuthToken(), [name])
 }

packages/devtools/client/components/CodeDiff.vue

@@ -2,6 +2,7 @@
 import type { BuiltinLanguage } from 'shiki'
 import { unrefElement } from '@vueuse/core'
 import { diffLines } from 'diff'
+import { computed, onMounted, ref } from 'vue'
 
 const props = defineProps<{
   from: string

packages/devtools/client/components/CodeSnippets.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { BuiltinLanguage } from 'shiki'
 import type { CodeSnippet } from '../../types'
+import { computed, shallowRef, watchEffect } from 'vue'
+import { useCopy } from '~/composables/editor'
 
 const props = defineProps<{
   codeSnippets: CodeSnippet[]

packages/devtools/client/components/CommandPalette.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
+import { useEventListener } from '@vueuse/core'
 import Fuse from 'fuse.js'
+import { computed, ref, watch } from 'vue'
+import { useCommands } from '~/composables/state-commands'
 import type { CommandItem } from '~/composables/state-commands'
 
 const show = ref(false)

packages/devtools/client/components/ComponentDetails.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { Component } from 'nuxt/schema'
 import { pascalCase } from 'scule'
+import { computed } from 'vue'
+import { useCopy } from '~/composables/editor'
 
 const props = defineProps<{
   component: Component

packages/devtools/client/components/ComponentItem.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Component } from 'nuxt/schema'
+import { computed } from 'vue'
 
 const props = defineProps<{
   component: Component

packages/devtools/client/components/ComponentName.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Component } from 'nuxt/schema'
 import { pascalCase } from 'scule'
+import { computed } from 'vue'
 
 const props = defineProps<{
   component: Component

packages/devtools/client/components/ComponentsGraph.vue

@@ -2,7 +2,12 @@
 import type { ComponentRelationship } from '~/../src/types'
 import type { Component, NuxtLayout, NuxtPage } from 'nuxt/schema'
 import type { Data, Node, Options } from 'vis-network'
+import { useDebounce } from '@vueuse/core'
 import { Network } from 'vis-network'
+import { computed, onMounted, ref, watch } from 'vue'
+import { getColorMode } from '~/composables/client'
+import { useLayouts, useServerConfig, useServerPages } from '~/composables/state'
+import { useDevToolsUIOptions } from '~/composables/storage'
 
 const props = defineProps<{
   components: Component[]

packages/devtools/client/components/ComponentsList.vue

@@ -2,6 +2,9 @@
 import type { Component } from 'nuxt/schema'
 import type { ComponentRelationship, ComponentWithRelationships } from '../../types'
 import Fuse from 'fuse.js'
+import { computed, ref } from 'vue'
+import { DETAILS_MAX_ITEMS } from '~/composables/constants'
+import { getComponentRelationships, getModuleNameFromPath, isNodeModulePath } from '~/composables/utils'
 
 const props = defineProps<{
   components: Component[]

packages/devtools/client/components/ComposableItem.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { Import, UnimportMeta } from 'unimport'
-import { ComposablesDocs } from '../composables/constants'
+import { computed } from 'vue'
+import { ComposablesDocs } from '~/composables/constants'
+import { useCopy, useOpenInEditor } from '~/composables/editor'
 
 const props = withDefaults(
   defineProps<{

packages/devtools/client/components/CronCollection.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { CronCollection } from '../../src/types/tasks'
 import cronstrue from 'cronstrue'
+import { computed, ref } from 'vue'
+import { useCurrentServerTask } from '~/composables/state-routes'
 
 const props = defineProps<{
   collection: CronCollection

packages/devtools/client/components/CurrentRoute.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+import { useClient } from '~/composables/client'
+
 const client = useClient()
 
 const path = computed(() => client.value?.nuxt?.vueApp.config.globalProperties.$route.path)

packages/devtools/client/components/DataSchemaButton.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useSchemaInput } from '~/composables/state-schema'
+
 defineProps<{
   getter: () => { name?: string, input: string }
 }>()

packages/devtools/client/components/DataSchemaDrawer.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import type { BuiltinLanguage } from 'shiki'
+import { computedAsync } from '@vueuse/core'
 import { InputData, jsonInputForTargetLanguage, quicktype } from 'quicktype-core'
 import { all as languages } from 'quicktype-core/dist/language/All'
+import { computed, ref, watch } from 'vue'
+import { useCopy } from '~/composables/editor'
+import { useSchemaInput } from '~/composables/state-schema'
 
 const input = useSchemaInput()
 

packages/devtools/client/components/DisconnectIndicator.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { wsConnectingDebounced } from '~/composables/rpc'
+
 function reload() {
   window.location.reload()
 }

packages/devtools/client/components/DockingPanel.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { splitScreenAvailable, splitScreenEnabled, useDevToolsUIOptions } from '~/composables/storage'
+import { refreshData, reloadPage } from '~/composables/utils'
+
 const { sidebarExpanded } = useDevToolsUIOptions()
 
 function toggleSplitScreen() {

packages/devtools/client/components/DurationDisplay.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 const props = withDefaults(
   defineProps<{
     duration: number | undefined

packages/devtools/client/components/FileIcon.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 const props = defineProps<{ id?: string }>()
 
 const ext = computed(() => props.id?.split(/\./g).pop() || '')

packages/devtools/client/components/FilepathItem.vue

@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+import { useOpenInEditor } from '~/composables/editor'
+import { useServerConfig } from '~/composables/state'
+import { parseReadablePath } from '~/composables/utils'
+
 const props = defineProps<{
   filepath?: string
   lineBreak?: boolean

packages/devtools/client/components/HelpFab.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { ref } from 'vue'
+import { useDevToolsUIOptions } from '~/composables/storage'
+
 const open = ref(false)
 const { showHelpButtons } = useDevToolsUIOptions()
 </script>

packages/devtools/client/components/HooksTable.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { HookInfo } from '~/../src/types'
+import { computed, ref } from 'vue'
 
 const props = defineProps<{
   hooks: HookInfo[]

packages/devtools/client/components/IframeView.vue

@@ -1,4 +1,8 @@
 <script lang="ts">
+import { useElementBounding } from '@vueuse/core'
+import { computed, nextTick, onMounted, onUnmounted, reactive, ref, watchEffect } from 'vue'
+import { getColorMode, useInjectionClient } from '~/composables/client'
+
 const iframeCacheMap = new Map<string, HTMLIFrameElement>()
 </script>
 

packages/devtools/client/components/LaunchPage.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ModuleLaunchAction } from '~~/../src/types'
+import { telemetry } from '~/composables/telemetry'
 
 const props = defineProps<{
   name?: string

packages/devtools/client/components/ModuleActionDialog.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { ModuleDialog } from '../composables/dialog'
+import { ModuleDialog } from '~/composables/dialog'
+import { useOpenInEditor } from '~/composables/editor'
+import { useServerConfig } from '~/composables/state'
 
 const config = useServerConfig()
 const openInEditor = useOpenInEditor()

packages/devtools/client/components/ModuleInstallList.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { ModuleStaticInfo } from '../../src/types'
 import Fuse from 'fuse.js'
+import { computed, ref } from 'vue'
+import { useModulesList } from '~/composables/state-modules'
 // @ts-expect-error missing types
 import { RecycleScroller } from 'vue-virtual-scroller'
 

packages/devtools/client/components/ModuleItem.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import type { InstalledModuleInfo } from '../../src/types'
+import { computed } from 'vue'
+import { useCurrentTerminalId } from '~/composables/state-routes'
 
 const props = defineProps<{
   mod: InstalledModuleInfo

packages/devtools/client/components/ModuleItemBase.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import type { InstalledModuleInfo, ModuleStaticInfo } from '../../src/types'
+import { computed } from 'vue'
+import { useOpenInEditor } from '~/composables/editor'
 
 const props = withDefaults(
   defineProps<{

packages/devtools/client/components/ModuleItemInstall.vue

@@ -1,5 +1,12 @@
 <script setup lang="ts">
 import type { ModuleActionType, ModuleStaticInfo } from '../../src/types'
+import { computed } from 'vue'
+import { ensureDevAuthToken } from '~/composables/dev-auth'
+import { ModuleDialog } from '~/composables/dialog'
+import { rpc } from '~/composables/rpc'
+import { useInstalledModules } from '~/composables/state-modules'
+import { processInstallingModules } from '~/composables/state-subprocess'
+import { telemetry } from '~/composables/telemetry'
 
 const props = defineProps<{
   item: ModuleStaticInfo

packages/devtools/client/components/ModuleTreeNode.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useRoute } from '#app/composables/router'
 import type { TreeNode } from '~/composables/tree'
 
 withDefaults(defineProps<{

packages/devtools/client/components/NpmVersionCheck.vue

@@ -1,5 +1,12 @@
 <script setup lang="ts">
 import type { NpmCommandOptions } from '../../src/types'
+import { useRouter } from '#app/composables/router'
+import { createTemplatePromise } from '@vueuse/core'
+import { ref } from 'vue'
+import { useRestartDialogs } from '~/composables/dialog'
+import { usePackageUpdate } from '~/composables/npm'
+import { useCurrentTerminalId } from '~/composables/state-routes'
+import { telemetry } from '~/composables/telemetry'
 
 const props = withDefaults(
   defineProps<{