Vue 3 - The Composition API - Reusability (Part 2)

 constrains the reusability of logic across multiple components. Patterns involving 

 have been established to create reusable blocks of code and consolidate repeated state and functionality. However, each pattern has a drawback:

, component logic can be extracted, shared and reused amongst multiple components. Exposing Vue's core capabilities (reactivity and lifecycle hooks) as standalone, globally available functions allows developers to create custom 

 that are decoupled from any UI, but yet, can be consumed by any component. This can greatly improve the maintainability and flexibility of a large application composed of hundreds of components. 

Let's walkthrough an example demo to demonstrate the simplicity of writing reusable code with the Composition API. 

, clicking the "Open Modal" button pops open a basic accessible modal that displays a list of links to sections in the official Vue.js documentation site.

 option that houses all of its data, methods, lifecycle hooks, etc.

// ...
<script>
import { onMounted, onBeforeMount, onUnmounted, ref, toRefs } from "vue";

export default {
  name: "Modal",
  props: {
    prevRef: {
      type: HTMLElement,
    },
  },
  setup(props, context) {
    const previouslyFocused = ref(null);
    const modalRef = ref(null);
    const { prevRef } = toRefs(props);

    const close = () => {
      context.emit("close");
    };

    const handleKeydown = (evt) => {
      if (evt.key === "Escape") {
        // Pressing the ESC key closes the modal.
        close();
      } else if (evt.key === "Tab") {
        // Pressing the Tab key traps the focus in the modal.
        const modalNodes = modalRef.value.querySelectorAll("*");
        const tabbable = Array.from(modalNodes).filter((n) => n.tabIndex >= 0);

        let index = tabbable.indexOf(document.activeElement);

        if (index === -1 && evt.shiftKey) {
          index = 0;
        }

        index += tabbable.length + (evt.shiftKey ? -1 : 1);
        index %= tabbable.length;
        tabbable[index].focus();

        evt.preventDefault();
      }

      return;
    };

    onBeforeMount(() => {
      previouslyFocused.value =
        typeof document !== "undefined"
          ? document.activeElement === document.body || prevRef.value
            ? prevRef.value
            : null
          : document.activeElement;
    });

    onMounted(() => {
      window.addEventListener("keydown", handleKeydown);
    });

    onUnmounted(() => {
      window.removeEventListener("keydown", handleKeydown);

      if (previouslyFocused.value) {
        previouslyFocused.value.focus();
      }
    });

    return {
      modalRef,
      close
    };
  },
};
</script>

Here's a brief overview of the code within the 

 acts as a subordinate window to the browser window. Because modals can be used to communicate information to a user, they can be categorized as 

. Another component that behaves similarly to modals is 

, which briefly notify users of certain events before disappearing. If you are not familiar with toast notifications, then have a look at an easy-to-use toast notifications library, 

Using the Composition API, we can implement a toast notification component that uses the same accessibility and closing logic as our modal component. Let's refactor this logic into a separate hook that can be used in both components.

, and has two methods responsible for updating this ref's value, 

. To allow a component to access these functions and this ref, return them in an object. 

import { ref } from 'vue';

export const useDialog = () => {
  const isDialogOpened = ref(false);

  const openDialog = () => {
    isDialogOpened.value = true;
  };

  const closeDialog = () => {
    isDialogOpened.value = false;
  };

  return {
    openDialog,
    closeDialog,
    isDialogOpened
  };
}

Notice how this logic resembles the logic within the 

setup() {
  const isModalOpened = ref(false);
  const openModalBtn = ref(null);

  const openModal = () => {
    isModalOpened.value = true;
  };

  const closeModal = () => {
    isModalOpened.value = false;
  };

  return {
    isModalOpened,
    openModalBtn,
    openModal,
    closeModal,
  };
}

Let's refactor this logic by replacing it with a call to the 

// ...
<script>
import { ref } from "vue";
import Modal from "./components/Modal.vue";
import { useDialog } from "./hooks/useDialog";

export default {
  name: "App",
  components: {
    Modal
  },
  setup() {
    const {
      openDialog: openModal,
      closeDialog: closeModal,
      isDialogOpened: isModalOpened,
    } = useDialog();

    const openModalBtn = ref(null);

    return {
      isModalOpened,
      openModalBtn,
      openModal,
      closeModal
    };
  },
};
</script>

 is reactive, any updates to this value will be reflected wherever it is used in the component template. 

 component, we should extract out the methods and lifecycle hooks for re-use in a 

