"Agressive" error hack

[ManUtopiK]

I found a simpler way to put my application in maintenance mode:

store/index.js

export const actions = {
  async nuxtServerInit({ commit }, { app, route, redirect, error }) { // Compatible SSR
    const maintenance = true // Your business logic here to set maintenance status
    if (
      maintenance
      && route.name !== 'login' // Allow access to custom route here 
      && !app.$auth.loggedIn // Handle your auth logic: authorize admin...
    ) {
      redirect('/maintenance') // Need this to catch route in error.vue
      error({ statusCode: 503 }) // 💣 Throw error with 503 code for SEO!
    }
  })
}

layouts/error.vue

Write error page like you want. Just add this layout function.

<script>
  export default {
    layout(context) {
      if (context.route.name === 'maintenance') return 'maintenance'
    }
  }
</script>

layouts/maintenance.vue

<template>
  <div>
    My awesome maintenance page
  </div>
</template>

pages/maintenance.vue

// create blank page only to prevent nuxt router error

By this way, it's possible to put app in maintenance mode while allowing access to certain page for authorized users. This module cannot do that, and the whole process is easier to read... Is there something wrong with this little hack? Maybe we don't need redirect in nuxtServerInit, but I don't know how to get error statusCode or error message in layout(context)...

[ManUtopiK]

Since I posted this issue, this "agressive hack" work like a charm. I used it with nuxt 2.9.1. @potato4d any thoughts about it?

[potato4d]

@ManUtopiK

:+1: I will look at the proposal on the next holiday.