Vue3 Compare ImageVue3 Compare Image
A Simple Vue 3 component to compare two images with a slider, supports vertical and horizontal modes, and Keyboard for accessibility.
Installation
bash
npm install --save vue3-compare-imagebash
yarn add vue3-compare-imagebash
pnpm add vue3-compare-imageGlobal
You can import and register the component globally
ts
import VueCompareImage from 'vue3-compare-image'
const app = createApp(App)
app.use(VueCompareImage)
app.mount('#app')ts
/// <reference types="vue3-compare-image/client" />json
{
"compilerOptions": {
"types": ["vue3-compare-image/client"]
},
"include": ["*.d.ts"]
}Component
Or use it on a case by case basis
vue
<script setup lang="ts">
// cassets
import cat1 from '@assest/cat2.jpg'
import cat2 from '@assests/cat2.jpg'
// components
import { VueCompareImage } from 'vue3-compare-image'
</script>
<template>
<div>
<VueCompareImage :left-image="cat1" :right-image="cat2" />
</div>
</template>NOTE
If you import the component on a case by case basis, you don't have to reference its type in any of *.d.ts or tsconfig files.
WARNING
This component should be wrapped inside <client-only></client-only> tags incase you are using SSR.