setup(props, context) {
  const previouslyFocused = ref(null);
  const modalRef = ref(null);
  const { prevRef } = toRefs(props);

  const close = () => {
    context.emit("close");
  };

  const handleKeydown = (evt) => {
    if (evt.key === "Escape") {
      // Pressing the ESC key closes the modal.
      close();
    } else if (evt.key === "Tab") {
      // Pressing the Tab key traps the focus in the modal.
      const modalNodes = modalRef.value.querySelectorAll("*");
      const tabbable = Array.from(modalNodes).filter((n) => n.tabIndex >= 0);

      let index = tabbable.indexOf(document.activeElement);

      if (index === -1 && evt.shiftKey) {
        index = 0;
      }

      index += tabbable.length + (evt.shiftKey ? -1 : 1);
      index %= tabbable.length;
      tabbable[index].focus();

      evt.preventDefault();
    }

    return;
  };

  onBeforeMount(() => {
    previouslyFocused.value =
      typeof document !== "undefined"
        ? document.activeElement === document.body || prevRef.value
          ? prevRef.value
          : null
        : document.activeElement;
  });

  onMounted(() => {
    window.addEventListener("keydown", handleKeydown);
  });

  onUnmounted(() => {
    window.removeEventListener("keydown", handleKeydown);

    if (previouslyFocused.value) {
      previouslyFocused.value.focus();
    }
  });

  return {
    modalRef,
    close
  };
}

 ref, all of these values need to passed to the 

 method when we migrate these methods and lifecycle hooks.

import { ref, onMounted, onUnmounted, onBeforeMount } from 'vue';

export const useDialog = ({ prevRef, dialogRef }, context) => {
  const isDialogOpened = ref(false);

  const openDialog = () => {
    isDialogOpened.value = true;
  };

  const closeDialog = () => {
    isDialogOpened.value = false;
  };

  // ---

  let previouslyFocused = null;

  const emitClose = () => {
    context.emit("close");
  };

  const handleKeydown = (evt) => {
    if (dialogRef.value) {
      if (evt.key === "Escape") {
        // Pressing the ESC key closes the modal.
        emitClose();
      } else if (evt.key === "Tab") {
        // Pressing the Tab key traps the focus in the modal.
        const modalNodes = dialogRef.value.querySelectorAll("*");
        const tabbable = Array.from(modalNodes).filter(
          (n) => n.tabIndex >= 0
        );

        let index = tabbable.indexOf(document.activeElement);

        if (index === -1 && evt.shiftKey) {
          index = 0;
        }

        index += tabbable.length + (evt.shiftKey ? -1 : 1);
        index %= tabbable.length;
        tabbable[index].focus();

        evt.preventDefault();
      }

      return;
    }
  };

  onBeforeMount(() => {
    previouslyFocused =
      typeof document !== "undefined"
        ? document.activeElement === document.body || prevRef.value
          ? prevRef.value
          : null
        : document.activeElement;
  });

  onMounted(() => {
    window.addEventListener("keydown", handleKeydown);
  });

  onUnmounted(() => {
    window.removeEventListener("keydown", handleKeydown);

    if (previouslyFocused) {
      previouslyFocused.focus();
    }
  });

  // ---

  return {
    emitClose,
    openDialog,
    closeDialog,
    isDialogOpened
  };
}

, we should isolate this logic within a function 

 component and accept these arguments when called.

import { ref, onMounted, onUnmounted, onBeforeMount } from "vue";

export const useDialog = () => {
  const isDialogOpened = ref(false);

  const openDialog = () => {
    isDialogOpened.value = true;
  };

  const closeDialog = () => {
    isDialogOpened.value = false;
  };

  const initDialog = ({ prevRef, dialogRef }, context) => {
    let previouslyFocused = null;

    const emitClose = () => {
      context.emit("close");
    };

    const handleKeydown = (evt) => {
      if (dialogRef.value) {
        if (evt.key === "Escape") {
          // Pressing the ESC key closes the modal.
          emitClose();
        } else if (evt.key === "Tab") {
          // Pressing the Tab key traps the focus in the modal.
          const modalNodes = dialogRef.value.querySelectorAll("*");
          const tabbable = Array.from(modalNodes).filter(
            (n) => n.tabIndex >= 0
          );

          let index = tabbable.indexOf(document.activeElement);

          if (index === -1 && evt.shiftKey) {
            index = 0;
          }

          index += tabbable.length + (evt.shiftKey ? -1 : 1);
          index %= tabbable.length;
          tabbable[index].focus();

          evt.preventDefault();
        }

        return;
      }
    };

    onBeforeMount(() => {
      previouslyFocused =
        typeof document !== "undefined"
          ? document.activeElement === document.body || prevRef.value
            ? prevRef.value
            : null
          : document.activeElement;
    });

    onMounted(() => {
      window.addEventListener("keydown", handleKeydown);
    });

    onUnmounted(() => {
      window.removeEventListener("keydown", handleKeydown);

      if (previouslyFocused) {
        previouslyFocused.focus();
      }
    });

    return {
      emitClose
    };
  };

  return {
    openDialog,
    closeDialog,
    isDialogOpened,
    initDialog
  };
};

We will also need to slightly adjust the 

<template>
  <div class="modal-background" />
  <div class="modal" role="dialog" aria-modal="true" ref="modalRef">
    <button class="modal__close-btn" type="button" @click="emitClose" aria-label="Close">X</button>
    <slot name="header" />
    <hr />
    <slot name="body" />
    <hr />
    <slot name="footer" />
  </div>
