How to auto import Components in Source Content folder?

[ManasMadrecha]

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.