Powerfully simple global state management for Vue 3. Head over to harlemjs.com to get started or take a look at the demo to see it in action.
Harlem has a simple functional API for creating, reading and mutating state. From the most basic global state management needs to the most complex, Harlem has you covered.
All state exposed from a Harlem store is immutable. State can only be changed through mutations/actions making your state predictable and auditable.
Harlem is super lightweight, tree-shakeable, and dependency-free! It is designed to be used with native ES modules so even unused parts of your stores (getters, mutations, actions etc.) can be tree-shaken.
Harlem comes with a suit of official extensions that allow you to add extra features to your stores such as cancellable actions, tracing, transactions, undo/redo, and more. You can even write your own extension or plugin.
Harlem has a great developer experience. It's built using TypeScript so all of your state, getters, and mutations are strongly typed. Harlem also has Vue devtools integration so you can explore your stores and see store events on the timeline in realtime.
Harlem is built by enterprise software engineers and used in medium-large enterprise software. It's built to handle even the most complex state management use-cases.
- TypeScript support
- Vue devtools integration
- Lightweight & dependency-free
- Tree-shakeable
- Extensible (via plugins & extensions)
- SSR Support
Check out the docs for more details.
Getting started with Harlem is easy. Just follow the steps below and you'll be up and running in no time.
Install harlem and any plugins/extensions you wish to include.
# yarn
yarn add harlem
# npm
npm install harlemThe devtools plugin is enabled by default during development and tree-shaken out of production builds. If you don't need devtools during develpment, you can instead install harlem from @harlem/core
If you're using Nuxt, instead follow the instructions to install the Nuxt module and then resume this guide below, at Create your first store.
Register the Harlem plugin with your Vue app instance:
import App from './app.vue';
import {
createVuePlugin
} from 'harlem';
createApp(App)
.use(createVuePlugin())
.mount('#app');Create your store and define any getters, actions or mutations:
import {
createStore
} from 'harlem';
// The initial state for this store
const STATE = {
firstName: 'John',
lastName: 'Smith'
};
// Create the store, specifying the name and intial state
export const {
state,
getter,
mutation,
action,
...store
} = createStore('user', STATE);
export const fullName = getter('fullname', state => `${state.firstName} ${state.lastName}`);
export const setFirstName = mutation('set-first-name', (state, payload: string) => {
state.firstName = payload;
});
export const setLastName = mutation('set-last-name', (state, payload: string) => {
state.lastName = payload;
});
export const loadDetails = action('load-details', async (id: string, mutate) => {
const response = await fetch(`/api/details/${id}`);
const details = await response.json();
mutate(state => {
state.details = details;
});
});To use your store in your app just import the parts of it you need.
<template>
<div class="app">
<h1>Hello {{ fullName }}</h1>
<button @click="loadDetails()">Load Details</button>
<input type="text" v-model="firstName" placeholder="First name">
<input type="text" v-model="lastName" placeholder="Last name">
</div>
</template>
<script lang="ts" setup>
import {
computed
} from 'vue';
import {
state,
fullName,
setFirstName,
setLastName,
loadDetails
} from './stores/user';
const firstName = computed({
get: () => state.firstName,
set: value => setFirstName(value)
});
const lastName = computed({
get: () => state.lastName,
set: value => setLastName(value)
});
</script>Harlem uses a combination of extensions and plugins to extend core functionality.
Extensions are per-store additions to Harlem's core functionaility. Extensions are often used for adding store features, changing store behaviour and various other low-level tasks. This is the primary method in which Harlem stores are extended. Feel free to choose from some of the official extensions or write your own. See the extensions documentation from more information on the official set of extensions or how to author your own plugin.
The official extensions include:
- Action (
@harlem/extension-action) - Extends a store to support advanced actions (cancellation, status & error tracking etc.). - Compose (
@harlem/extension-compose) - Extends a store to to add simple read/write convenience methods. - History (preview) (
@harlem/extension-history) - Extends a store to support undo and redo capabilities. - Lazy (
@harlem/extension-lazy) - Extends a store to support lazy async getters. - Storage (
@harlem/extension-storage) - Extends a store to support synchronising state to/fromlocalStorageorsessionStorage. - Trace (
@harlem/extension-trace) - Extends a store to support tracing granular changes to state during mutations. Useful for auditing during development. - Transaction (
@harlem/extension-transaction) - Extends a store to support rolling back multiple mutations if one fails.
Plugins are global extensions to Harlem's core functionality. Plugins are often used for generic store operations like tracking events and collating state. Feel free to choose from some of the official plugins or write your own. See the plugins documentation from more information on the official set of plugins or how to author your own plugin.
The official plugins include:
- Devtools (
@harlem/plugin-devtools) - The devtools plugin adds Vue devtools integration with your stores to show updates to your state in realtime. - SSR (
@harlem/plugin-ssr) - The SSR plugin enables support for using Harlem stores in a server-side rendered application.
Full documentation for Harlem is available at https://harlemjs.com.
Logo design by Ethan Roxburgh
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent