#Wrap <UApp> in app.vue

5 messages · Page 1 of 1 (latest)

sharp swiftBOT
#

Hi @fair dust. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To properly use Nuxt UI 3 with Nuxt 3, you should wrap your application with the <UApp> component. Since you're not using app.vue, the best place to add this component is in your default layout. Here's how you can modify your layouts/default.vue file:

<template>
  <UApp>
    <slot />
  </UApp>
</template>

By wrapping the <slot /> with <UApp>, you ensure that the Nuxt UI styles are applied to all pages that use this layout.

However, it's important to note that using app.vue is recommended in Nuxt 3, as it provides a central entry point for your application. If you're open to using app.vue, you could create one and structure it like this:

<template>
  <UApp>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </UApp>
</template>

This approach wraps your entire application, including layouts and pages, with the <UApp> component, ensuring that Nuxt UI styles are applied consistently throughout your app.

If you're still experiencing issues with styles not being applied after making these changes, make sure you've properly installed and configured Nuxt UI in your project. You can refer to the Nuxt UI Pro documentation for detailed installation instructions.

Nuxt 3 Documentation also provides more information on using app.vue and structuring your Nuxt 3 application.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

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

fair dust
# sharp swift

I did exactly as you describe, but the components I add, are not styled.

fair dust
#

Wrap <UApp> in app.vue