vue3-reusability

What problem does it solve?

It helps you reuse Vue 3 behavior across the Vue SSR Starter Kit without misusing composables or components, specifically for DOM-level actions via custom directives and app-wide setup via plugins.

Core Features & Use Cases

• Custom directives (v-xxx): Reuse low-level DOM behavior such as focus handling, click-outside, observers, and element styling that a template ref cannot express cleanly.
• Directive binding support: Use directive value, arg, and modifiers, and implement effects in the appropriate client-only hooks.
• Vue plugins (app.use): Perform one-time app installation tasks like registering global directives and app-level provide values, with safe SSR guards.
• SSR safety rules: Ensures directive DOM hooks run client-side only and plugin install() guards browser APIs when running during SSR.

Quick Start

Write a local directive in a <script setup> block as a const named vXxx, then use it in the template as v-xxx while relying on mounted/updated hooks for client-side DOM effects.