Cannot read property of undefined on theme access in Vuetify 3 production SSR

Answer

To eliminate the "Cannot read property of undefined" error when accessing the theme during production SSR hydration, configure Vuetify with a fully defined theme object and enable its SSR option, then ensure the Vite Vuetify plugin is present with ssr:true in both client and server builds.

Likely explanation

The theme object is undefined on the server because Vuetify’s SSR plugin does not register the theme provider when ssr is false or when the theme is imported asynchronously. During hydration the client expects the same theme context that was rendered on the server, causing the runtime error.

Confirmed facts

• Vuetify 3 exposes an ssr flag in createVuetify() that registers the theme provider on the server.
• The Vite Vuetify plugin must be declared with { ssr: true } so the server bundle includes Vuetify styles and theme context.
• Theme definition must be imported synchronously at the top level of the Vuetify setup file; lazy or async imports break SSR.

Steps needed for this case

1. Create or edit your Vuetify setup (e.g., src/plugins/vuetify.ts) and import the theme synchronously:

   import { createVuetify } from 'vuetify'
   import { aliases, mdi } from 'vuetify/iconsets/mdi'
   import theme from '@/theme'   // <-- synchronous import of your theme object
   
   export default createVuetify({
     theme: {
       defaultTheme: 'default',
       themes: { default: theme }
     },
     icons: { defaultSet: 'mdi', aliases, sets: { mdi } },
     ssr: true   // <-- essential for SSR
   })
   

2. In vite.config.ts, ensure the Vuetify plugin is present with SSR enabled and not removed conditionally:

   import vuetify from 'vite-plugin-vuetify'
   import { defineConfig } from 'vite'
   
   export default defineConfig({
     plugins: [vuetify({ autoImport: true, ssr: true })],
     build: {
       ssr: 'src/entry-server.ts'   // adjust to your server entry file
     }
   })
   

3. Do not place theme imports inside setup(), onMounted, or any async function; keep them at module level.

4. Rebuild and preview:

   npm run build
   npm run preview   // or `vite preview`
   

After these steps, the server‑rendered HTML will contain Vuetify theme classes (e.g., v-application--theme-light) and the client will hydrate without the undefined theme error.