VueAwaited

Small Vue.js component for convenient data fetching and lazy loading.

Inspired by vue-promised, recommend to look at it if you need loading/errors handling without lazy loading.

Features

• ⚔️ Works for both Vue 3 and 2
• 📝 Fetch, show and manage data directly in the template
• 👁️ Loads data when the element becomes visible
• 📍 Slots for loading and error states
• No dependencies.

Why does this library exist?

Usually, on big pages, rendering all content at once can cause performance problems with big "Time to Interactive" or "Largest Contentful Paint" time, or even bigger problem if SSR used - server should render all the content before user could see the page.

And in most cases, the user will not even scroll to that content, but must wait to it to be rendered.

VueAwaited solves these problems by loading data only when it becomes visible and handle loading/error state itself using slots 🙂.

Installation

yarn add vue-awaited

or

npm i vue-awaited

Usage

Global

// Vue 2

import Vue from 'vue'
import VueAwaited from 'vue-awaited'

Vue.use(VueAwaited, { /* options */ })


// Vue 3

import { createApp } from 'vue'
import VueAwaited from 'vue-awaited'

const app = createApp(App)
app.use(VueAwaited, { /* options */ }))

Local

<script>
import { awaited } from 'vue-awaited'

export default {
  components: {
    awaited
  }
}
</script>

Basic Example

Using url string:

<template>
  <awaited
    action="https://rickandmortyapi.com/api/character/1"
    #default="{ data: { image, name, species } }"
  >
    <img :src="image" :alt="name" />
    <h2>{{ name }}</h2>
    <span>{{ species }}</span>
  </awaited>
</template>

Using component's method:

<template>
  <awaited :action="getCharacter" #default="{ data: { image, name, species } }">
    <img :src="image" :alt="name" />
    <h2>{{ name }}</h2>
    <span>{{ species }}</span>
  </awaited>
</template>

<script>
export default {
  methods: {
    getCharacter() {
      return fetch('https://rickandmortyapi.com/api/character/1')
    }
  }
}
</script>

Using slots:

<template>
  <awaited action="https://rickandmortyapi.com/api/character/1">
    <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>
  </awaited>
</template>

No need to call .json() method on response object, it will be done automatically under the hood.

API Reference

options

Name	Description	Type
name	Component name. Defaults to awaited	String
props	Props which will be passed to component	Object

props

All of these props could be passed to global config as well as directly to component.

Name	Description	Type
action	Url string, method or promise object	String Function Promise
lazy	Enables lazy loading which uses Intersection Observer API under the hood	Boolean
delay	Delay in ms to wait before displaying the pending slot. Defaults to 200	Number
margin	rootMargin option for IntersectionObserver class. Defaults to 0px. See docs	String
threshold	threshold option for IntersectionObserver class. Defaults to 1.0. See docs	String
height	Height of an element that is shown before pending slot. Defaults to 0px	String
watch	Reactive value or watch function to watch changes and rerun action	Number String Array Object Function
fetchOptions	Options for fetch function	Number
actionHandler	Custom action handler. F.e to use axios library	Number

slots

All slots can be used as scoped or regular slots.

Name	Description	Scope
pending	Content to display while the action is pending and before delay is over	previously resolved data
default	Content to display once the action has been successfully resolved	resolved data
error	Content to display if the action is rejected	throwed error

Author

👤 Enkot

• Website: @enkot
• Twitter: @enkot_
• Github: @enkot

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

License

MIT