vue - add app.mount lifecycle hooks - onBeforeMount and onAfterMount

addAppMountLifecycleHooks.js

// add app mount lifecycle hooks to the app instance for plugins to use when registering.
function addAppMountLifecycleHooks(app) {
  const beforeHooks = [];
  const afterHooks = [];
  const boundMount = app.mount.bind(app);

  app.mount = (async (rootContainer, isHydrate, isSVG) => {
    for (const preHook of beforeHooks) await preHook(app);

    boundMount(rootContainer, isHydrate, isSVG);

    for (const postHook of afterHooks) await postHook(app);

    afterHooks.length = beforeHooks.length = 0;
  }).bind(app);

  app.onBeforeMount = (hook, remove = false) => {
    remove ? beforeHooks.unshift(hook) : beforeHooks.push(hook);
  };

  app.onAfterMount = (hook, remove = false) => {
    remove ? afterHooks.unshift(hook) : afterHooks.push(hook);
  };
}

Usage: used when creating the app instance to add hooks that custom plugins can use.

import { createApp } from 'vue';

// create and return vue app instance
export function createVueApp(rootComponent) {
  const app = createApp(rootComponent);

  // add onBeforeMount and onAfterMount methods
  addAppMountLifecycleHooks(app);

  app.config.errorHandler = (err, instance, info) => {
    // handle error, e.g. report to a service
    console.error(`Error: ${err.toString()}\nInfo: ${info}`);
  };

  app.config.warnHandler = (msg, instance, trace) => {
    // `trace` is the component hierarchy trace
    console.log(`Warn: ${msg}\nTrace: ${trace}`);
  };

  return app;
}

The methods added are:

app.onBeforeMount(hook, remove = false) 
app.onAfterMount(hook, remove = false)

Each hook is called with the current vue App instance either before or after.