TRex
TRex
PostsComments
NNuxt
Created by TRex on 6/13/2024 in #❓・help
Route Alias?
Thanks @manniL / TheAlexLichter 😄
4 replies
NNuxt
Created by TRex on 6/13/2024 in #❓・help
Route Alias?
seems its already solved 1m ago 😄 https://discord.com/channels/473401852243869706/1249978368582225931
4 replies
NNuxt
Created by TRex on 4/25/2024 in #❓・help
Component-Based Error Handling (SSR)?
For those who looks for a solution, this works perfect on both csr and ssr!!! components/ErrorBoundary.vue 
<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>
How to use 
<error-boundary>
  <nuxt-page v-bind="$attrs" />
  <template #error="{ error, clearError }">
    <p>{{ error }}</p>
    <button @click="clearError">Try again</button>
  </template>
</error-boundary>
<error-boundary>
  <nuxt-page v-bind="$attrs" />
  <template #error="{ error, clearError }">
    <p>{{ error }}</p>
    <button @click="clearError">Try again</button>
  </template>
</error-boundary>
Source https://github.com/nuxt/nuxt/issues/15781#issuecomment-1592681048
3 replies