skills.rest
e-xode
e-xodeOFFICIAL
Explore all skills by this author →
WebsiteGitHub

vue3-reusability

Author custom Vue 3 directives and plugins with SSR-safe lifecycle handling.

3|Updated Jan 14, 2023
Search Tags:#vue3#ssr-safe#provide-inject#custom-directive#vue-plugin#dom-hooks#binding-arg-modifiers
One-click install
npx skills add https://github.com/e-xode/vue-ssr --skill vue3-reusability
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue3-reusability
Source: https://github.com/e-xode/vue-ssr/tree/main/.claude/skills/vue3-reusability
Command: npx skills add https://github.com/e-xode/vue-ssr --skill vue3-reusability

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about vue3-reusability

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an SSR-safe custom directive in Vue 3?▼

To create an SSR-safe custom directive in Vue 3, you must confine DOM manipulation logic to client-only lifecycle hooks like mounted and updated, preventing server-side execution errors during rendering.

When should I use a custom directive instead of a composable in Vue 3?▼

Use a Vue 3 custom directive instead of a composable when you need to reuse low-level DOM behavior like focus handling or click-outside detection that template refs cannot cleanly express.

How do I access directive binding arguments and modifiers in Vue 3?▼

In Vue 3, you access directive binding properties through the binding object passed to your hook functions, utilizing binding.value, binding.arg, and binding.modifiers to implement dynamic DOM effects.

Does a Vue 3 plugin install function run during server-side rendering?▼

Yes, a Vue 3 plugin install function runs during SSR, so you must guard browser API access with conditional checks to prevent server crashes and ensure one-time app initialization remains safe.

What is the best way to register global directives and provide app-level state in Vue 3 SSR?▼

The best way to register global directives and provide app-level state in Vue 3 SSR is by creating a plugin that safely executes app.use installation and app-level provide/inject setup across server and client environments.

Related Skills

Explore More Software Engineering Skills→
sltc-devsltc-dev

vue-best-practices

Enforce Vue 3 best practices with Composition API, TypeScript, and ecosystem tools.

Community
Advanced
fefogarciafefogarcia
1

vue-best-practices

Provide Vue 3 best practices for Composition API, TypeScript, and SSR.

Community
Intermediate
Endsi3gEndsi3g

clerk-vue-patterns

Implement reactive Clerk authentication patterns in Vue 3 with composables and router guards.

Community
Intermediate
spallempatispallempati

angular-directives

Generate custom Angular directives for DOM manipulation and component interactions.

Community
Intermediate