docs: enhance code block & code group

Author: yuyinws

packages/docs/.vitepress/config/shared.ts

@@ -1,5 +1,9 @@
 import { defineConfig, HeadConfig } from 'vitepress'
 import { zhSearch } from './zh'
+import {
+  groupIconMdPlugin,
+  groupIconVitePlugin,
+} from 'vitepress-plugin-group-icons'
 
 // TODO:
 // export const META_IMAGE = 'https://router.vuejs.org/social.png'
@@ -60,6 +64,9 @@ export const sharedConfig = defineConfig({
     anchor: {
       slugify,
     },
+    config: md => {
+      md.use(groupIconMdPlugin)
+    },
   },
 
   head: [
@@ -161,4 +168,7 @@ export const sharedConfig = defineConfig({
       placement: 'routervuejsorg',
     },
   },
+  vite: {
+    plugins: [groupIconVitePlugin()],
+  },
 })

packages/docs/.vitepress/theme/index.ts

@@ -9,6 +9,7 @@ import VueSchoolLink from './components/VueSchoolLink.vue'
 import VueMasteryLogoLink from './components/VueMasteryLogoLink.vue'
 import status from '../translation-status.json'
 import RuleKitLink from './components/RuleKitLink.vue'
+import 'virtual:group-icons.css'
 
 const i18nLabels = {
   zh: '该翻译已同步到了 ${date} 的版本，其对应的 commit hash 是 <code>${hash}</code>。',

packages/docs/guide/advanced/lazy-loading.md

@@ -67,8 +67,7 @@ webpack will group any async module with the same chunk name into the same async
 
 In Vite you can define the chunks under the [`rollupOptions`](https://vite.dev/config/build-options.html#build-rollupoptions):
 
-```js
-// vite.config.js
+```js [vite.config.js]
 export default defineConfig({
   build: {
     rollupOptions: {

packages/docs/guide/advanced/navigation-guards.md

@@ -140,8 +140,7 @@ Learn more about navigation failures on [its guide](./navigation-failures.md).
 
 Since Vue 3.3, it is possible to use `inject()` within navigation guards. This is useful for injecting global properties like the [pinia stores](https://pinia.vuejs.org). Anything that is provided with `app.provide()` is also accessible within `router.beforeEach()`, `router.beforeResolve()`, `router.afterEach()`:
 
-```ts
-// main.ts
+```ts [main.ts]
 const app = createApp(App)
 app.provide('global', 'hello injections')
 

packages/docs/guide/essentials/history-mode.md

@@ -128,7 +128,7 @@ For Node.js/Express, consider using [connect-history-api-fallback middleware](ht
 1. Install [IIS UrlRewrite](https://www.iis.net/downloads/microsoft/url-rewrite)
 2. Create a `web.config` file in the root directory of your site with the following:
 
-```xml
+```xml [web.config ~vscode-icons:file-type-xml~]
 <?xml version="1.0" encoding="UTF-8"?>
 <configuration>
   <system.webServer>
@@ -167,7 +167,7 @@ rewrite {
 
 Add this to your `firebase.json`:
 
-```json
+```json [firebase.json ~vscode-icons:file-type-firebase~]
 {
   "hosting": {
     "public": "dist",
@@ -197,7 +197,7 @@ You can read more about the syntax on [Netlify documentation](https://docs.netli
 
 Create a `vercel.json` file under the root directory of your project with the following:
 
-```json
+```json [vercel.json ~vscode-icons:file-type-light-vercel~]
 {
   "rewrites": [{ "source": "/:path*", "destination": "/index.html" }]
 }

packages/docs/guide/essentials/named-views.md

@@ -61,8 +61,7 @@ It is possible to create complex layouts using named views with nested views. Wh
 
 The `<template>` section for `UserSettings` component in the above layout would look something like this:
 
-```vue-html
-<!-- UserSettings.vue -->
+```vue-html [UserSettings.vue]
 <div>
   <h1>User Settings</h1>
   <NavBar />

packages/docs/guide/essentials/nested-routes.md

@@ -22,15 +22,13 @@ With Vue Router, you can express this relationship using nested route configurat
 
 Given the app we created in the last chapter:
 
-```vue
-<!-- App.vue -->
+```vue [App.vue]
 <template>
   <router-view />
 </template>
 ```
 
-```vue
-<!-- User.vue -->
+```vue [User.vue]
 <template>
   <div>
     User {{ $route.params.id }}
@@ -47,8 +45,7 @@ const routes = [{ path: '/user/:id', component: User }]
 
 The `<router-view>` here is a top-level `router-view`. It renders the component matched by a top level route. Similarly, a rendered component can also contain its own, nested `<router-view>`. For example, if we add one inside the `User` component's template:
 
-```vue
-<!-- User.vue -->
+```vue [User.vue]
 <template>
   <div class="user">
     <h2>User {{ $route.params.id }}</h2>

packages/docs/guide/essentials/passing-props.md

@@ -9,8 +9,7 @@ Using `$route` or `useRoute()` in your component creates a tight coupling with t
 
 Let's return to our earlier example:
 
-```vue
-<!-- User.vue -->
+```vue [User.vue]
 <template>
   <div>
     User {{ $route.params.id }}

packages/docs/guide/index.md

@@ -22,9 +22,7 @@ To introduce some of the main ideas, we're going to consider this example:
 
 Let's start by looking at the root component, `App.vue`.
 
-### App.vue
-
-```vue
+```vue [App.vue]
 <template>
   <h1>Hello App!</h1>
   <p><strong>Current route path:</strong> {{ $route.fullPath }}</p>

packages/docs/package.json

@@ -17,6 +17,7 @@
     "typedoc-vitepress-theme": "^1.1.2",
     "vitepress": "1.6.4",
     "vitepress-translation-helper": "^0.2.2",
+    "vitepress-plugin-group-icons": "^1.6.1",
     "vue-router": "workspace:*"
   }
 }