feat(kit): RFC - Unified Logging API proposal

alias.ts

@@ -12,6 +12,7 @@ export const alias = {
   '@vitejs/devtools-rpc': r('rpc/src'),
   '@vitejs/devtools-kit/client': r('kit/src/client/index.ts'),
   '@vitejs/devtools-kit/utils/events': r('kit/src/utils/events.ts'),
+  '@vitejs/devtools-kit/utils/logger': r('kit/src/utils/logger.ts'),
   '@vitejs/devtools-kit/utils/nanoid': r('kit/src/utils/nanoid.ts'),
   '@vitejs/devtools-kit/utils/shared-state': r('kit/src/utils/shared-state.ts'),
   '@vitejs/devtools-kit': r('kit/src/index.ts'),

eslint.config.js

@@ -12,6 +12,12 @@ export default antfu({
       'no-console': 'off',
     },
   })
+  .append({
+    files: ['./packages/vite/src/app/**/*.ts', './packages/vite/src/shared/**/*.ts'],
+    rules: {
+      'unimport/auto-insert': 'off',
+    },
+  })
   .removeRules(
     'vue/no-template-shadow',
     'pnpm/json-prefer-workspace-settings',

packages/core/src/client/standalone/App.vue

@@ -53,6 +53,7 @@ function switchEntry(id: string) {
       </div>
       <div class="transition duration-200 p2">
         <DockEntriesWithCategories
+          :context="context"
           :entries="context.docks.entries"
           :is-vertical="false"
           :selected="context.docks.selected"

packages/core/src/client/webcomponents/components/DockEntriesWithCategories.vue

@@ -63,7 +63,7 @@ const groups = computed(() => {
         left = 0
       }
       else {
-        left -= entries.length
+        left -= items.length
         visible.push([category, items])
       }
     }

packages/core/src/node/context.ts

@@ -1,5 +1,6 @@
 import type { DevToolsNodeContext } from '@vitejs/devtools-kit'
 import type { ResolvedConfig, ViteDevServer } from 'vite'
+import { createLogger } from '@vitejs/devtools-kit/utils/logger'
 import { createDebug } from 'obug'
 import { debounce } from 'perfect-debounce'
 import { searchForWorkspaceRoot } from 'vite'
@@ -29,6 +30,7 @@ export async function createDevToolsContext(
     views: undefined!,
     utils: ContextUtils,
     terminals: undefined!,
+    logger: createLogger('vite-devtools'),
   }
   const rpcHost = new RpcFunctionsHost(context)
   const docksHost = new DevToolsDockHost(context)

packages/kit/package.json

@@ -22,6 +22,7 @@
     ".": "./dist/index.mjs",
     "./client": "./dist/client.mjs",
     "./utils/events": "./dist/utils/events.mjs",
+    "./utils/logger": "./dist/utils/logger.mjs",
     "./utils/nanoid": "./dist/utils/nanoid.mjs",
     "./utils/shared-state": "./dist/utils/shared-state.mjs",
     "./package.json": "./package.json"
@@ -42,6 +43,7 @@
     "@vitejs/devtools-rpc": "workspace:*",
     "birpc": "catalog:deps",
     "birpc-x": "catalog:deps",
+    "consola": "catalog:deps",
     "immer": "catalog:deps"
   },
   "devDependencies": {

packages/kit/src/types/vite-plugin.ts

@@ -1,3 +1,4 @@
+import type { ConsolaInstance } from 'consola'
 import type { ResolvedConfig, ViteDevServer } from 'vite'
 import type { DockClientScriptContext } from '../client'
 import type { ClientScriptEntry, DevToolsDockHost } from './docks'
@@ -61,6 +62,23 @@ export interface DevToolsNodeContext {
    * Terminals host, for registering terminal sessions and streaming terminal output
    */
   terminals: DevToolsTerminalHost
+  /**
+   * Logger instance for logging messages.
+   * Uses consola under the hood, similar to Nuxt Kit's logging API.
+   *
+   * @example
+   * ```ts
+   * context.logger.info('Plugin initialized')
+   * context.logger.debug('Debug info')
+   * context.logger.warn('Warning message')
+   * context.logger.error(new Error('Error occurred'))
+   *
+   * // Create child logger with tag
+   * const rpcLogger = context.logger.withTag('rpc')
+   * rpcLogger.info('RPC connected')
+   * ```
+   */
+  logger: ConsolaInstance
 }
 
 export interface DevToolsNodeUtils {

packages/kit/src/utils/logger.ts

@@ -0,0 +1,42 @@
+/**
+ * Logger API using Consola
+ *
+ * Provides a simple logger interface using unjs/consola, similar to Nuxt Kit.
+ * Exposed on context.logger for use in DevTools plugins.
+ *
+ * @example
+ * ```ts
+ * export default defineDevToolsPlugin({
+ *   setup(context) {
+ *     context.logger.info('Plugin initialized')
+ *     context.logger.debug('Debug info', { config })
+ *     context.logger.warn('Deprecated option used')
+ *     context.logger.error(new Error('Something went wrong'))
+ *
+ *     // Create child loggers for sub-components
+ *     const rpcLogger = context.logger.withTag('rpc')
+ *     rpcLogger.info('RPC connected') // [rpc] RPC connected
+ *   }
+ * })
+ * ```
+ */
+
+import { consola } from 'consola'
+
+export type { ConsolaInstance as Logger } from 'consola'
+
+/**
+ * Create a logger instance with the given tag/scope.
+ * Similar to Nuxt Kit's useLogger.
+ *
+ * @param tag - Tag/scope for the logger (e.g., 'my-plugin', 'rpc')
+ * @returns Consola logger instance
+ */
+export function createLogger(tag?: string): ReturnType<typeof consola.withTag> {
+  return tag ? consola.withTag(tag) : consola
+}
+
+/**
+ * Default logger instance.
+ */
+export const logger = consola

packages/kit/tsdown.config.ts

@@ -6,6 +6,7 @@ export default defineConfig({
     'utils/events': 'src/utils/events.ts',
     'utils/nanoid': 'src/utils/nanoid.ts',
     'utils/shared-state': 'src/utils/shared-state.ts',
+    'utils/logger': 'src/utils/logger.ts',
     'client': 'src/client/index.ts',
   },
   exports: true,

pnpm-workspace.yaml

@@ -33,6 +33,7 @@ catalogs:
     birpc: ^4.0.0
     birpc-x: 0.0.6
     cac: ^6.7.14
+    consola: ^3.2.3
     diff: ^8.0.2
     get-port-please: ^3.2.0
     h3: ^1.15.4

test/exports/@vitejs/devtools-kit.yaml

@@ -4,6 +4,9 @@
   getDevToolsRpcClient: function
 ./utils/events:
   createEventEmitter: function
+./utils/logger:
+  createLogger: function
+  logger: object
 ./utils/nanoid:
   nanoid: function
 ./utils/shared-state:

tsconfig.base.json

@@ -27,6 +27,9 @@
       "@vitejs/devtools-kit/utils/events": [
         "./packages/kit/src/utils/events.ts"
       ],
+      "@vitejs/devtools-kit/utils/logger": [
+        "./packages/kit/src/utils/logger.ts"
+      ],
       "@vitejs/devtools-kit/utils/nanoid": [
         "./packages/kit/src/utils/nanoid.ts"
       ],

turbo.json

@@ -1,10 +1,29 @@
 {
   "$schema": "https://turbo.build/schema.json",
   "tasks": {
+    "dev:prepare": {
+      "outputLogs": "new-only",
+      "outputs": [
+        "**/.nuxt/**"
+      ]
+    },
     "build": {
       "outputLogs": "new-only",
       "outputs": [
         "dist/**"
+      ],
+      "dependsOn": [
+        "^build"
+      ]
+    },
+    "@vitejs/devtools-vite#build": {
+      "dependsOn": [
+        "@vitejs/devtools-vite#dev:prepare"
+      ]
+    },
+    "@vitejs/devtools#build": {
+      "dependsOn": [
+        "@vitejs/devtools-vite#dev:prepare"
       ]
     }
   }