diff --git a/.eslintignore b/.eslintignore
index 1521c8b76..2b88bf081 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1 +1,2 @@
 dist
+*.ts
diff --git a/build/configs.js b/build/configs.js
index 33117a641..0910f9c0f 100644
--- a/build/configs.js
+++ b/build/configs.js
@@ -5,8 +5,7 @@ const cjs = require('@rollup/plugin-commonjs')
 const node = require('@rollup/plugin-node-resolve').nodeResolve
 const replace = require('rollup-plugin-replace')
 const version = process.env.VERSION || require('../package.json').version
-const banner =
-`/*!
+const banner = `/*!
   * vue-router v${version}
   * (c) ${new Date().getFullYear()} Evan You
   * @license MIT
@@ -31,27 +30,40 @@ module.exports = [
     format: 'cjs'
   },
   {
+    input: resolve('src/entries/esm.js'),
     file: resolve('dist/vue-router.esm.js'),
     format: 'es'
   },
   {
+    input: resolve('src/entries/esm.js'),
     file: resolve('dist/vue-router.esm.browser.js'),
     format: 'es',
     env: 'development',
     transpile: false
   },
   {
+    input: resolve('src/entries/esm.js'),
     file: resolve('dist/vue-router.esm.browser.min.js'),
     format: 'es',
     env: 'production',
     transpile: false
+  },
+  {
+    input: resolve('src/composables/index.js'),
+    file: resolve('./dist/composables.mjs'),
+    format: 'es'
+  },
+  {
+    input: resolve('src/composables/index.js'),
+    file: resolve('./dist/composables.js'),
+    format: 'cjs'
   }
 ].map(genConfig)
 
 function genConfig (opts) {
   const config = {
     input: {
-      input: resolve('src/index.js'),
+      input: opts.input || resolve('src/index.js'),
       plugins: [
         flow(),
         node(),
@@ -59,7 +71,8 @@ function genConfig (opts) {
         replace({
           __VERSION__: version
         })
-      ]
+      ],
+      external: ['vue']
     },
     output: {
       file: opts.file,
@@ -70,9 +83,11 @@ function genConfig (opts) {
   }
 
   if (opts.env) {
-    config.input.plugins.unshift(replace({
-      'process.env.NODE_ENV': JSON.stringify(opts.env)
-    }))
+    config.input.plugins.unshift(
+      replace({
+        'process.env.NODE_ENV': JSON.stringify(opts.env)
+      })
+    )
   }
 
   if (opts.transpile !== false) {
diff --git a/dist/composables.js b/dist/composables.js
new file mode 100644
index 000000000..2f1c92291
--- /dev/null
+++ b/dist/composables.js
@@ -0,0 +1,87 @@
+/*!
+  * vue-router v3.5.4
+  * (c) 2022 Evan You
+  * @license MIT
+  */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+
+function useRouter () {
+  var i = vue.getCurrentInstance();
+  if (process.env.NODE_ENV !== 'production' && !i) {
+    throwNoCurrentInstance('useRouter');
+  }
+
+  return i.proxy.$root.$router
+}
+
+function useRoute () {
+  var i = vue.getCurrentInstance();
+  if (process.env.NODE_ENV !== 'production' && !i) {
+    throwNoCurrentInstance('useRoute');
+  }
+
+  var root = i.proxy.$root;
+  if (!root._$route) {
+    var route = vue.effectScope(true).run(
+      function () { return vue.shallowReactive(Object.assign({}, root.$router.currentRoute)); }
+    );
+    root._$route = route;
+
+    root.$router.afterEach(function (to) {
+      Object.assign(route, to);
+    });
+  }
+
+  return root._$route
+}
+
+// TODO:
+// export function useLink () {}
+
+function onBeforeRouteUpdate (guard) {
+  var i = vue.getCurrentInstance();
+  if (process.env.NODE_ENV !== 'production' && !i) {
+    throwNoCurrentInstance('onBeforeRouteUpdate');
+  }
+
+  var router = useRouter();
+
+  var target = i.proxy;
+  // find the nearest routerview to know the depth
+  while (target && target.$vnode && target.$vnode.data && target.$vnode.data.routerViewDepth == null) {
+    target = target.$parent;
+  }
+
+  var depth = target && target.$vnode && target.$vnode.data ? target.$vnode.data.routerViewDepth : null;
+
+  console.log('found depth', depth);
+
+  // TODO: allow multiple guards?
+  i.proxy.$options.beforeRouteUpdate = guard;
+
+  var removeGuard = router.beforeEach(function (to, from, next) {
+    // TODO: check it's an update
+    return guard(to, from, next)
+  });
+
+  vue.onUnmounted(removeGuard);
+
+  return removeGuard
+}
+
+// TODO:
+// export function onBeforeRouteLeave () {}
+
+function throwNoCurrentInstance (method) {
+  throw new Error(
+    ("[vue-router]: Missing current instance. " + method + "() must be called inside <script setup> or setup().")
+  )
+}
+
+exports.onBeforeRouteUpdate = onBeforeRouteUpdate;
+exports.useRoute = useRoute;
+exports.useRouter = useRouter;
diff --git a/dist/composables.mjs b/dist/composables.mjs
new file mode 100644
index 000000000..4b2470e78
--- /dev/null
+++ b/dist/composables.mjs
@@ -0,0 +1,81 @@
+/*!
+  * vue-router v3.5.4
+  * (c) 2022 Evan You
+  * @license MIT
+  */
+import { getCurrentInstance, effectScope, shallowReactive, onUnmounted } from 'vue';
+
+function useRouter () {
+  var i = getCurrentInstance();
+  if (process.env.NODE_ENV !== 'production' && !i) {
+    throwNoCurrentInstance('useRouter');
+  }
+
+  return i.proxy.$root.$router
+}
+
+function useRoute () {
+  var i = getCurrentInstance();
+  if (process.env.NODE_ENV !== 'production' && !i) {
+    throwNoCurrentInstance('useRoute');
+  }
+
+  var root = i.proxy.$root;
+  if (!root._$route) {
+    var route = effectScope(true).run(
+      function () { return shallowReactive(Object.assign({}, root.$router.currentRoute)); }
+    );
+    root._$route = route;
+
+    root.$router.afterEach(function (to) {
+      Object.assign(route, to);
+    });
+  }
+
+  return root._$route
+}
+
+// TODO:
+// export function useLink () {}
+
+function onBeforeRouteUpdate (guard) {
+  var i = getCurrentInstance();
+  if (process.env.NODE_ENV !== 'production' && !i) {
+    throwNoCurrentInstance('onBeforeRouteUpdate');
+  }
+
+  var router = useRouter();
+
+  var target = i.proxy;
+  // find the nearest routerview to know the depth
+  while (target && target.$vnode && target.$vnode.data && target.$vnode.data.routerViewDepth == null) {
+    target = target.$parent;
+  }
+
+  var depth = target && target.$vnode && target.$vnode.data ? target.$vnode.data.routerViewDepth : null;
+
+  console.log('found depth', depth);
+
+  // TODO: allow multiple guards?
+  i.proxy.$options.beforeRouteUpdate = guard;
+
+  var removeGuard = router.beforeEach(function (to, from, next) {
+    // TODO: check it's an update
+    return guard(to, from, next)
+  });
+
+  onUnmounted(removeGuard);
+
+  return removeGuard
+}
+
+// TODO:
+// export function onBeforeRouteLeave () {}
+
+function throwNoCurrentInstance (method) {
+  throw new Error(
+    ("[vue-router]: Missing current instance. " + method + "() must be called inside <script setup> or setup().")
+  )
+}
+
+export { onBeforeRouteUpdate, useRoute, useRouter };
diff --git a/examples/composables/app.js b/examples/composables/app.js
new file mode 100644
index 000000000..1762aeea0
--- /dev/null
+++ b/examples/composables/app.js
@@ -0,0 +1,146 @@
+import Vue, { defineComponent, watch, ref } from 'vue'
+import VueRouter from 'vue-router'
+import {
+  useRoute,
+  useRouter,
+  onBeforeRouteLeave,
+  onBeforeRouteUpdate,
+  useLink
+} from 'vue-router/composables'
+
+Vue.use(VueRouter)
+
+const Foo = defineComponent({
+  setup () {
+    const route = useRoute()
+    onBeforeRouteUpdate((to, from, next) => {
+      console.log('Foo updating')
+      next()
+    })
+    onBeforeRouteLeave((to, from, next) => {
+      console.log('Foo leaving')
+      next()
+    })
+
+    return { route }
+  },
+  template: `
+<div>
+  <h3>Foo</h3>
+  {{ route.fullPath }}
+</div>
+  `
+})
+
+const Home = defineComponent({
+  setup () {
+    const route = useRoute()
+    const router = useRouter()
+
+    // should be /
+    const startRoute = route.fullPath
+
+    onBeforeRouteUpdate((to, from, next) => {
+      console.log('Home updating')
+      next()
+    })
+
+    onBeforeRouteLeave((to, from, next) => {
+      console.log('Home leaving')
+      next()
+    })
+
+    const watchCount = ref(0)
+
+    watch(
+      () => route.query.n,
+      () => {
+        watchCount.value++
+      }
+    )
+
+    function navigate () {
+      router.push({ query: { n: 1 + (Number(route.query.n) || 0) }})
+    }
+    return { route, navigate, watchCount, startRoute }
+  },
+  template: `
+<div>
+  <h2>Home</h2>
+  <p id="start-route">{{ startRoute }}</p>
+  <p id='watch-count'>{{ watchCount }}</p>
+  <p id="fullpath">{{ route.fullPath }}</p>
+  <button id="nav" @click="navigate">Navigate</button>
+  <hr>
+  <Foo />
+</div>
+  `,
+  components: { Foo }
+})
+
+const About = defineComponent({
+  setup () {
+    const route = useRoute()
+    return { route }
+  },
+  template: `
+<div>
+  <h2>About</h2>
+  <p id="fullpath">{{ route.fullPath }}</p>
+</div>
+  `
+})
+
+const Nested = defineComponent({
+  template: `<RouterView />`
+})
+
+const NestedEmpty = defineComponent({
+  template: `<div>NestedEmpty</div>`
+})
+
+const NestedA = defineComponent({
+  template: `<div>NestedA</div>`
+})
+
+const router = new VueRouter({
+  mode: 'history',
+  base: __dirname,
+  routes: [
+    { path: '/', component: Home },
+    {
+      path: '/nested',
+      component: Nested,
+      children: [
+        { path: '', component: NestedEmpty },
+        { path: 'a', component: NestedA }
+      ]
+    },
+    { path: '/about', component: About }
+  ]
+})
+
+new Vue({
+  router,
+  template: `
+    <div id="app">
+      <h1>Basic</h1>
+      <ul>
+        <li><router-link to="/">/</router-link></li>
+        <li><router-link to="/about">/about</router-link></li>
+        <li><router-link to="/nested">/nested</router-link></li>
+        <li><router-link to="/nested/a">/nested/a</router-link></li>
+      </ul>
+      <router-view class="view"></router-view>
+
+      <pre id="nested-active" @click="navigate">{{ href }}: {{ isActive }}, {{ isExactActive }}</pre>
+    </div>
+  `,
+  setup () {
+    const { href, isActive, isExactActive, navigate, route } = useLink({
+      to: '/nested'
+    })
+
+    return { href, isActive, navigate, route, isExactActive }
+  }
+}).$mount('#app')
diff --git a/examples/composables/index.html b/examples/composables/index.html
new file mode 100644
index 000000000..b6f6342a7
--- /dev/null
+++ b/examples/composables/index.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="/global.css">
+<a href="/">&larr; Examples index</a>
+<hr />
+<div id="app"></div>
+<script src="/__build__/shared.chunk.js"></script>
+<script src="/__build__/composables.js"></script>
diff --git a/examples/index.html b/examples/index.html
index 5f2cd4f32..2b41a845a 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -30,6 +30,7 @@ <h1>Vue Router Examples</h1>
     <li><a href="keepalive-view">Keepalive View</a></li>
     <li><a href="multi-app">Multiple Apps</a></li>
     <li><a href="restart-app">Restart App</a></li>
