@nuxtjs/harlem

Harlem integration for Nuxt

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/harlem dependency to your project

yarn add @nuxtjs/harlem # or npm install @nuxtjs/harlem

Add @nuxtjs/harlem to the modules section of nuxt.config.ts
Follow the Harlem guide on how to create and use your stores.
Note: createStore will 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 (use npm i -g corepack for Node.js < 16.10)
Install dependencies using pnpm install
Run pnpm prepare to generate type stubs.
Use pnpm dev to start playground in development mode.

Licence

MIT Licence