feat: add composition api helper to interact with head() (#35)

Co-authored-by: Sebastian Krüger <2pi_r2@gmx.de>

Author: mathe42

README.md

@@ -93,6 +93,23 @@ export default defineComponent({
 
 **Note**: `useFetch` must be called synchronously within `setup()`. Any changes made to component data - that is, to properties _returned_ from `setup()` - will be sent to the client and directly loaded. Other side-effects of `useFetch` hook will not be persisted.
 
+### useHead
+
+```ts
+import { defineComponent, useHead, computed } from 'nuxt-composition-api'
+
+const { head, useMeta } = useHead()
+
+export default defineComponent({
+  head, // this line is needed!
+  setup() {
+    const { title } = useMeta()
+
+    title.value = 'newSetTitle'
+  },
+})
+```
+
 ### ssrRef
 
 When creating composition utility functions, often there will be server-side state that needs to be conveyed to the client.

src/index.ts

@@ -28,6 +28,7 @@ export const meta = require('../package.json')
 export { useFetch } from './fetch'
 export { withContext } from './context'
 export { ssrRef, onServerPrefetch, setSSRContext } from './ssr-ref'
+export { useHead } from './meta'
 
 export {
   ComponentRenderProxy,

src/meta.ts

@@ -0,0 +1,35 @@
+import { reactive, toRefs } from '@vue/composition-api'
+import { MetaInfo } from 'vue-meta'
+
+function createEmptyMeta(): MetaInfo {
+  return {
+    title: undefined,
+    titleTemplate: undefined,
+    htmlAttrs: undefined,
+    headAttrs: undefined,
+    bodyAttrs: undefined,
+
+    base: undefined,
+
+    meta: [],
+    link: [],
+    style: [],
+    script: [],
+    noscript: [],
+
+    changed: undefined,
+    afterNavigation: undefined,
+  }
+}
+
+export function useHead(init: MetaInfo = {}) {
+  const meta = reactive<MetaInfo>({
+    ...createEmptyMeta(),
+    ...init,
+  })
+
+  return {
+    head: () => meta,
+    useMeta: () => toRefs(meta),
+  }
+}

test/fixture/pages/index.vue

@@ -1,14 +1,13 @@
 <template>
   <div>
     <div>name-{{ name }}</div>
-    <div v-if="$fetchState.pending">
-      loading email
-    </div>
+    <div v-if="$fetchState.pending">loading email</div>
     <div>email-{{ email }}</div>
     <div>{{ computedProp }}</div>
     <div>{{ myFunction() }}</div>
     <nuxt-link to="/other">link forward</nuxt-link>
     <nuxt-link to="/ssr-ref">ssr refs</nuxt-link>
+    <nuxt-link to="/meta">meta</nuxt-link>
     <button @click="$fetch">Refetch</button>
     <child-comp />
   </div>

test/fixture/pages/meta.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <nuxt-link to="/">link back</nuxt-link>
+  </div>
+</template>
+
+<script>
+import { defineComponent, useHead, computed } from 'nuxt-composition-api'
+
+const { head, useMeta } = useHead()
+
+export default defineComponent({
+  head,
+  setup() {
+    const { title } = useMeta()
+
+    title.value = 'newSetTitle'
+  },
+})
+</script>