harlem
Harlem is a simple, unopinionated, lightweight and extensible state management solution for Vue 3.
@nuxtjs/harlem
Harlem is a simple, unopinionated, lightweight and extensible state management solution for Vue 3. It is designed to suit projects of all sizes and developers of all different levels of experience.
Features
- 👌 Zero-config required
- 🐨 Simple, functional state management
- 🧱 Easily extensible
- 💯 Nuxt 3 support
Quick setup
- Add
@nuxtjs/harlemdependency to your project
yarn add @nuxtjs/harlem # or npm install @nuxtjs/harlem- Add
@nuxtjs/harlemto themodulessection ofnuxt.config.ts - Follow the Harlem guide on how to create and use your stores.
Note:createStorewill be auto-imported wherever you use it, so you don't need to import it yourself.
Example
Here's a minimal example - you can copy and paste this into your app with no extra steps.
~/stores/user.ts
const STATE = { firstName: 'John', lastName: 'Smith',}export const { state, getter, mutation, ...store } = createStore('user', STATE)export const fullName = getter('fullName', state => { return `${state.firstName} ${state.lastName}`})export const setFirstName = mutation<string>('setFirstName', (state, payload) => { state.firstName = payload})export const setLastName = mutation<string>('setLastName', (state, payload) => { state.lastName = payload})~/app.vue
<template> <div class="app"> <h1>Hello {{ fullName }}</h1> <input v-model="firstName" type="text" placeholder="First name" /> <input v-model="lastName" type="text" placeholder="Last name" /> </div></template><script lang="ts" setup> import { state, fullName, setFirstName, setLastName } from '~/store/user' const firstName = computed({ get: () => state.firstName, set: value => setFirstName(value), }) const lastName = computed({ get: () => state.lastName, set: value => setLastName(value), }) setLastName('Doe')</script>For more info and examples, check out the Harlem docs and repository.
Development
- Clone this repository
- Enable Corepack using
corepack enable(usenpm i -g corepackfor Node.js < 16.10) - Install dependencies using
pnpm install - Run
pnpm prepareto generate type stubs. - Use
pnpm devto start playground in development mode.