Nuxt•11mo ago

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>

// 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>

kapa.ai•1/28/25, 11:22 AM

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:

kapa.ai•1/28/25, 11:22 AM

----------------------
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:

It's using a client-side component (<script setup><script setup>) which is not ideal for server-side redirects.
The
```
navigateTo
```
```
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:

Using route rules in your
```
nuxt.config.ts
```
```
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.

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

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:

kapa.ai•1/28/25, 11:22 AM

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•1/28/25, 11:22 AM

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

Iivancic_josip Is this a valid way to redirect on the server side and will it provide a good re...

nexoscreator•1/28/25, 12:25 PM

Define Route Rules in

nuxt.config.ts

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_josipOP•1/28/25, 12:32 PM

@!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.)

Iivancic_josip @!NEXOS CREATOR I'm aware of this but in some cases I need to do a fetch for s...

nexoscreator•1/28/25, 12:37 PM

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.

Redirects

Similar Threads

Similar Threads

Similar Threads