From f0369f46ae3606137fad40e8f6b0e359a9095500 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Sun, 30 Jun 2024 14:36:40 +0530
Subject: [PATCH] use extends

---
 __tests__/e2e/.vitepress/theme/index.ts | 2 +-
 docs/en/reference/default-theme-nav.md  | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/__tests__/e2e/.vitepress/theme/index.ts b/__tests__/e2e/.vitepress/theme/index.ts
index 97df67f0..1b8e6128 100644
--- a/__tests__/e2e/.vitepress/theme/index.ts
+++ b/__tests__/e2e/.vitepress/theme/index.ts
@@ -3,7 +3,7 @@ import DefaultTheme from 'vitepress/theme'
 import CustomAppearance from './CustomAppearance.vue'
 
 export default {
-  ...DefaultTheme,
+  extends: DefaultTheme,
   enhanceApp({ app }) {
     app.component('CustomAppearance', CustomAppearance)
   }
diff --git a/docs/en/reference/default-theme-nav.md b/docs/en/reference/default-theme-nav.md
index d9cada20..6ff62ac3 100644
--- a/docs/en/reference/default-theme-nav.md
+++ b/docs/en/reference/default-theme-nav.md
@@ -192,14 +192,17 @@ Then, you need to register the component globally:
 
 ```js
 // .vitepress/theme/index.js
-import AnotherCustomComponent from './components/AnotherCustomComponent.vue'
+import DefaultTheme from 'vitepress/theme'
+
 import MyCustomComponent from './components/MyCustomComponent.vue'
+import AnotherCustomComponent from './components/AnotherCustomComponent.vue'
 
 /** @type {import('vitepress').Theme} */
 export default {
+  extends: DefaultTheme,
   enhanceApp({ app }) {
-    app.component('AnotherCustomComponent', AnotherCustomComponent)
     app.component('MyCustomComponent', MyCustomComponent)
+    app.component('AnotherCustomComponent', AnotherCustomComponent)
   }
 }
 ```