Lazy Load Content In Vue 3 & 2 Apps - VueLazily

Install & Download:

# Yarn
$ yarn add vue-lazily
# NPM
$ npm i vue-lazily

Description:

VueLazily is a component library that allows you to lazy load content when it becomes visible. Also comes with slots for handling success and error states.

How to use it:

1. Import and register the VueLazily.

// Vue 2
import Vue from 'vue'
import VueLazily from 'vue-lazily'
Vue.use(VueLazily)

// Vue 3
import { createApp } from 'vue'
import VueLazily from 'vue-lazily'
const app = createApp(App)
app.use(VueLazily)

// OR Locally
import { Lazily } from 'vue-lazily'
export default {
  components: {
    Lazily
  }
  // ...
}

2. Basic usages.

<template>
  <Lazily
    action="/path/to/api/"
    #default="{ data: { image, name, species } }"
  >
    <img :src="image" :alt="name" />
    <h2>{{ name }}</h2>
    <span>{{ species }}</span>
  </Lazily>
</template>

// OR
<template>
  <Lazily :action="getCharacter" #default="{ data: { image, name, species } }">
    <img :src="image" :alt="name" />
    <h2>{{ name }}</h2>
    <span>{{ species }}</span>
  </Lazily>
</template>
export default {
  methods: {
    getCharacter() {
      return fetch('/path/to/api/').then(res =>
        res.json()
      )
    }
  }
}

// Slots
<template>
  <Lazily action="/path/to/api/">
    <template #pending>Loading...</template>
    <template #error="{ error }">{{ error.message }}</template>
    <template #default="{ data: { image, name, species } }">
      <img :src="image" :alt="name" />
      <h2>{{ name }}</h2>
      <span>{{ species }}</span>
    </template>
  </Lazily>
</template>

3. Available component props.

action: {
  type: [String, Function, Promise],
  required: false,
},
lazy: {
  type: Boolean,
  default: true,
},
delay: {
  type: [Number, Boolean],
},
margin: {
  type: String,
},
threshold: {
  type: Number,
},
height: {
  type: String,
},
tag: {
  type: String,
  default: "div",
},
watch: {
  type: [Number, String, Array, Object, Function],
},
actionHandler: {
  type: Function,
},