@nuxt/content v3 Upgrade: Global Components Issue and Custom Collection Feature Request

[konogousanda]

Upgrade from @nuxt/content v2 to v3

Recently, I upgraded @nuxt/content from v2 to v3 and noticed that the components under components/content no longer have global: true. Why is that? Since I usually use the <MDC />, in v2 it was set to global: true by default. With v3, I have to set global: true for the <MDC /> in nuxt.config.ts.
The code in the source code(v3):

for (const layer of _layers) {
  const path = resolver.resolve(layer.config.srcDir, 'components/content')
  const dirStat = await stat(path).catch((): null => null)
  if (dirStat && dirStat.isDirectory()) {
    nuxt.hook('components:dirs', (dirs) => {
      dirs.unshift({ path, pathPrefix: false, prefix: '' })
    })
  }
}

Feature Request: Custom Collections in content.config.ts

I propose adding a feature to content.config.ts where the defineCollection method supports a type: 'custom' option. This would allow @nuxt/content to initialize table structures based on the schema and manage document metadata accordingly:

import { defineContentConfig, defineCollection, z } from '@nuxt/content';

export default defineContentConfig({
  collections: {
    content: {
      type: 'custom',
      ...,
      schema: z.object({
        updateTime: z.date(),
        ...,
      }),
    }
  }
});

If the table does not exist in the SQLite database, @nuxt/content should initialize it automatically. This ensures that the querying logic remains consistent:

<script>
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('content').path(route.path).first()
})
</script>

Here are the optimized management methods for content operations:

export function updateContent(parsedContent: string, extra?: Record<string, any>) {
  // ...
}
export function deleteContent(id: string) {
  // ...
}
/**
 * @return ParsedContent
 */
export function parseContent(value: string) {
  // ...
}

Here's how you can use the management methods in your code:

import { updateContent, deleteContent, parseContent } from '@nuxt/content';

const content = ref(`# Hello, World!`);
updateContent(parseContent(content.value), { updateTime: Date.now() });

[BayBreezy]

@konogousanda I had this problem and made a report about it here #2930 .

I am trying to use the syntax but it no longer works for components in the content folder.

Is there a work around that you have that gets this to work again?

[BayBreezy]

nvm, i found a solution in the Nuxt UI repo.

• Add these to the top of nuxt.config file

import { createResolver } from '@nuxt/kit'

const { resolve } = createResolver(import.meta.url)

• Add this to modules array

(_, nuxt) => {
      nuxt.hook('components:dirs', (dirs) => {
        dirs.unshift({ path: resolve(PATH_TO_GLOBAL_CONTENT_FOLDER), pathPrefix: false, prefix: '', global: true })
      })
    }

Be sure to replace PATH_TO_GLOBAL_CONTENT_FOLDER with the path: E.g: ./app/components/content