Swup base plugin

Downloads in past


212.0.22 months ago4 years agoMinified + gzip package size for @swup/plugin in KB


Swup Base Plugin
Base class for creating swup plugins.

Creating a Plugin

To create a new plugin, use the official swup plugin template. It comes with detailed instructions and the required tooling.


import Plugin from '@swup/plugin';

export default class PluginName extends Plugin {
  name = 'PluginName';
  mount() {}
  unmount() {}

or alternatively with TS
import Plugin, { PluginType } from '@swup/plugin';

export default class PluginName extends Plugin implements PluginType {
  name = 'PluginName';
  mount() {}
  unmount() {}


The base plugin provides a few simple command line tools to help with bundling and linting.


Bundle the plugin for production using microbundle, creating ESM and UMD builds.
# Bundle and transpile plugin code
swup-plugin bundle

# Bundle plugin code in watch mode
swup-plugin dev

Linting & formatting

Lint the plugin code using prettier and swup's recommended rules.
# Lint plugin code
swup-plugin lint

# Fix and format any lint errors
swup-plugin format

Package info

Check that the plugin's package.json file contains the required information for microbundle: input, output, export map, amd name, etc.
# Check plugin package info
swup-plugin check