code4mk

Setup maintenance mode in Nuxt.js

#nuxtjs #nuxt #code4mk #vue

#maintenance Mode

Sometimes you need to your site on maintenance mode. you can easily setup maintenance mode in nuxt app.

# Maintenance page

create a maintenance page as page\maintenance.vue

<template lang="html">
<div class="content">
  <div class="maintenance">
    <h1> Maintenance Mode </h1>
    <h1>Nuxt.js @code4mk</h1>
  </div>
</div>
</template>
<script>
export default {
mounted: function () {
  console.log(this.$route.path)
}
}
</script>
<style lang="css" scoped >
body, html {
  height: 100%;
  width: 100%;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 1em;
}
.maintenance h1 {
  font-size: 190%;
  color: #fff;
  text-shadow: -2px 2px 3px rgba(0,0,0,0.5);
  color: #d6336c;
  text-align: center;
}
.maintenance {
  /* width: 200px; */
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  fill: #d6336c;
}
.content {
  height: 100%;
  width: 100%;
  background-color: #5471B9;
}
</style>

# middleware

create a middleware asmiddleware\maintenance.js

export default function ({redirect,route}) {
 let isMaintenance = true;
 if(isMaintenance){
   return redirect('/maintenance')
 }
 if(isMaintenance=== false && route.path === '/maintenance'){
   return redirect('/')
 }
}

• isMaintenance type is boolean . you can declare it true or false.

# nuxt.config.js

now include the middleware as router middleware

router: {
    middleware: 'maintenance'
  },

Now your nuxt app is maintenance mode