fix(theme): support vueuse/head v1.0

[KaelWD]

Description

Markup:

<template>
  <v-app>
    <v-container>
      <v-btn color="primary" @click="toggle">Toggle theme</v-btn>
    </v-container>
  </v-app>
</template>

<script setup>
  import { useTheme } from 'vuetify'

  const theme = useTheme()

  function toggle () {
    theme.themes.value.light.colors.primary = theme.themes.value.light.colors.primary === '#1976d2' ? '#ff0000' : '#1976d2'
  }
</script>

[harlan-zw]

Not sure why the computed isn't being watched with watchEffects but you can make use of the API returned by push.

const getHead = () => ({
  style: [
    {
      children: styles.value,
      id: 'vuetify-theme-stylesheet',
      nonce: parsedOptions.cspNonce || false as never,
    },
  ],
})
// vueuse/head >= v1
if (head.push) {
  const entry = head.push(getHead)
  watch(styles, () => { entry.patch(getHead) })
} else {
  // vueuse/head < v1
  if (IN_BROWSER) {
    head.addHeadObjs(computed(getHead))
    watchEffect(() => head.updateDOM())
  } else {
    head.addHeadObjs(getHead())
  }
}

That seems to work but I only tested it with the playground code you posted

[harlan-zw]

Oh wait I know, because all of the reactivity is handled by the useHead function itself, these lower-level APIs are language agnostic, so they don't handle any of the reactivity for you.

See https://github.com/unjs/unhead/blob/main/packages/vue/src/runtime/composables/useHead/clientUseHead.ts, basically does the same thing as the code posted above

[KaelWD]

Makes sense, thanks. The unhead docs are a bit light on internals.

[KaelWD]

This was a breaking change: harlan-zw/zhead@20884dc