Maintenance Mode#

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

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

Configure Feed