+    <li><a href="composables">Composables</a></li>
   </ul>
 </body>
 </html>
diff --git a/examples/webpack.config.js b/examples/webpack.config.js
index 85b68fcf4..a74f22fb4 100644
--- a/examples/webpack.config.js
+++ b/examples/webpack.config.js
@@ -49,7 +49,8 @@ module.exports = {
   resolve: {
     alias: {
       vue: 'vue/dist/vue.esm.js',
-      'vue-router': path.join(__dirname, '..', 'src')
+      'vue-router': path.join(__dirname, '..', 'src'),
+      'vue-router/composables': path.join(__dirname, '..', 'src/composables')
     }
   },
 
diff --git a/package.json b/package.json
index c44a25fd8..35a83b92f 100644
--- a/package.json
+++ b/package.json
@@ -17,10 +17,29 @@
   "files": [
     "src",
     "dist/*.js",
+    "dist/*.mjs",
     "types/*.d.ts",
     "vetur/tags.json",
     "vetur/attributes.json"
   ],
+  "exports": {
+    ".": {
+      "import": {
+        "node": "./dist/vue-router.mjs",
+        "default": "./dist/vue-router.esm.js"
+      },
+      "require": "./dist/vue-router.common.js",
+      "types": "./types/index.d.ts"
+    },
+    "./composables": {
+      "import": "./dist/composables.mjs",
+      "require": "./dist/composables.js",
+      "types": "./types/composables.d.ts"
+    },
+    "./dist/*": "./dist/*",
+    "./types/*": "./types/*",
+    "./package.json": "./package.json"
+  },
   "vetur": {
     "tags": "vetur/tags.json",
     "attributes": "vetur/attributes.json"
@@ -73,7 +92,7 @@
     "babel-preset-flow-vue": "^1.0.0",
     "browserstack-local": "^1.4.8",
     "buble": "^0.19.8",
-    "chromedriver": "^90.0.0",
+    "chromedriver": "^96.0.0",
     "conventional-changelog-cli": "^2.0.11",
     "cross-spawn": "^7.0.3",
     "css-loader": "^2.1.1",
@@ -99,11 +118,11 @@
     "rollup-watch": "^4.0.0",
     "selenium-server": "^3.141.59",
     "terser": "^4.2.0",
-    "typescript": "^3.5.2",
-    "vue": "^2.6.12",
+    "typescript": "^4.7.0",
+    "vue": "^2.7.0",
     "vue-loader": "^15.9.3",
-    "vue-server-renderer": "^2.6.12",
-    "vue-template-compiler": "^2.6.12",
+    "vue-server-renderer": "^2.7.0",
+    "vue-template-compiler": "^2.7.0",
     "vuepress": "^1.5.3",
     "vuepress-theme-vue": "^1.1.1",
     "webpack": "^4.35.2",
diff --git a/src/components/link.js b/src/components/link.js
index 9c2a25784..821b69f02 100644
--- a/src/components/link.js
+++ b/src/components/link.js
@@ -189,7 +189,7 @@ export default {
   }
 }
 
-function guardEvent (e) {
+export function guardEvent (e: any) {
   // don't redirect with control keys
   if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return
   // don't redirect when preventDefault called
diff --git a/src/composables/globals.js b/src/composables/globals.js
new file mode 100644
index 000000000..8331f28ec
--- /dev/null
+++ b/src/composables/globals.js
@@ -0,0 +1,34 @@
+import {
+  getCurrentInstance,
+  shallowReactive,
+  effectScope
+} from 'vue'
+import { throwNoCurrentInstance } from './utils'
+
+export function useRouter () {
+  if (process.env.NODE_ENV !== 'production') {
+    throwNoCurrentInstance('useRouter')
+  }
+
+  return getCurrentInstance().proxy.$root.$router
+}
+
+export function useRoute () {
+  if (process.env.NODE_ENV !== 'production') {
+    throwNoCurrentInstance('useRoute')
+  }
+
+  const root = getCurrentInstance().proxy.$root
+  if (!root._$route) {
+    const route = effectScope(true).run(() =>
+      shallowReactive(Object.assign({}, root.$router.currentRoute))
+    )
+    root._$route = route
+
+    root.$router.afterEach(to => {
+      Object.assign(route, to)
+    })
+  }
+
+  return root._$route
+}
diff --git a/src/composables/guards.js b/src/composables/guards.js
new file mode 100644
index 000000000..6312e9401
--- /dev/null
+++ b/src/composables/guards.js
@@ -0,0 +1,68 @@
+import { getCurrentInstance, onUnmounted } from 'vue'
+import { throwNoCurrentInstance } from './utils'
+import { useRouter } from './globals'
+
+export function onBeforeRouteUpdate (guard) {
+  if (process.env.NODE_ENV !== 'production') {
+    throwNoCurrentInstance('onBeforeRouteUpdate')
+  }
+
+  return useFilteredGuard(guard, isUpdateNavigation)
+}
+function isUpdateNavigation (to, from, depth) {
+  const toMatched = to.matched
+  const fromMatched = from.matched
+  return (
+    toMatched.length >= depth &&
+    toMatched
+      .slice(0, depth + 1)
+      .every((record, i) => record === fromMatched[i])
+  )
+}
+
+function isLeaveNavigation (to, from, depth) {
+  const toMatched = to.matched
+  const fromMatched = from.matched
+  return toMatched.length < depth || toMatched[depth] !== fromMatched[depth]
+}
+
+export function onBeforeRouteLeave (guard) {
+  if (process.env.NODE_ENV !== 'production') {
+    throwNoCurrentInstance('onBeforeRouteLeave')
+  }
+
+  return useFilteredGuard(guard, isLeaveNavigation)
+}
+
+const noop = () => {}
+function useFilteredGuard (guard, fn) {
+  const instance = getCurrentInstance()
+  const router = useRouter()
+
+  let target = instance.proxy
+  // find the nearest RouterView to know the depth
+  while (
+    target &&
+    target.$vnode &&
+    target.$vnode.data &&
+    target.$vnode.data.routerViewDepth == null
+  ) {
+    target = target.$parent
+  }
+
+  const depth =
+    target && target.$vnode && target.$vnode.data
+      ? target.$vnode.data.routerViewDepth
+      : null
+
+  if (depth != null) {
+    const removeGuard = router.beforeEach((to, from, next) => {
+      return fn(to, from, depth) ? guard(to, from, next) : next()
+    })
+
+    onUnmounted(removeGuard)
+    return removeGuard
+  }
+
+  return noop
+}
diff --git a/src/composables/index.js b/src/composables/index.js
new file mode 100644
index 000000000..d1cefa8cf
--- /dev/null
+++ b/src/composables/index.js
@@ -0,0 +1,3 @@
+export * from './guards'
+export * from './globals'
+export * from './useLink'
diff --git a/src/composables/useLink.js b/src/composables/useLink.js
new file mode 100644
index 000000000..237fd3355
--- /dev/null
+++ b/src/composables/useLink.js
@@ -0,0 +1,113 @@
+import { computed, unref } from 'vue'
+import { guardEvent } from '../components/link'
+import { throwNoCurrentInstance } from './utils'
+import { useRouter, useRoute } from './globals'
+
+function includesParams (outer, inner) {
+  for (const key in inner) {
+    const innerValue = inner[key]
+    const outerValue = outer[key]
+    if (typeof innerValue === 'string') {
+      if (innerValue !== outerValue) return false
+    } else {
+      if (
+        !Array.isArray(outerValue) ||
+        outerValue.length !== innerValue.length ||
+        innerValue.some((value, i) => value !== outerValue[i])
+      ) {
+        return false
+      }
+    }
+  }
+
+  return true
+}
+
+// helpers from vue router 4
+
+function isSameRouteLocationParamsValue (a, b) {
+  return Array.isArray(a)
+    ? isEquivalentArray(a, b)
+    : Array.isArray(b)
+      ? isEquivalentArray(b, a)
+      : a === b
+}
+
+function isEquivalentArray (a, b) {
+  return Array.isArray(b)
+    ? a.length === b.length && a.every((value, i) => value === b[i])
+    : a.length === 1 && a[0] === b
+}
+
+export function isSameRouteLocationParams (a, b) {
+  if (Object.keys(a).length !== Object.keys(b).length) return false
+
+  for (const key in a) {
+    if (!isSameRouteLocationParamsValue(a[key], b[key])) return false
+  }
+
+  return true
+}
+
+export function useLink (props) {
+  if (process.env.NODE_ENV !== 'production') {
+    throwNoCurrentInstance('useLink')
+  }
+
+  const router = useRouter()
+  const currentRoute = useRoute()
+
+  const resolvedRoute = computed(() => router.resolve(unref(props.to), currentRoute))
+
+  const activeRecordIndex = computed(() => {
+    const route = resolvedRoute.value.route
+    const { matched } = route
+    const { length } = matched
+    const routeMatched = matched[length - 1]
+    const currentMatched = currentRoute.matched
+    if (!routeMatched || !currentMatched.length) return -1
+    const index = currentMatched.indexOf(routeMatched)
+    if (index > -1) return index
+    // possible parent record
+    const parentRecord = currentMatched[currentMatched.length - 2]
+
+    return (
+      // we are dealing with nested routes
+      length > 1 &&
+        // if the parent and matched route have the same path, this link is
+        // referring to the empty child. Or we currently are on a different
+        // child of the same parent
+        parentRecord && parentRecord === routeMatched.parent
+    )
+  })
+
+  const isActive = computed(
+    () =>
+      activeRecordIndex.value > -1 &&
+      includesParams(currentRoute.params, resolvedRoute.value.route.params)
+  )
+  const isExactActive = computed(
+    () =>
+      activeRecordIndex.value > -1 &&
+      activeRecordIndex.value === currentRoute.matched.length - 1 &&
+      isSameRouteLocationParams(currentRoute.params, resolvedRoute.value.route.params)
+  )
+
+  const navigate = e => {
+    const href = resolvedRoute.value.route
+    if (guardEvent(e)) {
+      return props.replace
+        ? router.replace(href)
+        : router.push(href)
+    }
+    return Promise.resolve()
+  }
+
+  return {
+    href: computed(() => resolvedRoute.value.href),
+    route: computed(() => resolvedRoute.value.route),
+    isExactActive,
+    isActive,
+    navigate
+  }
+}
diff --git a/src/composables/utils.js b/src/composables/utils.js
new file mode 100644
index 000000000..969d0f7c0
--- /dev/null
+++ b/src/composables/utils.js
@@ -0,0 +1,11 @@
+import { getCurrentInstance } from 'vue'
+
+// dev only warn if no current instance
+
+export function throwNoCurrentInstance (method) {
+  if (!getCurrentInstance()) {
+    throw new Error(
+      `[vue-router]: Missing current instance. ${method}() must be called inside <script setup> or setup().`
+    )
+  }
+}
diff --git a/src/entries/cjs.js b/src/entries/cjs.js
new file mode 100644
index 000000000..4e815ba54
--- /dev/null
+++ b/src/entries/cjs.js
@@ -0,0 +1,3 @@
+import VueRouter from '../router'
+
+export default VueRouter
diff --git a/src/entries/esm.js b/src/entries/esm.js
new file mode 100644
index 000000000..4bdac48a6
--- /dev/null
+++ b/src/entries/esm.js
@@ -0,0 +1,12 @@
+import VueRouter from '../router'
+
+export const version = '__VERSION__'
+export { isNavigationFailure, NavigationFailureType } from '../util/errors'
+export { START as START_LOCATION } from '../util/route'
+export { default as RouterLink } from '../components/link'
+export { default as RouterView } from '../components/view'
+
+// we can't add the other composables here because people could still be using an older version of vue and that would
+// create a compilation error trying to import from vue
+
+export default VueRouter
diff --git a/src/index.js b/src/index.js
index 4ffe2db57..deacaced6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,294 +1,3 @@
-/* @flow */
+import VueRouter from './entries/cjs'
 
-import { install } from './install'
-import { START } from './util/route'
-import { assert, warn } from './util/warn'
-import { inBrowser } from './util/dom'
-import { cleanPath } from './util/path'
-import { createMatcher } from './create-matcher'
-import { normalizeLocation } from './util/location'
-import { supportsPushState } from './util/push-state'
-import { handleScroll } from './util/scroll'
-
-import { HashHistory } from './history/hash'
-import { HTML5History } from './history/html5'
-import { AbstractHistory } from './history/abstract'
-
-import type { Matcher } from './create-matcher'
-
-import { isNavigationFailure, NavigationFailureType } from './util/errors'
-
-export default class VueRouter {
-  static install: () => void
-  static version: string
-  static isNavigationFailure: Function
-  static NavigationFailureType: any
-  static START_LOCATION: Route
-
-  app: any
-  apps: Array<any>
-  ready: boolean
-  readyCbs: Array<Function>
-  options: RouterOptions
-  mode: string
-  history: HashHistory | HTML5History | AbstractHistory
-  matcher: Matcher
-  fallback: boolean
-  beforeHooks: Array<?NavigationGuard>
-  resolveHooks: Array<?NavigationGuard>
-  afterHooks: Array<?AfterNavigationHook>
-
-  constructor (options: RouterOptions = {}) {
-    if (process.env.NODE_ENV !== 'production') {
-      warn(this instanceof VueRouter, `Router must be called with the new operator.`)
-    }
-    this.app = null
-    this.apps = []
-    this.options = options
-    this.beforeHooks = []
-    this.resolveHooks = []
-    this.afterHooks = []
-    this.matcher = createMatcher(options.routes || [], this)
-
-    let mode = options.mode || 'hash'
-    this.fallback =
-      mode === 'history' && !supportsPushState && options.fallback !== false
-    if (this.fallback) {
-      mode = 'hash'
-    }
-    if (!inBrowser) {
-      mode = 'abstract'
-    }
-    this.mode = mode
-
-    switch (mode) {
-      case 'history':
-        this.history = new HTML5History(this, options.base)
-        break
-      case 'hash':
-        this.history = new HashHistory(this, options.base, this.fallback)
-        break
-      case 'abstract':
-        this.history = new AbstractHistory(this, options.base)
-        break
-      default:
-        if (process.env.NODE_ENV !== 'production') {
-          assert(false, `invalid mode: ${mode}`)
-        }
-    }
-  }
-
-  match (raw: RawLocation, current?: Route, redirectedFrom?: Location): Route {
-    return this.matcher.match(raw, current, redirectedFrom)
-  }
-
-  get currentRoute (): ?Route {
-    return this.history && this.history.current
-  }
-
-  init (app: any /* Vue component instance */) {
-    process.env.NODE_ENV !== 'production' &&
-      assert(
-        install.installed,
-        `not installed. Make sure to call \`Vue.use(VueRouter)\` ` +
-          `before creating root instance.`
-      )
-
-    this.apps.push(app)
-
-    // set up app destroyed handler
-    // https://github.com/vuejs/vue-router/issues/2639
-    app.$once('hook:destroyed', () => {
-      // clean out app from this.apps array once destroyed
-      const index = this.apps.indexOf(app)
-      if (index > -1) this.apps.splice(index, 1)
-      // ensure we still have a main app or null if no apps
-      // we do not release the router so it can be reused
-      if (this.app === app) this.app = this.apps[0] || null
-
-      if (!this.app) this.history.teardown()
-    })
-
-    // main app previously initialized
-    // return as we don't need to set up new history listener
-    if (this.app) {
-      return
-    }
-
-    this.app = app
-
-    const history = this.history
-
-    if (history instanceof HTML5History || history instanceof HashHistory) {
-      const handleInitialScroll = routeOrError => {
-        const from = history.current
-        const expectScroll = this.options.scrollBehavior
-        const supportsScroll = supportsPushState && expectScroll
-
-        if (supportsScroll && 'fullPath' in routeOrError) {
-          handleScroll(this, routeOrError, from, false)
-        }
-      }
-      const setupListeners = routeOrError => {
-        history.setupListeners()
-        handleInitialScroll(routeOrError)
-      }
-      history.transitionTo(
-        history.getCurrentLocation(),
-        setupListeners,
-        setupListeners
-      )
-    }
-
-    history.listen(route => {
-      this.apps.forEach(app => {
-        app._route = route
-      })
-    })
-  }
-
-  beforeEach (fn: Function): Function {
-    return registerHook(this.beforeHooks, fn)
-  }
-
-  beforeResolve (fn: Function): Function {
-    return registerHook(this.resolveHooks, fn)
-  }
-
-  afterEach (fn: Function): Function {
-    return registerHook(this.afterHooks, fn)
-  }
-
-  onReady (cb: Function, errorCb?: Function) {
-    this.history.onReady(cb, errorCb)
-  }
-
-  onError (errorCb: Function) {
-    this.history.onError(errorCb)
-  }
-
-  push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
-    // $flow-disable-line
-    if (!onComplete && !onAbort && typeof Promise !== 'undefined') {
-      return new Promise((resolve, reject) => {
-        this.history.push(location, resolve, reject)
-      })
-    } else {
-      this.history.push(location, onComplete, onAbort)
-    }
-  }
-
-  replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
-    // $flow-disable-line
-    if (!onComplete && !onAbort && typeof Promise !== 'undefined') {
-      return new Promise((resolve, reject) => {
-        this.history.replace(location, resolve, reject)
-      })
-    } else {
-      this.history.replace(location, onComplete, onAbort)
-    }
-  }
-
-  go (n: number) {
-    this.history.go(n)
-  }
-
-  back () {
-    this.go(-1)
-  }
-
-  forward () {
-    this.go(1)
-  }
-
-  getMatchedComponents (to?: RawLocation | Route): Array<any> {
-    const route: any = to
-      ? to.matched
-        ? to
-        : this.resolve(to).route
-      : this.currentRoute
-    if (!route) {
-      return []
-    }
-    return [].concat.apply(
-      [],
-      route.matched.map(m => {
-        return Object.keys(m.components).map(key => {
-          return m.components[key]
-        })
-      })
-    )
-  }
-
-  resolve (
-    to: RawLocation,
-    current?: Route,
-    append?: boolean
-  ): {
-    location: Location,
-    route: Route,
-    href: string,
-    // for backwards compat
-    normalizedTo: Location,
-    resolved: Route
-  } {
-    current = current || this.history.current
-    const location = normalizeLocation(to, current, append, this)
-    const route = this.match(location, current)
-    const fullPath = route.redirectedFrom || route.fullPath
-    const base = this.history.base
-    const href = createHref(base, fullPath, this.mode)
-    return {
-      location,
-      route,
-      href,
-      // for backwards compat
-      normalizedTo: location,
-      resolved: route
-    }
-  }
-
-  getRoutes () {
-    return this.matcher.getRoutes()
-  }
-
-  addRoute (parentOrRoute: string | RouteConfig, route?: RouteConfig) {
-    this.matcher.addRoute(parentOrRoute, route)
-    if (this.history.current !== START) {
-      this.history.transitionTo(this.history.getCurrentLocation())
-    }
-  }
-
-  addRoutes (routes: Array<RouteConfig>) {
-    if (process.env.NODE_ENV !== 'production') {
-      warn(false, 'router.addRoutes() is deprecated and has been removed in Vue Router 4. Use router.addRoute() instead.')
-    }
-    this.matcher.addRoutes(routes)
-    if (this.history.current !== START) {
-      this.history.transitionTo(this.history.getCurrentLocation())
-    }
-  }
-}
-
-function registerHook (list: Array<any>, fn: Function): Function {
-  list.push(fn)
-  return () => {
-    const i = list.indexOf(fn)
-    if (i > -1) list.splice(i, 1)
-  }
-}
-
-function createHref (base: string, fullPath: string, mode) {
-  var path = mode === 'hash' ? '#' + fullPath : fullPath
-  return base ? cleanPath(base + '/' + path) : path
-}
-
-VueRouter.install = install
-VueRouter.version = '__VERSION__'
-VueRouter.isNavigationFailure = isNavigationFailure
-VueRouter.NavigationFailureType = NavigationFailureType
-VueRouter.START_LOCATION = START
-
-if (inBrowser && window.Vue) {
-  window.Vue.use(VueRouter)
-}
+export default VueRouter
diff --git a/src/router.js b/src/router.js
new file mode 100644
index 000000000..9cfb5e892
--- /dev/null
+++ b/src/router.js
@@ -0,0 +1,294 @@
+/* @flow */
+
+import { install } from './install'
+import { START } from './util/route'
+import { assert, warn } from './util/warn'
+import { inBrowser } from './util/dom'
+import { cleanPath } from './util/path'
+import { createMatcher } from './create-matcher'
+import { normalizeLocation } from './util/location'
+import { supportsPushState } from './util/push-state'
+import { handleScroll } from './util/scroll'
+import { isNavigationFailure, NavigationFailureType } from './util/errors'
+
+import { HashHistory } from './history/hash'
+import { HTML5History } from './history/html5'
+import { AbstractHistory } from './history/abstract'
+
+import type { Matcher } from './create-matcher'
+
+export default class VueRouter {
+  static install: () => void
+  static version: string
+  static isNavigationFailure: Function
+  static NavigationFailureType: any
+  static START_LOCATION: Route
+
+  app: any
+  apps: Array<any>
+  ready: boolean
+  readyCbs: Array<Function>
+  options: RouterOptions
+  mode: string
+  history: HashHistory | HTML5History | AbstractHistory
+  matcher: Matcher
+  fallback: boolean
+  beforeHooks: Array<?NavigationGuard>
+  resolveHooks: Array<?NavigationGuard>
+  afterHooks: Array<?AfterNavigationHook>
+
+  constructor (options: RouterOptions = {}) {
+    if (process.env.NODE_ENV !== 'production') {
+      warn(this instanceof VueRouter, `Router must be called with the new operator.`)
+    }
+    this.app = null
+    this.apps = []
+    this.options = options
+    this.beforeHooks = []
+    this.resolveHooks = []
+    this.afterHooks = []
+    this.matcher = createMatcher(options.routes || [], this)
+
+    let mode = options.mode || 'hash'
+    this.fallback =
+      mode === 'history' && !supportsPushState && options.fallback !== false
+    if (this.fallback) {
+      mode = 'hash'
+    }
+    if (!inBrowser) {
+      mode = 'abstract'
+    }
+    this.mode = mode
+
+    switch (mode) {
+      case 'history':
+        this.history = new HTML5History(this, options.base)
+        break
+      case 'hash':
+        this.history = new HashHistory(this, options.base, this.fallback)
+        break
+      case 'abstract':
+        this.history = new AbstractHistory(this, options.base)
+        break
+      default:
+        if (process.env.NODE_ENV !== 'production') {
+          assert(false, `invalid mode: ${mode}`)
+        }
+    }
+  }
+
+  match (raw: RawLocation, current?: Route, redirectedFrom?: Location): Route {
+    return this.matcher.match(raw, current, redirectedFrom)
+  }
+
+  get currentRoute (): ?Route {
+    return this.history && this.history.current
+  }
+
+  init (app: any /* Vue component instance */) {
+    process.env.NODE_ENV !== 'production' &&
+      assert(
+        install.installed,
+        `not installed. Make sure to call \`Vue.use(VueRouter)\` ` +
+          `before creating root instance.`
+      )
+
+    this.apps.push(app)
+
+    // set up app destroyed handler
+    // https://github.com/vuejs/vue-router/issues/2639
+    app.$once('hook:destroyed', () => {
+      // clean out app from this.apps array once destroyed
+      const index = this.apps.indexOf(app)
+      if (index > -1) this.apps.splice(index, 1)
+      // ensure we still have a main app or null if no apps
+      // we do not release the router so it can be reused
+      if (this.app === app) this.app = this.apps[0] || null
+
+      if (!this.app) this.history.teardown()
+    })
+
+    // main app previously initialized
+    // return as we don't need to set up new history listener
+    if (this.app) {
+      return
+    }
+
+    this.app = app
+
+    const history = this.history
+
+    if (history instanceof HTML5History || history instanceof HashHistory) {
+      const handleInitialScroll = routeOrError => {
+        const from = history.current
+        const expectScroll = this.options.scrollBehavior
+        const supportsScroll = supportsPushState && expectScroll
+
+        if (supportsScroll && 'fullPath' in routeOrError) {
+          handleScroll(this, routeOrError, from, false)
+        }
+      }
+      const setupListeners = routeOrError => {
+        history.setupListeners()
+        handleInitialScroll(routeOrError)
+      }
+      history.transitionTo(
+        history.getCurrentLocation(),
+        setupListeners,
+        setupListeners
+      )
+    }
+
+    history.listen(route => {
+      this.apps.forEach(app => {
+        app._route = route
+      })
+    })
+  }
+
+  beforeEach (fn: Function): Function {
+    return registerHook(this.beforeHooks, fn)
+  }
+
+  beforeResolve (fn: Function): Function {
+    return registerHook(this.resolveHooks, fn)
+  }
+
+  afterEach (fn: Function): Function {
+    return registerHook(this.afterHooks, fn)
+  }
+
+  onReady (cb: Function, errorCb?: Function) {
+    this.history.onReady(cb, errorCb)
+  }
+
+  onError (errorCb: Function) {
+    this.history.onError(errorCb)
+  }
+
+  push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
+    // $flow-disable-line
+    if (!onComplete && !onAbort && typeof Promise !== 'undefined') {
+      return new Promise((resolve, reject) => {
+        this.history.push(location, resolve, reject)
+      })
+    } else {
+      this.history.push(location, onComplete, onAbort)
+    }
+  }
+
+  replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
+    // $flow-disable-line
+    if (!onComplete && !onAbort && typeof Promise !== 'undefined') {
+      return new Promise((resolve, reject) => {
+        this.history.replace(location, resolve, reject)
+      })
+    } else {
+      this.history.replace(location, onComplete, onAbort)
+    }
+  }
+
+  go (n: number) {
+    this.history.go(n)
+  }
+
+  back () {
+    this.go(-1)
+  }
+
+  forward () {
+    this.go(1)
+  }
+
+  getMatchedComponents (to?: RawLocation | Route): Array<any> {
+    const route: any = to
+      ? to.matched
+        ? to
+        : this.resolve(to).route
+      : this.currentRoute
+    if (!route) {
+      return []
+    }
+    return [].concat.apply(
+      [],
+      route.matched.map(m => {
+        return Object.keys(m.components).map(key => {
+          return m.components[key]
+        })
+      })
+    )
+  }
+
+  resolve (
+    to: RawLocation,
+    current?: Route,
+    append?: boolean
+  ): {
+    location: Location,
+    route: Route,
+    href: string,
+    // for backwards compat
+    normalizedTo: Location,
+    resolved: Route
+  } {
+    current = current || this.history.current
+    const location = normalizeLocation(to, current, append, this)
+    const route = this.match(location, current)
+    const fullPath = route.redirectedFrom || route.fullPath
+    const base = this.history.base
+    const href = createHref(base, fullPath, this.mode)
+    return {
+      location,
+      route,
+      href,
+      // for backwards compat
+      normalizedTo: location,
+      resolved: route
+    }
+  }
+
+  getRoutes () {
+    return this.matcher.getRoutes()
+  }
+
+  addRoute (parentOrRoute: string | RouteConfig, route?: RouteConfig) {
+    this.matcher.addRoute(parentOrRoute, route)
+    if (this.history.current !== START) {
+      this.history.transitionTo(this.history.getCurrentLocation())
+    }
+  }
+
+  addRoutes (routes: Array<RouteConfig>) {
+    if (process.env.NODE_ENV !== 'production') {
+      warn(false, 'router.addRoutes() is deprecated and has been removed in Vue Router 4. Use router.addRoute() instead.')
+    }
+    this.matcher.addRoutes(routes)
+    if (this.history.current !== START) {
+      this.history.transitionTo(this.history.getCurrentLocation())
+    }
+  }
+}
+
+function registerHook (list: Array<any>, fn: Function): Function {
+  list.push(fn)
+  return () => {
+    const i = list.indexOf(fn)
+    if (i > -1) list.splice(i, 1)
+  }
+}
+
+function createHref (base: string, fullPath: string, mode) {
+  var path = mode === 'hash' ? '#' + fullPath : fullPath
+  return base ? cleanPath(base + '/' + path) : path
+}
+
+if (inBrowser && window.Vue) {
+  window.Vue.use(VueRouter)
+}
+
+// We cannot remove this as it would be a breaking change
+VueRouter.install = install
+VueRouter.version = '__VERSION__'
+VueRouter.isNavigationFailure = isNavigationFailure
+VueRouter.NavigationFailureType = NavigationFailureType
+VueRouter.START_LOCATION = START
diff --git a/test/e2e/specs/composables.js b/test/e2e/specs/composables.js
new file mode 100644
index 000000000..cca4b151d
--- /dev/null
+++ b/test/e2e/specs/composables.js
@@ -0,0 +1,49 @@
+const bsStatus = require('../browserstack-send-status')
+
+module.exports = {
+  ...bsStatus(),
+
+  '@tags': ['history'],
+
+  'useRoute() + useRouter()': function (browser) {
+    browser
+      .url('http://localhost:8080/composables/')
+      .waitForElementVisible('#app', 1000)
+      .assert.count('li', 4)
+      .assert.count('li a', 4)
+      .assert.containsText('.view', 'Home')
+
+      .click('li:nth-child(2) a')
+      .assert.containsText('.view', 'About')
+      .click('li:nth-child(1) a')
+      .assert.containsText('.view', 'Home')
+      .assert.containsText('#start-route', '/')
+      .assert.containsText('#fullpath', '/')
+
+      .click('button#nav')
+      .assert.containsText('#fullpath', '/?n=1')
+
+      .end()
+  },
+
+  'useLink()': function (browser) {
+    browser
+      .url('http://localhost:8080/composables/')
+      .waitForElementVisible('#app', 1000)
+
+      .assert.containsText('.view', 'Home')
+      .assert.containsText('#nested-active', '/composables/nested: false, false')
+      .click('li:nth-child(3) a')
+      .assert.containsText('.view', 'NestedEmpty')
+      .assert.containsText('#nested-active', '/composables/nested: true, true')
+      .click('li:nth-child(4) a')
+      .assert.containsText('.view', 'NestedA')
+      .assert.containsText('#nested-active', '/composables/nested: true, false')
+      .click('#nested-active')
+      .assert.containsText('.view', 'NestedEmpty')
+      .assert.containsText('#nested-active', '/composables/nested: true, true')
+
+      .end()
+  }
+
+}
diff --git a/types/composables.d.ts b/types/composables.d.ts
new file mode 100644
index 000000000..f20e1b218
--- /dev/null
+++ b/types/composables.d.ts
@@ -0,0 +1,53 @@
+declare module 'vue-router/composables' {
+  import type { ComputedRef, Ref } from 'vue'
+  import type { Route, NavigationGuard, default as VueRouter } from 'vue-router'
+
+  /**
+   * Returns the current route location. Equivalent to using `$route` inside templates.
+   */
+  export function useRoute(): Route
+
+  /**
+   * Returns the router instance. Equivalent to using `$router` inside templates.
+   */
+  export function useRouter(): VueRouter
+
+  /**
+   * Add a navigation guard that triggers whenever the current location is about to be updated. Similar to beforeRouteUpdate but can be used in any component. The guard is removed when the component is unmounted.
+   *
+   * @param updateGuard
+   */
+  export function onBeforeRouteUpdate(updateGuard: NavigationGuard): void
+
+  /**
+   * Add a navigation guard that triggers whenever the component for the current location is about to be left. Similar to beforeRouteLeave but can be used in any component. The guard is removed when the component is unmounted.
+   *
+   * @param leaveGuard
+   */
+  export function onBeforeRouteLeave(leaveGuard: NavigationGuard): void
+
+  export interface RouterLinkOptions {
+    /**
+     * Route Location the link should navigate to when clicked on.
+     */
+    to: Route | Ref<Route>
+    /**
+     * Calls `router.replace` instead of `router.push`.
+     */
+    replace?: boolean
+  }
+
+  /**
+   * Vue Router 4 `useLink()` function. Note the active behavior is different from Vue Router 3 as highlighted in the
+   * migration guide (https://router.vuejs.org/guide/migration/index.html#removal-of-the-exact-prop-in-router-link)
+   *
+   * @param props - object containing a `to` property with the location
+   */
+  export function useLink(props: RouterLinkOptions): {
+    route: ComputedRef<Route>,
+    isActive: ComputedRef<boolean>,
+    isExactActive: ComputedRef<boolean>,
+    href: ComputedRef<string>,
+    navigate: () => Promise<void>,
+  }
+}
diff --git a/types/index.d.ts b/types/index.d.ts
index 2671ca8cb..aa407bf0e 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -1,9 +1,11 @@
 import './vue'
