N
Nuxt•2mo ago
ChikyNuggy

UDropdownMenu not opening.

Hi everyone, After updating my NuxtUI package to "@nuxt/ui": "^3.0.0-beta.2", my dropdown menu has stopped functioning. I’ve tested this with my custom language switcher implementation as well as the example from the documentation, but neither instance activates the dropdown. There are no errors in the console or terminal, so I’m not sure what’s going wrong. Modules that I'm using: 
  modules: [
    '@nuxt/ui',
    '@nuxtjs/i18n',
    '@nuxt/scripts',
    '@nuxtjs/seo',
    '@nuxt/content',
    'nuxt-zod-i18n',
  ],
  modules: [
    '@nuxt/ui',
    '@nuxtjs/i18n',
    '@nuxt/scripts',
    '@nuxtjs/seo',
    '@nuxt/content',
    'nuxt-zod-i18n',
  ],
Below are the code I’ve tried: Custom Language Switcher 
<template>
  <div class="c-language-switcher">
    <UDropdownMenu :items="languages" :ui="{ content: 'w-48' }">
      <UButton variant="outline" :label="localeProperties.code" icon="heroicons:globe-alt" />
    </UDropdownMenu>
  </div>
</template>

<script setup lang="ts">
  interface LocaleItem {
    [key: string]: any,
    code: string,
  }

  const { locale, localeProperties, locales } = useI18n();
  const switchLocalePath = useSwitchLocalePath();

  const availableLocales = computed(() => {
    return locales.value.filter((i: LocaleItem) => i.code !== locale.value);
  });

  const languages = computed(() => {
    return availableLocales.value.map((lang: LocaleItem) => {
      return [{
        label: lang.code,
        to: switchLocalePath(lang.code),
        type: 'link',
      }];
    });
  });
</script>
<template>
  <div class="c-language-switcher">
    <UDropdownMenu :items="languages" :ui="{ content: 'w-48' }">
      <UButton variant="outline" :label="localeProperties.code" icon="heroicons:globe-alt" />
    </UDropdownMenu>
  </div>
</template>

<script setup lang="ts">
  interface LocaleItem {
    [key: string]: any,
    code: string,
  }

  const { locale, localeProperties, locales } = useI18n();
  const switchLocalePath = useSwitchLocalePath();

  const availableLocales = computed(() => {
    return locales.value.filter((i: LocaleItem) => i.code !== locale.value);
  });

  const languages = computed(() => {
    return availableLocales.value.map((lang: LocaleItem) => {
      return [{
        label: lang.code,
        to: switchLocalePath(lang.code),
        type: 'link',
      }];
    });
  });
</script>
I’m not seeing any errors during build or runtime. Has anyone encountered this issue with the latest beta? Could there be breaking changes in this release affecting the dropdown functionality, or might I be missing some configuration? Thanks in advance for any insights!
3 Replies
kapa.ai
kapa.ai•2mo ago
Hi @ChikyNuggy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I understand you're having issues with the UDropdownMenu component after updating to @nuxt/ui version ^3.0.0-beta.2. Based on the knowledge sources, I can identify a few potential issues. Possible Issues 1. Component Name Change: Looking at the documentation, there's no direct reference to a UDropdownMenu component in the Nuxt UI library. The component is actually called UDropdown as shown in the Dropdown documentation. 2. Beta Version: You're using a beta version (^3.0.0-beta.2) which might have breaking changes or bugs compared to the stable version. Suggested Solutions 1. Use the correct component name: Try replacing UDropdownMenu with UDropdown in your template: 
<UDropdown :items="languages" :ui="{ content: 'w-48' }">
  <UButton variant="outline" :label="localeProperties.code" icon="heroicons:globe-alt" />
</UDropdown>
<UDropdown :items="languages" :ui="{ content: 'w-48' }">
  <UButton variant="outline" :label="localeProperties.code" icon="heroicons:globe-alt" />
</UDropdown>
2. Check the items format: According to the Dropdown documentation, the items prop expects an array of arrays, where each inner array represents a group of items. Your current implementation might not match this format. 
const languages = computed(() => {
  // This already returns an array of arrays, which is correct
  return availableLocales.value.map((lang: LocaleItem) => {
    return [{
      label: lang.code,
      to: switchLocalePath(lang.code),
      // Note: I don't see 'type' in the documentation, but it might be supported
    }];
  });
});
const languages = computed(() => {
  // This already returns an array of arrays, which is correct
  return availableLocales.value.map((lang: LocaleItem) => {
    return [{
      label: lang.code,
      to: switchLocalePath(lang.code),
      // Note: I don't see 'type' in the documentation, but it might be supported
    }];
  });
});
3. Consider using a stable version: If you're encountering issues with the beta version, you might want to downgrade to a stable version of Nuxt UI. You can update your package.json as follows: 
{
  "devDependencies": {
    "@nuxt/ui": "^2.11.0"
  }
}
{
  "devDependencies": {
    "@nuxt/ui": "^2.11.0"
  }
}
Or if you want to stay on the cutting edge, you could try the edge version as mentioned in the Edge documentation: 
{
  "devDependencies": {
    "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
  }
}
{
  "devDependencies": {
    "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
  }
}
If none of these solutions work, it might be a specific issue with the beta version you're using. In that case, I'd recommend checking the GitHub repository for any reported issues or considering downgrading to a stable version until the beta issues are resolved. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@388399359928172545> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
ChikyNuggy
ChikyNuggyOP•2mo ago
Hi everyone, I wanted to share a quick update regarding the dropdown issue I mentioned earlier. I ended up removing my node_modules folder and package-lock.json, then reinstalled all dependencies one by one. I also chose not to add the nuxt-seo module during the reinstallation process. With these changes, everything is working perfectly now.

Did you find this page helpful?