vuetifyjs · userquin · Sep 10, 2025 · Sep 10, 2025 · Sep 22, 2025
diff --git a/apps/docs/index.html b/apps/docs/index.html
@@ -12,6 +12,69 @@
       imagesizes="100vw"
     />
     <link rel="icon" type="image/png" href="/0.png">
+      <script>
+        const theme = window.matchMedia('(prefers-color-scheme: dark)')
+        if (theme.matches) {
+          document.documentElement.classList.add('dark')
+        }
+        theme.addEventListener('change', (e) => {
+          if (e.matches) {
+            document.documentElement.classList.add('dark')
+          } else {
+            document.documentElement.classList.remove('dark')
+          }
+        })
+        const mobile = window.matchMedia('(max-width: 960px)')
+        if (mobile.matches) {
+          document.documentElement.classList.add('mobile')
+        }
+        mobile.addEventListener('change', (e) => {
+          if (e.matches) {
+            document.documentElement.classList.add('mobile')
+          } else {
+            document.documentElement.classList.remove('mobile')
+          }
+        })
+        document.addEventListener('DOMContentLoaded', (e) => {
+            document.documentElement.classList.add('loaded')
+        }, { once: true })
+      </script>
+      <style>
+          /* beasties:include */
+          .app-nav {
+              background-color: var(--v0-surface);
+              border-right: thin solid var(--v0-divider);
+              @apply flex flex-col fixed w-[220px] top-[72px] bottom-[24px] translate-x-[-100%] overflow-y-auto py-4;
+          }
+          html.loaded .app-nav {
+                @apply transition-transform duration-200 ease-in-out;
+          }
+          html:not(.loaded) .app-nav {
+                @apply duration-0;
+          }
+          html:not(.mobile) .app-nav {
+              @apply w-[220px] top-[72px] bottom-0 translate-x-0;
+          }
+          html.mobile .app-nav:not(.drawer) {
+              @apply translate-x-[-100%];
+          }
+          html.mobile .app-nav.drawer {
+              @apply translate-x-0;
+          }
+          main {
+              @apply ms-0 pa-4 pb-6 mt-[72px] transition-margin duration-200 ease-in-out;
+          }
+          html:not(.mobile) main {
+              @apply ms-[220px];
+          }
+          footer {
+              @apply flex items-center justify-between fixed left-0 bottom-0 right-0 h-[24px] ms-0 px-3 text-xs bg-surface border-t;
+          }
+          html:not(.mobile) footer {
+              @apply left-[220px];
+          }
+          /* beasties:include end */
+      </style>
   </head>
   <body>
     <div id="app"></div>

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -15,6 +15,7 @@
     "@shikijs/themes": "catalog:",
     "@types/markdown-it-attrs": "catalog:",
     "@unocss/reset": "catalog:",
+    "beasties": "catalog:",
     "markdown-it-attrs": "catalog:",
     "shiki": "catalog:",
     "unocss": "catalog:",

diff --git a/apps/docs/src/App.vue b/apps/docs/src/App.vue
@@ -1,7 +1,15 @@
 <script lang="ts" setup>
-  import { useTheme } from '@vuetify/v0'
+  import { createHydration, useTheme, provideHydrationContext } from '@vuetify/v0'
+  import { onMounted } from 'vue'
 
   const theme = useTheme()
+
+  const hydrationContext = createHydration()
+  provideHydrationContext(hydrationContext)
+
+  onMounted(() => {
+    hydrationContext.hydrate()
+  })
 </script>
 
 <template>

diff --git a/apps/docs/src/components/app/AppBanner.vue b/apps/docs/src/components/app/AppBanner.vue
@@ -18,7 +18,10 @@
     <AppIcon icon="alert" :size="14" />
 
     <div>
-      You are viewing Pre-Alpha documentation. <span v-if="!breakpoints.isMobile">Some features may not work as expected.</span>
+      You are viewing Pre-Alpha documentation.
+      <ClientOnly>
+        <span v-if="!breakpoints.isMobile">Some features may not work as expected.</span>
+      </ClientOnly>
     </div>
   </Atom>
 </template>

diff --git a/apps/docs/src/components/app/AppBar.vue b/apps/docs/src/components/app/AppBar.vue
@@ -35,12 +35,14 @@
         width="128"
       >
 
