vue-ajax-handler

Ultra minimal generic vue component to deal with ajax loading

Usage

Adapted from: https://adamwathan.me/renderless-components-in-vuejs/

Perform an ajax call and delegate the rendering to:

• loading slot when loading

• the default slot passing data as parameter in case of success.

• error slot in case of error passing error as parameter in case of error.

This a generic library with no dependency on ajax library, so

• The component parent should provide a get function that will be called with the given url.

<ajax-handler url="https://api.github.com/orgs/vuejs/repos">
  <template #default="{data}">
    <p>{{data.data[0].name}}</p>
  </template>
</ajax-handler>

import { ajaxHandler } from 'AjaxHandler'
import { get } from "axios";

export default {
  components: {
    ajaxHandler
  },
  inject: {
    get
  }
}

API

ajax-handler

slots

• loading slot to render loading feedback

• error slot to render error feedback

• default slot to render data when loaded. Receives data as parameter.

props

• url String (required)

  The url used to make ajax request.

methods

• load()

  Perform an ajax call. Automatically called by created hook.

Installation

npm install vue-ajax-handler

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Run your unit tests

npm run test:unit

Customize configuration

See Configuration Reference.

Update the API section of README.md with generated documentation

npm run doc:build