diff --git a/docs/guide/api-plugin.md b/docs/guide/api-plugin.md
index 89860c7cb8ff6a..33d8ba0e9802b7 100644
--- a/docs/guide/api-plugin.md
+++ b/docs/guide/api-plugin.md
@@ -595,12 +595,21 @@ It is possible to type custom events by extending the `CustomEventMap` interface
 
 ```ts
 // events.d.ts
+import 'vite'
 import 'vite/client/types'
 
+interface MyCustomEventMap {
+  'custom:foo': { msg: string }
+  // 'event-key': payload
+}
+
+// extend interface for server-side
+declare module 'vite' {
+  interface CustomEventMap extends MyCustomEventMap {}
+}
+
+// extend interface for client-side
 declare module 'vite/client/types' {
-  interface CustomEventMap {
-    'custom:foo': { msg: string }
-    // 'event-key': payload
-  }
+  interface CustomEventMap extends MyCustomEventMap {}
 }
 ```
diff --git a/playground/hmr/event.d.ts b/playground/hmr/event.d.ts
index 486f66c4dd22ab..5b4818294ed744 100644
--- a/playground/hmr/event.d.ts
+++ b/playground/hmr/event.d.ts
@@ -1,9 +1,16 @@
+import 'vite'
 import 'vite/client/types'
 
+interface MyCustomEventMap {
+  'custom:foo': { msg: string }
+  'custom:remote-add': { a: number; b: number }
+  'custom:remote-add-result': { result: string }
+}
+
+declare module 'vite' {
+  interface CustomEventMap extends MyCustomEventMap {}
+}
+
 declare module 'vite/client/types' {
-  interface CustomEventMap {
-    'custom:foo': { msg: string }
-    'custom:remote-add': { a: number; b: number }
-    'custom:remote-add-result': { result: string }
-  }
+  interface CustomEventMap extends MyCustomEventMap {}
 }