nuxt: Middleware doesn't run at all in "layouts/error.vue" page

Version

v2.3.4

Steps to reproduce

Create a simple Nuxt app with only an index.vue page
Set the nuxt.config.js mode to spa (so the middleware can only get called on the client)
Create a layouts/error.vue page with the following content:

<template></template>

<script>
export default {
  middleware() {
    console.log("Called!");
  }
};
</script>

Navigate to any page that isn’t “/”

What is expected ?

“Called!” will log to the browser console

What is actually happening?

Nothing gets logged to the browser console

<div align="right">_{This bug report is available on Nuxt community (#c8455)}</div>

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 17
Comments: 16

Most upvoted comments

Bumped into the same issue, would be nice if middleware or asyncData worked.

+16

ParallelUniv3rse on Sep 13, 2019

It is quite confusing that layouts/error.vue is actually a “Page”. While being assumed as a page it:

does not share page specific nuxt hooks, like middleware and asyncData thus context.redirect can’t be accessed;
it supports a layout property while being located inside layouts folder, so for example if I want to have an error layout for error page, the error “page” should reference itself
beforeRouteEnter, beforeRouteLeave are not being called Why can’t nuxt conventionally support pages/error.vue with full page capabilities?

Gvade on Feb 19, 2021

@angus96 I’m not applying it anywhere. In nuxt, the error page is not meant to be applied.

https://nuxtjs.org/guide/views/#error-page

The error page is a page component which is always displayed when an error occurs (that does not happen while server-side rendering). Warning: Though this file is placed in the layouts folder, it should be treated as a page. You can customize the error page by adding a layouts/error.vue file.

sam3d on Jan 31, 2019

export default async function ({ store, route, error}) { const data = await store.dispatch(‘services/getByCode’, route.params.detail) if(!data.code) { error({ statusCode: 404, message: ‘Post not found’ }) } }

Morzpx on Nov 11, 2022