-      <AppIcon
-        v-if="breakpoints.isMobile"
-        class="pa-1 cursor-pointer"
-        :icon="app.drawer ? 'close' : 'menu'"
-        @click="app.drawer = !app.drawer"
-      />
+      <ClientOnly>
+        <AppIcon
+          v-if="breakpoints.isMobile"
+          class="pa-1 cursor-pointer"
+          :icon="app.drawer ? 'close' : 'menu'"
+          @click="app.drawer = !app.drawer"
+        />
+      </ClientOnly>
     </div>
 
     <div class="flex align-center items-center gap-3">

diff --git a/apps/docs/src/components/app/AppFooter.vue b/apps/docs/src/components/app/AppFooter.vue
@@ -13,8 +13,9 @@
 <template>
   <Atom
     :as
-    class="app-footer flex items-center justify-between h-[24px] fixed bottom-0 left-[220px] right-0 px-3 text-xs bg-surface border-t"
-    :class="breakpoints.isMobile && 'left-0'"
+    class="app-footer"
+    :xclass="breakpoints.isMobile && 'left-0'"
+    xxclass="app-footer flex items-center justify-between h-[24px] fixed bottom-0 left-[220px] right-0 px-3 text-xs bg-surface border-t"
   >
     <DocsLastCommit />
 

diff --git a/apps/docs/src/components/app/AppMain.vue b/apps/docs/src/components/app/AppMain.vue
@@ -5,14 +5,14 @@
 </script>
 
 <template>
-  <div
-    class="pa-4 pb-6 mt-[72px] transition-margin duration-200 ease-in-out"
-    :class="breakpoints.isMobile ? 'ml-0' : 'ml-[220px]'"
+  <main
+    :xclass="breakpoints.isMobile ? 'ml-0' : 'ml-[220px]'"
+    xxclass="pa-4 pb-6 mt-[72px] transition-margin duration-200 ease-in-out"
   >
     <div class="max-w-[688px] mx-auto pb-4">
       <router-view />
 
       <DocsBackmatter />
     </div>
-  </div>
+  </main>
 </template>
diff --git a/apps/docs/src/components/app/AppNav.vue b/apps/docs/src/components/app/AppNav.vue
@@ -1,18 +1,22 @@
 <script setup lang="ts">
-  import { Atom, useBreakpoints } from '@vuetify/v0'
+  import { Atom, useBreakpoints, useHydrationContext } from '@vuetify/v0'
   import { useAppStore } from '@/stores/app'
   import { useRoute } from 'vue-router'
-  import { watch } from 'vue'
+  import { computed, onMounted, watch } from 'vue'
   import type { AtomProps } from '@vuetify/v0'
 
   const { as = 'nav' } = defineProps<AtomProps>()
 
   const app = useAppStore()
   const breakpoints = useBreakpoints()
   const route = useRoute()
+  const { isHydrated } = useHydrationContext()
 
-  watch(route, () => {
-    if (app.drawer && breakpoints.isMobile) {
+  const inert = computed(() => isHydrated.value && breakpoints.isMobile && !app.drawer)
+
+  watch(() => [route, isHydrated.value] as const, ([_, h]) => {
+    console.log(h)
+    if (h && app.drawer && breakpoints.isMobile) {
       app.drawer = false
     }
   })
@@ -21,11 +25,12 @@
 <template>
   <Atom
     :as
-    class="bg-4 app-nav flex flex-col fixed top-[72px] w-[220px] overflow-y-auto py-4 transition-transform duration-200 ease-in-out"
+    class="bg-4 app-nav"
     :class="[
-      breakpoints.isMobile && !app.drawer ? 'translate-x-[-100%]' : 'translate-x-0',
-      breakpoints.isMobile ? 'top-[72px] bottom-[24px]' : 'top-[24px] bottom-0'
+      // `app-nav-${breakpoints.breakpoints.md}`,
+      { 'drawer': isHydrated && breakpoints.isMobile && app.drawer },
     ]"
+    :inert
   >
     <ul class="flex gap-2 flex-col">
       <template v-for="(nav, i) in app.nav" :key="i">
@@ -46,8 +51,24 @@
   </Atom>
 </template>
 
+<style scoped>
+  /* beasties:include */
+  .app-nav {
+    background-color: var(--v0-surface);
+    border-right: thin solid var(--v0-divider);
+    @apply flex flex-col fixed top-[72px] bottom-[24px] translate-x-[-100%] w-[220px] overflow-y-auto py-4 transition-transform duration-200 ease-in-out;
+  }
+  html:not(.mobile) .app-nav {
+    @apply top-[72px] bottom-0 translate-x-0;
+  }
+  html.mobile .app-nav.drawer {
+    @apply translate-x-0;
+  }
+  /* beasties:include end */
+</style>
+<!--
 <style lang="sass">
   .app-nav
-    background-color: var(--v0-surface)
-    border-right: thin solid var(--v0-divider)
-</style>
+    background-color: var(&#45;&#45;v0-surface)
+    border-right: thin solid var(&#45;&#45;v0-divider)
+</style>-->
diff --git a/apps/docs/src/main.ts b/apps/docs/src/main.ts
@@ -40,4 +40,14 @@ export const createApp = ViteSSG(
       })
     }
   },
+  {
+    hydration: !import.meta.env.DEV,
+    transformState (state) {
+      if (import.meta.env.DEV || import.meta.env.SSR) {
+        return JSON.stringify({})
+      }
+
+      return state
+    },
+  },
 )
