Error.vue not working with createError?
I think I am confused about how to have a custom error page for showing 404 messages. I have a setup that is very similar to the one written in the CreateError docs: https://nuxt.com/docs/api/utils/create-error .
Its just a [title].vue dynamic page with this:
const { data: page } = await useAsyncData(
page-${route.params.title}, () => {
return $directus.request($readItem('Pages', route.params.title, {
fields: ['', 'Page_Content....*']
}))
})
if (!page.value) {
throw createError({
statusCode: 404,
statusMessage: 'Page Not Found',
fatal: true
})
}
Is this supposed to send me to the error.vue page in the root of my project? Or is this not how it's designed? It currently shows a page like the attached image. Just wondering if I misunderstood the function of this util. Thanks!
2 Replies
It's the same result with showError. In my terminal it shows: ERROR [nuxt] [request error] [fatal] [404] Page Not Found for both. And I can change the code and it will correctly report the new code. It just doesnt take me to the error.vue page which is what I thought it would do.
I tried it and it still doesnt, still shows the default browser error page. This was my code:
const { data: page } = await useAsyncData(
}) } Thanks for that. I boiled it down to a server compression plugin I was using: import { useCompression } from 'h3-compression' export default defineNitroPlugin((nitro) => { nitro.hooks.hook('render:response', async (response, { event }) => { if (!response.headers?.['content-type'].startsWith('text/html')) return await useCompression(event, response) }) }) Any idea why that would cause the error to break?
page-${route.params.title}, () => {
return $directus.request($readItem('Pages', route.params.title, {
fields: ['', 'Page_Content....*']
}))
})
if (!page.value) {
showError({
fatal:true,
statusCode: 404,
statusMessage: 'Page Not Found',
}) } Thanks for that. I boiled it down to a server compression plugin I was using: import { useCompression } from 'h3-compression' export default defineNitroPlugin((nitro) => { nitro.hooks.hook('render:response', async (response, { event }) => { if (!response.headers?.['content-type'].startsWith('text/html')) return await useCompression(event, response) }) }) Any idea why that would cause the error to break?
https://github.com/CodeDredd/h3-compression/issues/4 it turns out it was this. Super cool!
GitHub
Nuxt 3 broken error page handling on direct URL call · Issue #4 · C...
Environment Operating System: Darwin Node Version: v20.9.0 Nuxt Version: 3.8.2 CLI Version: 3.10.0 Nitro Version: 2.8.1 Package Manager: [email protected] Builder: - User Config: devtools Runtime Modules:...