Nuxt•4w ago

Custom Error Page in NuxtJS 3

How to custom error page as our own and make it dynamic for each response code.

5 Replies

Hi @Adnan Erlansyah. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To create a custom error page in Nuxt 3 and make it dynamic for each response code, you can follow these steps: 1. Create an error.vue file in the root directory of your Nuxt 3 project. This file will serve as your custom error page Docs > Guide > Directory-structure > error.vue (https://nuxt.com/docs/guide/directory-structure/error). 2. In your error.vue file, you can use the error prop to access the error details, including the status code. Here's a basic example of how you can structure your custom error page:

<script setup lang="ts">
import type { NuxtError } from '#app'

const props = defineProps({
  error: Object as () => NuxtError
})

const handleError = () => clearError({ redirect: '/' })
</script>

<template>
  <div>
    <h2>{{ error.statusCode }}</h2>
    <p>{{ error.message }}</p>
    <button @click="handleError">Clear errors</button>
  </div>
</template>

<script setup lang="ts">
import type { NuxtError } from '#app'

const props = defineProps({
  error: Object as () => NuxtError
})

const handleError = () => clearError({ redirect: '/' })
</script>

<template>
  <div>
    <h2>{{ error.statusCode }}</h2>
    <p>{{ error.message }}</p>
    <button @click="handleError">Clear errors</button>
  </div>
</template>

This setup allows you to dynamically display the error status code and message Docs > Getting-started > Error Handling > Error Page Part 1 (https://nuxt.com/docs/getting-started/error-handling#error-page). 3. To make the error page more dynamic based on different response codes, you can add conditional logic in your template or script. For example:

<script setup lang="ts">
import type { NuxtError } from '#app'

const props = defineProps({
  error: Object as () => NuxtError
})

const errorMessage = computed(() => {
  switch (props.error.statusCode) {
    case 404:
      return "Whoops! The page you're looking for doesn't exist."
    case 500:
      return "Oops! Something went wrong on our end."
    default:
      return props.error.message
  }
})

const handleError = () => clearError({ redirect: '/' })
</script>
<template>
  <div>
    <h2>{{ error.statusCode }}</h2>
    <p>{{ errorMessage }}</p>
    <button @click="handleError">Go back home</button>
  </div>
</template>

<script setup lang="ts">
import type { NuxtError } from '#app'

const props = defineProps({
  error: Object as () => NuxtError
})

const errorMessage = computed(() => {
  switch (props.error.statusCode) {
    case 404:
      return "Whoops! The page you're looking for doesn't exist."
    case 500:
      return "Oops! Something went wrong on our end."
    default:
      return props.error.message
  }
})

const handleError = () => clearError({ redirect: '/' })
</script>
<template>
  <div>
    <h2>{{ error.statusCode }}</h2>
    <p>{{ errorMessage }}</p>
    <button @click="handleError">Go back home</button>
  </div>
</template>

This approach allows you to customize the error message based on different status codes. 4. If you want to use a layout with your error page, you can utilize the NuxtLayout component:

<template>
  <NuxtLayout name="error">
    <!-- Your error page content -->
  </NuxtLayout>
</template>

<template>
  <NuxtLayout name="error">
    <!-- Your error page content -->
  </NuxtLayout>
</template>

Remember that you shouldn't place the error.vue file in your ~/pages directory, as it's not a route Docs > Guide > Directory-structure > error.vue (https://nuxt.com/docs/guide/directory-structure/error). By following these steps, you can create a custom, dynamic error page in Nuxt 3 that adapts to different response codes. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@1079709612078534676> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Adnan ErlansyahOP•4w ago

@kapa.ai how about to add dynamic title on the error page. something like this.

// Title & Meta Tags
useHead({
  title: `${error?.statusCode} - ${titleErrorMessage}`,
});

// Title & Meta Tags
useHead({
  title: `${error?.statusCode} - ${titleErrorMessage}`,
});

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Certainly! You can add a dynamic title to your error page in Nuxt 3 using the useHead composable. This approach allows you to set the page title based on the error status code and a custom error message. Here's how you can implement it in your error.vue file:

<script setup lang="ts">
import type { NuxtError } from '#app'

const props = defineProps({
  error: Object as () => NuxtError
})

const titleErrorMessage = computed(() => {
  switch (props.error.statusCode) {
    case 404:
      return "Page Not Found"
    case 500:
      return "Server Error"
    default:
      return "An Error Occurred"
  }
})

// Title & Meta Tags
useHead({
  title: `${props.error.statusCode} - ${titleErrorMessage.value}`,
})

const handleError = () => clearError({ redirect: '/' })
</script>

<template>
  <div>
    <h2>{{ error.statusCode }}</h2>
    <p>{{ error.message }}</p>
    <button @click="handleError">Go back home</button>
  </div>
</template>

<script setup lang="ts">
import type { NuxtError } from '#app'

const props = defineProps({
  error: Object as () => NuxtError
})

const titleErrorMessage = computed(() => {
  switch (props.error.statusCode) {
    case 404:
      return "Page Not Found"
    case 500:
      return "Server Error"
    default:
      return "An Error Occurred"
  }
})

// Title & Meta Tags
useHead({
  title: `${props.error.statusCode} - ${titleErrorMessage.value}`,
})

const handleError = () => clearError({ redirect: '/' })
</script>

<template>
  <div>
    <h2>{{ error.statusCode }}</h2>
    <p>{{ error.message }}</p>
    <button @click="handleError">Go back home</button>
  </div>
</template>

This implementation uses the useHead composable to set a dynamic title for your error page Docs > Getting-started > SEO and Meta > Examples (https://nuxt.com/docs/getting-started/seo-meta#examples). The title will include the error status code and a custom error message based on the status code. A few key points to note: 1. The useHead composable is used to set the page title dynamically. 2. We create a computed property titleErrorMessage to determine the appropriate error message based on the status code. 3. The title is set using a template string that combines the status code and the computed error message. This approach ensures that your error page will have a descriptive and dynamic title that reflects the specific error encountered. For example, if a 404 error occurs, the page title would be "404 - Page Not Found". Remember that useHead is reactive, so if you need to update the title based on any changes, it will automatically reflect those changes Docs > Getting-started > SEO and Meta > Examples (https://nuxt.com/docs/getting-started/seo-meta#examples). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@1079709612078534676> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Custom Error Page in NuxtJS 3