v-fullscreen-img

Displays images fullscreen on click

Basic usage

<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

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

On custom element

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

Global install

Vue

main.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 for more information.

Types

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

export type vFullscreenImgBindingValue = string | vFullscreenImgBindingOptions | undefined