Can we create components in subfolders in nuxt content?

[dbzx10299]

I have a markdown blog and I have some demos that I use, one of them is a counter component.

In my markdown file if I have the following code:

This is a demo for a counter

:Counter

This is fine and it works, but is there a way in the components/content directory that I could create a folder Demo and then put the Counter inside of it so I could do this instead? It would help to keep everything organized instead of polluting the folder if
there were many components for demo purposes. Rather than components/content/Counter.vue is it possible to use components/content/demo/Counter.vue?

This is a demo for a counter

:DemoCounter

[nobkd]

By default, directory names in components/content/ are ignored and not added as prefix of the component.

The docs state, that all global components are available in Markdown.

Also, the content subdirectory is just a folder that contains global components and disabled prefixing.

content/src/module.ts

Lines 473 to 484 in f9ca7fe

	const globalComponents = resolve(srcDir, 'components/content')
	const dirStat = await fs.promises.stat(globalComponents).catch(() => null)
	if (dirStat && dirStat.isDirectory()) {
	nuxt.hook('components:dirs', (dirs) => {
	dirs.unshift({
	path: globalComponents,
	global: true,
	pathPrefix: false,
	prefix: ''
	})
	})
	}

---

You can add a rule to your nuxt.config.ts that states, that components in your directory are global and get prefixed.

It seems, that you can't update the behavior of ~/components/content or its subdirectories.

So I suggest you to create your own global path for prefixed components.

This is a possible solution, but you might not want to prefix by directory, so customize it to fit your needs:

// nuxt.config.ts
export default defineNuxtConfig({
  // ...
  components: [
    {
      path: '~/components/content-demo',
      global: true, // sets the path to global so you can use the components in your markdown
      pathPrefix: true, // sets directory prefixing to true so subdirs are added as prefix to components
      prefix: 'Demo', // prefix for components in this path
    },
    // ...
  ],
  // ...
})

[dbzx10299]

I did try this and still I'm getting tons of errors saying [Vue warn]: Failed to resolve component: ..... It seems it is causing every other component to break for some reason.

[nobkd]

Here is an example of what I have: https://stackblitz.com/edit/github-iydqkf?file=nuxt.config.ts,content%2Findex.md,components%2Fcontent-demo%2FCounter.vue,components%2Fcontent%2FCounter.vue

Can you create a reproduction or do you have a public repository where this can be seen?

[dbzx10299]

Thanks that did the trick. I am not using document driven mode, and in my nuxt config I did have to add beneath the custom path '~/components'

[goodpixels]

I am using nuxt 3.6.5 with @nuxt/content 2.7.2 and unfortunately, globally registered components do not work, unless placed in the /components/content directory.

So either the docs are incorrect, or this is a bug. How can I re-use components already registered by Nuxt in my content docs?

Here's a repository with minimal setup to reproduce the bug: https://github.com/goodpixels/nuxt-content-not-resolving-global-components