Colocate components in Nuxt Content

[dbzx10299]

I wrote this code in Nuxt 3 and it did work, but now that I have upgraded to Nuxt 4, it no longer works.

I used the 'components:dirs'(dirs) hook and fast-glob. Originally this worked fine and what I can't seem to figure out is why this will not work because I can console.log each step of the way and I am indeed getting the right file paths. All that was happening before was that the components were being registered for auto importing so I don't see a reason I can't import them into Nuxt Content markdown files.

async 'components:dirs'(dirs) {
      /**
       * colocate components for blog posts
       * /content/blog/post-1/index.md
       * /content/blog/post-1/components/Foo.vue
       */
      const componentDirs = await fg('content/**/components', {
        onlyDirectories: true,
        dot: true,
      })

      for (const dir of componentDirs) {
        dirs.push({
          path: fileURLToPath(new URL(dir, import.meta.url)),
          extensions: ['vue'],
          pathPrefix: false
        })
      }
    }

[dbzx10299]

I created a tiny module but I am not sure how I am supposed to handle HMR

import {
  addComponentsDir,
  createResolver,
  defineNuxtModule,
  isIgnored,
} from '@nuxt/kit'
import fg from 'fast-glob'
import { join } from 'pathe'

export default defineNuxtModule({
  meta: {
    name: 'content-colocation'
  },
  async setup(_, nuxt) {
    const resolver = createResolver(nuxt.options.rootDir)

    // override nuxt content ignoring content/**
    nuxt.options.ignore = [
      ...(nuxt.options.ignore || [])
    ].filter(ignorePattern => ignorePattern !== 'content/**')


    /**
     * https://github.com/nuxt/content/blob/2d21c0288c8610c7790dab3508417d423b3962de/src/module.ts#L100
     * nuxt.options.ignore = [...(nuxt.options.ignore || []), 'content/**']
     */
    nuxt.hook('vite:extend', ({ nuxt, config }) => {
      const contentDir = join(nuxt.options.rootDir, 'content')

      console.log({ config })

      config.server ??= {}
      config.server.watch ??= {}
      config.server.watch.ignored = (file) => {
        if (file.startsWith(contentDir) && file.includes('.meta/components')) {
          return false
        }
        return isIgnored(file)
      }
    })

    // colocate images
    nuxt.hook('nitro:config', async (nitroConfig) => {
      const imageDirs = await fg('content/**/.meta/imgs', {
        onlyDirectories: true,
        dot: true,
      })

      for (const imageDir of imageDirs) {
        (nitroConfig.publicAssets ??= []).push({
          baseURL: '/',
          dir: resolver.resolve(imageDir),
          maxAge: 60 * 60 * 24 * 7
        })
      }
    })

    // colocate components
    const componentDirs = await fg('content/**/.meta/components', {
      onlyDirectories: true,
      dot: true,
    })

    for (const componentDir of componentDirs) {
      addComponentsDir({
        path: resolver.resolve(componentDir),
        pathPrefix: false,
        watch: true
      })
    }

  }
})