diff --git a/theme/src/client/components/Blog/VPBlog.vue b/theme/src/client/components/Blog/VPBlog.vue
index 02141d35..e6fdaadd 100644
--- a/theme/src/client/components/Blog/VPBlog.vue
+++ b/theme/src/client/components/Blog/VPBlog.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
+import VPPostList from '@theme/Blog/VPPostList.vue'
+import VPBlogArchives from '@theme/Blog/VPBlogArchives.vue'
+import VPBlogAside from '@theme/Blog/VPBlogAside.vue'
+import VPBlogExtract from '@theme/Blog/VPBlogExtract.vue'
+import VPBlogTags from '@theme/Blog/VPBlogTags.vue'
+import VPBlogNav from '@theme/Blog/VPBlogNav.vue'
+import VPTransitionFadeSlideY from '@theme/VPTransitionFadeSlideY.vue'
 import { useData } from '../../composables/data.js'
-import VPTransitionFadeSlideY from '../VPTransitionFadeSlideY.vue'
-import VPPostList from './VPPostList.vue'
-import VPBlogArchives from './VPBlogArchives.vue'
-import VPBlogAside from './VPBlogAside.vue'
-import VPBlogExtract from './VPBlogExtract.vue'
-import VPBlogTags from './VPBlogTags.vue'
-import VPBlogNav from './VPBlogNav.vue'
 
 const { theme, page } = useData()
 
diff --git a/theme/src/client/components/Blog/VPBlogArchives.vue b/theme/src/client/components/Blog/VPBlogArchives.vue
index b9ca2063..567daab6 100644
--- a/theme/src/client/components/Blog/VPBlogArchives.vue
+++ b/theme/src/client/components/Blog/VPBlogArchives.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
+import VPShortPostList from '@theme/Blog/VPShortPostList.vue'
 import { useArchives, useBlogExtract } from '../../composables/blog.js'
-import VPShortPostList from './VPShortPostList.vue'
 
 const { archives: archivesLink } = useBlogExtract()
 const { archives } = useArchives()
diff --git a/theme/src/client/components/Blog/VPBlogAside.vue b/theme/src/client/components/Blog/VPBlogAside.vue
index 77931593..2c2a85f1 100644
--- a/theme/src/client/components/Blog/VPBlogAside.vue
+++ b/theme/src/client/components/Blog/VPBlogAside.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import VPBlogNav from '@theme/Blog/VPBlogNav.vue'
+import VPBlogProfile from '@theme/Blog/VPBlogProfile.vue'
 import { useData } from '../../composables/data.js'
-import VPBlogNav from './VPBlogNav.vue'
-import VPBlogProfile from './VPBlogProfile.vue'
 
 const { theme } = useData()
 </script>
diff --git a/theme/src/client/components/Blog/VPBlogExtract.vue b/theme/src/client/components/Blog/VPBlogExtract.vue
index 4b7ee1bc..85536ae2 100644
--- a/theme/src/client/components/Blog/VPBlogExtract.vue
+++ b/theme/src/client/components/Blog/VPBlogExtract.vue
@@ -3,10 +3,10 @@ import { useScrollLock } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 import { useRoute, withBase } from 'vuepress/client'
 import { isLinkHttp } from 'vuepress/shared'
+import VPLink from '@theme/VPLink.vue'
 import { useBlogExtract } from '../../composables/blog.js'
 import { useData } from '../../composables/data.js'
 import { inBrowser } from '../../utils/index.js'
-import VPLink from '../VPLink.vue'
 
 const { theme } = useData()
 const route = useRoute()
diff --git a/theme/src/client/components/Blog/VPBlogNav.vue b/theme/src/client/components/Blog/VPBlogNav.vue
index cf75d672..005ecd6d 100644
--- a/theme/src/client/components/Blog/VPBlogNav.vue
+++ b/theme/src/client/components/Blog/VPBlogNav.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useRoute } from 'vuepress/client'
+import VPLink from '@theme/VPLink.vue'
 import { useBlogExtract } from '../../composables/blog.js'
