How to use Panelbear with Vuepress

Adding analytics to your Vuepress website is super easy. We'll be using the official Panelbear Vuepress Plugin.

Once you have added your website to Panelbear, all that is left to do is integrate our analytics snippet.

It's a small piece of code that runs on your website, and it collects the metrics necessary to show you the insights in the dashboard.

Quickstart

Install

Run the following command to install in your project:

npm install --dev @panelbear/vuepress-plugin-panelbear

Or with yarn:

yarn add --dev @panelbear/vuepress-plugin-panelbear

Usage

You can now add the Panelbear plugin to your project's site or theme config file (.vuepress/config.js). Simply include Panelbear in the plugins section:

module.exports = {
  plugins: [
    [
      '@panelbear/vuepress-plugin-panelbear',
      {
        site: '', // Your Site ID
        debug: false, // Enable if you wish to send events from localhost / log to console
      },
    ],
  ],
  // Other Vuepress config
};

Options

site

The Site ID of your Panelbear website.

  • Required: true
  • Type: string
  • Default: undefined
debug

Enable debug mode on your Panelbear installation.

  • Required: false
  • Type: bool
  • Default: undefined

Check your installation

After you have added our analytics script to the HTML of your website, you should be able to see pageviews show up in the dashboard within a minute of the visitors coming into your website.

If you need help, you can reach out to us at [email protected].

Tip: Check out our local development guide for some tips and tricks when testing Panelbear on your machine.