vue-image-viewer 🎉

live demo

brief intro

A image viewer for both vue2 and vue3 using medium-zoom

install

``bash
yarn add vue-image-viewer-mz


or


npm i vue-image-viewer-mz
`

usage

$3

`ts
// entry point of your vue app
import { createApp } from "vue";
import App from "./App.vue";
import {
createPlugin as createVueImageViewerPlugin,
VueImageViewerPluginOptions
} from "vue-image-viewer-mz";

const options: VueImageViewerPluginOptions = {
directiveName: "viewer"
};

createApp(App).use(createVueImageViewerPlugin(options)).mount("#app");
`

$3

`html



`

$3

`html





`

$3

Only works when you use as a plugin in your main.ts

#### useMediumZoom

`js
import { nextTick } from "vue";
import { useMediumZoom } from "vue-image-viewer-mz";

export default {
setup() {
// ... do something to add new images in current page
const zoom = useMediumZoom();
// you can get the zoom instance here
}
};
``