TRex Posts - Answer Overflow

TRex

•Created by TRex on 6/13/2024 in #❓・help

Route Alias?

Let's say I have a folder in pages named "/books". And I have /books/index.vue. What I want is both "/books" and "/books/top-sellers routes should navigate to /books/index.vue page. Thanks in advance

4 replies

NNuxt

•Created by TRex on 5/15/2024 in #❓・help

Error Boundary (for both csr & ssr)

Since the <NuxtClientFallback> does not work at all and the <NuxtErrorBoundary> is only for client-side, I ve created this custom component. Im currently using this component to handle both client and server side errors to avoid my whole page is being redirected to error.vue instead I want to handle the component that throwing error manually and be able to render the rest of the page. This component (below) is catching most of the errors but when it comes to TypeError, nuxt redirects to error.vue (which Im trying to avoid). I think the problem is nuxt redirects to error.vue just before I could set the error (ref). I've tried this approach with useState too. I've tried to use nuxt hook (app:error) . it is also didnt work. Nuxt version: 3.11.x

<script setup lang="ts">
const error = ref<Error>()

function clearError() {
    error.value = undefined
}

onErrorCaptured((err) => {
    error.value = err
    return false
})

const route = useRoute()
watch(
    () => route.fullPath,
    () => {
        error.value = undefined
    }
)
</script>

<template>
    <slot v-if="!error" />
    <slot v-else name="error" :error="error" :clear-error="clearError" />
</template>

<script setup lang="ts">
const error = ref<Error>()

function clearError() {
    error.value = undefined
}

onErrorCaptured((err) => {
    error.value = err
    return false
})

const route = useRoute()
watch(
    () => route.fullPath,
    () => {
        error.value = undefined
    }
)
</script>

<template>
    <slot v-if="!error" />
    <slot v-else name="error" :error="error" :clear-error="clearError" />
</template>

1 replies

NNuxt

•Created by TRex on 4/25/2024 in #❓・help

Component-Based Error Handling (SSR)?

<NuxtErrorBoundry> component handles client-side errors happening in its default slot. But its not works on ssr. We are getting the ugly error page if the page that contains error is rendered on SSR. I want to my whole page to be rendered except the component that throws an err. Is there any way to handle this?

3 replies

Gaming

Programming