{"id":20999811,"url":"https://github.com/nuxt-modules/harlem","last_synced_at":"2025-04-05T08:05:28.379Z","repository":{"id":37018642,"uuid":"459220995","full_name":"nuxt-modules/harlem","owner":"nuxt-modules","description":"Harlem integration for Nuxt. A state management solution for Vue 3.","archived":false,"fork":false,"pushed_at":"2024-10-29T13:12:18.000Z","size":3242,"stargazers_count":83,"open_issues_count":1,"forks_count":3,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-10-29T15:57:40.943Z","etag":null,"topics":["nuxt","nuxt-module","store","vue3"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nuxt-modules.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["danielroe"]}},"created_at":"2022-02-14T15:41:37.000Z","updated_at":"2024-10-28T03:46:39.000Z","dependencies_parsed_at":"2024-01-18T05:48:48.462Z","dependency_job_id":"a25cc080-f59e-4e7d-a48d-989c3b0de635","html_url":"https://github.com/nuxt-modules/harlem","commit_stats":{"total_commits":325,"total_committers":4,"mean_commits":81.25,"dds":"0.11692307692307691","last_synced_commit":"e0319d801eda627be47d8e7979d5b3372e8ddd76"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxt-modules%2Fharlem","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxt-modules%2Fharlem/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxt-modules%2Fharlem/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxt-modules%2Fharlem/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nuxt-modules","download_url":"https://codeload.github.com/nuxt-modules/harlem/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305933,"owners_count":20917208,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nuxt","nuxt-module","store","vue3"],"created_at":"2024-11-19T08:08:23.337Z","updated_at":"2025-04-05T08:05:28.359Z","avatar_url":"https://github.com/nuxt-modules.png","language":"TypeScript","funding_links":["https://github.com/sponsors/danielroe"],"categories":["TypeScript"],"sub_categories":[],"readme":"# @nuxtjs/harlem\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![Github Actions CI][github-actions-ci-src]][github-actions-ci-href]\n[![Codecov][codecov-src]][codecov-href]\n[![License][license-src]][license-href]\n\n\u003e [Harlem](https://harlemjs.com/) integration for [Nuxt](https://v3.nuxtjs.org)\n\nHarlem 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.\n\n- [👉 \u0026nbsp;More about Harlem](https://harlemjs.com/)\n- [▶️ \u0026nbsp;Online playground](https://stackblitz.com/github/nuxt-modules/harlem/tree/main/playground)\n\n## Features\n\n- 👌 Zero-config required\n- 🐨 Simple, functional state management\n- 🧱 Easily extensible\n- 💯 Nuxt 3 support\n\n## Quick setup\n\n1. Add `@nuxtjs/harlem` dependency to your project\n\n```bash\nnpx nuxi@latest module add harlem\n```\n\n2. Add `@nuxtjs/harlem` to the `modules` section of `nuxt.config.ts`\n\n3. Follow the [Harlem guide on how to create and use your stores](https://harlemjs.com/guide/introduction/getting-started.html#create-your-first-store).\n\n   **Note**: `createStore` will be auto-imported wherever you use it, so you don't need to import it yourself.\n\n## Example\n\nHere's a minimal example - you can copy and paste this into your app with no extra steps.\n\n### `~/stores/user.ts`\n\n```ts\nconst 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 =\u003e {\n  return `${state.firstName} ${state.lastName}`\n})\n\nexport const setFirstName = mutation\u003cstring\u003e('setFirstName', (state, payload) =\u003e {\n  state.firstName = payload\n})\n\nexport const setLastName = mutation\u003cstring\u003e('setLastName', (state, payload) =\u003e {\n  state.lastName = payload\n})\n```\n\n### `~/app.vue`\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv class=\"app\"\u003e\n    \u003ch1\u003eHello {{ fullName }}\u003c/h1\u003e\n    \u003cinput v-model=\"firstName\" type=\"text\" placeholder=\"First name\" /\u003e\n    \u003cinput v-model=\"lastName\" type=\"text\" placeholder=\"Last name\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\" setup\u003e\n  import { state, fullName, setFirstName, setLastName } from '~/store/user'\n\n  const firstName = computed({\n    get: () =\u003e state.firstName,\n    set: value =\u003e setFirstName(value),\n  })\n\n  const lastName = computed({\n    get: () =\u003e state.lastName,\n    set: value =\u003e setLastName(value),\n  })\n\n  setLastName('Doe')\n\u003c/script\u003e\n```\n\nFor more info and examples, check out the [Harlem docs](https://harlemjs.com/) and [repository](https://github.com/andrewcourtice/harlem).\n\n## Development\n\n- Clone this repository\n- Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable`\n- Install dependencies using `pnpm install`\n- Run `pnpm prepare` to generate type stubs.\n- Use `pnpm dev` to start [playground](./playground) in development mode.\n\n## Licence\n\n[MIT Licence](./LICENCE)\n\n\u003c!-- Badges --\u003e\n\n[npm-version-src]: https://img.shields.io/npm/v/@nuxtjs/harlem/latest.svg\n[npm-version-href]: https://npmjs.com/package/@nuxtjs/harlem\n[npm-downloads-src]: https://img.shields.io/npm/dm/@nuxtjs/harlem.svg\n[npm-downloads-href]: https://npm.chart.dev/@nuxtjs/harlem\n[github-actions-ci-src]: https://github.com/nuxt-modules/harlem/workflows/ci/badge.svg\n[github-actions-ci-href]: https://github.com/nuxt-modules/harlem/actions?query=workflow%3Aci\n[codecov-src]: https://img.shields.io/codecov/c/github/nuxt-modules/harlem.svg\n[codecov-href]: https://codecov.io/gh/nuxt-modules/harlem\n[license-src]: https://img.shields.io/npm/l/@nuxtjs/harlem.svg\n[license-href]: https://npmjs.com/package/@nuxtjs/harlem\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxt-modules%2Fharlem","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnuxt-modules%2Fharlem","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxt-modules%2Fharlem/lists"}