Nuxt•2mo ago

404

How do I make a custom 404 page?

8 Replies

Hi @ethan!. 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 404 page in Nuxt, you can follow these steps: 1. Create an error.vue file in the root of your project (alongside app.vue). 2. In this file, you can customize the error page layout and content. Here's a basic example:

<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>
    <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>
    <button @click="handleError">Clear errors</button>
  </div>
</template>

This example shows a basic structure for a custom error page Docs > Guide > Directory-structure > error.vue (https://nuxt.com/docs/guide/directory-structure/error). 3. You can further customize this page to specifically handle 404 errors. For example:

<template>
  <div v-if="error.statusCode === 404">
    <h1>404 - Page Not Found</h1>
    <p>The page you are looking for does not exist.</p>
    <NuxtLink to="/">Go back home</NuxtLink>
  </div>
  <div v-else>
    <h1>An error occurred</h1>
    <!-- Handle other types of errors -->
  </div>
</template>

<template>
  <div v-if="error.statusCode === 404">
    <h1>404 - Page Not Found</h1>
    <p>The page you are looking for does not exist.</p>
    <NuxtLink to="/">Go back home</NuxtLink>
  </div>
  <div v-else>
    <h1>An error occurred</h1>
    <!-- Handle other types of errors -->
  </div>
</template>

4. If you're using Nuxt UI, you can also use the UPageError component for a pre-styled error page:

<template>
  <UPageError
    :status="404"
    name="Page not found"
    message="The page you are looking for does not exist."
  />
</template>

<template>
  <UPageError
    :status="404"
    name="Page not found"
    message="The page you are looking for does not exist."
  />
</template>

This component provides a nicely styled error page out of the box Pro > Components > Page not found (https://ui.nuxt.com/pro/components/page-error). Remember, the error.vue file will handle all types of errors, not just 404. You can use conditional rendering based on the error.statusCode to provide different content for different types of errors. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

ethan!OP•2mo ago

@kapa.ai does the layouts/ directory apply to the error page?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, layouts can be applied to the error page in Nuxt. Here's how it works: 1. You can use layouts in your error.vue file by utilizing the <NuxtLayout> component Docs > Guide > Directory-structure > error.vue (https://nuxt.com/docs/guide/directory-structure/error). This allows you to wrap your error page content with a specific layout. 2. To apply a layout to your error page, you can use the <NuxtLayout> component in your error.vue file like this:

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

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

Docs > Migration > Pages and Layouts > Layouts (https://nuxt.com/docs/migration/pages-and-layouts#layouts) 3. It's important to note that in your layout file (e.g., layouts/default.vue), you should use <slot /> instead of <NuxtPage /> to render the content of the error page:

<template>
  <div id="app-layout">
    <main>
      <slot />
    </main>
  </div>
</template>

<template>
  <div id="app-layout">
    <main>
      <slot />
    </main>
  </div>
</template>

Docs > Guide > Directory-structure > layouts (https://nuxt.com/docs/guide/directory-structure/layouts) 4. If you want to use a specific layout for your error page, you can specify it in the name prop of <NuxtLayout>. For example:

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

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

Docs > Api > Components > <NuxtLayout> (https://nuxt.com/docs/api/components/nuxt-layout) Remember that the layout name is normalized to kebab-case, so if your layout file is named errorLayout.vue, it will become error-layout when passed as a name property to <NuxtLayout />. By using layouts with your error page, you can maintain a consistent look and feel across your application, even when displaying error messages. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

ethan!OP•2mo ago

@kapa.ai why is my default layout not working in src/layouts/default.vue

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize, but I don't have enough information in the provided knowledge sources to directly answer why your default layout in src/layouts/default.vue is not working. However, I can provide some general insights about Nuxt layouts that might help you troubleshoot the issue: 1. Layout Location: In Nuxt, layouts are typically placed in the layouts/ directory at the root of your project, not in src/layouts/. Make sure your layout file is in the correct location Docs > Guide > Directory-structure > layouts (https://nuxt.com/docs/guide/directory-structure/layouts). 2. Layout Structure: Ensure that your layout file contains a <slot /> component to render the page content. For example:

   <template>
     <div>
       <!-- Your layout content -->
       <slot />
     </div>
   </template>

   <template>
     <div>
       <!-- Your layout content -->
       <slot />
     </div>
   </template>

Docs > Guide > Directory-structure > layouts (https://nuxt.com/docs/guide/directory-structure/layouts) 3. Layout Usage: Make sure you're using the layout correctly in your pages or in app.vue. If you're using it in app.vue, it should look like this:

   <template>
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
   </template>

   <template>
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
   </template>

Docs > Getting-started > Views > Layouts (https://nuxt.com/docs/getting-started/views#layouts) 4. Layout Naming: The default layout should be named default.vue. If you've named it differently, make sure you're specifying the correct name when using it. If you've checked these points and are still experiencing issues, it would be helpful to see your actual code and any error messages you're encountering. The problem could be related to your specific implementation or configuration that isn't covered in the general information provided in the knowledge sources. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

Gaming

Programming

404

Did you find this page helpful?