Nuxt•3w ago

Nuxt content style and prose

I'm starting a new project with nuxt, content, Nuxt UI and i18n and everything works, but prose styling, anchor and related default styling is not applied. I download a clean starter template without nuxt ui and everything works fine with the default styles is applied. Is this expected with nuxt ui (non pro)?

7 Replies

kapa.ai•3w ago

Hi @Nawi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources, it appears that the styling issues you're experiencing with Nuxt Content and prose components are related to how Nuxt UI Pro enhances the default styling. From what I can understand, Nuxt UI Pro provides enhanced typography components and styling for Nuxt Content, particularly for prose elements like headings, paragraphs, lists, and links. The regular Nuxt UI package doesn't include these prose enhancements by default. According to the documentation, when using Nuxt UI Pro with Nuxt Content v3, you get access to pre-styled prose components automatically:

"When using Nuxt UI Pro v3 with Nuxt Content v3, you get access to a set of pre-styled prose components. When using the <ContentRenderer> component, your markdown content will be automatically styled with beautiful typography and consistent spacing." Getting-started

The documentation also mentions:

"Prose components are replacements for HTML typography tags introduced by the @nuxtjs/mdc module, Nuxt UI Pro overrides each one to provide a consistent look and feel." Getting-started

This suggests that the enhanced prose styling you're looking for is specifically part of Nuxt UI Pro, not the standard Nuxt UI package. That would explain why your clean starter template (which likely uses the default Nuxt Content styling without Nuxt UI) works fine with default styles, while your project with Nuxt UI doesn't apply those styles. To get the enhanced prose styling, you would need to add Nuxt UI Pro to your project:

export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro']
})

export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro']
})

And make sure to register it before @nuxt/content in your modules array:

export default defineNuxtConfig({
  modules: [
    '@nuxt/ui-pro',
    '@nuxt/content'
  ],
  css: ['~/assets/css/main.css']
})

export default defineNuxtConfig({
  modules: [
    '@nuxt/ui-pro',
    '@nuxt/content'
  ],
  css: ['~/assets/css/main.css']
})

So yes, it is expected that the default prose styling wouldn't be applied when using regular Nuxt UI without the Pro version, as the prose enhancements are part of the Pro package. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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