vuetifyjs · userquin · Mar 19, 2026 · Mar 19, 2026 · Mar 19, 2026 · Mar 19, 2026
diff --git a/docs/.vitepress/theme/VuetifyLayout.vue b/docs/.vitepress/theme/VuetifyLayout.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
-  import { useData, useRoute } from 'vitepress'
+  import { useData } from 'vitepress'
   import DefaultTheme from 'vitepress/theme'
-  import { createApp, nextTick, onMounted, onUnmounted, provide, watch } from 'vue'
+  import { nextTick, provide } from 'vue'
   import HomeHeroCopy from './components/HomeHeroCopy.vue'
 
   const { isDark } = useData()
-  const route = useRoute()
   const INSTALL_COMMAND = 'npx nuxi@latest module add vuetify-nuxt-module'
-  const HERO_COPY_SELECTOR = '.VPHome .VPHero .actions .action:nth-child(1) a'
 
   function enableTransitions () {
     return 'startViewTransition' in document
@@ -43,67 +41,12 @@
       },
     )
   })
-
-  function mountHeroCopy () {
-    nextTick(() => {
-      const element = document.querySelector(HERO_COPY_SELECTOR)
-      if (element) {
-        const container = document.createElement('div')
-        element.replaceWith(container)
-        createApp(HomeHeroCopy, { command: INSTALL_COMMAND }).mount(container)
-      }
-    })
-  }
-
-  let rafId: number | null = null
-  let mouseX = 0
-  let mouseY = 0
-
-  function updateLogoTilt () {
-    const logo = document.querySelector('.VPHome .image-src') as HTMLElement
-    if (!logo) {
-      rafId = null
-      return
-    }
-
-    const { innerWidth, innerHeight } = window
-    const x = (mouseX / innerWidth - 0.5) * 2
-    const y = (mouseY / innerHeight - 0.5) * 2
-
-    const tiltX = (y * -10).toFixed(2)
-    const tiltY = (x * 10).toFixed(2)
-
-    logo.style.transform = `translate(-50%, -50%) perspective(500px) rotateX(${tiltX}deg) rotateY(${tiltY}deg)`
-    rafId = null
-  }
-
-  function onMouseMove (e: MouseEvent) {
-    mouseX = e.clientX
-    mouseY = e.clientY
-
-    if (!rafId) {
-      rafId = requestAnimationFrame(updateLogoTilt)
-    }
-  }
-
-  onMounted(() => {
-    mountHeroCopy()
-    window.addEventListener('mousemove', onMouseMove)
-  })
-
-  onUnmounted(() => {
-    window.removeEventListener('mousemove', onMouseMove)
-    if (rafId) cancelAnimationFrame(rafId)
-  })
-
-  watch(
-    () => route.path,
-    () => {
-      mountHeroCopy()
-    },
-  )
 </script>
 
 <template>
-  <DefaultTheme.Layout />
+  <DefaultTheme.Layout>
+    <template #home-hero-actions-before-actions>
+      <HomeHeroCopy class="home" :command="INSTALL_COMMAND" />
+    </template>
+  </DefaultTheme.Layout>
 </template>
diff --git a/docs/.vitepress/theme/components/HomeHeroCopy.vue b/docs/.vitepress/theme/components/HomeHeroCopy.vue
@@ -5,6 +5,8 @@
     command: string
   }>()
 
+  console.log('PASO')
+
   const copied = ref(false)
 
   async function copy () {
@@ -100,6 +102,9 @@
   max-width: calc(100vw - 2 * 24px);
   width: 100%;
 }