</template>
// ...
<script>
import { ref, toRefs } from "vue";
import { useDialog } from '../hooks/useDialog';

export default {
  name: "Modal",
  props: {
    prevRef: {
      type: HTMLElement,
    },
  },
  setup(props, context) {
    const { prevRef } = toRefs(props);
    const modalRef = ref(null);
    
    const { initDialog } = useDialog();

    const { emitClose } = initDialog({ dialogRef: modalRef, prevRef }, context);

    return {
      modalRef,
      emitClose
    };
  },
};
</script>

 are reactive, their updated values will be available to the methods and lifecycle hooks within 

Try out these changes! When you click on the "Open Modal" button, the modal pops open, and focus is trapped within it. Once the modal is closed, the focus resumes back to the "Open Modal" button.

Let's create a simple toast notification component. Add a new file to the 

. Plug-in the same logic that is now used in the 

<template>
  <div
    class="toast"
    role="alert"
    aria-live="assertive"
    aria-atomic="true"
    ref="toastRef"
  >
    <button
      class="toast__close-btn"
      type="button"
      @click="emitClose"
      aria-label="Close"
      v-focus
    >
      X
    </button>
    <p class="toast__message">{{ message }}</p>
  </div>
</template>
<style scoped>
.toast {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background: #007aff;
  color: white;
  padding: 2rem 3rem;
}

.toast__close-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

.toast__message {
  margin: 0;
}
</style>
<script>
import { ref, toRefs } from "vue";
import { useDialog } from "../hooks/useDialog";

export default {
  name: "ToastNotification",
  props: {
    prevRef: {
      type: HTMLElement,
    },
    message: {
      type: String,
    },
  },
  setup(props, context) {
    const { prevRef } = toRefs(props);
    const toastRef = ref(null);

    const { initDialog } = useDialog();

    const { emitClose } = initDialog({ dialogRef: toastRef, prevRef }, context);

    return {
      toastRef,
      emitClose,
    };
  },
};
</script>

Let's add an example toast notification and a button that pops open this notification when clicked to the 

<template>
  <button type="button" @click="openModal" ref="openModalBtn">
    Open Modal
  </button>
  <teleport to="body">
    <Modal
      v-if="isModalOpened"
      @open="openModal"
      @close="closeModal"
      :prev-ref="openModalBtn"
    >
      <template v-slot:header>
        <h2>Vue.js</h2>
      </template>
      <template v-slot:body>
        <ol>
          <li>
            <a href="https://v3.vuejs.org/guide/introduction.html" v-focus
              >Introduction</a
            >
          </li>
          <li>
            <a href="https://v3.vuejs.org/guide/instance.html"
              >Application and Component Instances</a
            >
          </li>
          <li>
            <a href="https://v3.vuejs.org/guide/template-syntax.html"
              >Template Syntax</a
            >
          </li>
          <li>
            <a href="https://v3.vuejs.org/guide/data-methods.html"
              >Data Properties and Methods</a
            >
          </li>
          <li>
            <a href="https://v3.vuejs.org/guide/computed.html"
              >Computed Properties and Watchers</a
            >
          </li>
        </ol>
      </template>
      <template v-slot:footer
        ><button type="button" @click="closeModal">Close</button></template
      >
    </Modal>
  </teleport>
  <button type="button" @click="openToast" ref="openToastBtn">
    Open Toast
  </button>
  <teleport to="body">
    <ToastNotification
      v-if="isToastOpened"
      @open="openToast"
      @close="closeToast"
      message="Hello World! This is a toast message."
      :prev-ref="openToastBtn"
    />
  </teleport>
</template>

<script>
import { ref } from "vue";
import Modal from "./components/Modal.vue";
import ToastNotification from "./components/ToastNotification.vue";
import { useDialog } from "./hooks/useDialog";

export default {
  name: "App",
  components: {
    Modal,
    ToastNotification,
  },
  setup() {
    const {
      openDialog: openModal,
      closeDialog: closeModal,
      isDialogOpened: isModalOpened,
    } = useDialog();

    const openModalBtn = ref(null);

    const {
      openDialog: openToast,
      closeDialog: closeToast,
      isDialogOpened: isToastOpened,
    } = useDialog();

    const openToastBtn = ref(null);

    return {
      isModalOpened,
      openModalBtn,
      openModal,
      closeModal,
      isToastOpened,
      openToastBtn,
      openToast,
      closeToast,
    };
  },
};
</script>
// ...

And with little effort (after the initial refactoring of functionality to 

), we have successfully introduced a new component to our application. Additionally, these same steps can be repeated for other dialog-like components. If you would like to view the final version of this CodeSandbox demo, then click 

Composing and isolating functionality within a separate function makes it incredibly easy to integrate and share this logic amongst existing/new components. The Composition API's flexibility and compositional nature allows us to structure and group our logic based on high-level component features rather than low-level component details (in the case of the Options API). 

Try rewriting React functional components that use hooks with Vue 3's Composition API.

If you want to learn more about Vue 3, then check out 

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Vue 3 - The Composition API - Reusability (Part 2)

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript