---
title: "vZoomImg"
description: "vZoomImg is a Vue directive to enlarge an image like a modal on click, if you have several images, you can pass them like a carousel"
package: "maz-ui"
url: "https://maz-ui.com/directives/zoom-img"
---

# vZoomImg

> vZoomImg is a Vue directive to enlarge an image like a modal on click, if you have several images, you can pass them like a carousel

- Package: `maz-ui`
- Import: `import { vZoomImg } from 'maz-ui/directives/vZoomImg'`
- Web: https://maz-ui.com/directives/zoom-img

> Can be mixed with [vLazyImg](./lazy-img.md) directive

## Basic usage

> Click on the photo

```vue
<script lang="ts" setup>
import { vZoomImg } from 'maz-ui/directives'
</script>

<template>
  <MazCard overflow-hidden>
    <img
      v-zoom-img="{ src: 'https://placedog.net/1500/1000' }"
      src="https://placedog.net/1500/1000"
    >
  </MazCard>

  <MazBtn v-zoom-img="{ src: 'https://placedog.net/1000/500' }">
    Show photo
  </MazBtn>
</template>
```

## Options

```vue
<script lang="ts" setup>
import { vZoomImg, type vZoomImgBindingValue } from 'maz-ui/directives'

const zoomImgBinding: vZoomImgBindingValue = {
  src: 'https://placedog.net/1200/800',
  alt: 'alt image', // will be set on the zoomed image
  blur: false,
  scale: false,
  disabled: false
}
</script>

<template>
  <MazCard overflow-hidden>
    <img
      v-zoom-img="zoomImgBinding"
      src="https://placedog.net/1200/800"
    >
  </MazCard>
</template>
```

## Global install

### Vue

```typescript
import { vZoomImgInstall, type vZoomImgOptions } from 'maz-ui/directives'
import { createApp } from 'vue'

const app = createApp(App)

app.use(vZoomImgInstall)

app.mount('#app')
```

### Nuxt

Please refer to the [Nuxt module documentation](../ecosystem/nuxt.md) for more information.

## Types

```ts
export interface vZoomImgOptions {
  disabled?: boolean
  scale?: boolean
  blur?: boolean
}

interface vZoomImgBindingOptions extends vZoomImgOptions {
  src: string
  alt?: string
}

export type vZoomImgBindingValue = string | vZoomImgBindingOptions
```