fix: avoid using shared global state for head (#916)

* fix: Vue2ProvideUnheadPlugin is deprecated * feat: create UnheadPlugin for nuxt2 * fix: use `setHeadInjectionHandler` to avoid head warnings * chore: remove replacement plugin --------- Co-authored-by: Harlan Wilton <[email protected]>
nuxt · Oct 30, 2023 · 5c87c30 · 5c87c30
1 parent 2ee010f
commit 5c87c30
Showing 1 changed file with 15 additions and 4 deletions.
diff --git a/packages/bridge/src/runtime/head/plugins/unhead.ts b/packages/bridge/src/runtime/head/plugins/unhead.ts
@@ -1,17 +1,28 @@
-import { createHead as createClientHead, createServerHead, Vue2ProvideUnheadPlugin } from '@unhead/vue'
+import {
+  createHead as createClientHead,
+  createServerHead,
+  setHeadInjectionHandler,
+  Vue2ProvideUnheadPlugin
+} from '@unhead/vue'
 import { markRaw } from 'vue'
 import { renderSSRHead } from '@unhead/ssr'
-import { defineNuxtPlugin } from '../../app'
+import { defineNuxtPlugin, useNuxtApp } from '../../app'
 // @ts-ignore
 import metaConfig from '#build/meta.config.mjs'
 
 export default defineNuxtPlugin((nuxtApp) => {
   const createHead = process.server ? createServerHead : createClientHead
   const head = createHead()
   head.push(markRaw(metaConfig.globalMeta))
-
+  // TODO the replacement plugin has issues in Nuxt, needs to be fixed upstream
   nuxtApp.vueApp.use(Vue2ProvideUnheadPlugin, head)
-  nuxtApp.vueApp.use(head)
+  nuxtApp.vueApp.config.globalProperties.$head = head
+
+  // allow useHead to be used outside a Vue context but within a Nuxt context
+  setHeadInjectionHandler(
+    // need a fresh instance of the nuxt app to avoid parallel requests interfering with each other
+    () => useNuxtApp().vueApp.config.globalProperties.$head
+  )
 
   if (process.server) {
       nuxtApp.ssrContext!.renderMeta = async () => {