---
title: "vFullscreenImg"
description: "vFullscreenImg is a Vue directive that opens an image in fullscreen on click, with zoom and navigation between the images of a group"
package: "maz-ui"
url: "https://maz-ui.com/directives/fullscreen-img"
---

# vFullscreenImg

> vFullscreenImg is a Vue directive that opens an image in fullscreen on click, with zoom and navigation between the images of a group

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

## Basic usage

```vue
<template>
  <img
    v-fullscreen-img
    src="https://placedog.net/1000/500"
  />
</template>

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

## With animate options

```html
<img
  v-fullscreen-img="{
    scaleOnHover: true,
    blurOnHover: true,
  }"
  src="https://placedog.net/1000/600"
/>
```

## On custom element

```html
<MazBtn
  v-fullscreen-img="'https://placedog.net/1000/700'"
>
  Click me to show image
</MazBtn>
```

## Global install

### Vue

`main.ts`

```ts
import { createApp } from 'vue'
import { vFullscreenImgInstall } from 'maz-ui/directives/vFullscreenImg'

const app = createApp(App)

app.use(vFullscreenImgInstall)

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

### Nuxt

Please refer to the [Nuxt module documentation](https://maz-ui.com/ecosystem/nuxt.md) for more information.

## Types

```ts
interface vFullscreenImgBindingOptions extends vFullscreenImgOptions {
  src: string
  alt?: string | null
}

export type vFullscreenImgBindingValue = string | vFullscreenImgBindingOptions | undefined
```