Error handling

Error page

Customize the default error page by adding ~/error.vue in the source directory of your application.

error.vue

<script setup lang="ts">const props = defineProps({  error: Object})const handleError = () => clearError({ redirect: '/' })</script><template>  <div>    <h2>{{ error.statusCode }}</h2>    <button @click="handleError">Clear errors</button>  </div></template>

The error page has a single prop - error which contains an error for you to handle.

The error object provides the fields:

{  url: string  statusCode: number  statusMessage: string  message: string  description: string  data: any}

createError

If you throw an error created with createError on client-side:

[slug

<script setup lang="ts">const route = useRoute()const { data } = await useFetch(`/api/movies/${route.params.slug}`)if (!data.value) {  throw createError({    statusCode: 404,    statusMessage: 'Page Not Found'  })}</script>

FeaturesMagic Links

FeaturesAnalytics