diff --git a/apps/docs/src/plugins/zero.ts b/apps/docs/src/plugins/zero.ts
@@ -1,5 +1,5 @@
 // Vuetify0
-import { createBreakpointsPlugin, createHydrationPlugin, createLoggerPlugin, createThemePlugin } from '@vuetify/v0'
+import { createBreakpointsPlugin, /* createHydrationPlugin, */createLoggerPlugin, createThemePlugin } from '@vuetify/v0'
 
 // Plugins
 import { createIconPlugin } from './icons'
@@ -10,7 +10,7 @@ import type { App } from 'vue'
 export default function zero (app: App) {
   app.use(createIconPlugin())
   app.use(createLoggerPlugin())
-  app.use(createHydrationPlugin())
+  // app.use(createHydrationPlugin())
   app.use(createBreakpointsPlugin())
   app.use(
     createThemePlugin({

diff --git a/apps/docs/uno.config.ts b/apps/docs/uno.config.ts
@@ -1,9 +1,28 @@
-import { presetWind3, defineConfig } from 'unocss'
+import { transformerDirectives, presetWind3, defineConfig, toEscapedSelector } from 'unocss'
 
 export default defineConfig({
+  /* safelist: ['app-nav-960'],
+  shortcuts: {
+    'app-nav': 'flex flex-col fixed top-[72px] bottom-[24px] translate-x-0 w-[220px] overflow-y-auto py-4 transition-transform duration-200 ease-in-out',
+  },
+  rules: [
+    [/^app-nav-(\d+)$/, ([, w]) => {
+      return `@media (max-width: ${w}px) {
+  .app-nav-${w} {
+    @apply top-[72px] bottom-[24px] translate-x-[-100%];
+  }
+  .app-nav-${w}.drawer {
+    @apply  translate-x-0;
+  }
+}`
+    }],
+  ], */
   presets: [
     presetWind3(),
   ],
+  transformers: [
+    transformerDirectives(),
+  ],
   theme: {
     colors: {
       'primary': 'var(--v0-primary)',

diff --git a/apps/docs/vite.config.ts b/apps/docs/vite.config.ts
@@ -1,3 +1,5 @@
+/// <reference types="vite-ssg/node" />
+
 import { fileURLToPath, URL } from 'node:url'
 import Layouts from 'vite-plugin-vue-layouts-next'
 import VueRouter from 'unplugin-vue-router/vite'
@@ -57,4 +59,16 @@ export default defineConfig({
       allow: ['../packages/*', '.'],
     },
   },
+  ssgOptions: {
+    beastiesOptions: {
+      logLevel: 'info',
+      reduceInlineStyles: false,
+      // additionalStylesheets: [path.resolve('src/critical.css')],
+      preloadFonts: true,
+      inlineFonts: true,
+      // preloadFonts: false,
+      noscriptFallback: true,
+      allowRules: ['app-nav'],
+    },
+  },
 })
diff --git a/packages/0/build/tsdown.browser.config.ts b/packages/0/build/tsdown.browser.config.ts
diff --git a/packages/0/build/tsdown.bundler.config.ts b/packages/0/build/tsdown.bundler.config.ts