Skip to content

Latest commit

 

History

History
117 lines (84 loc) · 3.61 KB

README.md

File metadata and controls

117 lines (84 loc) · 3.61 KB

@nuxtjs/harlem

npm version npm downloads Github Actions CI Codecov License

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

  1. Add @nuxtjs/harlem dependency to your project
npx nuxi@latest module add harlem
  1. Add @nuxtjs/harlem to the modules section of nuxt.config.ts

  2. 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
  • Install dependencies using pnpm install
  • Run pnpm prepare to generate type stubs.
  • Use pnpm dev to start playground in development mode.

Licence

MIT Licence