feat: allow to disable content head (#2142)

Co-authored-by: nobkd <44443899+nobkd@users.noreply.github.com>

docs/content/4.api/3.configuration.md

@@ -19,7 +19,7 @@ export default defineNuxtConfig({
 - Type: `Record<string, any>`{lang=ts}
 - Default: `{ baseURL: '/api/_content' }`{lang=ts}
 
-Change default behaviour of Content APIs. 
+Change default behaviour of Content APIs.
 
 - `baseURL`{lang=ts}: change the base URL of Content APIs. Default is `/api/_content`.
 
@@ -366,6 +366,13 @@ Default locale for top level contents. Module will use first locale code from `l
 Note that in case of defining multiple locales, Module will filter content with `defaultLocale`. If you want to fetch contents of another locale, you need to use `where` option.
 ::
 
+## `contentHead`
+
+- Type: `boolean`{lang=ts}
+- Default: `true`{lang=ts}
+
+Enable content head feature. If enabled, module will automatically use `useContentHead` composable to inject content head data to your page.
+
 ## `documentDriven`
 
 - Type: `boolean | object`{lang=ts}

playground/custom-seo/content/index.md

@@ -0,0 +1 @@
+# Content

playground/custom-seo/nuxt.config.ts

@@ -0,0 +1,11 @@
+export default defineNuxtConfig({
+  extends: ['../shared'],
+
+  content: {
+    contentHead: false
+  },
+
+  typescript: {
+    includeWorkspace: true
+  }
+})

playground/custom-seo/pages/index.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+useServerHead({
+  title: 'My custom title',
+  meta: [
+    {
+      hid: 'description',
+      name: 'description',
+      content: 'My custom description'
+    }
+  ]
+})
+</script>
+
+<template>
+  <ContentDoc />
+</template>

src/module.ts

@@ -203,6 +203,12 @@ export interface ModuleOptions {
    * @default undefined
    */
   defaultLocale?: string
+  /**
+   * Enable automatic usage of `useContentHead`
+   *
+   * @default true
+   */
+  contentHead?: boolean
   /**
    * Document-driven mode config
    *
@@ -290,6 +296,7 @@ export default defineNuxtModule<ModuleOptions>({
     navigation: {
       fields: []
     },
+    contentHead: true,
     documentDriven: false,
     respectPathCase: false,
     experimental: {
@@ -658,6 +665,7 @@ export default defineNuxtModule<ModuleOptions>({
       documentDriven: options.documentDriven as any,
       host: typeof options.documentDriven !== 'boolean' ? options.documentDriven?.host ?? '' : '',
       trailingSlash: typeof options.documentDriven !== 'boolean' ? options.documentDriven?.trailingSlash ?? false : false,
+      contentHead: options.contentHead ?? true,
       // Anchor link generation config
       anchorLinks: options.markdown.anchorLinks as { depth?: number, exclude?: number[] }
     })
@@ -789,6 +797,8 @@ interface ModulePublicRuntimeConfig {
 
   navigation: ModuleOptions['navigation']
 
+  contentHead: ModuleOptions['contentHead']
+
   documentDriven: ModuleOptions['documentDriven']
 }
 

src/runtime/components/ContentDoc.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
 import { type PropType, type VNode, defineComponent, h, useSlots } from 'vue'
 import { withTrailingSlash } from 'ufo'
+import { useRuntimeConfig } from '#app'
 import type { ParsedContent, QueryBuilderParams } from '../types'
 import ContentRenderer from './ContentRenderer.vue'
 import ContentQuery from './ContentQuery.vue'
@@ -61,7 +62,7 @@ const ContentDoc = defineComponent({
     head: {
       type: Boolean,
       required: false,
-      default: true
+      default: undefined
     }
   },
 
@@ -74,10 +75,15 @@ const ContentDoc = defineComponent({
    * @slot not-found
    */
   render (ctx: any) {
+    const { contentHead } = useRuntimeConfig().public.content
+
     const slots = useSlots()
 
     const { tag, excerpt, path, query, head } = ctx
 
+    // Allow user to overwrite the global `contentHead` config.
+    const shouldInjectContentHead = head === undefined ? contentHead : head
+
     // Merge local `path` props and apply `findOne` query default.
     const contentQueryProps = {
       ...query || {},
@@ -94,12 +100,12 @@ const ContentDoc = defineComponent({
         // Default slot
         default: slots?.default
           ? ({ data, refresh, isPartial }: any) => {
-              if (head) { useContentHead(data) }
+              if (shouldInjectContentHead) { useContentHead(data) }
 
               return slots.default?.({ doc: data, refresh, isPartial, excerpt, ...this.$attrs })
             }
           : ({ data }: any) => {
-              if (head) { useContentHead(data) }
+              if (shouldInjectContentHead) { useContentHead(data) }
 
               return h(
                 ContentRenderer,

src/runtime/pages/document-driven.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import { useRuntimeConfig } from '#app'
 import { useContent, useContentHead, useRequestEvent } from '#imports'
 
+const { contentHead } = useRuntimeConfig().public.content
 const { page, layout } = useContent()
 
 // Page not found, set correct status code on SSR
@@ -9,7 +11,9 @@ if (!(page as any).value && process.server) {
   event.res.statusCode = 404
 }
 
-useContentHead(page)
+if (contentHead) {
+  useContentHead(page)
+}
 </script>
 
 <template>