feat: support sync components

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

@@ -33,6 +33,21 @@ export default defineNuxtConfig({
 })
 ```
 
+## `components`
+
+- Type: `string[]`{lang=ts}
+- Default: `[]`{lang=ts}
+
+Specify the list of components which are not in `components/content/` or not defined as global component to add them in the main bundle (included in all pages). Useful for components used in UI library.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  content: {
+    components: ['UButton']
+  }
+})
+```
+
 ## `watch`
 
 - Type: `object | false`{lang=ts}

playground/basic/components/HelloWorld.vue

@@ -0,0 +1,3 @@
+<template>
+  <p>Hello from not-content component.</p>
+</template>

playground/basic/content/0.index.md

@@ -7,4 +7,6 @@ title: Index
 - [Playground](/playground)
 - [Query Builder](/query-playground)
 - [Custom 404 page](/404)
-- [Not Found Content](/not-found-content)
+- [Not Found Content](/not-found-content)
+
+:hello-world

playground/basic/nuxt.config.ts

@@ -3,6 +3,7 @@ import { resolve } from 'pathe'
 export default defineNuxtConfig({
   extends: ['../shared'],
   content: {
+    components: ['hello-world'],
     sources: {
       'translation-fa': {
         prefix: '/fa',

src/module.ts

@@ -8,7 +8,8 @@ import {
   addComponentsDir,
   addTemplate,
   extendViteConfig,
-  installModule
+  installModule,
+  addPluginTemplate
 } from '@nuxt/kit'
 import { genDynamicImport, genImport, genSafeVariableName } from 'knitwork'
 import type { ListenOptions } from 'listhen'
@@ -20,6 +21,7 @@ import type { Lang as ShikiLang, Theme as ShikiTheme } from 'shiki-es'
 import { listen } from 'listhen'
 import { type WatchEvent, createStorage } from 'unstorage'
 import { joinURL, withLeadingSlash, withTrailingSlash } from 'ufo'
+import { pascalCase } from 'scule'
 import type { Component } from '@nuxt/schema'
 import { name, version } from '../package.json'
 import { makeIgnored } from './runtime/utils/config'
@@ -58,6 +60,12 @@ export interface ModuleOptions {
      */
     baseURL: string
   }
+  /**
+   * List the components that will be used in markdown.
+   *
+   * @default []
+   */
+  components: string[]
   /**
    * Disable content watcher and hot content reload.
    * Note: Watcher is a development feature and will not includes in the production.
@@ -267,6 +275,7 @@ export default defineNuxtModule<ModuleOptions>({
         showURL: false
       }
     },
+    components: [],
     sources: {},
     ignores: [],
     locales: [],
@@ -611,6 +620,22 @@ export default defineNuxtModule<ModuleOptions>({
     // @ts-ignore
     await nuxt.callHook('content:context', contentContext)
 
+    // Add sync components to use not global components
+    const components = (options.components || []).map(pascalCase)
+
+    addPluginTemplate({
+      filename: 'plugins/content-components.ts',
+      getContents: () => {
+        return `import { defineNuxtPlugin } from '#app/nuxt'
+${genImport('#components', components)}
+
+export default defineNuxtPlugin((nuxtApp) => {
+  ${components.map(name => `nuxtApp.vueApp.component('${name}', ${name});`).join('\n')}
+})
+        `
+      }
+    })
+
     contentContext.defaultLocale = contentContext.defaultLocale || contentContext.locales[0]
 
     // Generate cache integrity based on content context