N
Nuxt•2w ago
DGINX

NuxtUi Theme broken

Hello When i try to use the nuxt/ui package. I have the problem as Example the UNavigation Component is not working on mobile, it always empty when i toggle. On Desktop the dropdown are terrible. Not like in the documentation. What is the issue? app.vue 
<template>
  <div>
    <NuxtRouteAnnouncer />
    <UApp>
      <UHeader title="Test Page">
        <UNavigationMenu :items="items" />
      </UHeader>

      <UMain class="mt-8">
        <NuxtLayout>
          <NuxtPage />
        </NuxtLayout>
      </UMain>

      <UFooter>
        <template #left>
          <ClientOnly>
          </ClientOnly>
        </template>
      </UFooter>
    </UApp>
  </div>
</template>
<script setup lang="ts">
import type {NavigationMenuItem} from "#ui/components/NavigationMenu.vue";

const items = ref<NavigationMenuItem[]>([
  {
    label: "Test",
    icon: "fa7-solid:wrench",
    children: [
      {
        label: "Test Item 1",
        icon: "fa7-solid:wrench",
        href: "/test",
        description: "This is a little description",
      },
    ],
  },
])
</script>
<template>
  <div>
    <NuxtRouteAnnouncer />
    <UApp>
      <UHeader title="Test Page">
        <UNavigationMenu :items="items" />
      </UHeader>

      <UMain class="mt-8">
        <NuxtLayout>
          <NuxtPage />
        </NuxtLayout>
      </UMain>

      <UFooter>
        <template #left>
          <ClientOnly>
          </ClientOnly>
        </template>
      </UFooter>
    </UApp>
  </div>
</template>
<script setup lang="ts">
import type {NavigationMenuItem} from "#ui/components/NavigationMenu.vue";

const items = ref<NavigationMenuItem[]>([
  {
    label: "Test",
    icon: "fa7-solid:wrench",
    children: [
      {
        label: "Test Item 1",
        icon: "fa7-solid:wrench",
        href: "/test",
        description: "This is a little description",
      },
    ],
  },
])
</script>
nuxt.config.ts 
export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  modules: ['@nuxt/image', '@nuxt/ui'],
  css: ['@/assets/css/tailwind.css'],
  ui: {
    experimental: {
      componentDetection: true
    }
  }
})
export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  modules: ['@nuxt/image', '@nuxt/ui'],
  css: ['@/assets/css/tailwind.css'],
  ui: {
    experimental: {
      componentDetection: true
    }
  }
})
packages.json 
{
  "name": "dginx-test",
  "type": "module",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@nuxt/image": "^2.0.0",
    "@nuxt/ui": "^4.2.1",
    "nodemailer": "^6.9.15",
    "nuxt": "^4.2.1",
    "typescript": "^5.9.3",
    "vue": "^3.5.24",
    "vue-router": "^4.6.3"
  },
  "devDependencies": {
    "@types/nodemailer": "^7.0.4"
  }
}
{
  "name": "dginx-test",
  "type": "module",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@nuxt/image": "^2.0.0",
    "@nuxt/ui": "^4.2.1",
    "nodemailer": "^6.9.15",
    "nuxt": "^4.2.1",
    "typescript": "^5.9.3",
    "vue": "^3.5.24",
    "vue-router": "^4.6.3"
  },
  "devDependencies": {
    "@types/nodemailer": "^7.0.4"
  }
}
tailwind.css 
@import "tailwindcss";
@import "@nuxt/ui";
@import "tailwindcss";
@import "@nuxt/ui";
No description
3 Replies
kapa.ai
kapa.ai•2w ago
Hi @DGINX. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The most likely cause is that Nuxt UI’s Tailwind/UI setup isn’t fully or correctly applied, so the UNavigationMenu styles (especially responsive/mobile behavior) don’t match what the docs show. From the provided sources there are two Nuxt‑UI‑specific pitfalls that can break styling/behavior: 1. Module order with other modules (like Content/Image)
Nuxt UI needs to be loaded before some other modules so its configuration and CSS win in the merge order. There’s a closed issue where having @nuxt/content before @nuxt/ui caused Nuxt UI integration problems, and the fix was to ensure @nuxt/ui is listed first in modules. [Nuxt UI order]
In your case you currently have: 
   modules: ['@nuxt/image', '@nuxt/ui'],
   
   modules: ['@nuxt/image', '@nuxt/ui'],
Swap the order so UI comes first: 
   modules: ['@nuxt/ui', '@nuxt/image'],
   
   modules: ['@nuxt/ui', '@nuxt/image'],
(This matches the guidance that Nuxt UI should come before other modules that integrate with it.) [Nuxt UI order] 2. Ensuring the Nuxt UI CSS is actually included
The same issue also notes that Nuxt UI requires its CSS to be included in the Nuxt config. [Nuxt UI order]
You already have: 
   css: ['@/assets/css/tailwind.css'],
   
   css: ['@/assets/css/tailwind.css'],
and in tailwind.css: 
   @import "tailwindcss";
   @import "@nuxt/ui";
   
   @import "tailwindcss";
   @import "@nuxt/ui";
That matches the documented pattern in the UI Kit docs: use Uno/Tailwind utilities and then theme components via a base import. [UI Kit usage]
So after changing the module order, keep this CSS setup as‑is and rebuild. If, after: - putting @nuxt/ui first in modules, and
- confirming that tailwind.css with @import "@nuxt/ui"; is loaded, the UNavigationMenu mobile/dropdown styling is still wrong, then the knowledge sources don’t give more specific Nuxt UI troubleshooting steps. In that case, the issue is likely outside what’s covered here (for example, a local Tailwind/Uno config override, custom CSS, or a bug in the current Nuxt UI release), and I can’t reliably narrow it down further based only on these documents. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2w ago
<@244485020452913153> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
DGINX
DGINXOP•2w ago
No description

Did you find this page helpful?