Custom error.vue only appears in development (Nuxtv4)

Hello, I am developing an app with Nuxtv4 and I made the

error.vue

error.vue

at ~ along with

app.vue

app.vue

, now in development it appears just fine. Also when I do

pnpm generate

pnpm generate

and

pnpm preview

pnpm preview

it shows yet in the actual build it shows the default one instead of the custom one

I have this in its script

import type { NuxtError } from '#app'
const props = defineProps<{ error: NuxtError }>()
// const props = defineProps({ error: Object as () => NuxtError })
const router = useRouter()
const isDev = import.meta.dev
const handleError = () => {
  clearError({ redirect: '/' })
}
...

import type { NuxtError } from '#app'
const props = defineProps<{ error: NuxtError }>()
// const props = defineProps({ error: Object as () => NuxtError })
const router = useRouter()
const isDev = import.meta.dev
const handleError = () => {
  clearError({ redirect: '/' })
}
...

I have tried

- The commented out props definition
- Use <slot /> instead of <NuxtPage> inside <NuxtLagout> in app.vue which doesn't work and in fact gives error that I have pages and not using NuxtPage
- Having <slot /> outside of <NuxtLayout> in app.vue
- Setting createError as fatal: true in both API routes, server middleware (None of my pages have createError)
- Removing all directories and doing build and still it shows default instead of custom error.vue in production

Now what should I do? It literally does show the custom one in dev but doesn't in production after all these

Nuxt•7mo ago•

25 replies

Red

Custom error.vue only appears in development (Nuxtv4)

Hello, I am developing an app with Nuxtv4 and I made the

error.vue

error.vue

at ~ along with

app.vue

app.vue

, now in development it appears just fine. Also when I do

pnpm generate

pnpm generate

and

pnpm preview

pnpm preview

it shows yet in the actual build it shows the default one instead of the custom one

I have this in its script

import type { NuxtError } from '#app'
const props = defineProps<{ error: NuxtError }>()
// const props = defineProps({ error: Object as () => NuxtError })
const router = useRouter()
const isDev = import.meta.dev
const handleError = () => {
  clearError({ redirect: '/' })
}
...

import type { NuxtError } from '#app'
const props = defineProps<{ error: NuxtError }>()
// const props = defineProps({ error: Object as () => NuxtError })
const router = useRouter()
const isDev = import.meta.dev
const handleError = () => {
  clearError({ redirect: '/' })
}
...

Custom error.vue only appears in development (Nuxtv4)

Similar Threads

Custom error.vue only appears in development (Nuxtv4)

Similar Threads

Similar Threads

Similar Threads