Accessing Nuxt Content inside a Nuxt Module

[JoshuwayMorris]

Hello 👋

I have a Nuxt Module within the /modules directory.

Within this module, I listen for the build:done hook (i.e. nuxt.hook('build:done', ...).

Is it possible for me to access the Nuxt Content files within this hook? I am essentially trying to generate a JSON file that contains all of my Nuxt Content files.

Thank you!

[codebykyle]

Hey I struggled with this as well. I do not think it is possible from that specific event. The collections as a whole are never stored or emitted except through the dumps or sql file.

I was able to solve a similar issue here:
#3487

which will listen to the nuxt file:afterParse event and load it up in memeory.

You can steal the BuildData class from that thread, and then build a collection of all the files nuxt-content has seen, or track it in another way

export default defineNuxtModule({
  meta: { name: 'your-nuxt-module' },
  setup(_, nuxt) {
    const build = new BuildData()

    nuxt.hook('content:file:afterParse', (hook) => {
      build.seen(hook)
    })
    
    nuxt.hook('build:done', () => {
        // Do whatever with the data
    })
  }
})

You can do something similar in a module, eg:

[codebykyle]

Here is an example that will output the content of a collection to the .nuxt/content-cache folder. No idea if this is the proper way to do it, but it does generate the file. This is taken from another script, but should get you closer

import type {
  FileAfterParseHook,
  ResolvedCollection,
  ContentFile,
  ResolvedCustomCollectionSource,
  ParsedContentFile
} from '@nuxt/content'
import ufo from 'ufo'
import fs from 'node:fs'
import { defineNuxtModule } from '@nuxt/kit'

export class BuildData {
  private _collections = new Map<string, BuiltCollection>()

  public get collections(): ReadonlyMap<string, BuiltCollection> {
    return this._collections
  }

  public seen(hook: FileAfterParseHook): void {
    const { name } = hook.collection

    const entry = this.collections.get(name)
      ?? { data: {}, collection: hook.collection }

    entry.data[hook.file.id] = hook

    this._collections.set(
      name,
      entry
    )
  }

  public pick(names: readonly string[]): BuiltCollection[] {
    return names.flatMap(n => this.collections.get(n) ?? [])
  }

  public all(): BuiltCollection[] {
    return Array.from(this.collections.values())
  }

  public get(name: string): BuiltCollection | undefined {
    return this.collections.get(name)
  }
}

declare module '@nuxt/schema' {
  interface NuxtHooks {
    'dynamic-collections:collectionBuilt': (ctx: BuiltCollection) => void
    'dynamic-collections:beforeExport': (ctx: BuiltCollection) => BuiltCollection
  }
}


export default defineNuxtModule({
  meta: { name: 'nuxt-content-dynamic-collection' },
  async setup(_, nuxt) {
    const build = new BuildData()

    nuxt.hook('content:file:afterParse', async (ctx) => {
      build.seen(ctx)
    })

    nuxt.hook('modules:done', async () => {
      const rootDir = nuxt.options.rootDir

      const cacheDir = ufo.joinURL(
        rootDir,
        '.nuxt',
        'content-cache'
      )

      if (!fs.existsSync(cacheDir)) {
        await fs.promises.mkdir(cacheDir, {
          recursive: true
        })
      }

      const cacheFile = ufo.joinURL(
        cacheDir,
        'content.json'
      )

      // Or write all the data
      await fs.promises.writeFile(
        cacheFile,
        JSON.stringify(build.all().map(c => c.data), null, 2),
        'utf8'
      )
    })
  }
})

This will output one json file per collection. You can use similar logic to determine when all collections have loaded to make one big export, or call it on build:done, and then serialize it as one file.

Edit: Exported the file on modules:done. You can get rid of the build data class if you find that distracting. A list of events is probably fine. I am using that, though, because it will group files seen by collection, which I find useful.

[codebykyle]

The above code wont emit the last file because the last collection wont change. I had assumed it would emit something for the info collection, but it does not. You'd need to hook afterParse and append to a file, which all things considered, is a lot easier than that abomination of code I wrote above. I wish there was a way to have an event emitted for every collection that was built, it would definitely make this and other tasks a lot easier.

I am still wrapping up my code, I will see if I can make a better version that just appends a file.

[codebykyle]

import { defineNuxtModule } from '@nuxt/kit'

import ufo from 'ufo'
import fs from 'node:fs'

import type {
  FileAfterParseHook,
  ResolvedCollection,
  ContentFile,
  ResolvedCustomCollectionSource,
  ParsedContentFile
} from '@nuxt/content'

export interface BuiltCollection {
  data: Record<string, FileAfterParseHook>
  collection: ResolvedCollection
}

export class BuildData {
  private _collections = new Map<string, BuiltCollection>()

  public get collections(): ReadonlyMap<string, BuiltCollection> {
    return this._collections
  }

  public seen(hook: FileAfterParseHook): void {
    const { name } = hook.collection

    const entry = this.collections.get(name)
      ?? { data: {}, collection: hook.collection }

    entry.data[hook.file.id] = hook

    this._collections.set(
      name,
      entry
    )
  }

  public pick(names: readonly string[]): BuiltCollection[] {
    return names.flatMap(n => this.collections.get(n) ?? [])
  }

  public all(): BuiltCollection[] {
    return Array.from(this.collections.values())
  }

  public get(name: string): BuiltCollection | undefined {
    return this.collections.get(name)
  }
}




export default defineNuxtModule({
  meta: { name: 'nuxt-content-dynamic-collection' },
  async setup(_, nuxt) {
    const build = new BuildData()

    nuxt.hook('content:file:afterParse', async (ctx) => {
      build.seen(ctx)
    })

    nuxt.hook('modules:done', async () => {
      const rootDir = nuxt.options.rootDir

      const cacheDir = ufo.joinURL(
        rootDir,
        '.nuxt',
        'content-cache'
      )

      if (!fs.existsSync(cacheDir)) {
        await fs.promises.mkdir(cacheDir, {
          recursive: true
        })
      }

      const cacheFile = ufo.joinURL(
        cacheDir,
        'content.json'
      )

      // Or write all the data
      await fs.promises.writeFile(
        cacheFile,
        JSON.stringify(build.all().map(c => c.data), null, 2),
        'utf8'
      )
    })
  }
})

This will export out a JSON file with all the events in seen into .nuxt/content-cache/content.json. You can get rid of the build data class if you find that distracting. I find it useful, you may not.