Maintenance Mode

Nuxt module, that allows you to put your site into maintenance mode.

• ✨  Release Notes
• 🏀 Online playground

Features

• 📝  Customizable maintenance page, by handling the 503 status code
• 🏷️  Define pages to be included, with wildcard support
• 🔖  Define pages to be excluded, with wildcard support
• 🔑  Define a secret to bypass the maintenance mode
• 📦  Build-in Composables, enabling customizing page based on maintenance state.
• 🎨  RuntimeConfig support
• 🚀  Typescript ready!

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add @kristianbinau/nuxt-maintenance-mode

That's it! You can now use Maintenance Mode in your Nuxt app ✨

Usage

Add the following configuration to your nuxt.config.ts:

nuxt.config.ts

  maintenanceMode: {
    enabled: true,
  }

Options

enabled

• Type: boolean
• Default: false

Enable or disable the maintenance mode.

bypassSecret

• Type: string | null
• Default: null

Define a secret to bypass the maintenance mode.
Navigate to /?bypass={value} to bypass the maintenance mode.

include

• Type: string[] | null
• Default: null

Define pages to be included in the maintenance mode. Supports wildcard *.

exclude

• Type: string[] | null
• Default: null

Define pages to be excluded from the maintenance mode. Supports wildcard *.

When both exclude and include are set, include will take precedence

Setting options via runtimeConfig

You can also set the options via runtimeConfig:
RuntimeConfig will take precedence over the options set in nuxt.config.ts

nuxt.config.ts

  runtimeConfig: {
		public: {
      maintenanceModeEnabled: process.env.NUXT_PUBLIC_MAINTENANCE_MODE_ENABLED,
		},
	},

Composables

The module provides a composable, that allows you to customize your page based on the maintenance state.

const url = useRequestURL();
const { isUnderMaintenance } = useMaintenance(url.pathname);

In the example above, isUnderMaintenance will be true if the current page is under maintenance.
You can also pass a custom path to the useMaintenance composable.

const { isUnderMaintenance } = useMaintenance('/blog');

Contribution

Local development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release