# vue-awaited

Latest version **2.0.7** (published 2021-01-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-awaited
pnpm add vue-awaited
yarn add vue-awaited
bun add vue-awaited
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.7 |
| Published | 2021-01-14 |
| First published | 2019-09-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 217.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | batenkovt |

## Links

- npm: https://www.npmjs.com/package/vue-awaited
- npm.io page: https://npm.io/package/vue-awaited

## Recent versions

- 2.0.7 (latest) — 2021-01-14
- 2.0.6 — 2021-01-14
- 2.0.5 — 2021-01-14
- 2.0.3 — 2021-01-14
- 2.0.2 — 2021-01-14
- 2.0.1 — 2021-01-14
- 2.0.0 — 2021-01-14
- 1.2.5 — 2020-09-08
- 1.2.4 — 2020-07-06
- 1.2.3 — 2019-11-14
- 1.2.2 — 2019-10-18
- 1.2.1 — 2019-10-03
- 1.2.0 — 2019-09-30
- 1.1.10 — 2019-09-17
- 1.1.9 — 2019-09-16
- … 21 more at https://npm.io/package/vue-awaited/versions

## README

<img alt="Logo" src="https://github.com/enkot/vue-awaited/blob/master/public/emoji-glossy-person.png?raw=true" height="140"/>

# VueAwaited

[![Build Status](https://travis-ci.org/enkot/vue-awaited.svg?branch=master)](https://travis-ci.org/enkot/vue-awaited)
[![Coverage Status](https://coveralls.io/repos/github/enkot/vue-awaited/badge.svg?branch=master)](https://coveralls.io/github/enkot/vue-awaited?branch=master)
<img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" />

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

> Inspired by [vue-promised](https://github.com/posva/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

```sh
yarn add vue-awaited
```

or

```sh
npm i vue-awaited
```

## Usage

### Global

```js
// 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

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

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

## Basic Example

Using url string:

```vue
<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:

```vue
<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:

```vue
<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](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options) | `String`                                      |
| `threshold`     | `threshold` option for IntersectionObserver class. Defaults to `1.0`. See [docs](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options)  | `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](https://medium.com/@enkot)
- Twitter: [@enkot\_](https://twitter.com/enkot_)
- Github: [@enkot](https://github.com/enkot)

## 🤝 Contributing

Contributions, issues and feature requests are welcome!<br />Feel free to check [issues page](https://github.com/enkot/vue-awaited/issues).

## License

[MIT](http://opensource.org/licenses/MIT)

---
_Source: https://npm.io/package/vue-awaited · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._