Properly abort rendering a page and redirect to another

Hello,

I use Nuxt 3 and Pinia store. I have this case in which a page may either be rendered or redirect to another page depending on a condition. Here's an example:

<script setup lang="ts">
const ordersStore = useOrdersStore();
await ordersStore.load();

if (ordersStore.latest?.status === "Started") {
  throw navigateTo({
    name: "orders-id-view",
    params: {
      id: ordersStore.latest.id,
    },
  });
}
</script>
<template>
  <div class="mt-8 mb-32">
    <div v-if="ordersStore.application?.status === 'Rejected'">
      Show info
    </div>
    <div v-else>
      other stuff...
    </div>
  </div>
</template>

<script setup lang="ts">
const ordersStore = useOrdersStore();
await ordersStore.load();

if (ordersStore.latest?.status === "Started") {
  throw navigateTo({
    name: "orders-id-view",
    params: {
      id: ordersStore.latest.id,
    },
  });
}
</script>
<template>
  <div class="mt-8 mb-32">
    <div v-if="ordersStore.application?.status === 'Rejected'">
      Show info
    </div>
    <div v-else>
      other stuff...
    </div>
  </div>
</template>

I tried with
await navigateTo
await navigateTo
instead of
throw navigateTo
throw navigateTo
too

However, this method of throwing to navigate while it works, it seems to be problematic because the server seems to still attempt to render the

<template>

<template>

regardless of throwing/await navigateTo during setup.

So, what's the proper way to abort rendering a page and redirect to another based on a condition?

Nuxt•13mo ago•

12 replies

Properly abort rendering a page and redirect to another

Hello,

I use Nuxt 3 and Pinia store. I have this case in which a page may either be rendered or redirect to another page depending on a condition. Here's an example:

<script setup lang="ts">
const ordersStore = useOrdersStore();
await ordersStore.load();

if (ordersStore.latest?.status === "Started") {
  throw navigateTo({
    name: "orders-id-view",
    params: {
      id: ordersStore.latest.id,
    },
  });
}
</script>
<template>
  <div class="mt-8 mb-32">
    <div v-if="ordersStore.application?.status === 'Rejected'">
      Show info
    </div>
    <div v-else>
      other stuff...
    </div>
  </div>
</template>

<script setup lang="ts">
const ordersStore = useOrdersStore();
await ordersStore.load();

if (ordersStore.latest?.status === "Started") {
  throw navigateTo({
    name: "orders-id-view",
    params: {
      id: ordersStore.latest.id,
    },
  });
}
</script>
<template>
  <div class="mt-8 mb-32">
    <div v-if="ordersStore.application?.status === 'Rejected'">
      Show info
    </div>
    <div v-else>
      other stuff...
    </div>
  </div>
</template>

<template>

<template>

regardless of throwing/await navigateTo during setup.

So, what's the proper way to abort rendering a page and redirect to another based on a condition?

Properly abort rendering a page and redirect to another

Similar Threads

Properly abort rendering a page and redirect to another

Similar Threads

Similar Threads

Similar Threads