N
Nuxt•2mo ago
kitten

Nuxt UI Button redirect to server route

The issue I'm having is that when I'm pressing the button I'm getting 404 Page not found: /auth/discord but this route does exist on the server side. so if I refresh the page it then works. <UButton to="/auth/discord">login with discord</UButton> how can I fix it?
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @kitten. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, it appears that you're encountering an issue with client-side navigation to a server route in Nuxt. To address this problem, you can try the following solution: Instead of using the to prop on the UButton component, you can use the @click event handler with the navigateTo function. This approach should properly handle the navigation to your server route. Here's how you can modify your code: 
<template>
  <UButton @click="handleLogin">Login with Discord</UButton>
</template>

<script setup>
const handleLogin = () => {
  navigateTo('/auth/discord', { external: true })
}
</script>
<template>
  <UButton @click="handleLogin">Login with Discord</UButton>
</template>

<script setup>
const handleLogin = () => {
  navigateTo('/auth/discord', { external: true })
}
</script>
The external: true option in the navigateTo function is crucial here. As explained in the navigateTo documentation (https://nuxt.com/docs/api/utils/navigate-to#external-url):
With external: true: - Internal URLs navigate with a full-page reload. - External URLs navigate as expected.
This should ensure that your server route is properly accessed, even if it's not recognized as part of the client-side routing. If you're still experiencing issues after implementing this solution, you may want to double-check your server route configuration to ensure it's properly set up in the server/routes directory, as described in the Server Routes documentation (https://nuxt.com/docs/guide/directory-structure/server#server-routes). Remember that server routes should be placed in the server/routes directory if you don't want them to have the /api prefix. For example: 
server/routes/auth/discord.ts
server/routes/auth/discord.ts
This file should export a default function defined with defineEventHandler() or eventHandler(). If the problem persists, you might need to investigate your Nuxt configuration and server setup further to ensure that the route is properly registered and accessible. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@1265695120725119036> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?