https://github.com/david-desmaisons/vue-ajax-handler
Ultra minimal generic vue component to deal with ajax loading
https://github.com/david-desmaisons/vue-ajax-handler
ajax component vuejs
Last synced: 2 months ago
JSON representation
Ultra minimal generic vue component to deal with ajax loading
- Host: GitHub
- URL: https://github.com/david-desmaisons/vue-ajax-handler
- Owner: David-Desmaisons
- License: mit
- Created: 2019-09-12T01:49:57.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2021-01-05T14:22:31.000Z (over 5 years ago)
- Last Synced: 2025-03-12T12:31:11.775Z (over 1 year ago)
- Topics: ajax, component, vuejs
- Language: JavaScript
- Homepage:
- Size: 1.26 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-ajax-handler
[](https://circleci.com/gh/David-Desmaisons/vue-ajax-handler)
[](https://codecov.io/gh/David-Desmaisons/vue-ajax-handler)
[](https://github.com/David-Desmaisons/vue-ajax-handler/issues)
[](https://www.npmjs.com/package/vue-ajax-handler)
[](https://github.com/David-Desmaisons/vue-ajax-handler/blob/master/LICENSE)
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
- `default` slot passing data as parameter in case of success.
- `error` slot 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 using the provide API. It could be axios get or fetch, or any ajax library.
```HTML
{{data.data[0].name}}
```
```javascript
import { ajaxHandler } from 'vue-ajax-handler'
import { get } from "axios";
export default {
components: {
ajaxHandler
},
provide: {
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.
#### events
- `loading` payload: ***Boolean*** emitted when loading changes.
- `error` payload: ***Error*** emitted when error changes.
- `data` payload: ***Object*** emitted when data is loaded, payload: the corresponding data.
#### 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](https://cli.vuejs.org/config/).
### Update the API section of README.md with generated documentation
```
npm run doc:build
```