Nuxt•4mo ago

Component synchronisation in nuxt studio

Hey! It seems like components are only picked up by studio to be used in markdown autocomplete after they are used in content files. Is there a way for them to get picked up without them being used in content files already? Thanks in advance!

3 Replies

kapa.ai•4mo ago

Hi @Stig Vanbrabant. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You're correct that Nuxt Studio's visual editor lists Vue components for use in Markdown, but by default, only components in the /components/content directory are automatically available in the Studio editor for autocomplete and insertion—regardless of whether they've already been used in content files. Editors can access these components by typing / in the editor, which brings up the list of available components from that directory. If you want components from outside /components/content (such as from external libraries or other custom directories) to appear in Studio's component list and be available for insertion/autocomplete, you need to explicitly register them as global components in your Nuxt configuration. This makes them discoverable by Studio, not just usable in Markdown. Here’s how you can do it for external components:

export default defineNuxtConfig({
  hooks: {
    'components:extend': (components) => {
      const globals = components.filter(c => ['UButton', 'UIcon'].includes(c.pascalName))

      globals.forEach(c => c.global = true)
    }
  },
})

export default defineNuxtConfig({
  hooks: {
    'components:extend': (components) => {
      const globals = components.filter(c => ['UButton', 'UIcon'].includes(c.pascalName))

      globals.forEach(c => c.global = true)
    }
  },
})

This approach ensures that Studio fetches all the metadata for those components and lists them in the editor, even if they haven't been used in any content file yet. For your own components, simply placing them in /components/content is sufficient for Studio to pick them up automatically for autocomplete and insertion, without requiring prior usage in content files. For more details, see the official documentation: Nuxt Studio - Vue Components in Markdown ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@1185156724261408809> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Stig VanbrabantOP•4mo ago

@kapa.ai I've already placed my components inside the /components/content folder. But they are still not being picked up without them being used inside content files. Could it be there is something wrong with the nuxt/content module then? I'm not sure if this makes a difference but i'm deploying my site using NuxtHub

Gaming

Programming

Component synchronisation in nuxt studio

Did you find this page helpful?