Reusability in Vue.js

Reusability is the seventh chapter of the free Vue.js tutorial. It shows how to share logic between components, add app-wide features, fine-tune reactivity and add types.

What each lesson covers:

  • Composables, Directives and Plugins: use functions, returning refs, toValue(), cleanup, VueUse, custom directives with hooks, arguments and modifiers, plugins with app.use() and install, and vue-i18n.
  • Advanced Reactivity: readonly(), shallow refs and triggerRef(), toRef() and toRefs(), toRaw() and markRaw(), a debounced customRef() and effectScope().
  • TypeScript with Vue: Typed props, emits and defineModel, typed refs and template refs, InjectionKey, generic components, typed Pinia stores and route meta, env.d.ts and vue-tsc.

Every box runs real Vue 3 in your browser. Pick TypeScript or JavaScript in the top bar, and every box switches. Each lesson ends with exercises that check what your app does, not how your code is written.

Lessons in this section

  1. Composables, Directives and Plugins

    Composables: use naming, extracting logic, returning refs, toValue() and MaybeRefOrGetter, cleanup, useMouse, useEventListener, useFetch and VueUse. Custom directives: hooks, value, argument, modifiers, function shorthand and registration. Plugins: app.use(), install, options, globalProperties, provide and vue-i18n.

    • Extract stateful logic from a component into a use function
    • Return refs and functions so callers can destructure them
    • Accept refs, getters or plain values with toValue()
    • Write directives with hooks, values, arguments and modifiers
  2. Advanced Reactivity

    readonly(), shallowReadonly() and isReadonly(), shallowRef(), shallowReactive() and triggerRef(), toRef(), toRefs(), isRef() and unref(), toRaw() and markRaw(), a debounced ref with customRef(), and grouping effects with effectScope().

    • Protect state with readonly() and check it with isReadonly()
    • Use shallow refs for big data and trigger updates by hand
    • Keep links to reactive properties with toRef() and toRefs()
    • Build a debounced ref with customRef() and stop many effects with effectScope()
  3. TypeScript with Vue

    Adding types to Vue code: props, emits and v-model, refs, reactive objects, computed values and template refs, provide/inject with InjectionKey, generic components, typed Pinia stores and route meta, env.d.ts and checking with vue-tsc.

    • Type props, emits and v-model with defineProps, defineEmits and defineModel
    • Type refs, reactive objects, computed values and template refs
    • Share typed values with InjectionKey and build a generic component
    • Type Pinia stores and route meta, and check a project with vue-tsc