Unable to toggle Vuetify themes

[thesanogoeffect]

Hi, sorry if this is a stupid question - I am still quite new to Vue and Nuxt. I have been trying to set up a dark/light mode toggle in my Vuetify/Nuxt 3 project . I have attempted to use something like this Stack Overflow

However, I was unable to import the $vuetify variable in this way, so I tried creating a vuetify.client.js plugin and using the vuetify:ready hook as follows from the documentation:

import { defineNuxtPlugin } from '#imports'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('vuetify:ready', (vuetify) => {
    nuxtApp.provide('vuetifyHook', vuetify)    
  })
})

I am able to later access this, but I can't seem to make it work this way - I don't know if the hook is read only or what to change exactly. Could someone please guide me? What is the best practice?

I have SSR disabled and the vuetify.config.ts set up correctly.
my nuxt.config.ts is as follows:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: "2024-04-03",
  devtools: { enabled: true },
  ssr: false,
  modules: ["@pinia/nuxt", "vuetify-nuxt-module"],
  hooks: {
    'prerender:routes' ({ routes }) {
      routes.clear() // Do not generate any routes (except the defaults)
    }
  },
  vuetify: {
    vuetifyOptions: './vuetify.config.ts'
  }
 
  
});

Thank you!

[userquin]

Don't register vuetify twice, you can access the vuetify instance using useNuxtApp().$vuetify, you can check this page in the playground to swtich the theme: https://github.com/vuetifyjs/nuxt-module/blob/main/playground/pages/index.vue#L42-L44

[userquin]

You don't need to remove any page, use nuxt generate command to generate the SPA, with SSR disabled you will see some hint about this when running the command: when using nuxt generate with SSR enabled, all your pages will be prerendered (SSG).

[thesanogoeffect]

Thank you, it works!