@b12k/vue3-router-gmc

Vue 3 Router - Get Matched Components

List components that are going to enter, leave or stay on the page after navigation

Instalation

npm

npm i @b12k/vue3-router-gmc

yarn

yarn add @b12k/vue3-router-gmc

pnpm

pnpm add @b12k/vue3-router-gmc

Usage

import { getMatchedComponents } from '@b12k/vue3-router-gmc';
import { createRouter } from 'vue-router';

const router = createRouter({
  /* routes */
});

router.beforeEach(async (to, from) => {
  const {
    entering, // array of components entering the page
    leaving, // array of components leaving the page
    staying, // array of components staying on the page
  } = await getMatchedComponents(to, from);
});

💡 Also works with beforeResolve guard.

Real world example

This lib is used in The Boilerplate Vue 👉 HERE