Harlem

Devtools

npm

This is the official Harlem devtools plugin for adding Vue devtools integration to Harlem.

Note: The Vue 3 compatible devtools are currently in beta and subject to change. Please ensure you have the beta version of the Vue devtools installed in your browser and disable the stable Vue devtools to prevent conflict.

Harlem Devtools

Installation

Before installing the devtools plugin make sure you installed @harlem/core.

yarn add @harlem/plugin-devtools

npm install @harlem/plugin-devtools

Usage

Create an instance of the plugin and register it with Harlem:

import App from './app.vue';

import harlem from '@harlem/core';
import devtoolsPlugin from '@harlem/plugin-devtools';

createApp(App)
    .use(harlem, {
        plugins: [
            devtoolsPlugin({
                label: 'My State'
            })
        ]
    })
    .mount('#app');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  1. Open your Vue devtools to see your stores.

Options

  • label: string? - the name that will appear in the Vue devtools pane. The default is 'Harlem'.
  • color: number? - a Hexadecimal number indicating the color to be used on the timeline for Harlem events. The default is 0x40c48d.

(?) indicates an optional field