diff --git a/packages/docs/.vitepress/theme/components/Layout.vue b/packages/docs/.vitepress/theme/components/Layout.vue
new file mode 100644
index 000000000..a05bcb54a
--- /dev/null
+++ b/packages/docs/.vitepress/theme/components/Layout.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { watch } from 'vue'
+import { useData } from 'vitepress'
+import VPTheme from 'vitepress/theme'
+
+const { frontmatter } = useData()
+
+watch(() => frontmatter.value.dir, (dir = 'ltr') => {
+  if (typeof document === 'undefined') { return }
+  document.documentElement.dir = dir
+  document.body.dir = dir
+  document.body.style.direction = dir
+}, { immediate: true })
+</script>
+
+<template>
+  <VPTheme.Layout />
+</template>
diff --git a/packages/docs/.vitepress/theme/index.ts b/packages/docs/.vitepress/theme/index.ts
index c978faf63..1431ccc61 100644
--- a/packages/docs/.vitepress/theme/index.ts
+++ b/packages/docs/.vitepress/theme/index.ts
@@ -6,13 +6,14 @@ import AsideSponsors from './components/AsideSponsors.vue'
 import TranslationStatus from './components/TranslationStatus.vue'
 import './styles/vars.css'
 import './styles/sponsors.css'
+import Layout from './components/Layout.vue'
 import VueSchoolLink from './components/VueSchoolLink.vue'
 import VueMasteryLogoLink from './components/VueMasteryLogoLink.vue'
 
 const theme: Theme = {
   ...DefaultTheme,
   Layout() {
-    return h(DefaultTheme.Layout, null, {
+    return h(Layout, null, {
       // 'home-features-after': () => h(HomeSponsors),
       'aside-ads-before': () => h(AsideSponsors),
       'doc-before': () => h(TranslationStatus),