Get Started

@lonewolfyx/vue-hooks is a collection of Vue 3 Composition API utilities designed to simplify common patterns. The library is fully typed with TypeScript, tree-shakable, and has zero dependencies beyond Vue itself.

Vue Version

@lonewolfyx/vue-hooks requires Vue >= 3.3.0 as a peer dependency.

Install

pnpm add @lonewolfyx/vue-hooks

See the Installation page for more details.

Quick Example

Create a typed context with createContext:

// context.ts
import { createContext } from '@lonewolfyx/vue-hooks'

interface ThemeContext {
    dark: boolean
}

export const [useTheme, provideTheme] = createContext<ThemeContext>('ThemeProvider')

Provide the context in a parent component:

<!-- ThemeProvider.vue -->
<script setup lang="ts">
import { provideTheme } from './context'

provideTheme({ dark: true })
</script>

<template>
    <slot />
</template>

Consume the context in a child component:

<!-- Child.vue -->
<script setup lang="ts">
import { useTheme } from './context'

const theme = useTheme()
// theme: { dark: true }
</script>

<template>
    <p>Dark mode: {{ theme.dark }}</p>
</template>

Available Hooks

Hook	Description
createContext	Create a typed context with provide and inject helpers
createReusableTemplate	Define a template once and reuse it multiple times with different bindings