@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.

• 👉 More about Harlem
• ▶️ Online playground

Features

• 👌 Zero-config required
• 🐨 Simple, functional state management
• 🧱 Easily extensible
• 💯 Nuxt 3 support

Quick setup

1. Add @nuxtjs/harlem dependency to your project

npx nuxi@latest module add harlem

2. Add @nuxtjs/harlem to the modules section of nuxt.config.ts

3. 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

constSTATE={firstName: 'John',lastName: 'Smith',}exportconst{ state, getter, mutation, ...store}=createStore('user',STATE)exportconstfullName=getter('fullName',state=>{return`${state.firstName}${state.lastName}`})exportconstsetFirstName=mutation<string>('setFirstName',(state,payload)=>{state.firstName=payload})exportconstsetLastName=mutation<string>('setLastName',(state,payload)=>{state.lastName=payload})

~/app.vue

<template><divclass="app"><h1>Hello {{ fullName }}</h1><inputv-model="firstName" type="text" placeholder="First name" /><inputv-model="lastName" type="text" placeholder="Last name" /></div></template><scriptlang="ts" setup>import{state,fullName,setFirstName,setLastName}from'~/store/user'constfirstName=computed({get: ()=>state.firstName,set: value=>setFirstName(value),})constlastName=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
• Install dependencies using pnpm install
• Run pnpm prepare to generate type stubs.
• Use pnpm dev to start playground in development mode.

Licence

MIT Licence