ChikyNuggy
ChikyNuggy
PostsComments
NNuxt
Created by ChikyNuggy on 3/7/2025 in #❓・help
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!
6 replies