vue3-compare-image

A Vue 3 component to compare and slide between two images, supports vertical and horizontal modes, and Keyboard for accessibility.

NOTE: This project is a fork of vue-compare-image with Vue 3 support and with all functionalities of react-compare-image plus Keyboard navigation for accessibility.

Features

• Documentation
• Simple
• Accessibility
• Fully Typescript
• Responsive (fit to the parent width)
• Size difference between two images handled correctly. Element size determined by following two factors:
  • width of the parent
  • right image's aspect ratio
• Horizontal & Vertical comparison
• Keyboard navigation

How to use

In the shell:

yarn add vue3-compare-image

// or

npm install --save vue3-compare-image

Globally:

import VueCompareImage from 'vue3-compare-image'

const app = createApp(App)
app.use(VueCompareImage)

app.mount('#app')

If Installed globaly, reference type in tsconfig or .d.ts file to get props autocompletion

eg in .d.ts

/// <reference types="vue3-compare-image/client" />

In your component file:

import { VueCompareImage } from 'vue3-compare-image'

export default {
  name: 'app',
  components: { VueCompareImage },
}

<template>
  <VueCompareImage leftImage="image1.jpg" rightImage="image2.jpg" />;
</template>

Props

Events