How to auto import Components in Source Content folder?

Currently, we can use components/content folder to write components that will be used in markdown files.

But, that’s not an optimum workflow especially when adding some component, which will be only used in a particular markdown file. It can be similar to Vitepress or Vuepress, but instead of writing javascript in md file, write it in nearby component, and just use it in md file.

So, it would be better to write such components alongside the markdown file itself (both in same folder inside content folder), and then directly use that component inside the markdown file.

So, how to auto import such component inside content folder?

I tried this in nuxt.config.ts: (It doesn’t work)

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  components: {
    "dirs": [
      {
        "path": "~/components/global",
        "global": true
      },
      "~/components",
      {
        "path": "~/content", // this doesn't work
        "global": true
      }
    ]
  },
  modules: ['@nuxt/content'],
  content: {
    // ignores: ['.*\\.vue'],
  }
})

It still gives this warning (if md-hello component (which is inside content folder) is used anywhere in any markdown file)

[Vue warn]: Failed to resolve component: md-hello
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

[farnabaz]

Nuxt does not load components from content dir, because the content module adds source directories into Nuxt ignore paths. (https://github.com/nuxt/content/blob/main/src/module.ts#L286-L295) Otherwise, Vite’s server will rebuild on every file change.

Maybe we can ignore .vue files from this ignore pattern.

[farnabaz]

AFAIK ignore option only applies to files inside rootDir and all files outside of root dir will not be affected by this.

Also, I couldn’t reproduce the issue in my simple reproduction, maybe I’m missing something. It would be nice if you create a reproduction for it (a github repo) to reproduce this behavior.

I will create a PR for Vue file inside the content directory.