N
Nuxt•3d ago
ivancic_josip

Redirects

Is this a valid way to redirect on the server side and will it provide a good redirectCode to search engines? An old route url would only appear on some other website, not inside the website, so it would always run on the server side. 
// my-old-route.vue

<script setup lang="ts">
const route = useRoute("my-old-route");

navigateTo(
  {
    name: "new-route",
  },
  {
    redirectCode: 301,
  }
);
</script>
// my-old-route.vue

<script setup lang="ts">
const route = useRoute("my-old-route");

navigateTo(
  {
    name: "new-route",
  },
  {
    redirectCode: 301,
  }
);
</script>
5 Replies
kapa.ai
kapa.ai•3d ago
Hi @ivancic_josip. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- While your approach is on the right track, it's not the most optimal or recommended way to handle server-side redirects in Nuxt 3. Let me explain why and provide a better alternative. The code you've shown will work, but it has a few issues: 1. It's using a client-side component (<script setup>) which is not ideal for server-side redirects. 2. The navigateTo function is primarily designed for client-side navigation, although it can work on the server in some cases. For server-side redirects in Nuxt 3, especially for old routes that only exist on external websites, a better approach is to use route rules or server routes. Here's a recommended way to handle this: 1. Using route rules in your nuxt.config.ts: 
export default defineNuxtConfig({
  routeRules: {
    '/my-old-route': { redirect: '/new-route', statusCode: 301 }
  }
})
export default defineNuxtConfig({
  routeRules: {
    '/my-old-route': { redirect: '/new-route', statusCode: 301 }
  }
})
This method is more efficient as it sets up the redirect at the server level and provides the correct 301 status code for search engines. 2. Alternatively, for more complex scenarios, you can use a server route: 
// server/routes/my-old-route.ts
export default defineEventHandler((event) => {
  return sendRedirect(event, "/new-route", 301);
});
// server/routes/my-old-route.ts
export default defineEventHandler((event) => {
  return sendRedirect(event, "/new-route", 301);
});
This approach uses the sendRedirect function, which is specifically designed for server-side redirects in Nuxt 3. Both of these methods will provide the correct 301 status code to search engines, which is important for SEO when permanently redirecting old URLs. For more information on these approaches, you can refer to: - Nuxt 3 Docs: Route Rules - H3 Docs: sendRedirect These methods are more reliable for server-side redirects and will ensure that search engines and other crawlers correctly understand and follow your redirects. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3d ago
<@733318860945621052> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
!NEXOS CREATOR
!NEXOS CREATOR•3d ago
Define Route Rules in nuxt.config.ts 
export default defineNuxtConfig({
  routeRules: {
    '/my-old-route': {
      redirect: { to: '/new-route', statusCode: 302 }
    }
    // ...
  }
})
export default defineNuxtConfig({
  routeRules: {
    '/my-old-route': {
      redirect: { to: '/new-route', statusCode: 302 }
    }
    // ...
  }
})
ivancic_josip
ivancic_josipOP•3d ago
@!NEXOS CREATOR I'm aware of this but in some cases I need to do a fetch for some redirect data, which I need to be able to redirect to that route (a slug, id etc.)
!NEXOS CREATOR
!NEXOS CREATOR•3d ago
For Server Routes: https://nitro.build/guide/routing try useRoute: https://nuxt.com/docs/api/composables/use-route
Server Routes - Nitro
Nitro supports filesystem routing to automatically map files to h3 routes.
Nuxt
useRoute · Nuxt Composables
The useRoute composable returns the current route.

Did you find this page helpful?