Getting Started #

This plugin comes with two directives v-fade and v-fade-auto. v-fade can be added to individual <img> element and v-fade-auto directive can be added to a parent image gallery or grid component. See demo here.

This plugin only works with Vue 3.x+ and also requires IntersectionObserver support on the client. So you might need to add a polyfill for that based on minimum browser version you target. I would recommend using either intersection-observer polyfill or service like polyfill.io.

1. Install the plugin #

Add the plugin as dependency to your vue project

yarn add vue-img-fade

2. Import and use the directive #

The custom directives can be imported as shown here.

Using v-fade:

<script setup lang="ts">
import { vFade } from "vue-img-fade";
</script>
<template>
  <div>
    <img v-fade src="..." alt="..." width="100" height="100">
  </div>
</template>

Using v-fade-auto:

<script setup lang="ts">
import { vFadeAuto } from "vue-img-fade";
</script>
<template>
  <div v-fade-auto>
    <!-- width/height is required for v-fade-auto to work correctly -->
    <img src="..." alt="..." width="100" height="100">
    <img src="..." alt="..." width="100" height="100">
    <!-- ... -->
    <img src="..." alt="..." width="100" height="100">
  </div>
</template>