fix(nuxt): allow useHead to accept computed values (#6174)

This commit is contained in:
Daniel Roe 2022-07-27 12:25:43 +01:00 committed by GitHub
parent f58aa8114f
commit 1230268a7b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,9 +1,11 @@
import { isFunction } from '@vue/shared' import { isFunction } from '@vue/shared'
import { computed } from 'vue' import { computed } from 'vue'
import type { ComputedGetter } from '@vue/reactivity' import type { ComputedGetter, ComputedRef } from '@vue/reactivity'
import type { MetaObject } from '@nuxt/schema' import type { MetaObject } from '@nuxt/schema'
import { useNuxtApp } from '#app' 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: * 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`. * `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 * Alternatively, for reactive meta state, you can pass in a function
* that returns a meta object. * 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 const resolvedMeta = isFunction(meta) ? computed(meta) : meta
useNuxtApp()._useHead(resolvedMeta) useNuxtApp()._useHead(resolvedMeta)
} }
// TODO: remove useMeta support when Nuxt 3 is stable // TODO: remove useMeta support when Nuxt 3 is stable
/** @deprecated Please use new `useHead` composable instead */ /** @deprecated Please use new `useHead` composable instead */
export function useMeta (meta: MetaObject | ComputedGetter<MetaObject>) { export function useMeta (meta: Computable<MetaObject>) {
return useHead(meta) return useHead(meta)
} }