Async data loading plugin for Vue.js 2.0

Related tags

HTTP Requests vue vuejs2
Overview

vue-async-data for Vue.js 2.0

Async data loading plugin for Vue.js

NPM

Install

  • this plugin is written in ES2015, so recommend compile with babel/babel-polyfill.
npm install vue-async-data-2
// use as global plugin
import Vue from 'vue';
import { AsyncDataPlugin } from 'vue-async-data-2';
Vue.use(AsyncDataPlugin);
// use as locally mixin
import { AsyncDataMixin } from 'vue-async-data-2';

export default {
  mixins: [ AsyncDataMixin ],
}

Usage

<template>
  <div>
    <p v-if="userNameLoading">Loading...</p>
    <p v-else-if="userNameError">Error: {{ userNameError }}</p>
    <p v-else>Hello {{ userName }} !</p>
    <button v-on:click="asyncReload('userName')">Reload userName</button>
  </div>
</template>

<script>
export default {
  name: 'show-data',
  asyncData: {
    userName () {
      return new Promise((resolve, reject) => {
        setTimeout(_ => {
          if (Math.random() > 0.5) {
            resolve('risa');
          } else {
            reject('fetch error...');
          }
        }, 1000);
      })
    },
  },
}
</script>

Standard API

this.asyncData: object

specify a function that returns Promise. you can also specify a default value.

asyncData: {
  userName () {  // return promise
    return new Promise((resolve) => {
      resolve('risa');
    })
  },
  userNameDefault: 'unknown',  // default value
  userNameLazy: false,  // skip run at mount?
},

this.asyncReload([name])

refresh data.

if name arg is specified, only that field is updated.

this.asyncReload('userName')
this.asyncReload()

this.asyncLoading: boolean

global reload flag.

this.asyncError: boolean

global error flag.

Auto Generate Property

this.[name]

if resolve, set response.

this.[name]Error

if throw reject, set error message.

this.[name]Loading: boolean

set to true until there response.

You might also like...
Vue Axios Http - This package helps you quickly to build requests for REST API

Vue Axios Http This package helps you quickly to build requests for REST API. Move your logic and backend requests to dedicated classes.

Chantouch Sek 4 Apr 9, 2022
Async data loading plugin for Vue.js

Async data loading plugin for Vue.js

vuejs 420 Nov 24, 2022
vuex-loading-plugin The plugin which including to your modules loading logic

vuex-loading-plugin The plugin which including to your modules loading logic. When you will handle any actions you triggering loading mutation. When a

Stfalcon LLC 3 Jul 30, 2020
Data loading animation component for VueJS, inspired by video games loading screens.
Data loading animation component for VueJS, inspired by video games loading screens.

Data loading animation component for VueJS, inspired by video games loading screens.

null 0 Sep 1, 2020
Vue.js plugin that handles buttons async lock state. Demo: https://stukh.github.io/vue-promise-btn/
Vue.js plugin that handles buttons async lock state. Demo: https://stukh.github.io/vue-promise-btn/

vue-promise-btn Example and Documentation https://STUkh.github.io/vue-promise-btn/ Features Easy-to-use API Flexible Usage Works with any tag and even

Alex 174 Dec 14, 2022
RequireJS plugin to async and dynamic load and parse .vue components
RequireJS plugin to async and dynamic load and parse .vue components

require-vuejs RequireJS plugin to async and dynamic load and parse .vue single file components This library has only 4Kb ( minified ). What this libra

Edgard Rosberg Duarte Leal 146 Feb 25, 2022
Vue-loading - Vue Placeholder loading Content With Image,Table,Status
Vue-loading - Vue Placeholder loading Content With Image,Table,Status

Vue Loading Project setup npm install Compiles and hot-reloads for development

Vũ Đức Việt 5 Oct 20, 2022
Simplest Youtube Like Loading Bar Component For Vue 2. http://bosnaufal.github.io/vue2-loading-bar/

Vue 2 Loading Bar Simplest Youtube Like Loading Bar Component For Vue 2 DEMO Install You can import vue2-loading-bar to your vue component file like t

Naufal Rabbani 269 Nov 21, 2022
A text loading component for Vue.js. Uses SVG and javascript to animate a text loading with a gradient.

A text loading component for Vue.js. Uses SVG and javascript to animate a text loading with a gradient.

null 1 Aug 3, 2020
SVG component to create placeholder loading, like Facebook cards loading.
SVG component to create placeholder loading, like Facebook cards loading.

SVG component to create placeholder loading, like Facebook cards loading.

EGOIST 2.9k Dec 30, 2022
vue-ads-table-tree - A vue Table component, with filtering, sorting and pagination. Rows can have child rows, so a tree structure can be build. It also supports async calls to load rows from the backend. It's built with the css framework tailwindcss

vue-ads-table-tree Vue ads table tree is a vue js table component, with a tree functionality. Here is a list of all the features of this table: Filter

Arne De Smedt 122 Dec 26, 2022
🎀 A Chrome extension written using Vue and Async/Await. Uses a popup display and changes badge counts.

Chrome-Ribbon-Reminder This is a Chrome extension in popup form. Ribbon Reminder was an old app I made in Swift for iOS a while back, and I think its

John Datserakis 12 Nov 24, 2022
Async method support for vue with relevant state variables for use in the UI.

