[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"versions":3,"module-harlem":7},{"v3":4,"v4":5,"v2":6},"3.21.8","4.4.8","2.18.1",{"name":8,"description":9,"repo":10,"npm":11,"icon":12,"github":13,"website":13,"learn_more":14,"category":15,"type":16,"maintainers":17,"compatibility":23,"generatedAt":26,"contributors":27,"stats":35,"readme":44},"harlem","Harlem is a simple, unopinionated, lightweight and extensible state management solution for Vue 3.","nuxt-modules/harlem","@nuxtjs/harlem","harlem.svg","https://github.com/nuxt-modules/harlem","https://harlemjs.com/","Extensions","community",[18],{"name":19,"github":20,"twitter":21,"bluesky":22},"Daniel Roe","danielroe","danielcroe","danielroe.dev",{"nuxt":24,"requires":25},">=3.0.0",{},"2026-06-10T03:36:04.731Z",[28,31],{"id":29,"username":20,"contributions":30},28706372,81,{"id":32,"username":33,"contributions":34},43365376,"Lexpeartha",1,{"version":36,"downloads":37,"stars":38,"watchers":39,"forks":40,"defaultBranch":41,"publishedAt":42,"createdAt":43},"2.0.0",477,83,2,3,"main",1739138696373,1644854268547,{"data":45,"body":47,"toc":464},{"title":11,"description":46},"",{"type":48,"children":49},"root",[50,58,114,136,141,165,172,195,201,218,230,292,298,303,314,324,334,344,365,371,444,450,459],{"type":51,"tag":52,"props":53,"children":55},"element","h1",{"id":54},"nuxtjsharlem",[56],{"type":57,"value":11},"text",{"type":51,"tag":59,"props":60,"children":61},"p",{},[62,75,85,95,105],{"type":51,"tag":63,"props":64,"children":68},"a",{"href":65,"rel":66},"https://npmjs.com/package/@nuxtjs/harlem",[67],"nofollow",[69],{"type":51,"tag":70,"props":71,"children":74},"img",{"alt":72,"src":73},"npm version","https://img.shields.io/npm/v/@nuxtjs/harlem/latest.svg",[],{"type":51,"tag":63,"props":76,"children":79},{"href":77,"rel":78},"https://npm.chart.dev/@nuxtjs/harlem",[67],[80],{"type":51,"tag":70,"props":81,"children":84},{"alt":82,"src":83},"npm downloads","https://img.shields.io/npm/dm/@nuxtjs/harlem.svg",[],{"type":51,"tag":63,"props":86,"children":89},{"href":87,"rel":88},"https://github.com/nuxt-modules/harlem/actions?query=workflow%3Aci",[67],[90],{"type":51,"tag":70,"props":91,"children":94},{"alt":92,"src":93},"Github Actions CI","https://github.com/nuxt-modules/harlem/workflows/ci/badge.svg",[],{"type":51,"tag":63,"props":96,"children":99},{"href":97,"rel":98},"https://codecov.io/gh/nuxt-modules/harlem",[67],[100],{"type":51,"tag":70,"props":101,"children":104},{"alt":102,"src":103},"Codecov","https://img.shields.io/codecov/c/github/nuxt-modules/harlem.svg",[],{"type":51,"tag":63,"props":106,"children":108},{"href":65,"rel":107},[67],[109],{"type":51,"tag":70,"props":110,"children":113},{"alt":111,"src":112},"License","https://img.shields.io/npm/l/@nuxtjs/harlem.svg",[],{"type":51,"tag":115,"props":116,"children":117},"blockquote",{},[118],{"type":51,"tag":59,"props":119,"children":120},{},[121,127,129],{"type":51,"tag":63,"props":122,"children":124},{"href":14,"rel":123},[67],[125],{"type":57,"value":126},"Harlem",{"type":57,"value":128}," integration for ",{"type":51,"tag":63,"props":130,"children":133},{"href":131,"rel":132},"https://v3.nuxtjs.org",[67],[134],{"type":57,"value":135},"Nuxt",{"type":51,"tag":59,"props":137,"children":138},{},[139],{"type":57,"value":140},"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.",{"type":51,"tag":142,"props":143,"children":144},"ul",{},[145,155],{"type":51,"tag":146,"props":147,"children":148},"li",{},[149],{"type":51,"tag":63,"props":150,"children":152},{"href":14,"rel":151},[67],[153],{"type":57,"value":154},"👉  More about Harlem",{"type":51,"tag":146,"props":156,"children":157},{},[158],{"type":51,"tag":63,"props":159,"children":162},{"href":160,"rel":161},"https://stackblitz.com/github/nuxt-modules/harlem/tree/main/playground",[67],[163],{"type":57,"value":164},"▶️  Online playground",{"type":51,"tag":166,"props":167,"children":169},"h2",{"id":168},"features",[170],{"type":57,"value":171},"Features",{"type":51,"tag":142,"props":173,"children":174},{},[175,180,185,190],{"type":51,"tag":146,"props":176,"children":177},{},[178],{"type":57,"value":179},"👌 Zero-config required",{"type":51,"tag":146,"props":181,"children":182},{},[183],{"type":57,"value":184},"🐨 Simple, functional state management",{"type":51,"tag":146,"props":186,"children":187},{},[188],{"type":57,"value":189},"🧱 Easily extensible",{"type":51,"tag":146,"props":191,"children":192},{},[193],{"type":57,"value":194},"💯 Nuxt 3 support",{"type":51,"tag":166,"props":196,"children":198},{"id":197},"quick-setup",[199],{"type":57,"value":200},"Quick setup",{"type":51,"tag":202,"props":203,"children":204},"ol",{},[205],{"type":51,"tag":146,"props":206,"children":207},{},[208,210,216],{"type":57,"value":209},"Add ",{"type":51,"tag":211,"props":212,"children":214},"code",{"className":213},[],[215],{"type":57,"value":11},{"type":57,"value":217}," dependency to your project",{"type":51,"tag":219,"props":220,"children":225},"pre",{"className":221,"code":222,"language":223,"meta":46,"style":224},"language-bash","npx nuxi@latest module add harlem\n","bash","undefined",[226],{"type":51,"tag":211,"props":227,"children":228},{"__ignoreMap":46},[229],{"type":57,"value":222},{"type":51,"tag":202,"props":231,"children":232},{"start":39},[233,258],{"type":51,"tag":146,"props":234,"children":235},{},[236,237,242,244,250,252],{"type":57,"value":209},{"type":51,"tag":211,"props":238,"children":240},{"className":239},[],[241],{"type":57,"value":11},{"type":57,"value":243}," to the ",{"type":51,"tag":211,"props":245,"children":247},{"className":246},[],[248],{"type":57,"value":249},"modules",{"type":57,"value":251}," section of ",{"type":51,"tag":211,"props":253,"children":255},{"className":254},[],[256],{"type":57,"value":257},"nuxt.config.ts",{"type":51,"tag":146,"props":259,"children":260},{},[261,263,270,272,276,282,284,290],{"type":57,"value":262},"Follow the ",{"type":51,"tag":63,"props":264,"children":267},{"href":265,"rel":266},"https://harlemjs.com/guide/introduction/getting-started.html#create-your-first-store",[67],[268],{"type":57,"value":269},"Harlem guide on how to create and use your stores",{"type":57,"value":271},".",{"type":51,"tag":273,"props":274,"children":275},"br",{},[],{"type":51,"tag":277,"props":278,"children":279},"strong",{},[280],{"type":57,"value":281},"Note",{"type":57,"value":283},": ",{"type":51,"tag":211,"props":285,"children":287},{"className":286},[],[288],{"type":57,"value":289},"createStore",{"type":57,"value":291}," will be auto-imported wherever you use it, so you don't need to import it yourself.",{"type":51,"tag":166,"props":293,"children":295},{"id":294},"example",[296],{"type":57,"value":297},"Example",{"type":51,"tag":59,"props":299,"children":300},{},[301],{"type":57,"value":302},"Here's a minimal example - you can copy and paste this into your app with no extra steps.",{"type":51,"tag":304,"props":305,"children":307},"h3",{"id":306},"storesuserts",[308],{"type":51,"tag":211,"props":309,"children":311},{"className":310},[],[312],{"type":57,"value":313},"~/stores/user.ts",{"type":51,"tag":219,"props":315,"children":319},{"className":316,"code":317,"language":318,"meta":46,"style":224},"language-ts","const STATE = {\n  firstName: 'John',\n  lastName: 'Smith',\n}\n\nexport const { state, getter, mutation, ...store } = createStore('user', STATE)\n\nexport const fullName = getter('fullName', state => {\n  return `${state.firstName} ${state.lastName}`\n})\n\nexport const setFirstName = mutation\u003Cstring>('setFirstName', (state, payload) => {\n  state.firstName = payload\n})\n\nexport const setLastName = mutation\u003Cstring>('setLastName', (state, payload) => {\n  state.lastName = payload\n})\n","ts",[320],{"type":51,"tag":211,"props":321,"children":322},{"__ignoreMap":46},[323],{"type":57,"value":317},{"type":51,"tag":304,"props":325,"children":327},{"id":326},"appvue",[328],{"type":51,"tag":211,"props":329,"children":331},{"className":330},[],[332],{"type":57,"value":333},"~/app.vue",{"type":51,"tag":219,"props":335,"children":339},{"className":336,"code":337,"language":338,"meta":46,"style":224},"language-html","\u003Ctemplate>\n  \u003Cdiv class=\"app\">\n    \u003Ch1>Hello {{ fullName }}\u003C/h1>\n    \u003Cinput v-model=\"firstName\" type=\"text\" placeholder=\"First name\" />\n    \u003Cinput v-model=\"lastName\" type=\"text\" placeholder=\"Last name\" />\n  \u003C/div>\n\u003C/template>\n\n\u003Cscript lang=\"ts\" setup>\n  import { state, fullName, setFirstName, setLastName } from '~/store/user'\n\n  const firstName = computed({\n    get: () => state.firstName,\n    set: value => setFirstName(value),\n  })\n\n  const lastName = computed({\n    get: () => state.lastName,\n    set: value => setLastName(value),\n  })\n\n  setLastName('Doe')\n\u003C/script>\n","html",[340],{"type":51,"tag":211,"props":341,"children":342},{"__ignoreMap":46},[343],{"type":57,"value":337},{"type":51,"tag":59,"props":345,"children":346},{},[347,349,355,357,364],{"type":57,"value":348},"For more info and examples, check out the ",{"type":51,"tag":63,"props":350,"children":352},{"href":14,"rel":351},[67],[353],{"type":57,"value":354},"Harlem docs",{"type":57,"value":356}," and ",{"type":51,"tag":63,"props":358,"children":361},{"href":359,"rel":360},"https://github.com/andrewcourtice/harlem",[67],[362],{"type":57,"value":363},"repository",{"type":57,"value":271},{"type":51,"tag":166,"props":366,"children":368},{"id":367},"development",[369],{"type":57,"value":370},"Development",{"type":51,"tag":142,"props":372,"children":373},{},[374,379,399,410,423],{"type":51,"tag":146,"props":375,"children":376},{},[377],{"type":57,"value":378},"Clone this repository",{"type":51,"tag":146,"props":380,"children":381},{},[382,384,391,393],{"type":57,"value":383},"Enable ",{"type":51,"tag":63,"props":385,"children":388},{"href":386,"rel":387},"https://github.com/nodejs/corepack",[67],[389],{"type":57,"value":390},"Corepack",{"type":57,"value":392}," using ",{"type":51,"tag":211,"props":394,"children":396},{"className":395},[],[397],{"type":57,"value":398},"corepack enable",{"type":51,"tag":146,"props":400,"children":401},{},[402,404],{"type":57,"value":403},"Install dependencies using ",{"type":51,"tag":211,"props":405,"children":407},{"className":406},[],[408],{"type":57,"value":409},"pnpm install",{"type":51,"tag":146,"props":411,"children":412},{},[413,415,421],{"type":57,"value":414},"Run ",{"type":51,"tag":211,"props":416,"children":418},{"className":417},[],[419],{"type":57,"value":420},"pnpm prepare",{"type":57,"value":422}," to generate type stubs.",{"type":51,"tag":146,"props":424,"children":425},{},[426,428,434,436,442],{"type":57,"value":427},"Use ",{"type":51,"tag":211,"props":429,"children":431},{"className":430},[],[432],{"type":57,"value":433},"pnpm dev",{"type":57,"value":435}," to start ",{"type":51,"tag":63,"props":437,"children":439},{"href":438},"./playground",[440],{"type":57,"value":441},"playground",{"type":57,"value":443}," in development mode.",{"type":51,"tag":166,"props":445,"children":447},{"id":446},"licence",[448],{"type":57,"value":449},"Licence",{"type":51,"tag":59,"props":451,"children":452},{},[453],{"type":51,"tag":63,"props":454,"children":456},{"href":455},"./LICENCE",[457],{"type":57,"value":458},"MIT Licence",{"type":51,"tag":460,"props":461,"children":462},"style",{},[463],{"type":57,"value":46},{"title":46,"searchDepth":39,"depth":39,"links":465},[466,467,468,472,473],{"id":168,"depth":39,"text":171},{"id":197,"depth":39,"text":200},{"id":294,"depth":39,"text":297,"children":469},[470,471],{"id":306,"depth":40,"text":313},{"id":326,"depth":40,"text":333},{"id":367,"depth":39,"text":370},{"id":446,"depth":39,"text":449}]