Redirect user when useFetch fails

I'm trying to figure out how to redirect the user when useFetch fails. For example I have:

<script setup>
const route = useRoute()
const { data } = useFetch('/api/products', {
  query: {
    id: route.params.id
  }
})
</script>

<script setup>
const route = useRoute()
const { data } = useFetch('/api/products', {
  query: {
    id: route.params.id
  }
})
</script>

Here I'm using the route param id the fetch a certain product. However, if I change the route param to an invalid id, the useFetch will fail and I want to redirect the user away from the page.

How can I achieve this? I have tried the following without result:

<script setup>
const route = useRoute()
const { data } = useFetch('/api/products', {
  query: {
    id: route.params.id
  },
  onResponseError() {
    const router = useRouter()
    router.push('/')
  }
})

// More code here
</script>

<script setup>
const route = useRoute()
const { data } = useFetch('/api/products', {
  query: {
    id: route.params.id
  },
  onResponseError() {
    const router = useRouter()
    router.push('/')
  }
})

// More code here
</script>

This doesn't seem to stop the rest of my script inside of

<script setup>

<script setup>

from executing.

Nuxt•4y ago•

7 replies

Vonox

Redirect user when useFetch fails

I'm trying to figure out how to redirect the user when useFetch fails. For example I have:

<script setup>
const route = useRoute()
const { data } = useFetch('/api/products', {
  query: {
    id: route.params.id
  }
})
</script>

<script setup>
const route = useRoute()
const { data } = useFetch('/api/products', {
  query: {
    id: route.params.id
  }
})
</script>

<script setup>
const route = useRoute()
const { data } = useFetch('/api/products', {
  query: {
    id: route.params.id
  },
  onResponseError() {
    const router = useRouter()
    router.push('/')
  }
})

// More code here
</script>

<script setup>
const route = useRoute()
const { data } = useFetch('/api/products', {
  query: {
    id: route.params.id
  },
  onResponseError() {
    const router = useRouter()
    router.push('/')
  }
})

// More code here
</script>

This doesn't seem to stop the rest of my script inside of

<script setup>

<script setup>

from executing.

Redirect user when useFetch fails

Similar Threads

Redirect user when useFetch fails

Similar Threads

Similar Threads

Similar Threads