Error Handling #

Both useLoaderData and useActionData result contains an error object similar to useAsyncData/useFetch:

<script setup>
const { data, error } = await useLoaderData()
</script>

<template>
  <div>
    <ProductList v-if="data" />
    <SomeErrorComponent v-else-if="error" :error="error" />
  </div>
</template>

You can also use the <NuxtErrorBoundary> component provided by Nuxt.

More info regarding Nuxt error handling here.