+.hero-copy-btn.home {
+  margin: 6px;
+}
 
 .hero-copy-btn:hover {
   border-color: var(--vp-c-brand-1);

diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -19,15 +19,59 @@ if (inBrowser) {
 export default {
   extends: DefaultTheme,
   Layout: VuetifyLayout,
-  enhanceApp ({ app }) {
+  enhanceApp ({ app, router }) {
     app.component('HomeHeroCopy', HomeHeroCopy)
     app.component('CompatibilityMatrix', CompatibilityMatrix)
     app.component('CopyOrDownloadAsMarkdownButtons', CopyOrDownloadAsMarkdownButtons)
 
-    Swetrix.init('KMc9xOD28UCn', {
-      apiURL: 'https://swetrix-api.vuetifyjs.com/log',
-    })
-    Swetrix.trackViews()
-    Swetrix.trackErrors()
+    if (inBrowser) {
+      let rafId: number | null = null
+      let mouseX = 0
+      let mouseY = 0
+
+      function updateLogoTilt () {
+        const logo = document.querySelector('.VPHome .image-src') as HTMLElement
+        if (!logo) {
+          rafId = null
+          return
+        }
+
+        const { innerWidth, innerHeight } = window
+        const x = (mouseX / innerWidth - 0.5) * 2
+        const y = (mouseY / innerHeight - 0.5) * 2
+
+        const tiltX = (y * -10).toFixed(2)
+        const tiltY = (x * 10).toFixed(2)
+
+        logo.style.transform = `translate(-50%, -50%) perspective(500px) rotateX(${tiltX}deg) rotateY(${tiltY}deg)`
+        rafId = null
+      }
+
+      function onMouseMove (e: MouseEvent) {
+        mouseX = e.clientX
+        mouseY = e.clientY
+
+        if (!rafId) {
+          rafId = requestAnimationFrame(updateLogoTilt)
+        }
+      }
+
+      router.onBeforeRouteChange = to => {
+        if (to === '/') {
+          window.addEventListener('mousemove', onMouseMove, { passive: true })
+        } else {
+          window.removeEventListener('mousemove', onMouseMove)
+          if (rafId) {
+            cancelAnimationFrame(rafId)
+          }
+        }
+      }
+
+      Swetrix.init('KMc9xOD28UCn', {
+        apiURL: 'https://swetrix-api.vuetifyjs.com/log',
+      })
+      Swetrix.trackViews()
+      Swetrix.trackErrors()
+    }
   },
 } satisfies Theme
diff --git a/docs/.vitepress/theme/styles/main.css b/docs/.vitepress/theme/styles/main.css
@@ -195,11 +195,11 @@ details > summary:hover {
   margin-top: 20px;
 }
 
-.VPHome .VPHero .actions .action:nth-child(1) {
+.VPHome .VPHero .actions .action:first-child {
   flex: 1 0 100%;
 }
 
-.VPHome .VPHero .actions .action:nth-child(1) .VPButton {
+.VPHome .VPHero .actions .action:first-child .VPButton {
   justify-content: flex-start;
   width: 100%;
   border: 1px solid color-mix(in srgb, var(--vp-c-brand-1) 36%, var(--vp-c-divider));

diff --git a/docs/.vitepress/transform-head.ts b/docs/.vitepress/transform-head.ts
@@ -5,13 +5,19 @@ const googleapis = 'https://fonts.googleapis.com'
 const gstatic = 'https://fonts.gstatic.com'
 
 export async function transformHead ({ pageData }: TransformContext): Promise<HeadConfig[]> {
-  const head: HeadConfig[] = [['link', { rel: 'dns-prefetch', href: googleapis }], ['link', { rel: 'dns-prefetch', href: gstatic }], ['link', { rel: 'preconnect', crossorigin: 'anonymous', href: googleapis }], ['link', { rel: 'preconnect', crossorigin: 'anonymous', href: gstatic }], ['link', { rel: 'preload', as: 'style', onload: 'this.onload=null;this.rel=\'stylesheet\'', href: firaFont }], ['noscript', {}, `<link rel="stylesheet" crossorigin="anonymous" href="${firaFont}" />`]]
-
-  // prefetch fira font
+  const head: HeadConfig[] = [
+    ['link', { rel: 'dns-prefetch', href: googleapis }],
+    ['link', { rel: 'dns-prefetch', href: gstatic }],
+    ['link', { rel: 'preconnect', crossorigin: 'anonymous', href: googleapis }],
+    ['link', { rel: 'preconnect', crossorigin: 'anonymous', href: gstatic }],
+    ['link', { rel: 'preload', as: 'style', onload: 'this.onload=null;this.rel=\'stylesheet\'', href: firaFont }],
+    ['noscript', {}, `<link rel="stylesheet" crossorigin="anonymous" href="${firaFont}" />`],
+    ['link', { rel: 'prefetch', href: '/logo.svg' }],
+  ]
 
   // banner for index page
   if (pageData.relativePath === 'index.md') {
-    head.push(['link', { rel: 'prefetch', href: '/logo.svg' }])
+    head.push(['link', { rel: 'prefetch', href: '/animated-logo.svg' }])
   }
 
   return head

diff --git a/docs/index.md b/docs/index.md
@@ -12,9 +12,6 @@ hero:
     src: /logo.svg
     alt: Vuetify Nuxt Module
   actions:
-    - theme: alt
-      text: npx nuxt module add vuetify-nuxt-module
-      link: "#"
     - theme: brand
       text: Get Started
       link: /guide/

diff --git a/docs/public/animated-logo.svg b/docs/public/animated-logo.svg
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -70,7 +70,7 @@ catalog:
   vite: 7.3.1
   vite-plugin-pwa: ^1.2.0
   vite-plugin-vuetify: ^2.1.3
-  vitepress: 2.0.0-alpha.16
+  vitepress: 2.0.0-alpha.17
   vitepress-plugin-llms: ^1.11.0
   vitest: ^4.0.18
   vue: ^3.5.29