-import { VueRouter } from './router'
+import { VueRouter, RouterLink, RouterView } from './router'
 
 export default VueRouter
+// TODO: does this really work with the new keyword?
+export { RouterView, RouterLink }
 
-export {
+export type {
   RouterMode,
   RouteMeta,
   RawLocation,
@@ -19,3 +21,5 @@ export {
   NavigationFailureType,
   NavigationFailure
 } from './router'
+
+import './composables'
diff --git a/types/router.d.ts b/types/router.d.ts
index f8588f42f..f04b2e1f4 100644
--- a/types/router.d.ts
+++ b/types/router.d.ts
@@ -1,4 +1,4 @@
-import Vue, { ComponentOptions, PluginFunction, AsyncComponent } from 'vue'
+import Vue, { ComponentOptions, PluginFunction, AsyncComponent, VNode } from 'vue'
 
 type Component = ComponentOptions<Vue> | typeof Vue | AsyncComponent
 type Dictionary<T> = { [key: string]: T }
@@ -17,42 +17,168 @@ export type NavigationGuard<V extends Vue = Vue> = (
   next: NavigationGuardNext<V>
 ) => any
 
+/**
+ * Router instance.
+ */
 export declare class VueRouter {
   constructor(options?: RouterOptions)
 
   app: Vue
+  /**
+   * Original options object passed to create the Router
+   */
   options: RouterOptions
+  /**
+   * Configured mode when creating the Router instance.
+   */
   mode: RouterMode
+  /**
+   * Current {@link Route}
+   */
   currentRoute: Route
 
-  beforeEach(guard: NavigationGuard): Function
-  beforeResolve(guard: NavigationGuard): Function
-  afterEach(hook: (to: Route, from: Route) => any): Function
-  push(location: RawLocation): Promise<Route>
-  replace(location: RawLocation): Promise<Route>
+  /**
+   * Add a navigation guard that executes before any navigation.
+   *
+   * @param guard - navigation guard to add
+   * @returns a function that removes the registered guard
+   *
+   * @example
+   * ```js
+   * router.beforeEach((to, from, next) => {
+   *   // must call `next`
+   * })
+   * ```
+   */
+  beforeEach(guard: NavigationGuard): () => void
+  /**
+   * Add a navigation guard that executes before navigation is about to be resolved. At this state all component have
+   * been fetched and other navigation guards have been successful.
+   *
+   * @param guard - navigation guard to add
+   * @returns a function that removes the registered guard
+   *
+   * @example
+   * ```js
+   * router.beforeResolve((to, from, next) => {
+   *   // must call `next`
+   * })
+   * ```
+   */
+  beforeResolve(guard: NavigationGuard): () => void
+  /**
+   * Add a navigation hook that is executed after every navigation. Returns a function that removes the registered hook.
+   *
+   * @param hook - navigation hook to add
+   * @returns a function that removes the registered guard
+   *
+   * @example
+   * ```js
+   * router.afterEach((to, from) => {
+   *   console.log('after navigation')
+   * })
+   * ```
+   */
+  afterEach(hook: (to: Route, from: Route) => any): () => void
+  /**
+   * Programmatically navigate to a new URL by pushing an entry in the history stack.
+   *
+   * @param to Route location to navigate to
+   */
+  push(to: RawLocation): Promise<Route>
+  /**
+   * Programmatically navigate to a new URL by pushing an entry in the history stack.
+   *
+   * @param to Route location to navigate to
+   * @param onComplete Navigation success callback
+   * @param onAbort Navigation aborted callback
+   */
   push(
-    location: RawLocation,
-    onComplete?: Function,
+    to: RawLocation,
+    onComplete?: (route: Route) => void,
     onAbort?: ErrorHandler
   ): void
+  /**
+   * Programmatically navigate to a new URL by replacing the current entry in the history stack.
+   *
+   * @param to Route location to navigate to
+   */
+  replace(to: RawLocation): Promise<Route>
+  /**
+   * Programmatically navigate to a new URL by replacing the current entry in the history stack.
+   *
+   * @param to Route location to navigate to
+   * @param onComplete Navigation success callback
+   * @param onAbort Navigation aborted callback
+   */
   replace(
-    location: RawLocation,
-    onComplete?: Function,
+    to: RawLocation,
+    onComplete?: (route: Route) => void,
     onAbort?: ErrorHandler
   ): void
+  /**
+   * Allows you to move forward or backward through the history. Calls `history.go()`.
+   *
+   * @param delta The position in the history to which you want to move, relative to the current page
+   */
   go(n: number): void
+  /**
+   * Go back in history if possible by calling `history.back()`. Equivalent to `router.go(-1)`.
+   */
   back(): void
+  /**
+   * Go forward in history if possible by calling `history.forward()`. Equivalent to `router.go(1)`.
+   */
   forward(): void
   match (raw: RawLocation, current?: Route, redirectedFrom?: Location): Route
   getMatchedComponents(to?: RawLocation | Route): Component[]
-  onReady(cb: Function, errorCb?: ErrorHandler): void
+  /**
+   * This method queues a callback to be called when the router has completed the initial navigation, which means it has
+   * resolved all async enter hooks and async components that are associated with the initial route.
+   *
+   * This is useful in server-side rendering to ensure consistent output on both the server and the client.
+   * @param cb onReady callback.
+   * @param errorCb errorCb will be called when the initial route resolution runs into an error (e.g. failed to resolve
+   * an async component).
+   */
+  onReady(cb: () => void, errorCb?: ErrorHandler): void
+  /**
+   * Adds an error handler that is called every time a non caught error happens during navigation. This includes errors
+   * thrown synchronously and asynchronously, errors returned or passed to `next` in any navigation guard, and errors
+   * occurred when trying to resolve an async component that is required to render a route.
+   *
+   * @param handler - error handler to register
+   */
   onError(cb: ErrorHandler): void
+  /**
+   * @deprecated use {@link addRoute | router.addRoute()} instead
+   */
   addRoutes(routes: RouteConfig[]): void
-
-  addRoute(parent: string, route: RouteConfig): void
+  /**
+   * Add a new {@link RouteConfig | route record} as the child of an existing route. If the route has a `name` and there
+   * is already an existing one with the same one, it overwrites it.
+   *
+   * @param parentName - Parent Route Record where `route` should be appended at
+   * @param route - Route Record to add
+   */
+  addRoute(parentName: string, route: RouteConfig): void
+  /**
+   * Add a new {@link RouteConfig | route} to the router. If the route has a `name` and there is already an existing one
+   * with the same one, it overwrites it.
+   * @param route - Route Record to add
+   */
   addRoute(route: RouteConfig): void
+  /**
+   * Get the list of all the active route records.
+   */
   getRoutes(): RouteRecordPublic[]
 
+  /**
+   *
+   * @param to Route location
+   * @param current current is the current Route by default (most of the time you don't need to change this)
+   * @param append allows you to append the path to the `current` route (as with `router-link`)
+   */
   resolve(
     to: RawLocation,
     current?: Route,
@@ -61,18 +187,22 @@ export declare class VueRouter {
     location: Location
     route: Route
     href: string
-    // backwards compat
+    /**
+     * backwards compat
+     */
     normalizedTo: Location
+    /**
+     * backwards compat
+     */
     resolved: Route
   }
-
+  /**
+   * @internal
+   */
   static install: PluginFunction<never>
   static version: string
 
-  static isNavigationFailure: (
-    error: any,
-    type?: number
-  ) => error is NavigationFailure
+  static isNavigationFailure: typeof isNavigationFailure
   static NavigationFailureType: {
     [k in keyof typeof NavigationFailureType]: NavigationFailureType
   }
@@ -80,31 +210,103 @@ export declare class VueRouter {
   static START_LOCATION: Route
 }
 
+/**
+ * Enumeration with all possible types for navigation failures.
+ *
+ * Can be passed to {@link isNavigationFailure} to check for specific failures.
+ */
 export enum NavigationFailureType {
+  /**
+   * @internal
+   */
   redirected = 2,
+  /**
+   * An aborted navigation is a navigation that failed because a navigation guard returned `false` or called
+   * `next(false)`
+   */
   aborted = 4,
+  /**
+   * A cancelled navigation is a navigation that failed because a more recent navigation finished started (not
+   * necessarily finished).
+   */
   cancelled = 8,
+  /**
+   * A duplicated navigation is a navigation that failed because it was initiated while already being at the exact same
+   * location.
+   */
   duplicated = 16
 }
 
+/**
+ * Extended Error that contains extra information regarding a failed navigation.
+ */
 export interface NavigationFailure extends Error {
-  to: Route
+  /**
+   * Route location we were navigating from
+   */
   from: Route
-  type: number
+  /**
+   * Route location we were navigating to
+   */
+  to: Route
+  /**
+   * Type of the navigation. One of {@link NavigationFailureType}
+   */
+  type: NavigationFailureType.aborted | NavigationFailureType.cancelled | NavigationFailureType.duplicated
 }
 
+/**
+ * Check if an object is a {@link NavigationFailure}.
+ */
+export declare function isNavigationFailure(error: any, type?: NavigationFailureType): error is NavigationFailure
+
 type Position = { x: number; y: number }
 type PositionResult = Position | { selector: string; offset?: Position, behavior?: ScrollBehavior } | void
 
+
+/**
+ * Options to initialize a {@link VueRouter} instance.
+ */
 export interface RouterOptions {
   routes?: RouteConfig[]
+  /**
+   * Configure the router mode.
+   *
+   * default: `"hash"` (in browser) | `"abstract"` (in Node.js)
+   *
+   * available values: `"hash" | "history" | "abstract"`
+   * - `"hash"`: uses the URL hash for routing. Works in all Vue-supported browsers, including those that do not support
+   *   HTML5 History API.
+   * - `"history"`: requires HTML5 History API and server config. See HTML5 History Mode.
+   * - `"abstract"`: works in all JavaScript environments, e.g. server-side with Node.js. **The router will
+   *   automatically be forced into this mode if no browser API is present.**
+   */
   mode?: RouterMode
   fallback?: boolean
   base?: string
+  /**
+   * Default class applied to active {@link RouterLink}. If none is provided, `router-link-active` will be applied.
+   */
   linkActiveClass?: string
+  /**
+   * Default class applied to active {@link RouterLink}. If none is provided, `router-link-exact-active` will be
+   * applied.
+   */
   linkExactActiveClass?: string
+  /**
+   * Custom implementation to parse a query. See its counterpart, {@link stringifyQuery}.
+   */
   parseQuery?: (query: string) => Object
+  /**
+   * Custom implementation to stringify a query object. Should not prepend a leading `?`. {@link parseQuery} counterpart
+   * to handle query parsing.
+   */
   stringifyQuery?: (query: Object) => string
+  /**
+   * Function to control scrolling when navigating between pages. Can return a Promise to delay scrolling.
+   *
+   * For more details see {@link Scroll Behavior}.
+   */
   scrollBehavior?: (
     to: Route,
     from: Route,
@@ -209,3 +411,154 @@ export interface Route {
 }
 
 export interface RouteMeta extends Record<string | number | symbol, any> {}
+
+export interface RouterLinkProps {
+  /**
+   * Denotes the target route of the link. When clicked, the value of the `to` prop will be passed to
+   * `router.push()` internally, so the value can be either a string or a location descriptor object.
+   */
+  to: string | Location
+  /**
+   * Setting `replace` prop will call `router.replace()` instead of `router.push()` when clicked, so the navigation will
+   * not create a new history record.
+   *
+   * @default false
+   */
+  replace?: boolean
+  /**
+   * Setting `append` prop always appends the relative path to the current path. For example, assuming we are navigating
+   * from `/a` to a relative link `b`, without `append` we will end up at `/b`, but with append we will end up at
+   * `/a/b`.
+   *
+   * @default false
+   */
+  append?: boolean
+  /**
+   * Sometimes we want <RouterLink> to render as another tag, e.g <li>. Then we can use tag prop to specify which tag to
+   * render to, and it will still listen to click events for navigation.
+   *
+   * @default "a"
+   */
+  tag?: string
+  /**
+   * Configure the active CSS class applied when the link is active. Note the default value can also be configured
+   * globally via the `linkActiveClass` router constructor option.
+   *
+   * @default "router-link-active"
+   */
+  activeClass?: string
+  /**
+   * The default active class matching behavior is **inclusive match**. For example, `<RouterLink to="/a">` will get
+   * this class applied as long as the current path starts with `/a/` or is `/a`.
+   *
+   * @default false
+   */
+  exact?: boolean
+  /**
+   * Allows matching only using the `path` section of the url, effectively ignoring the `query` and the `hash` sections.
+   *
+   * @default false
+   */
+  exactPath?: boolean
+  /**
+   * Configure the active CSS class applied when the link is active with exact path match. Note the default value can
+   * also be configured globally via the `linkExactPathActiveClass` router constructor option.
+   *
+   * @default "router-link-exact-path-active"
+   */
+  exactPathActiveClass?: string
+
+  /**
+   * Specify the event(s) that can trigger the link navigation.
+   *
+   * @default 'click'
+   */
+  event?: string | ReadonlyArray<string>
+  /**
+   * Configure the active CSS class applied when the link is active with exact match. Note the default value can also be
+   * configured globally via the `linkExactActiveClass` router constructor option.
+   *
+   * @default "router-link-exact-active"
+   */
+  exactActiveClass?: string
+  /**
+   * Configure the value of `aria-current` when the link is active with exact match. It must be one of the allowed
+   * values for [aria-current](https://www.w3.org/TR/wai-aria-1.2/#aria-current) in the ARIA spec. In most cases, the
+   * default of page should be the best fit.
+   *
+   * @default "page"
+   */
+  ariaCurrentValue?:
+    | 'page'
+    | 'step'
+    | 'location'
+    | 'date'
+    | 'time'
+    | 'true'
+    | 'false'
+}
+
+export interface RouterLinkSlotArgument {
+  /**
+   * resolved url. This would be the `href` attribute of an `a` element
+   */
+  href: string
+  /**
+   * resolved normalized location
+   */
+  route: Route
+  /**
+   * function to trigger the navigation. It will automatically prevent events when necessary, the same way `RouterLink`
+   * does
+   */
+  navigate: (e?: MouseEvent) => Promise<undefined | NavigationFailure>
+  /**
+   * `true` if the [active class](https://v3.router.vuejs.org/api/#active-class) should be applied. Allows to apply an
+   * arbitrary class
+   */
+  isActive: boolean
+  /**
+   * `true` if the [exact active class](https://v3.router.vuejs.org/api/#exact-active-class) should be applied. Allows
+   * to apply an arbitrary class
+   */
+  isExactActive: boolean
+}
+
+/**
+ * Component to render a link that triggers a navigation on click.
+ */
+export declare const RouterLink: new () => {
+  $props: RouterLinkProps
+  $scopedSlots: {
+    default?: ({
+      href,
+      route,
+      navigate,
+      isActive,
+      isExactActive
+    }: RouterLinkSlotArgument) => VNode[] | undefined
+  }
+}
+
+export interface RouterViewProps {
+  /**
+   * When a {@link RouterView | `<RouterView />`} has a name, it will render the component with the corresponding name
+   * in the matched route record's components option. See [Named
+   * Views](https://v3.router.vuejs.org/guide/essentials/named-views.html) for an example.
+   *
+   * @default "default"
+   */
+  name?: string
+}
+
+/**
+ * Component to display the current route the user is at.
+ */
+export declare const RouterView: new () => {
+  $props: RouterViewProps
+}
+
+/**
+ * Initial route location where the router is. Can be used in navigation guards to differentiate the initial navigation.
+ */
+export declare const START_LOCATION: Route
diff --git a/types/test/tsconfig.json b/types/test/tsconfig.json
index c2aa6a8ba..0a5a3d4f7 100644
--- a/types/test/tsconfig.json
+++ b/types/test/tsconfig.json
@@ -3,6 +3,7 @@
     "target": "es5",
     "module": "es2015",
     "moduleResolution": "node",
+    "skipLibCheck": true,
     "strict": true,
     "noEmit": true,
     "lib": ["es5", "dom", "es2015.promise", "es2015.iterable", "es2015.core"]
diff --git a/types/vue.d.ts b/types/vue.d.ts
index 307515cf9..eada07035 100644
--- a/types/vue.d.ts
+++ b/types/vue.d.ts
@@ -3,7 +3,7 @@
  */
 
 import Vue from 'vue'
-import VueRouter, { Route, RawLocation, NavigationGuard } from './index'
+import VueRouter, { Route, NavigationGuard } from './index'
 
 declare module 'vue/types/vue' {
   interface Vue {
diff --git a/yarn.lock b/yarn.lock
index f5f78495b..8a02e39c6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -257,6 +257,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.0.tgz#2f0ebfed92bcddcc8395b91f1895191ce2760380"
   integrity sha512-AHbfoxesfBALg33idaTBVUkLnfXtsgvJREf93p4p0Lwsz4ppfE7g1tpEXVm4vrxUcH4DVhAa9Z1m1zqf9WUC7Q==
 
+"@babel/parser@^7.18.4":
+  version "7.18.11"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.11.tgz#68bb07ab3d380affa9a3f96728df07969645d2d9"
+  integrity sha512-9JKn5vN+hDt0Hdqn1PiJ2guflwP+B6Ga8qbDuoF0PzzVhrzsKIJo8yGqVk6CmMHiMei9w1C1Bp9IMJSIK+HPIQ==
+
 "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.13.12":
   version "7.13.12"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.13.12.tgz#a3484d84d0b549f3fc916b99ee4783f26fabad2a"
@@ -1022,9 +1027,9 @@
     defer-to-connect "^1.0.1"
 
 "@testim/chrome-version@^1.0.7":
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/@testim/chrome-version/-/chrome-version-1.0.7.tgz#0cd915785ec4190f08a3a6acc9b61fc38fb5f1a9"
-  integrity sha512-8UT/J+xqCYfn3fKtOznAibsHpiuDshCb0fwgWxRazTT19Igp9ovoXMPhXyLD6m3CKQGTMHgqoxaFfMWaL40Rnw==
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@testim/chrome-version/-/chrome-version-1.1.2.tgz#092005c5b77bd3bb6576a4677110a11485e11864"
+  integrity sha512-1c4ZOETSRpI0iBfIFUqU4KqwBAB2lHUAlBjZz/YqOHqwM9dTTzjV6Km0ZkiEiSCx/tLr1BtESIKyWWMww+RUqw==
 
 "@tootallnate/once@1":
   version "1.1.2"
@@ -1215,6 +1220,15 @@
     "@vue/babel-plugin-transform-vue-jsx" "^1.2.1"
     camelcase "^5.0.0"
 
+"@vue/compiler-sfc@2.7.9":
+  version "2.7.9"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-2.7.9.tgz#aa31813c94de39f4977e4b924eb261c2199218ad"
+  integrity sha512-TD2FvT0fPUezw5RVP4tfwTZnKHP0QjeEUb39y7tORvOJQTjbOuHJEk4GPHUPsRaTeQ8rjuKjntyrYcEIx+ODxg==
+  dependencies:
+    "@babel/parser" "^7.18.4"
+    postcss "^8.4.14"
+    source-map "^0.6.1"
+
 "@vue/component-compiler-utils@^3.1.0":
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.2.0.tgz#8f85182ceed28e9b3c75313de669f83166d11e5d"
@@ -1989,6 +2003,13 @@ axios@^0.21.1:
   dependencies:
     follow-redirects "^1.14.0"
 
+axios@^0.21.2:
+  version "0.21.4"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.4.tgz#c67b90dc0568e5c1cf2b0b858c43ba28e2eda575"
+  integrity sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==
+  dependencies:
+    follow-redirects "^1.14.0"
+
 babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -3174,7 +3195,7 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@^4.0.2:
+chalk@^4.0.2, chalk@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -3252,17 +3273,16 @@ chrome-trace-event@^1.0.2:
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac"
   integrity sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==
 
-chromedriver@^90.0.0:
-  version "90.0.0"
-  resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-90.0.0.tgz#1b18960a31a12884981bdc270b43c4356ce7a65a"
-  integrity sha512-k+GMmNb7cmuCCctQvUIeNxDGSq8DJauO+UKQS2qLT8aA36CPEcv8rpFepf6lRkNaIlfwdCUt/0B5bZDw3wY2yw==
+chromedriver@^96.0.0:
+  version "96.0.0"
+  resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-96.0.0.tgz#c8473498e4c94950fa168187b112019cce9e5c6c"
+  integrity sha512-4g6Hn5RHGsbaBmOrJbDlz/hdVPOc22eRsbvoAAMqkZxR2NJCcddHzCw2FAQeW8lX/C7xWVz3nyDsKX3fE9lIIw==
   dependencies:
     "@testim/chrome-version" "^1.0.7"
-    axios "^0.21.1"
+    axios "^0.21.2"
     del "^6.0.0"
     extract-zip "^2.0.1"
     https-proxy-agent "^5.0.0"
-    mkdirp "^1.0.4"
     proxy-from-env "^1.1.0"
     tcp-port-used "^1.0.1"
 
@@ -4072,6 +4092,11 @@ csso@^4.0.2:
   dependencies:
     css-tree "^1.1.2"
 
+csstype@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.0.tgz#4ddcac3718d787cf9df0d1b7d15033925c8f29f2"
+  integrity sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -4114,7 +4139,7 @@ dateformat@^3.0.0:
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
-  integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=
+  integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
 
 debug@*, debug@4, debug@4.3.1, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
   version "4.3.1"
@@ -5476,7 +5501,7 @@ fsevents@^1.0.0, fsevents@^1.2.7:
     bindings "^1.5.0"
     nan "^2.12.1"
 
-fsevents@~2.3.1:
+fsevents@~2.3.1, fsevents@~2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
@@ -5947,6 +5972,11 @@ hash-sum@^1.0.2:
   resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-1.0.2.tgz#33b40777754c6432573c120cc3808bbd10d47f04"
   integrity sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=
 
+hash-sum@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-2.0.0.tgz#81d01bb5de8ea4a214ad5d6ead1b523460b0b45a"
+  integrity sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==
+
 hash.js@^1.0.0, hash.js@^1.0.3:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42"
@@ -5955,7 +5985,7 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
-he@1.2.0, he@1.2.x, he@^1.1.0:
+he@1.2.0, he@1.2.x, he@^1.1.0, he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
@@ -6498,6 +6528,13 @@ is-core-module@^2.8.1:
   dependencies:
     has "^1.0.3"
 
+is-core-module@^2.9.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.10.0.tgz#9012ede0a91c69587e647514e1d5277019e728ed"
+  integrity sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==
+  dependencies:
+    has "^1.0.3"
+
 is-data-descriptor@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
@@ -7343,7 +7380,7 @@ lodash._isiterateecall@^3.0.0:
 lodash._reinterpolate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
-  integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
+  integrity sha512-xYHt68QRoYGjeeM/XOE1uJtvXQAgvszfBhjV4yvsQH0u2i9I6cI6c6/eG4Hh3UAOVn0y/xAXwmTzEay49Q//HA==
 
 lodash.clone@3.0.3:
   version "3.0.3"
@@ -7426,7 +7463,7 @@ lodash.templatesettings@^4.0.0:
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
-  integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
+  integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
 
 lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0:
   version "4.17.21"
@@ -7949,7 +7986,7 @@ mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5, mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.5"
 
-mkdirp@^1.0.3, mkdirp@^1.0.4, mkdirp@~1.0.4:
+mkdirp@^1.0.3, mkdirp@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
@@ -8053,6 +8090,11 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
   integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
 
+nanoid@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
+  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -8819,6 +8861,11 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.3.tgz#465547f359ccc206d3c48e46a1bcb89bf7ee619d"
@@ -9237,6 +9284,15 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.2
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
+postcss@^8.4.14:
+  version "8.4.16"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.16.tgz#33a1d675fac39941f5f445db0de4db2b6e01d43c"
+  integrity sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==
+  dependencies:
+    nanoid "^3.3.4"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -9948,6 +10004,15 @@ resolve@^1.10.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.1
     is-core-module "^2.2.0"
     path-parse "^1.0.6"
 
+resolve@^1.22.0:
+  version "1.22.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
+  integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
+  dependencies:
+    is-core-module "^2.9.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 responselike@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/responselike/-/responselike-1.0.2.tgz#918720ef3b631c5642be068f15ade5a46f4ba1e7"
@@ -10081,11 +10146,11 @@ rollup-watch@^4.0.0:
     rollup-pluginutils "^2.0.1"
 
 rollup@^2.34.1:
-  version "2.46.0"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.46.0.tgz#8cacf89d2ee31a34755f1af40a665168f592b829"
-  integrity sha512-qPGoUBNl+Z8uNu0z7pD3WPTABWRbcOwIrO/5ccDJzmrtzn0LVf6Lj91+L5CcWhXl6iWf23FQ6m8Jkl2CmN1O7Q==
+  version "2.78.0"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.78.0.tgz#00995deae70c0f712ea79ad904d5f6b033209d9e"
+  integrity sha512-4+YfbQC9QEVvKTanHhIAFVUFSRsezvQF8vFOJwtGfb9Bb+r014S+qryr9PSmw8x6sMnPkmFBGAvIFVQxvJxjtg==
   optionalDependencies:
-    fsevents "~2.3.1"
+    fsevents "~2.3.2"
 
 run-async@^2.2.0:
   version "2.4.1"
@@ -10262,6 +10327,13 @@ serialize-javascript@^4.0.0:
   dependencies:
     randombytes "^2.1.0"
 
+serialize-javascript@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.0.tgz#efae5d88f45d7924141da8b5c3a7a7e663fefeb8"
+  integrity sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==
+  dependencies:
+    randombytes "^2.1.0"
+
 serve-index@^1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"
@@ -10492,6 +10564,11 @@ source-list-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
+source-map-js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+
 source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
@@ -10526,7 +10603,7 @@ source-map-url@^0.4.0:
 source-map@0.5.6:
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
-  integrity sha1-dc449SvwczxafwwRjYEzSiu19BI=
+  integrity sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==
 
 source-map@^0.5.0, source-map@^0.5.6, source-map@^0.5.7:
   version "0.5.7"
@@ -11337,10 +11414,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@^3.5.2:
-  version "3.9.9"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.9.tgz#e69905c54bc0681d0518bd4d587cc6f2d0b1a674"
-  integrity sha512-kdMjTiekY+z/ubJCATUPlRDl39vXYiMV9iyeMuEuXZh2we6zz80uovNN2WlAxmmdE/Z/YQe+EbOEXB5RHEED3w==
+typescript@^4.7.0:
+  version "4.7.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.4.tgz#1a88596d1cf47d59507a1bcdfb5b9dfe4d488235"
+  integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==
 
 uc.micro@^1.0.1, uc.micro@^1.0.5:
   version "1.0.6"
@@ -11657,7 +11734,7 @@ vue-router@^3.4.5:
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.1.tgz#edf3cf4907952d1e0583e079237220c5ff6eb6c9"
   integrity sha512-RRQNLT8Mzr8z7eL4p7BtKvRaTSGdCbTy2+Mm5HTJvLGYSSeG9gDzNasJPP/yOYKLy+/cLG/ftrqq5fvkFwBJEw==
 
-vue-server-renderer@^2.6.10, vue-server-renderer@^2.6.12:
+vue-server-renderer@^2.6.10:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/vue-server-renderer/-/vue-server-renderer-2.6.12.tgz#a8cb9c49439ef205293cb41c35d0d2b0541653a5"
   integrity sha512-3LODaOsnQx7iMFTBLjki8xSyOxhCtbZ+nQie0wWY4iOVeEtTg1a3YQAjd82WvKxrWHHTshjvLb7OXMc2/dYuxw==
@@ -11671,6 +11748,20 @@ vue-server-renderer@^2.6.10, vue-server-renderer@^2.6.12:
     serialize-javascript "^3.1.0"
     source-map "0.5.6"
 
+vue-server-renderer@^2.7.0:
+  version "2.7.9"
+  resolved "https://registry.yarnpkg.com/vue-server-renderer/-/vue-server-renderer-2.7.9.tgz#39f2cace07e8a5c89d0e6a8c678fdd5a0d855639"
+  integrity sha512-XBANTA8BScw6ls+GT3SnVWM4GKWx6aBQv+m+vNT2RKiTc1AG6Mpoh+xA4n/Uf314ZVofX7L7y6Z3MfcV+/DhSQ==
+  dependencies:
+    chalk "^4.1.2"
+    hash-sum "^2.0.0"
+    he "^1.2.0"
+    lodash.template "^4.5.0"
+    lodash.uniq "^4.5.0"
+    resolve "^1.22.0"
+    serialize-javascript "^6.0.0"
+    source-map "0.5.6"
+
 vue-style-loader@^4.1.0:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz#6d55863a51fa757ab24e89d9371465072aa7bc35"
@@ -11679,7 +11770,7 @@ vue-style-loader@^4.1.0:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
-vue-template-compiler@^2.6.10, vue-template-compiler@^2.6.12:
+vue-template-compiler@^2.6.10:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.12.tgz#947ed7196744c8a5285ebe1233fe960437fcc57e"
   integrity sha512-OzzZ52zS41YUbkCBfdXShQTe69j1gQDZ9HIX8miuC9C3rBCk9wIRjLiZZLrmX9V+Ftq/YEyv1JaVr5Y/hNtByg==
@@ -11687,16 +11778,32 @@ vue-template-compiler@^2.6.10, vue-template-compiler@^2.6.12:
     de-indent "^1.0.2"
     he "^1.1.0"
 
+vue-template-compiler@^2.7.0:
+  version "2.7.9"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.9.tgz#ffbeb1769ae6af65cd405a6513df6b1e20e33616"
+  integrity sha512-NPJxt6OjVlzmkixYg0SdIN2Lw/rMryQskObY89uAMcM9flS/HrmLK5LaN1ReBTuhBgnYuagZZEkSS6FESATQUQ==
+  dependencies:
+    de-indent "^1.0.2"
+    he "^1.2.0"
+
 vue-template-es2015-compiler@^1.9.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue@^2.6.10, vue@^2.6.12:
+vue@^2.6.10:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"
   integrity sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==
 
+vue@^2.7.0:
+  version "2.7.9"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.9.tgz#ac3ccb4a4ac5dd31a8eec4c68a094efe7f83dfbb"
+  integrity sha512-GeWCvAUkjzD5q4A3vgi8ka5r9bM6g8fmNmx/9VnHDKCaEzBcoVw+7UcQktZHrJ2jhlI+Zv8L57pMCIwM4h4MWg==
+  dependencies:
+    "@vue/compiler-sfc" "2.7.9"
+    csstype "^3.1.0"
+
 vuepress-html-webpack-plugin@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/vuepress-html-webpack-plugin/-/vuepress-html-webpack-plugin-3.2.0.tgz#219be272ad510faa8750d2d4e70fd028bfd1c16e"