Neverending Plethora of Modules

    @nuxtjs/harlem
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    @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
    yarn add @nuxtjs/harlem # or npm install @nuxtjs/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 (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

    Install

    npm i @nuxtjs/harlem

    DownloadsWeekly Downloads

    51

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    9.71 kB

    Total Files

    10

    Last publish

    Collaborators

    • danielroe