-import VPLink from '../VPLink.vue'
 
 const props = defineProps<{
   isLocal?: boolean
diff --git a/theme/src/client/components/Blog/VPBlogProfile.vue b/theme/src/client/components/Blog/VPBlogProfile.vue
index 7118cfe5..adf0ee13 100644
--- a/theme/src/client/components/Blog/VPBlogProfile.vue
+++ b/theme/src/client/components/Blog/VPBlogProfile.vue
@@ -2,8 +2,8 @@
 import { computed } from 'vue'
 import { withBase } from 'vuepress/client'
 import { isLinkHttp } from 'vuepress/shared'
+import VPSocialLinks from '@theme/VPSocialLinks.vue'
 import { useData } from '../../composables/data.js'
-import VPSocialLinks from '../VPSocialLinks.vue'
 
 const { theme } = useData()
 const avatar = computed(() => theme.value.avatar)
diff --git a/theme/src/client/components/Blog/VPBlogTags.vue b/theme/src/client/components/Blog/VPBlogTags.vue
index 28c713f6..d4e78067 100644
--- a/theme/src/client/components/Blog/VPBlogTags.vue
+++ b/theme/src/client/components/Blog/VPBlogTags.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
+import VPShortPostList from '@theme/Blog/VPShortPostList.vue'
 import { useBlogExtract, useTags } from '../../composables/blog.js'
-import VPShortPostList from './VPShortPostList.vue'
 
 const { tags, currentTag, postList, handleTagClick } = useTags()
 const { tags: tagsLink } = useBlogExtract()
diff --git a/theme/src/client/components/Blog/VPPostItem.vue b/theme/src/client/components/Blog/VPPostItem.vue
index 39582fb3..8f9c764b 100644
--- a/theme/src/client/components/Blog/VPPostItem.vue
+++ b/theme/src/client/components/Blog/VPPostItem.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
+import VPLink from '@theme/VPLink.vue'
 import type { PlumeThemeBlogPostItem } from '../../../shared/index.js'
 import { useTagColors } from '../../composables/tag-colors.js'
-import VPLink from '../VPLink.vue'
 
 const props = defineProps<{
   post: PlumeThemeBlogPostItem
diff --git a/theme/src/client/components/Blog/VPPostList.vue b/theme/src/client/components/Blog/VPPostList.vue
index d5243ebd..f52adc11 100644
--- a/theme/src/client/components/Blog/VPPostList.vue
+++ b/theme/src/client/components/Blog/VPPostList.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
+import VPTransitionDrop from '@theme/VPTransitionDrop.vue'
+import VPPostItem from '@theme/Blog/VPPostItem.vue'
+import VPPagination from '@theme/Blog/VPPagination.vue'
 import { usePostListControl } from '../../composables/blog.js'
-import VPTransitionDrop from '../VPTransitionDrop.vue'
-import VPPostItem from './VPPostItem.vue'
-import VPPagination from './VPPagination.vue'
 
 const {
   postList,
diff --git a/theme/src/client/components/Blog/VPShortPostList.vue b/theme/src/client/components/Blog/VPShortPostList.vue
index 197b5fad..70639ee6 100644
--- a/theme/src/client/components/Blog/VPShortPostList.vue
+++ b/theme/src/client/components/Blog/VPShortPostList.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import VPLink from '../VPLink.vue'
+import VPLink from '@theme/VPLink.vue'
 
 defineProps<{
   postList: {
diff --git a/theme/src/client/components/Home/VPHome.vue b/theme/src/client/components/Home/VPHome.vue
index 1a32a263..8e2b3fa6 100644
--- a/theme/src/client/components/Home/VPHome.vue
+++ b/theme/src/client/components/Home/VPHome.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { type Component, computed, nextTick, onUnmounted, resolveComponent, watch } from 'vue'
+import VPHomeBanner from '@theme/Home/VPHomeBanner.vue'
+import VPHomeHero from '@theme/Home/VPHomeHero.vue'
+import VPHomeFeatures from '@theme/Home/VPHomeFeatures.vue'
+import VPHomeTextImage from '@theme/Home/VPHomeTextImage.vue'
+import VPHomeProfile from '@theme/Home/VPHomeProfile.vue'
+import VPHomeCustom from '@theme/Home/VPHomeCustom.vue'
 import { useData } from '../../composables/data.js'
-import VPHomeBanner from './VPHomeBanner.vue'
-import VPHomeHero from './VPHomeHero.vue'
-import VPHomeFeatures from './VPHomeFeatures.vue'
-import VPHomeTextImage from './VPHomeTextImage.vue'
-import VPHomeProfile from './VPHomeProfile.vue'
-import VPHomeCustom from './VPHomeCustom.vue'
 
 const components: Record<string, Component<any, any, any>> = {
   'banner': VPHomeBanner,
diff --git a/theme/src/client/components/Home/VPHomeBanner.vue b/theme/src/client/components/Home/VPHomeBanner.vue
index 23de6077..c61de58f 100644
--- a/theme/src/client/components/Home/VPHomeBanner.vue
+++ b/theme/src/client/components/Home/VPHomeBanner.vue
@@ -2,9 +2,9 @@
 import { withBase } from 'vuepress/client'
 import { isLinkHttp } from 'vuepress/shared'
 import { computed } from 'vue'
+import VPButton from '@theme/VPButton.vue'
 import type { PlumeThemeHomeBanner } from '../../../shared/index.js'
 import { useData } from '../../composables/data.js'
-import VPButton from '../VPButton.vue'
 
 const props = defineProps<PlumeThemeHomeBanner>()
 
diff --git a/theme/src/client/components/Home/VPHomeCustom.vue b/theme/src/client/components/Home/VPHomeCustom.vue
index 549a5e57..f3e58eb8 100644
--- a/theme/src/client/components/Home/VPHomeCustom.vue
+++ b/theme/src/client/components/Home/VPHomeCustom.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Content } from 'vuepress/client'
+import VPHomeBox from '@theme/Home/VPHomeBox.vue'
 import type { PlumeThemeHomeCustom } from '../../../shared/index.js'
-import VPHomeBox from './VPHomeBox.vue'
 
 const props = defineProps<PlumeThemeHomeCustom>()
 </script>
diff --git a/theme/src/client/components/Home/VPHomeFeature.vue b/theme/src/client/components/Home/VPHomeFeature.vue
index 06789405..fd0f5581 100644
--- a/theme/src/client/components/Home/VPHomeFeature.vue
+++ b/theme/src/client/components/Home/VPHomeFeature.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import VPLink from '@theme/VPLink.vue'
+import VPImage from '@theme/VPImage.vue'
 import type { PlumeThemeHomeFeature } from '../../../shared/index.js'
-import VPLink from '../VPLink.vue'
-import VPImage from '../VPImage.vue'
 
 defineProps<PlumeThemeHomeFeature>()
 </script>
diff --git a/theme/src/client/components/Home/VPHomeFeatures.vue b/theme/src/client/components/Home/VPHomeFeatures.vue
index d9b645b6..4e561e74 100644
--- a/theme/src/client/components/Home/VPHomeFeatures.vue
+++ b/theme/src/client/components/Home/VPHomeFeatures.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import VPHomeFeature from '@theme/Home/VPHomeFeature.vue'
+import VPHomeBox from '@theme/Home/VPHomeBox.vue'
 import type { PlumeThemeHomeFeatures } from '../../../shared/index.js'
-import VPHomeFeature from './VPHomeFeature.vue'
-import VPHomeBox from './VPHomeBox.vue'
 
 const props = defineProps<PlumeThemeHomeFeatures>()
 
diff --git a/theme/src/client/components/Home/VPHomeHero.vue b/theme/src/client/components/Home/VPHomeHero.vue
index a4e3f1cf..7102e7dd 100644
--- a/theme/src/client/components/Home/VPHomeHero.vue
+++ b/theme/src/client/components/Home/VPHomeHero.vue
@@ -2,7 +2,7 @@
 import { withBase } from 'vuepress/client'
 import { isLinkHttp } from 'vuepress/shared'
 import { computed, ref } from 'vue'
-import VPButton from '../VPButton.vue'
+import VPButton from '@theme/VPButton.vue'
 import { useData } from '../../composables/data.js'
 import { useHomeHeroTintPlate } from '../../composables/home.js'
 import type { PlumeThemeHomeHero } from '../../../shared/index.js'
diff --git a/theme/src/client/components/Home/VPHomeProfile.vue b/theme/src/client/components/Home/VPHomeProfile.vue
index 1844b26f..ea336019 100644
--- a/theme/src/client/components/Home/VPHomeProfile.vue
+++ b/theme/src/client/components/Home/VPHomeProfile.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import VPImage from '@theme/VPImage.vue'
+import VPHomeBox from '@theme/Home/VPHomeBox.vue'
 import type { PlumeThemeHomeProfile } from '../../../shared/index.js'
-import VPImage from '../VPImage.vue'
 import { useData } from '../../composables/data.js'
-import VPHomeBox from './VPHomeBox.vue'
 
 const props = defineProps<PlumeThemeHomeProfile>()
 
diff --git a/theme/src/client/components/Home/VPHomeTextImage.vue b/theme/src/client/components/Home/VPHomeTextImage.vue
index 50490b8c..9be6cc30 100644
--- a/theme/src/client/components/Home/VPHomeTextImage.vue
+++ b/theme/src/client/components/Home/VPHomeTextImage.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import VPImage from '@theme/VPImage.vue'
+import VPHomeBox from '@theme/Home/VPHomeBox.vue'
 import type { PlumeThemeHomeTextImage } from '../../../shared/index.js'
-import VPImage from '../VPImage.vue'
-import VPHomeBox from './VPHomeBox.vue'
 
 const props = defineProps<PlumeThemeHomeTextImage>()
 
diff --git a/theme/src/client/components/Nav/VPNav.vue b/theme/src/client/components/Nav/VPNav.vue
index 95389307..fd65ab57 100644
--- a/theme/src/client/components/Nav/VPNav.vue
+++ b/theme/src/client/components/Nav/VPNav.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { computed, provide, watchEffect } from 'vue'
+import VPNavbar from '@theme/Nav/VPNavBar.vue'
+import VPNavScreen from '@theme/Nav/VPNavScreen.vue'
 import { useNav } from '../../composables/nav.js'
 import { useData } from '../../composables/data.js'
 import { inBrowser } from '../../utils/index.js'
-import VPNavbar from './VPNavBar.vue'
-import VPNavScreen from './VPNavScreen.vue'
 
 const { page, frontmatter } = useData()
 
diff --git a/theme/src/client/components/Nav/VPNavBar.vue b/theme/src/client/components/Nav/VPNavBar.vue
index fa069c37..9ace5d69 100644
--- a/theme/src/client/components/Nav/VPNavBar.vue
+++ b/theme/src/client/components/Nav/VPNavBar.vue
@@ -1,16 +1,16 @@
 <script lang="ts" setup>
 import { useWindowScroll } from '@vueuse/core'
 import { ref, watchPostEffect } from 'vue'
-import { useSidebar } from '../../composables/sidebar.js'
+import VPNavBarAppearance from '@theme/Nav/VPNavBarAppearance.vue'
+import VPNavBarExtra from '@theme/Nav/VPNavBarExtra.vue'
+import VPNavBarHamburger from '@theme/Nav/VPNavBarHamburger.vue'
+import VPNavBarMenu from '@theme/Nav/VPNavBarMenu.vue'
+import VPNavBarSearch from '@theme/Nav/VPNavBarSearch.vue'
+import VPNavBarSocialLinks from '@theme/Nav/VPNavBarSocialLinks.vue'
+import VPNavBarTitle from '@theme/Nav/VPNavBarTitle.vue'
+import VPNavBarTranslations from '@theme/Nav/VPNavBarTranslations.vue'
 import { useData } from '../../composables/data.js'
-import VPNavBarAppearance from './VPNavBarAppearance.vue'
-import VPNavBarExtra from './VPNavBarExtra.vue'
-import VPNavBarHamburger from './VPNavBarHamburger.vue'
-import VPNavBarMenu from './VPNavBarMenu.vue'
-import VPNavBarSearch from './VPNavBarSearch.vue'
-import VPNavBarSocialLinks from './VPNavBarSocialLinks.vue'
-import VPNavBarTitle from './VPNavBarTitle.vue'
-import VPNavBarTranslations from './VPNavBarTranslations.vue'
+import { useSidebar } from '../../composables/sidebar.js'
 
 defineProps<{
   isScreenOpen: boolean
diff --git a/theme/src/client/components/Nav/VPNavBarAppearance.vue b/theme/src/client/components/Nav/VPNavBarAppearance.vue
index 0511ba86..d6b64bf4 100644
--- a/theme/src/client/components/Nav/VPNavBarAppearance.vue
+++ b/theme/src/client/components/Nav/VPNavBarAppearance.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
+import VPSwitchAppearance from '@theme/VPSwitchAppearance.vue'
 import { useData } from '../../composables/data.js'
-import VPSwitchAppearance from '../VPSwitchAppearance.vue'
 
 const { theme } = useData()
 </script>
diff --git a/theme/src/client/components/Nav/VPNavBarExtra.vue b/theme/src/client/components/Nav/VPNavBarExtra.vue
index b28353d7..d2411bdf 100644
--- a/theme/src/client/components/Nav/VPNavBarExtra.vue
+++ b/theme/src/client/components/Nav/VPNavBarExtra.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { useData } from '../../composables/data.js'
+import VPFlyout from '@theme/VPFlyout.vue'
+import VPMenuLink from '@theme/VPMenuLink.vue'
+import VPSocialLinks from '@theme/VPSocialLinks.vue'
+import VPSwitchAppearance from '@theme/VPSwitchAppearance.vue'
 import { useLangs } from '../../composables/langs.js'
-import VPFlyout from '../VPFlyout.vue'
-import VPMenuLink from '../VPMenuLink.vue'
-import VPSocialLinks from '../VPSocialLinks.vue'
-import VPSwitchAppearance from '../VPSwitchAppearance.vue'
+import { useData } from '../../composables/data.js'
 
 const { theme } = useData()
 const { localeLinks, currentLang } = useLangs()
diff --git a/theme/src/client/components/Nav/VPNavBarMenu.vue b/theme/src/client/components/Nav/VPNavBarMenu.vue
index 95c11493..c3c9fdb1 100644
--- a/theme/src/client/components/Nav/VPNavBarMenu.vue
+++ b/theme/src/client/components/Nav/VPNavBarMenu.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import VPNavBarMenuGroup from '@theme/Nav/VPNavBarMenuGroup.vue'
+import VPNavBarMenuLink from '@theme/Nav/VPNavBarMenuLink.vue'
 import { useData } from '../../composables/data.js'
-import VPNavBarMenuGroup from './VPNavBarMenuGroup.vue'
-import VPNavBarMenuLink from './VPNavBarMenuLink.vue'
 
 const { theme } = useData()
 </script>
diff --git a/theme/src/client/components/Nav/VPNavBarMenuGroup.vue b/theme/src/client/components/Nav/VPNavBarMenuGroup.vue
index 468c0994..827b84ce 100644
--- a/theme/src/client/components/Nav/VPNavBarMenuGroup.vue
+++ b/theme/src/client/components/Nav/VPNavBarMenuGroup.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { resolveRouteFullPath } from 'vuepress/client'
+import VPFlyout from '@theme/VPFlyout.vue'
 import type { NavItem, NavItemWithChildren } from '../../../shared/index.js'
 import { isActive } from '../../utils/index.js'
-import VPFlyout from '../VPFlyout.vue'
 import { useData } from '../../composables/data.js'
 
 const props = defineProps<{
diff --git a/theme/src/client/components/Nav/VPNavBarMenuLink.vue b/theme/src/client/components/Nav/VPNavBarMenuLink.vue
index 3456a1dd..d92524bb 100644
--- a/theme/src/client/components/Nav/VPNavBarMenuLink.vue
+++ b/theme/src/client/components/Nav/VPNavBarMenuLink.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { resolveRoutePath } from 'vuepress/client'
+import VPLink from '@theme/VPLink.vue'
+import VPIcon from '@theme/VPIcon.vue'
 import type { NavItemWithLink } from '../../../shared/index.js'
 import { isActive } from '../../utils/index.js'
-import VPLink from '../VPLink.vue'
-import VPIcon from '../VPIcon.vue'
 import { useData } from '../../composables/data.js'
 
 defineProps<{
diff --git a/theme/src/client/components/Nav/VPNavBarSocialLinks.vue b/theme/src/client/components/Nav/VPNavBarSocialLinks.vue
index 2373b85b..cfcc965e 100644
--- a/theme/src/client/components/Nav/VPNavBarSocialLinks.vue
+++ b/theme/src/client/components/Nav/VPNavBarSocialLinks.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
+import VPSocialLinks from '@theme/VPSocialLinks.vue'
 import { useData } from '../../composables/data.js'
-import VPSocialLinks from '../VPSocialLinks.vue'
 
 const { theme } = useData()
 
diff --git a/theme/src/client/components/Nav/VPNavBarTitle.vue b/theme/src/client/components/Nav/VPNavBarTitle.vue
index 2c34f006..21386f12 100644
--- a/theme/src/client/components/Nav/VPNavBarTitle.vue
+++ b/theme/src/client/components/Nav/VPNavBarTitle.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { useRouteLocale } from 'vuepress/client'
+import VPLink from '@theme/VPLink.vue'
+import VPImage from '@theme/VPImage.vue'
 import { useSidebar } from '../../composables/sidebar.js'
 import { useData } from '../../composables/data.js'
-import VPLink from '../VPLink.vue'
-import VPImage from '../VPImage.vue'
 
 const { theme, site } = useData()
 const { hasSidebar } = useSidebar()
diff --git a/theme/src/client/components/Nav/VPNavBarTranslations.vue b/theme/src/client/components/Nav/VPNavBarTranslations.vue
index 45618772..faad7feb 100644
--- a/theme/src/client/components/Nav/VPNavBarTranslations.vue
+++ b/theme/src/client/components/Nav/VPNavBarTranslations.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
+import VPFlyout from '@theme/VPFlyout.vue'
+import VPMenuLink from '@theme/VPMenuLink.vue'
 import { useLangs } from '../../composables/langs.js'
 import { useData } from '../../composables/data.js'
-import VPFlyout from '../VPFlyout.vue'
-import VPMenuLink from '../VPMenuLink.vue'
 
 const { theme } = useData()
 const { currentLang, localeLinks } = useLangs()
diff --git a/theme/src/client/components/Nav/VPNavScreen.vue b/theme/src/client/components/Nav/VPNavScreen.vue
index aa4c8ea6..be00b6a7 100644
--- a/theme/src/client/components/Nav/VPNavScreen.vue
+++ b/theme/src/client/components/Nav/VPNavScreen.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { useScrollLock } from '@vueuse/core'
+import VPNavScreenAppearance from '@theme/Nav/VPNavScreenAppearance.vue'
+import VPNavScreenMenu from '@theme/Nav/VPNavScreenMenu.vue'
+import VPNavScreenSocialLinks from '@theme/Nav/VPNavScreenSocialLinks.vue'
+import VPNavScreenTranslates from '@theme/Nav/VPNavScreenTranslations.vue'
 import { inBrowser } from '../../utils/index.js'
-import VPNavScreenAppearance from './VPNavScreenAppearance.vue'
-import VPNavScreenMenu from './VPNavScreenMenu.vue'
-import VPNavScreenSocialLinks from './VPNavScreenSocialLinks.vue'
-import VPNavScreenTranslates from './VPNavScreenTranslations.vue'
 
 defineProps<{
   open: boolean
diff --git a/theme/src/client/components/Nav/VPNavScreenAppearance.vue b/theme/src/client/components/Nav/VPNavScreenAppearance.vue
index eea19ff7..8824b0cf 100644
--- a/theme/src/client/components/Nav/VPNavScreenAppearance.vue
+++ b/theme/src/client/components/Nav/VPNavScreenAppearance.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
+import VPSwitchAppearance from '@theme/VPSwitchAppearance.vue'
 import { useData } from '../../composables/data.js'
-import VPSwitchAppearance from '../VPSwitchAppearance.vue'
 
 const { theme } = useData()
 </script>
diff --git a/theme/src/client/components/Nav/VPNavScreenMenu.vue b/theme/src/client/components/Nav/VPNavScreenMenu.vue
index 275ab1fc..e0561034 100644
--- a/theme/src/client/components/Nav/VPNavScreenMenu.vue
+++ b/theme/src/client/components/Nav/VPNavScreenMenu.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import VPNavScreenMenuGroup from '@theme/Nav/VPNavScreenMenuGroup.vue'
+import VPNavScreenMenuLink from '@theme/Nav/VPNavScreenMenuLink.vue'
 import { useData } from '../../composables/data.js'
-import VPNavScreenMenuGroup from './VPNavScreenMenuGroup.vue'
-import VPNavScreenMenuLink from './VPNavScreenMenuLink.vue'
 
 const { theme } = useData()
 </script>
diff --git a/theme/src/client/components/Nav/VPNavScreenMenuGroup.vue b/theme/src/client/components/Nav/VPNavScreenMenuGroup.vue
index 44ead460..3bd2fa2d 100644
--- a/theme/src/client/components/Nav/VPNavScreenMenuGroup.vue
+++ b/theme/src/client/components/Nav/VPNavScreenMenuGroup.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import VPIcon from '../VPIcon.vue'
-import VPNavScreenMenuGroupLink from './VPNavScreenMenuGroupLink.vue'
-import VPNavScreenMenuGroupSection from './VPNavScreenMenuGroupSection.vue'
+import VPIcon from '@theme/VPIcon.vue'
+import VPNavScreenMenuGroupLink from '@theme/Nav/VPNavScreenMenuGroupLink.vue'
+import VPNavScreenMenuGroupSection from '@theme/Nav/VPNavScreenMenuGroupSection.vue'
 
 const props = defineProps<{
   text: string
diff --git a/theme/src/client/components/Nav/VPNavScreenMenuGroupLink.vue b/theme/src/client/components/Nav/VPNavScreenMenuGroupLink.vue
index cd1c084e..0fa22cf5 100644
--- a/theme/src/client/components/Nav/VPNavScreenMenuGroupLink.vue
+++ b/theme/src/client/components/Nav/VPNavScreenMenuGroupLink.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { inject } from 'vue'
-import VPLink from '../VPLink.vue'
-import VPIcon from '../VPIcon.vue'
+import VPLink from '@theme/VPLink.vue'
+import VPIcon from '@theme/VPIcon.vue'
 
 defineProps<{
   icon?: string | { svg: string }
diff --git a/theme/src/client/components/Nav/VPNavScreenMenuGroupSection.vue b/theme/src/client/components/Nav/VPNavScreenMenuGroupSection.vue
index f3e0faed..84d0d06d 100644
--- a/theme/src/client/components/Nav/VPNavScreenMenuGroupSection.vue
+++ b/theme/src/client/components/Nav/VPNavScreenMenuGroupSection.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import VPIcon from '@theme/VPIcon.vue'
+import VPNavScreenMenuGroupLink from '@theme/Nav/VPNavScreenMenuGroupLink.vue'
 import type { NavItemWithLink } from '../../../shared/index.js'
-import VPIcon from '../VPIcon.vue'
-import VPNavScreenMenuGroupLink from './VPNavScreenMenuGroupLink.vue'
 
 defineProps<{
   icon?: string | { svg: string }
diff --git a/theme/src/client/components/Nav/VPNavScreenMenuLink.vue b/theme/src/client/components/Nav/VPNavScreenMenuLink.vue
index aba938df..ccb11796 100644
--- a/theme/src/client/components/Nav/VPNavScreenMenuLink.vue
+++ b/theme/src/client/components/Nav/VPNavScreenMenuLink.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { inject } from 'vue'
-import VPLink from '../VPLink.vue'
-import VPIcon from '../VPIcon.vue'
+import VPLink from '@theme/VPLink.vue'
+import VPIcon from '@theme/VPIcon.vue'
 
 defineProps<{
   text: string
diff --git a/theme/src/client/components/Nav/VPNavScreenSocialLinks.vue b/theme/src/client/components/Nav/VPNavScreenSocialLinks.vue
index 76d313db..81369dd9 100644
--- a/theme/src/client/components/Nav/VPNavScreenSocialLinks.vue
+++ b/theme/src/client/components/Nav/VPNavScreenSocialLinks.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
+import VPSocialLinks from '@theme/VPSocialLinks.vue'
 import { useData } from '../../composables/data.js'
-import VPSocialLinks from '../VPSocialLinks.vue'
 
 const { theme } = useData()
 </script>
diff --git a/theme/src/client/components/Nav/VPNavScreenTranslations.vue b/theme/src/client/components/Nav/VPNavScreenTranslations.vue
index 592dae40..b91dba74 100644
--- a/theme/src/client/components/Nav/VPNavScreenTranslations.vue
+++ b/theme/src/client/components/Nav/VPNavScreenTranslations.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import VPLink from '@theme/VPLink.vue'
 import { useLangs } from '../../composables/langs.js'
-import VPLink from '../VPLink.vue'
 
 const { localeLinks, currentLang } = useLangs()
 const isOpen = ref(false)
diff --git a/theme/src/client/components/VPContent.vue b/theme/src/client/components/VPContent.vue
index a45e6625..5cf17e00 100644
--- a/theme/src/client/components/VPContent.vue
+++ b/theme/src/client/components/VPContent.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import VPBlog from '@theme/Blog/VPBlog.vue'
+import VPDoc from '@theme/VPDoc.vue'
+import VPPage from '@theme/VPPage.vue'
+import VPHome from '@theme/Home/VPHome.vue'
+import VPFriends from '@theme/VPFriends.vue'
 import { useData, useSidebar } from '../composables/index.js'
-import VPBlog from './Blog/VPBlog.vue'
-import VPDoc from './VPDoc.vue'
-import VPPage from './VPPage.vue'
-import VPHome from './Home/VPHome.vue'
-import VPFriends from './VPFriends.vue'
 
 const props = defineProps<{
   isNotFound?: boolean
diff --git a/theme/src/client/components/VPDoc.vue b/theme/src/client/components/VPDoc.vue
index 80dbff93..542c51d8 100644
--- a/theme/src/client/components/VPDoc.vue
+++ b/theme/src/client/components/VPDoc.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from 'vue'
 import { useRoute } from 'vuepress/client'
-import { useData } from '../composables/data.js'
-import { useSidebar } from '../composables/sidebar.js'
+import VPTransitionFadeSlideY from '@theme/VPTransitionFadeSlideY.vue'
+import VPDocAside from '@theme/VPDocAside.vue'
+import VPDocFooter from '@theme/VPDocFooter.vue'
+import VPEncryptPage from '@theme/VPEncryptPage.vue'
+import VPDocMeta from '@theme/VPDocMeta.vue'
 import { usePageEncrypt } from '../composables/encrypt.js'
-import VPTransitionFadeSlideY from './VPTransitionFadeSlideY.vue'
-import VPDocAside from './VPDocAside.vue'
-import VPDocFooter from './VPDocFooter.vue'
-import VPEncryptPage from './VPEncryptPage.vue'
-import VPDocMeta from './VPDocMeta.vue'
+import { useSidebar } from '../composables/sidebar.js'
+import { useData } from '../composables/data.js'
 
 const { page, theme, frontmatter, isDark } = useData()
 const route = useRoute()
diff --git a/theme/src/client/components/VPDocAside.vue b/theme/src/client/components/VPDocAside.vue
index 98e0a1dc..a9da24e4 100644
--- a/theme/src/client/components/VPDocAside.vue
+++ b/theme/src/client/components/VPDocAside.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import VPDocAsideOutline from './VPDocAsideOutline.vue'
+import VPDocAsideOutline from '@theme/VPDocAsideOutline.vue'
 </script>
 
 <template>
diff --git a/theme/src/client/components/VPDocAsideOutline.vue b/theme/src/client/components/VPDocAsideOutline.vue
index 4142a70d..1c8397f4 100644
--- a/theme/src/client/components/VPDocAsideOutline.vue
+++ b/theme/src/client/components/VPDocAsideOutline.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
 import { onContentUpdated } from '@vuepress-plume/plugin-content-update/client'
+import VPDocOutlineItem from '@theme/VPDocOutlineItem.vue'
 import { type MenuItem, getHeaders, useActiveAnchor } from '../composables/outline.js'
 import { useData } from '../composables/data.js'
-import VPDocOutlineItem from './VPDocOutlineItem.vue'
 
 const { theme, frontmatter } = useData()
 
diff --git a/theme/src/client/components/VPDocFooter.vue b/theme/src/client/components/VPDocFooter.vue
index 125587bb..37ad0782 100644
--- a/theme/src/client/components/VPDocFooter.vue
+++ b/theme/src/client/components/VPDocFooter.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
+import VPLink from '@theme/VPLink.vue'
 import {
   useContributors,
   useEditNavLink,
@@ -7,7 +8,6 @@ import {
   usePageNav,
 } from '../composables/page.js'
 import { useData } from '../composables/data.js'
-import VPLink from './VPLink.vue'
 
 const { theme } = useData()
 const editNavLink = useEditNavLink()
diff --git a/theme/src/client/components/VPEncryptGlobal.vue b/theme/src/client/components/VPEncryptGlobal.vue
index eab6fee2..0dab1c2c 100644
--- a/theme/src/client/components/VPEncryptGlobal.vue
+++ b/theme/src/client/components/VPEncryptGlobal.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import VPFooter from '@theme/VPFooter.vue'
+import VPEncryptForm from '@theme/VPEncryptForm.vue'
 import { useData } from '../composables/data.js'
 import { useGlobalEncrypt } from '../composables/encrypt.js'
-import VPFooter from './VPFooter.vue'
-import VPEncryptForm from './VPEncryptForm.vue'
 
 const { theme, site } = useData()
 const { compareGlobal } = useGlobalEncrypt()
diff --git a/theme/src/client/components/VPEncryptPage.vue b/theme/src/client/components/VPEncryptPage.vue
index a24204fd..0d42505d 100644
--- a/theme/src/client/components/VPEncryptPage.vue
+++ b/theme/src/client/components/VPEncryptPage.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import VPEncryptForm from '@theme/VPEncryptForm.vue'
 import { usePageEncrypt } from '../composables/encrypt.js'
 import { useData } from '../composables/data.js'
-import VPEncryptForm from './VPEncryptForm.vue'
 
 const { theme } = useData()
 const { comparePage } = usePageEncrypt()
diff --git a/theme/src/client/components/VPFlyout.vue b/theme/src/client/components/VPFlyout.vue
index 47285179..ce0c8f66 100644
--- a/theme/src/client/components/VPFlyout.vue
+++ b/theme/src/client/components/VPFlyout.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
+import VPIcon from '@theme/VPIcon.vue'
+import VPMenu from '@theme/VPMenu.vue'
 import { useFlyout } from '../composables/flyout.js'
-import VPIcon from './VPIcon.vue'
-import VPMenu from './VPMenu.vue'
 
 defineProps<{
   prefixIcon?: string | { svg: string }
diff --git a/theme/src/client/components/VPFriends.vue b/theme/src/client/components/VPFriends.vue
index af2fb39e..515c2b3d 100644
--- a/theme/src/client/components/VPFriends.vue
+++ b/theme/src/client/components/VPFriends.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { useData } from '../composables/data.js'
+import VPLink from '@theme/VPLink.vue'
+import VPFriendsItem from '@theme/VPFriendsItem.vue'
+import VPFriendsGroup from '@theme/VPFriendsGroup.vue'
 import { useEditNavLink } from '../composables/page.js'
-import VPLink from './VPLink.vue'
-import VPFriendsItem from './VPFriendsItem.vue'
-import VPFriendsGroup from './VPFriendsGroup.vue'
+import { useData } from '../composables/data.js'
 
 const editNavLink = useEditNavLink()
 const { frontmatter: matter } = useData<'friends'>()
diff --git a/theme/src/client/components/VPFriendsGroup.vue b/theme/src/client/components/VPFriendsGroup.vue
index eef90f99..6bcbe799 100644
--- a/theme/src/client/components/VPFriendsGroup.vue
+++ b/theme/src/client/components/VPFriendsGroup.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
+import VPFriendsItem from '@theme/VPFriendsItem.vue'
 import type { FriendGroup } from '../../shared/index.js'
-import VPFriendsItem from './VPFriendsItem.vue'
 
 defineProps<{
   group: FriendGroup
diff --git a/theme/src/client/components/VPFriendsItem.vue b/theme/src/client/components/VPFriendsItem.vue
index 3d851ada..0d585c14 100644
--- a/theme/src/client/components/VPFriendsItem.vue
+++ b/theme/src/client/components/VPFriendsItem.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { isPlainObject } from '@vuepress/helper/client'
 import { computed } from 'vue'
+import VPLink from '@theme/VPLink.vue'
 import type { FriendsItem } from '../../shared/index'
 import { useDarkMode } from '../composables/dark-mode.js'
-import VPLink from './VPLink.vue'
 
 const props = defineProps<{
   friend: FriendsItem
diff --git a/theme/src/client/components/VPLocalNav.vue b/theme/src/client/components/VPLocalNav.vue
index c0c81c7c..c96cdc67 100644
--- a/theme/src/client/components/VPLocalNav.vue
+++ b/theme/src/client/components/VPLocalNav.vue
@@ -2,10 +2,10 @@
 import { useWindowScroll } from '@vueuse/core'
 import { computed, onMounted, ref } from 'vue'
 import { onContentUpdated } from '@vuepress-plume/plugin-content-update/client'
+import VPLocalNavOutlineDropdown from '@theme/VPLocalNavOutlineDropdown.vue'
 import { useSidebar } from '../composables/sidebar.js'
 import { type MenuItem, getHeaders } from '../composables/outline.js'
 import { useData } from '../composables/data.js'
-import VPLocalNavOutlineDropdown from './VPLocalNavOutlineDropdown.vue'
 
 const props = defineProps<{
   open: boolean
diff --git a/theme/src/client/components/VPLocalNavOutlineDropdown.vue b/theme/src/client/components/VPLocalNavOutlineDropdown.vue
index d3e2ae2b..572e0362 100644
--- a/theme/src/client/components/VPLocalNavOutlineDropdown.vue
+++ b/theme/src/client/components/VPLocalNavOutlineDropdown.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { onClickOutside } from '@vueuse/core'
 import { nextTick, ref, watch } from 'vue'
+import VPDocOutlineItem from '@theme/VPDocOutlineItem.vue'
 import type { MenuItem } from '../composables/outline.js'
 import { useData } from '../composables/data.js'
-import VPDocOutlineItem from './VPDocOutlineItem.vue'
 
 const props = defineProps<{
   headers: MenuItem[]
diff --git a/theme/src/client/components/VPMenu.vue b/theme/src/client/components/VPMenu.vue
index 890a1a9f..fd47243b 100644
--- a/theme/src/client/components/VPMenu.vue
+++ b/theme/src/client/components/VPMenu.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import VPMenuGroup from './VPMenuGroup.vue'
-import VPMenuLink from './VPMenuLink.vue'
+import VPMenuGroup from '@theme/VPMenuGroup.vue'
+import VPMenuLink from '@theme/VPMenuLink.vue'
 
 defineProps<{
   items?: any[]
diff --git a/theme/src/client/components/VPMenuGroup.vue b/theme/src/client/components/VPMenuGroup.vue
index 3148253c..70b8102b 100644
--- a/theme/src/client/components/VPMenuGroup.vue
+++ b/theme/src/client/components/VPMenuGroup.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import VPIcon from './VPIcon.vue'
-import VPMenuLink from './VPMenuLink.vue'
+import VPIcon from '@theme/VPIcon.vue'
+import VPMenuLink from '@theme/VPMenuLink.vue'
 
 defineProps<{
   text?: string
diff --git a/theme/src/client/components/VPMenuLink.vue b/theme/src/client/components/VPMenuLink.vue
index 9118d30d..d74581d6 100644
--- a/theme/src/client/components/VPMenuLink.vue
+++ b/theme/src/client/components/VPMenuLink.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
+import VPLink from '@theme/VPLink.vue'
+import VPIcon from '@theme/VPIcon.vue'
 import { useData } from '../composables/data.js'
 import { isActive } from '../utils/index.js'
-import VPLink from './VPLink.vue'
-import VPIcon from './VPIcon.vue'
 
 defineProps<{
   item: any
diff --git a/theme/src/client/components/VPSidebar.vue b/theme/src/client/components/VPSidebar.vue
index e30b935c..4ded9b4c 100644
--- a/theme/src/client/components/VPSidebar.vue
+++ b/theme/src/client/components/VPSidebar.vue
@@ -2,10 +2,10 @@
 import { useScrollLock } from '@vueuse/core'
 import { onMounted, ref, watch } from 'vue'
 import { useRoutePath } from 'vuepress/client'
+import VPSidebarItem from '@theme/VPSidebarItem.vue'
+import VPTransitionFadeSlideY from '@theme/VPTransitionFadeSlideY.vue'
 import { useSidebar } from '../composables/sidebar.js'
 import { inBrowser } from '../utils/index.js'
-import VPSidebarItem from './VPSidebarItem.vue'
-import VPTransitionFadeSlideY from './VPTransitionFadeSlideY.vue'
 
 const props = defineProps<{
   open: boolean
diff --git a/theme/src/client/components/VPSidebarItem.vue b/theme/src/client/components/VPSidebarItem.vue
index 4263ee45..f76a4de1 100644
--- a/theme/src/client/components/VPSidebarItem.vue
+++ b/theme/src/client/components/VPSidebarItem.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { NotesSidebarItem } from '@vuepress-plume/plugin-notes-data'
 import { computed } from 'vue'
+import VPLink from '@theme/VPLink.vue'
+import VPIcon from '@theme/VPIcon.vue'
 import { useSidebarControl } from '../composables/sidebar.js'
-import VPLink from './VPLink.vue'
-import VPIcon from './VPIcon.vue'
 
 const props = defineProps<{
   item: NotesSidebarItem
diff --git a/theme/src/client/components/VPSocialLinks.vue b/theme/src/client/components/VPSocialLinks.vue
index 019d7c2a..4bf2e292 100644
--- a/theme/src/client/components/VPSocialLinks.vue
+++ b/theme/src/client/components/VPSocialLinks.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
+import VPSocialLink from '@theme/VPSocialLink.vue'
 import type { SocialLink as SocialLinkType } from '../../shared/index.js'
-import VPSocialLink from './VPSocialLink.vue'
 
 defineProps<{
   links: SocialLinkType[]
diff --git a/theme/src/client/components/VPSwitchAppearance.vue b/theme/src/client/components/VPSwitchAppearance.vue
index a7dbbc70..9454d673 100644
--- a/theme/src/client/components/VPSwitchAppearance.vue
+++ b/theme/src/client/components/VPSwitchAppearance.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, inject, ref } from 'vue'
+import VPSwitch from '@theme/VPSwitch.vue'
 import { useData } from '../composables/data.js'
-import VPSwitch from './VPSwitch.vue'
 
 const checked = ref(false)
 const { theme, isDark } = useData()
diff --git a/theme/src/node/theme.ts b/theme/src/node/theme.ts
index 1d6a24d9..09d10813 100644
--- a/theme/src/node/theme.ts
+++ b/theme/src/node/theme.ts
@@ -1,4 +1,5 @@
 import type { Page, Theme } from 'vuepress/core'
+import { fs } from 'vuepress/utils'
 import { isPlainObject } from '@vuepress/helper'
 import type { PlumeThemeOptions, PlumeThemePageData } from '../shared/index.js'
 import { getPlugins } from './plugins/index.js'
@@ -43,6 +44,20 @@ export function plumeTheme({
 
       clientConfigFile: resolve('client/config.js'),
 
+      alias: {
+        ...Object.fromEntries(
+          fs.readdirSync(
+            resolve('client/components'),
+            { encoding: 'utf-8', recursive: true },
+          )
+            .filter(file => file.endsWith('.vue'))
+            .map(file => [
+              `@theme/${file}`,
+              resolve('client/components', file),
+            ]),
+        ),
+      },
+
       plugins: getPlugins({ app, pluginOptions, localeOptions, encrypt, hostname }),
 
       onInitialized: async (app) => {
diff --git a/tsconfig.json b/tsconfig.json
index 8ed919f2..7f03ce3a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -24,6 +24,9 @@
       ],
       "vuepress-plugin-md-power": [
         "./plugins/plugin-md-power/src/node/index.ts"
+      ],
+      "@theme/*": [
+        "./theme/src/client/components/*"
       ]
     },
     "types": ["webpack-env", "vite/client", "vuepress/client-types"]