vitepress-image-viewer

VitePress image viewer with zoom, drag, fullscreen overlay, captions and download button. Automatically enhances all images on the page. Built with Vue 3.

Live Demo and more information

✨ See it in action:
👉 https://davidingplus.github.io/vitepress-image-viewer/

📦 NPM Package:
👉 https://www.npmjs.com/package/@davidingplus/vitepress-image-viewer

Installation

npm i @davidingplus/vitepress-image-viewer

Usage

Configuration

// docs/.vitepress/theme/index.ts
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'

import ImageViewerP from '@davidingplus/vitepress-image-viewer' //[!code ++]
import '@davidingplus/vitepress-image-viewer/style.css' //[!code ++]

export default {
  extends: DefaultTheme,
  enhanceApp(ctx) {
    ImageViewerP(ctx.app) //[!code ++]
  }
}

Preview