vue-async-methods Vue async methods support Gives you utility methods for your promise based methods for use in the view. Also catch errors in the vie

Martin Hansen 67 Dec 15, 2022
Async computed properties for Vue.js

vue-async-computed With this plugin, you can have computed properties in Vue that are computed asynchronously. Without using this plugin, you can't do

Benjamin Fox 1.1k Dec 28, 2022
Reduce async boilerplate code generating Vuex modules. Compatible with Vue 2.x.

vuex-async-module Reduce async boilerplate code generating Vuex modules. Compatible with Vue 2.x Installation npm install @liqueflies/vuex-async-mod

Lorenzo Girardi 15 Mar 26, 2021
Managing async operations statuses in your Vue components

vue-async-operations Managing async operations statuses in your Vue components Install npm install vue-async-operations Basic usage import Vue from 'v

Devstark 32 Sep 13, 2021
Reduce async boilerplate code generating Vuex modules. Compatible with Vue 2.x.

vuex-async-module Reduce async boilerplate code generating Vuex modules. Compatible with Vue 2.x Installation npm install @liqueflies/vuex-async-mod

Lorenzo Girardi 15 Mar 26, 2021
Utility for Vuex Async Flows and Vue-Router Routes

Vuexi Work in progress, so breaking changes in API are possible. Please consider locking dependency if this library fit your needs! Vuexi is a toolset

Mikhail Faraponov 5 Oct 5, 2021
Async store and load vue-i18n messages

vue-i18n-fetch Async store and load vue-i18n messages Requeriments Currently this package is only compatible with Vue I18n v9 Installation NPM npm ins

Acium Global 0 Jun 4, 2021
Comments
  • asyncData and computed not support,has error!

    asyncData and computed not support,has error!

    like this:

    export default {
  name: 'show-data',
  asyncData: {
    list() {
      return new Promise((resolve, reject) => {
        setTimeout(_ => {
          resolve([
	  	{id:0,name:"衣服",type:0},
       		{id:1,name:"券",type:1}
	])
        }, 1000);
      })
    },
  },
computed: {
type0Data(){
			    return this.list.filter(function (m) {
			      	return m.type===0
			    })
			},
}
}
    opened by AaronChen2012 1
  • has error

    has error

    use as global plugin import { AsyncDataPlugin } from 'vue-async-data-2'; Vue.use(AsyncDataPlugin); has error， and use as locally mixin import { AsyncDataMixin } from 'vue-async-data-2';

    export default { mixins: [ AsyncDataMixin ], } has no error!

    vue version is 2.2.5

    opened by AaronChen2012 1
  • Is there any `asyncLoaded`?

    Is there any `asyncLoaded`?

    I would like to have a way to check if the data was loaded. I cannot check for asyncLoading to become false, because it is false initially when data is feeded with default values.

    opened by Eoksni 3
Owner
kamijin_fanta
frontend engineer.
kamijin_fanta
GitHub
Smart asynchronous data and computed properties for vue components.

vue-async-properties Vue Component Plugin for asynchronous data and computed properties. A Marketdial Project new Vue({ props: { articleId: Numb

MarketDial 38 Jun 21, 2021
Stale-while-revalidate data fetching for Vue

swrv swrv (pronounced "swerve") is a library using the @vue/composition-api for remote data fetching. It is largely a port of swr. Documentation The n

Kong 1.8k Jan 7, 2023
V-Model is a model plugin for Vue.js, like ng-resource.

V-Model V-Model is a model plugin for Vue.js, like ng-resource. based on axios, path-to-regexp, and bluebird. The V-Model provides interaction support

Gaoding Inc 56 Mar 16, 2021
axios plugin for Vuejs project

vue-axios-plugin 简体中文 | English axios plugin for Vuejs project How to install Script tag <!-- add it after vue.js --> <script src="https://unpkg.com/v

Yuga Sun 55 Oct 15, 2022
⚡️ A request library for Vue 3. 一个能轻松帮你管理请求状态的 Vue 3 请求库。欢迎使用~

English | 简体中文 VueRequest ⚡️ A request library for Vue 3. Status: Beta Features ?? All data is reactive ?? Interval polling ?? Automatic error retry ?

Atto 826 Jan 2, 2023
The HTTP client for Vue.js

vue-resource The plugin for Vue.js provides services for making web requests and handle responses using a XMLHttpRequest or JSONP. Features Supports t

Pagekit 10.1k Dec 30, 2022
Control your API calls by using an amazing component which supports axios and vue-resource

Vue API Request Vue API Request provides a full control on your APIs, making the calls simple, fast and easy to implement. Also, your code will be cle

Felipe Gibran Eleuterio Toledo 127 Dec 10, 2022
Solution to remove and simplify axios in components vue

Vue fast axios Solution to remove and simplify axios in components vue Dependencies: Only Vue.js 2.x Before install Before installing, you must instal

Leonardo Vilarinho 43 Apr 16, 2022
VueJS RESTful client with reactive features. Vue-Chimera is based on axios http client library.

VueJS RESTful client with reactive features. Vue-Chimera is based on axios http client library.

null 167 Jan 3, 2023
Vue 2 directive to easily add AJAX requests to your application

v-fetch v-fetch is a Vue directive to add AJAX to your app without the boilerplate Summary v-fetch is a directive that adds AJAX functionality to your

Shayne Kasai 6 Mar 31, 2022