From 1230268a7b0d2d4ba4203666d4fe0f7d9807b57c Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 27 Jul 2022 12:25:43 +0100
Subject: [PATCH] fix(nuxt): allow `useHead` to accept computed values (#6174)

---
 packages/nuxt/src/head/runtime/composables.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/nuxt/src/head/runtime/composables.ts b/packages/nuxt/src/head/runtime/composables.ts
index 13b7ca57b..8eaffa582 100644
--- a/packages/nuxt/src/head/runtime/composables.ts
+++ b/packages/nuxt/src/head/runtime/composables.ts
@@ -1,9 +1,11 @@
 import { isFunction } from '@vue/shared'
 import { computed } from 'vue'
-import type { ComputedGetter } from '@vue/reactivity'
+import type { ComputedGetter, ComputedRef } from '@vue/reactivity'
 import type { MetaObject } from '@nuxt/schema'
 import { useNuxtApp } from '#app'
 
+type Computable<T> = T extends Record<string, any> ? ComputedGetter<T> | { [K in keyof T]: T[K] | ComputedRef<T[K]> } : T
+
 /**
  * You can pass in a meta object, which has keys corresponding to meta tags:
  * `title`, `base`, `script`, `style`, `meta` and `link`, as well as `htmlAttrs` and `bodyAttrs`.
@@ -11,13 +13,13 @@ import { useNuxtApp } from '#app'
  * Alternatively, for reactive meta state, you can pass in a function
  * that returns a meta object.
  */
-export function useHead (meta: MetaObject | ComputedGetter<MetaObject>) {
+export function useHead (meta: Computable<MetaObject>) {
   const resolvedMeta = isFunction(meta) ? computed(meta) : meta
   useNuxtApp()._useHead(resolvedMeta)
 }
 
 // TODO: remove useMeta support when Nuxt 3 is stable
 /** @deprecated Please use new `useHead` composable instead */
-export function useMeta (meta: MetaObject | ComputedGetter<MetaObject>) {
+export function useMeta (meta: Computable<MetaObject>) {
   return useHead(meta)
 }