diff --git a/docs/content/4.api/3.configuration.md b/docs/content/4.api/3.configuration.md index f6637c870..4b69528ca 100644 --- a/docs/content/4.api/3.configuration.md +++ b/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} diff --git a/playground/basic/components/HelloWorld.vue b/playground/basic/components/HelloWorld.vue new file mode 100644 index 000000000..7c0a6a625 --- /dev/null +++ b/playground/basic/components/HelloWorld.vue @@ -0,0 +1,3 @@ + diff --git a/playground/basic/content/0.index.md b/playground/basic/content/0.index.md index 579319cb8..a98dfb42b 100644 --- a/playground/basic/content/0.index.md +++ b/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) \ No newline at end of file +- [Not Found Content](/not-found-content) + +:hello-world diff --git a/playground/basic/nuxt.config.ts b/playground/basic/nuxt.config.ts index 0c7466af3..23d761a2e 100644 --- a/playground/basic/nuxt.config.ts +++ b/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', diff --git a/src/module.ts b/src/module.ts index b91e1d5a0..0267bab55 100644 --- a/src/module.ts +++ b/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({ showURL: false } }, + components: [], sources: {}, ignores: [], locales: [], @@ -611,6 +620,22 @@ export default defineNuxtModule({ // @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