docs: support zoom with specify images in docs

docs/.vitepress/theme/index.ts

@@ -1,15 +1,47 @@
 // https://vitepress.dev/guide/custom-theme
-import { h } from 'vue'
+import { 
+  h, 
+  onMounted, 
+  watch, 
+  nextTick,
+} from 'vue'
 import Theme from 'vitepress/theme'
+import { useRoute } from 'vitepress'
+import mediumZoom from 'medium-zoom'
+
 import './style.css'
 
 export default {
   extends: Theme,
+  themeConfig: {
+    search: {
+      provider: 'local'
+    }
+  },
   Layout: () => {
     return h(Theme.Layout, null, {
       // https://vitepress.dev/guide/extending-default-theme#layout-slots
     })
   },
+  setup() {
+    const route = useRoute()
+    const initZoom = () => {
+      /**
+       * Allow images to be zoomed in on click 
+       * https://github.com/vuejs/vitepress/issues/854
+       */
+      mediumZoom('[data-zoomable]', { background: 'var(--vp-c-bg)' })
+    }
+    
+    onMounted(() => {
+      initZoom()
+    })
+
+    watch(
+      () => route.path,
+      () => nextTick(initZoom),
+    )
+  },
   enhanceApp({ app, router, siteData }) {
     // ...
   }

docs/.vitepress/theme/style.css

@@ -89,3 +89,14 @@
   --docsearch-primary-color: var(--vp-c-brand) !important;
 }
 
+/**
+ * Component: medium-zoom
+ * -------------------------------------------------------------------------- */
+
+.medium-zoom-overlay {
+  z-index: 20;
+}
+
+.medium-zoom-image {
+  z-index: 21;
+}