Vue Use State Effect

CAUTION: Built and tested for/with Vue 3 and/or Nuxt 3 (RC-12).

Fast and small library, built on top of the native scopeEffect Vue 3 API that will provide safe and sharable (across the app) state for your local composables and functions. It might be a good replacement for Vuex or Pinia state management, if you need smaller and less extensive solution.

Check out the Stackblitz Nuxt 3 demo here. 🚀

Motivation / Story

You can read all about the technical background and all the details in this article.

Configuration (docs) and examples can be found here.

Install

Install the package:

$ npm i vue-use-state-effect --save
# or
$ yarn add vue-use-state-effect

Usage

Create local composable with some state and pass it to the useStateEffect.

import { useStateEffect } from 'vue-use-state-effect'

const composable = () => {
  /* your composable logic here */
}

export const useSharedComposable = useStateEffect(composable, { ...config })

Interface (TypeScript).

interface UseStateEffectConfig {
  readonly name?: string | null
  readonly destroy?: boolean | 'custom'
  readonly debug?: boolean
}
export type UseStateEffectOptions<T = any> = {
  readonly destroyLabels: string[]
  readonly props: ExtractPropTypes<{ stateEffectDestroyLabel: string } | T>
}

export function useStateEffect<T extends (...args: any[]) => ReturnType<T>>(
  composable: T,
  config?: UseStateEffectConfig,
): (opts?: UseStateEffectOptions<opts.props>) => {
  [keyof in string | 'state']: ReturnType<T>
}

Please check the configuration, all the details and examples here.

Support: Want to support? Buy me a coffee or sponsor me via GitHub.