Nuxt•3w ago

NuxUI DropdownMenu link not navigating page

I am trying to use NuxtUi dropdwn menu with these items

const items = [
  [
    {
      label: "Niklaus Mutseyekwa",
      type: "label",
    },
  ],
  [
    {
      label: "Profile",
      icon: "i-mdi-user",
      to: "/dashboard/profile",
      // component: "NuxtLink",
      // onSelect: () => (open.value = false),
    },
    {
      label: "Settings",
      icon: "i-mdi-cog-outline",
      to: "/dashboard/settings",
      // component: "NuxtLink",
    },
  ],
  [
    {
      label: "Logout",
      icon: "i-mdi-logout",
      color: "error",
      onSelect: handleSignOut,
    },
  ],
];

const items = [
  [
    {
      label: "Niklaus Mutseyekwa",
      type: "label",
    },
  ],
  [
    {
      label: "Profile",
      icon: "i-mdi-user",
      to: "/dashboard/profile",
      // component: "NuxtLink",
      // onSelect: () => (open.value = false),
    },
    {
      label: "Settings",
      icon: "i-mdi-cog-outline",
      to: "/dashboard/settings",
      // component: "NuxtLink",
    },
  ],
  [
    {
      label: "Logout",
      icon: "i-mdi-logout",
      color: "error",
      onSelect: handleSignOut,
    },
  ],
];

While the link to settings works, the one to profie doesn't. At present there is just text on the settings page but this on the profie

<script setup>
import { authClient } from "~/lib/auth-client";
const session = authClient.useSession();

const toast = useToast();
const isLoading = ref(true);

async function handleSignOut() {
  try {
    await authClient.signOut({
      callbackURL: "/auth/sign-in",
    }); 
  } catch (error) {
    console.log("Sign out failed", error);
  }
}
</script>

<template>
  <div >
    <h1>Profile</h1>

    <!-- Signed In State -->
    
      <UCard title="Session Data" v-if="session.data">
        <pre class="text-sm overflow-auto">{{ JSON.stringify(session.data, null, 2) }}</pre>
      </UCard>

      <UCard title="User Info" v-if="authStore.user">
            <p class="text-sm text-gray-500">Name</p>
            <p class="text-xl font-bold">{{ session.data.user.name }}</p>
          
          <UButton
            variant="outline"
            color="red"
            @click="handleSignOut"
         
          >
            Sign out
          </UButton>
        
      </UCard>


    <!-- Not Signed In State -->
    <UCard v-else-if="!isLoading">
      <div >
        <p class="text-lg">You are not signed in</p>
        <UButton to="/auth/sign-in">Sign In</UButton>
      </div>
    </UCard>
  </div>
</template>

<script setup>
import { authClient } from "~/lib/auth-client";
const session = authClient.useSession();

const toast = useToast();
const isLoading = ref(true);

async function handleSignOut() {
  try {
    await authClient.signOut({
      callbackURL: "/auth/sign-in",
    }); 
  } catch (error) {
    console.log("Sign out failed", error);
  }
}
</script>

<template>
  <div >
    <h1>Profile</h1>

    <!-- Signed In State -->
    
      <UCard title="Session Data" v-if="session.data">
        <pre class="text-sm overflow-auto">{{ JSON.stringify(session.data, null, 2) }}</pre>
      </UCard>

      <UCard title="User Info" v-if="authStore.user">
            <p class="text-sm text-gray-500">Name</p>
            <p class="text-xl font-bold">{{ session.data.user.name }}</p>
          
          <UButton
            variant="outline"
            color="red"
            @click="handleSignOut"
         
          >
            Sign out
          </UButton>
        
      </UCard>


    <!-- Not Signed In State -->
    <UCard v-else-if="!isLoading">
      <div >
        <p class="text-lg">You are not signed in</p>
        <UButton to="/auth/sign-in">Sign In</UButton>
      </div>
    </UCard>
  </div>
</template>

5 Replies

kapa.ai•3w ago

Hi @Dante. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I can see you're having an issue with NuxtUI DropdownMenu navigation where the profile link isn't working while the settings link does. However, I need to inform you that the knowledge sources provided do not contain specific information about NuxtUI DropdownMenu components or their navigation behavior. That said, based on the general Nuxt navigation patterns shown in the knowledge sources, here are some things you could try: Potential Solutions 1. Ensure proper navigation method: According to this Stack Overflow post about middleware redirects, using navigateTo() is the recommended approach in Nuxt for programmatic navigation rather than useRouter(). 2. Check for event propagation issues: Similar to this example about nested links, you might need to use event modifiers like @click.prevent if there are conflicting click handlers. 3. Verify the route exists: Make sure your /dashboard/profile route is properly defined in your pages directory structure. Debugging Steps Without specific NuxtUI DropdownMenu documentation in the knowledge sources, I'd recommend: - Check if there are any JavaScript errors in the browser console when clicking the profile link - Verify that both routes (/dashboard/profile and /dashboard/settings) are accessible when navigating directly via the URL - Check if there's any middleware that might be interfering with navigation to the profile page specifically Note: The knowledge sources do not explicitly mention NuxtUI DropdownMenu components, so I cannot provide specific guidance on the component or onSelect properties you've commented out. You may want to consult the official NuxtUI documentation for component-specific navigation patterns. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

DanteOP•3w ago

@kapa.ai the routes exist and there no errors in the condole

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on your confirmation that the routes exist and there are no console errors, I need to inform you that the knowledge sources provided do not contain specific information about NuxtUI DropdownMenu navigation issues or debugging steps for this particular scenario. However, based on general Nuxt routing patterns from the knowledge sources, here are some additional things to investigate: Possible Causes 1. Middleware interference: According to this discussion about middleware, middleware can sometimes cause unexpected navigation behavior. Check if you have any route middleware (global or page-specific) that might be affecting the /dashboard/profile route differently than /dashboard/settings. 2. Async operations blocking navigation: Your profile page has async operations (authClient.useSession()) in the setup. While this shouldn't prevent navigation, it's worth noting that route parameter watchers can behave unexpectedly during hydration when async setup is involved. 3. Component state: Since your profile page uses reactive state (isLoading, session.data), there might be a rendering issue rather than a navigation issue. Try adding a simple console.log at the top of your profile page's <script setup> to confirm the page component is actually being loaded. Suggested Debugging Without specific NuxtUI DropdownMenu documentation in the knowledge sources, I recommend: - Temporarily simplify your profile page to just <h1>Profile</h1> to rule out component-specific issues - Try using navigateTo('/dashboard/profile') programmatically from elsewhere in your app to see if the issue is specific to the dropdown menu - Check if the dropdown menu is closing when you click the profile link (which would indicate the click is registering) Unfortunately, I cannot provide more specific guidance about NuxtUI DropdownMenu behavior as this information is not available in the knowledge sources. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

Gaming

Programming

NuxUI DropdownMenu link not navigating page

Did you find this page helpful?