showError()

Displays the full-screen error page programmatically.

Since Nuxt 3.0 Spec ↗

Syntax

showError(error)

Parameters

NameTypeRequiredDescription
error string | Error | { statusCode, statusMessage, message } Yes The error to display; objects may include `statusCode` and `statusMessage`.

Returns

void — Sets the global error and renders error.vue.

Examples

<script setup lang="ts">
async function load() {
  try {
    await $fetch('/api/data')
  } catch (e) {
    showError({ statusCode: 500, statusMessage: 'Load failed' })
  }
}
</script>
<script setup lang="ts">
const { error } = await useFetch('/api/post')
if (error.value) showError(error.value)
</script>

Notes

Equivalent to throwing a fatal `createError`, but callable from anywhere (event handlers, callbacks) rather than only at setup time. It populates `useError()` and renders the global `error.vue`. Use `clearError()` to recover.

See also