.github/contributing.md

@@ -28,7 +28,7 @@ Hi! I'm really excited that you are interested in contributing to Vue Router. Be
 
   - If you are resolving a special issue, add `(fix #xxxx[,#xxxx])` (#xxxx is the issue id) in your PR title for a better release log, e.g. `update entities encoding/decoding (fix #3899)`.
   - Provide a detailed description of the bug in the PR. Live demo preferred.
-  - Add appropriate test coverage if applicable. You can check the coverage of your code addition by running `yarn test --coverage`.
+  - Add appropriate test coverage if applicable. You can check the coverage of your code addition by running `pnpm test --coverage`.
 
 - It's OK to have multiple small commits as you work on the PR - GitHub can automatically squash them before merging.
 
@@ -40,12 +40,12 @@ Hi! I'm really excited that you are interested in contributing to Vue Router. Be
 
 ## Development Setup
 
-You will need [Node.js](http://nodejs.org) **version 10+**, and [Yarn](https://classic.yarnpkg.com/en/docs/install).
+You will need [Node.js](http://nodejs.org) **version 10+**, and [Pnpm](https://pnpm.io/installation).
 
 After cloning the repo, run:
 
 ```bash
-$ yarn # install the dependencies of the project
+$ pnpm install # install the dependencies of the project
 ```
 
 A high level overview of tools used:
@@ -57,21 +57,21 @@ A high level overview of tools used:
 
 ## Scripts
 
-### `yarn build`
+### `pnpm build`
 
 The `build` script builds vue-router
 
-### `yarn dev`
+### `pnpm play`
 
-The `dev` scripts starts a playground project located at `playground/` that allows you to test things on a browser.
+The `play` scripts starts a playground project located at `playground/` that allows you to test things on a browser.
 
 ```bash
-$ yarn dev
+$ pnpm play
 ```
 
-### `yarn test`
+### `pnpm test`
 
-The `yarn test` script runs all checks:
+The `pnpm test` script runs all checks:
 
 - _Typings_: `test:types`
 - _Linting_: `test:lint`
@@ -80,10 +80,10 @@ The `yarn test` script runs all checks:
 
 ```bash
 # run all tests
-$ yarn test
+$ pnpm test
 
 # run unit tests in watch mode
-$ yarn jest --watch
+$ pnpm jest --watch
 ```
 
 ## Project Structure

.npmrc

@@ -1,3 +1,3 @@
 shamefully-hoist=true
 detect_chromedriver_version=true
-
+strict-peer-dependencies=false

README.md

@@ -76,6 +76,7 @@ Get started with the [documentation](https://router.vuejs.org).
 - Via CDN: `<script src="https://unpkg.com/vue-router@4"></script>`
 - In-browser playground on [CodeSandbox](https://codesandbox.io/s/vue-router-4-reproduction-hb9lh)
 - Add it to an existing Vue Project:
+
   ```bash
   npm install vue-router@4
   ```

package.json

@@ -27,13 +27,13 @@
     "chalk": "^4.1.2",
     "enquirer": "^2.3.6",
     "execa": "^6.1.0",
-    "globby": "^13.1.1",
-    "lint-staged": "^13.0.0",
+    "globby": "^13.1.2",
+    "lint-staged": "^13.0.3",
     "minimist": "^1.2.6",
     "p-series": "^3.0.0",
-    "prettier": "^2.4.1",
+    "prettier": "^2.7.1",
     "semver": "^7.3.7",
-    "typescript": "~4.7.2",
+    "typescript": "~4.7.4",
     "yorkie": "^2.0.0"
   },
   "gitHooks": {

packages/docs/.vitepress/components/VueSchool/BannerCountdown.vue

@@ -0,0 +1,55 @@
+<template>
+  <ClientOnly>
+    <VueCountdown
+      v-if="remaining"
+      :time="remaining"
+      v-slot="data">
+      <span
+        v-for="part in ['days', 'hours', 'minutes', 'seconds']"
+        :key="part">
+        {{ data[part] }}{{ part[0].toLowerCase() }}
+        <span
+          v-if="part !== 'seconds'"
+          class="px-1 text-xl font-bold">
+          :
+        </span>
+      </span>
+    </VueCountdown>
+  </ClientOnly>
+</template>
+
+<script>
+import VueCountdown from '@chenfengyuan/vue-countdown'
+
+const countdownTransform = (props) => {
+  Object.entries(props).forEach(([key, value]) => {
+    const digits = value < 10 ? `0${value}` : value
+    props[key] = digits
+  })
+  return props
+}
+
+export default {
+  components: {
+    VueCountdown
+  },
+  props: {
+    remaining: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    isVisible () {
+      return this.remaining > 0
+    }
+  }
+}
+</script>
+
+<style scoped>
+span {
+  color: #ff5338;
+  font-weight: bold;
+}
+</style>