Vue Expert

Vue Expert is a community skill for advanced Vue.js development, covering render functions, custom directives, plugin authoring, advanced reactivity patterns, and framework internals for building sophisticated Vue applications and libraries.

What Is This?

Overview

Vue Expert provides guidance on advanced Vue.js development techniques beyond standard component patterns. It covers render functions that create dynamic component trees programmatically using the h() function for cases where templates are insufficient, custom directives that extend HTML elements with reusable DOM manipulation logic bound to component lifecycle events, plugin authoring that packages reusable functionality with install methods, global components, and injected properties for distribution, advanced reactivity patterns that use effectScope, triggerRef, and customRef for fine-grained control over the reactive dependency system, and framework internals understanding that leverages the virtual DOM diffing algorithm and compiler optimizations for performance tuning. The skill helps experienced Vue developers build libraries and solve complex implementation challenges.

Who Should Use This

This skill serves senior Vue developers building reusable libraries and plugins, framework contributors understanding Vue internals, and architects designing complex component systems.

Why Use It?

Problems It Solves

Templates cannot express all dynamic rendering patterns such as programmatic component selection and slot manipulation. Reusing DOM manipulation logic across components requires directive abstraction beyond composables. Distributing reusable Vue functionality needs proper plugin packaging with installation and configuration patterns. Performance bottlenecks in complex applications require understanding of the reactivity internals.

Core Highlights

Render engine creates component trees programmatically with the h function. Directive system extends elements with reusable DOM logic. Plugin framework packages complete functionality for distribution and reuse. Reactivity controls provide fine-grained dependency management.

How to Use It?

Basic Usage

// Custom directive
import type {
  Directive
} from 'vue';

const vClickOutside:
  Directive<
    HTMLElement,
    () => void
  > = {
  mounted(el, binding) {
    (el as any)
      ._clickHandler =
      (e: MouseEvent) => {
        if (
          !el.contains(
            e.target as Node)
        ) {
          binding.value();
        }
      };
    document
      .addEventListener(
        'click',
        (el as any)
          ._clickHandler);
  },
  unmounted(el) {
    document
      .removeEventListener(
        'click',
        (el as any)
          ._clickHandler);
  }
};

Real-World Examples

// Render function
// component
import {
  h, defineComponent,
  PropType
} from 'vue';

export default
  defineComponent({
    props: {
      level: {
        type: Number as
          PropType<
            1|2|3|4|5|6>,
        default: 1
      }
    },
    setup(props, { slots }) {
      return () => h(
        `h${props.level}`,
        { class: 'heading' },
        slots.default?.()
      );
    }
  });

// Plugin authoring
import type { App } from
  'vue';

export const MyPlugin = {
  install(
    app: App,
    options: PluginOptions
  ) {
    app.directive(
      'click-outside',
      vClickOutside);
    app.provide(
      'pluginConfig',
      options);
  }
};

Advanced Tips

Use effectScope to group reactive effects that should be disposed together when a feature is deactivated. Create customRef for implementing debounced or throttled reactive values with custom tracking and triggering logic. Use the compiler macro defineExpose to control which composable internals are accessible to parent template refs.

When to Use It?

Use Cases

Build a dynamic heading component using render functions that select the tag level programmatically. Create a reusable click-outside directive for dropdown and modal components. Author a Vue plugin that provides global directives and injected configuration.

Related Topics

Vue.js, render functions, directives, plugins, reactivity internals, virtual DOM, and library authoring.

Important Notes

Requirements

Deep understanding of Vue 3 Composition API and its reactivity primitives for working with advanced patterns. TypeScript for typing custom directives, render function props, and plugin installation options. Familiarity with the Vue compiler and virtual DOM for performance optimization work.

Usage Recommendations

Do: prefer templates over render functions unless the use case genuinely requires programmatic component creation. Clean up event listeners and side effects in directive unmounted hooks to prevent memory leaks. Test plugins with isolated Vue app instances.

Don't: use render functions for standard UI that templates handle clearly since render functions are harder to read. Create directives for logic that composables handle better since directives are meant for DOM manipulation only. Rely on internal framework APIs that may change between minor versions.

Limitations

Render functions lose template compiler optimizations like static hoisting that improve performance automatically. Custom directives have limited lifecycle hooks compared to full component lifecycle. Plugin APIs are framework-specific and require migration effort when Vue major versions change.