/vitepress-plugin-image-viewer

A vitepress image viewer plugin based on viewerjs

Primary LanguageTypeScript

vitepress-plugin-image-viewer

npm

EN | 中文文档

A vitepress image viewer plugin based on viewerjs

Install

// npm 
npm i vitepress-plugin-image-viewer
// yarn
yarn add vitepress-plugin-image-viewer
// pnpm
pnpm add vitepress-plugin-image-viewer
// Tip: If you use pnpm to install, you need to install viewerjs additionally.
pnpm add viewerjs

Usage

In .vitepress/theme/index

import DefaultTheme from 'vitepress/theme';
import 'viewerjs/dist/viewer.min.css';
import imageViewer from 'vitepress-plugin-image-viewer';
import vImageViewer from 'vitepress-plugin-image-viewer/lib/vImageViewer.vue';
import { useRoute } from 'vitepress';

export default {
    ...DefaultTheme,
    enhanceApp(ctx) {
        DefaultTheme.enhanceApp(ctx);
        // Register global components, if you don't want to use it, you don't need to add it
        ctx.app.component('vImageViewer', vImageViewer);
        // ...
    },
    setup() {
        // Get route
        const route = useRoute();
        // Using
        imageViewer(route);
    }
};

imageViewer() takes three parameters：

  • route

    route (this is required)

  • el

    CSS selector (Default .vp-doc, can be empty, this is not required)

  • option

    Configuration options (For detailed configuration, please refer to viewerjs option, there is already a default configuration, which is not required)

Component

vImageViewer component can be compiled into a button, click this button to pop up the picture, use as follows:

<vImageViewer src="/image/demo.png" alt="this is a demo image" :inline="false"/>

inline is set to true, it will become an inline element, it is not required, default false

more vitepress plugins

You may be interested in these plugins： Click me to view more vitepress plugins