Plugins

Barba plugins are components that you can plug to improve the default library behavior.

Available

Here is the list of all available plugins for Barba:

  • @barba/router → allows you to use custom routes for page transitions
  • @barba/prefetch → prefetches automatically and cache your pages
  • @barba/css → a style helper that manage you CSS classes during transitions
  • @barba/head → keep your <head> up to date (coming soon)
  • @barba/preset → ready-to-use basic transitions pack (coming soon)

Usage

To use a plugin, simply tell Barba what plugin(s) and option(s) you want to use before initialize it:

1
2
3
4
5
6
7
8
9
10
11
12
import barba from '@barba/core';
import barbaPlugin from '@barba/plugin';

// tell Barba what plugin to use
barba.use(barbaPlugin, {
  custom: 'value',
});

// init Barba
barba.init({
  ...
});

Be careful, you can easily rename the import when using a bundler, which is not the case when using the plugin through a CDN: the name should be prefixed by barba, meaning @barba/plugin will need to be call as barba.use(barbaPlugin).

Developer API Router