NuxUI DropdownMenu link not navigating page
I am trying to use NuxtUi dropdwn menu with these items
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
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>
