vue2-suspense

Vue Suspense

A package to use with use with Vuejs 2 to load data while is showing a loading placeholder. Also offers an error fallback template.

Installation

Install vue2-suspense with NPM

  npm install vue2-suspense

And use it into your main file

import Vue from 'vue';

import VueSuspense from 'vue2-suspense';

Vue.use(VueSuspense);

API Reference

Props

Name	Type	Description
id	string, number, boolean, array, object	Used as two way binding object (v-model).
promise	Promise	Required. A promise object or a function that returns a promise. Used to load the data into the component.
tag	string	Default: div. The name of the tag used as wrapper for the component.

Events

Name	Description
input	Emitted after load the data and passed as payload.
on-error	Emitted after an error was caught with the error as payload.

Slots

Name	Description
default	Used when data is loaded and there are not errors.
loading	Used when data is being loading. By default, show an animated spinner icon.
error	Used when an error happened.

Example

<template>
  <div id="app">
    <vue-suspense v-model="dataLoaded" :promise="loadData()" :key="key">
      <ul>
        <li v-for="number in dataLoaded" :key="number">{{ number }}</li>
      </ul>
      <template #error="{error}">
        {{ error }}
      </template>
      <!-- <template #loading>
        Loading numbers...
      </template> -->
    </vue-suspense>
    <button @click="keyFlag=!keyFlag">Reload</button>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  name: 'App',
  data: () => ({
    keyFlag: false,
    dataLoaded: [],
  }),
  computed: {
    key() {
      return this.keyFlag ? 1 : -1;
    }
  },
  methods: {
    async loadData() {
      const randomSeconds: number = Math.floor(Math.random() * 6) + 1;
      console.log(randomSeconds);
      await new Promise((resolve) => setTimeout(resolve, randomSeconds * 1000));
      if (randomSeconds >= 5) {
        return Promise.reject('Timeout error');
      }
      return Array.from(Array(10), (_, index) => index + 1);
    }
  }
});
</script>

See an example here.

Author

• @ajomuch92

Feel free to open a PR or create an issue to contribute to this package.

License

MIT