Runable VueUse

Official VueUse integration for Runable ⚡️

Description

@runablejs/vueuse makes VueUse composables and utilities from @vueuse/core available through Runable's automatic imports. No Vue plugin or manual import is required.

Features

• 🧰 VueUse 14 support
• ⚡️ Zero-configuration Runable integration
• 📦 Automatic composable and utility imports
• 🌳 Tree-shakeable production builds
• 🔒 SSR-friendly VueUse composables
• 💚 Vue 3 and TypeScript ready

Installation

pnpm add @runablejs/vueuse @vueuse/core

Add the module to runable.config.ts:

import { defineConfig } from "runable";

export default defineConfig({
  modules: ["@runablejs/vueuse"],
});

Usage

VueUse composables are available in components without explicit imports:

<script setup lang="ts">
const { x, y } = useMouse();
const preferredDark = usePreferredDark();
const count = useLocalStorage("count", 0);
</script>

<template>
  <p>Mouse: {{ x }}, {{ y }}</p>
  <p>Dark mode preferred: {{ preferredDark }}</p>
  <button type="button" @click="count++">Count: {{ count }}</button>
</template>

Utilities such as createSharedComposable are auto-imported as well. The names useFetch, toRef, and toRefs keep Runable/Vue's built-in behavior; import their VueUse variants explicitly from @vueuse/core when needed. Explicit imports from @vueuse/core otherwise remain supported too.

Only @vueuse/core is included. Optional VueUse add-ons such as integrations, RxJS, Firebase, Motion, and components should be installed and imported from their respective packages.

License

MIT