https://github.com/vueonrails/vue-autorequest
Automatic Loading of Vue component
https://github.com/vueonrails/vue-autorequest
Last synced: 10 months ago
JSON representation
Automatic Loading of Vue component
- Host: GitHub
- URL: https://github.com/vueonrails/vue-autorequest
- Owner: vueonrails
- License: mit
- Created: 2018-06-20T03:20:16.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-05-07T12:16:44.000Z (over 4 years ago)
- Last Synced: 2025-01-15T14:12:49.697Z (11 months ago)
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/vue-autorequest
- Size: 2.53 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Welcome to Vue-Autorequest
Autorequest is a Vue component plugin to load the component part with initial data. It uses XMLHttpRequest. It is created with [Vue on Rails](http://vueonrails.com) in mind.
> `vue-autorequest` is designed for a single endpoint. And it is probably not for complex components with multiple endpoints.
### Lesser `axios.get` on more component parts
One of autorequest's goals is to reduce the `axios.get` spinkles and give you a smaller component part. A common axios.get spinkle is like the one below.
```javascript
mounted: function(){
axios.get('https://yesno.wtf/api')
.then(function (res) {
console.log(res.data)
})
.catch(function(err){
console.log(err)
})
}
```
Autorequest allows me to write the same data loading code like this:
```javascript
//1
data: function(){
return {
mounted: { url: 'https://yesno.wtf/api'}
}
}
```
> Replace `mounted` with `created` or `updated`
At the `watch` method, receive response or catch error.
```javascript
//2
watch: {
onMounted:function(res){
console.log({res})
}
}
```
> Replace `onMounted()` with `onCreated` or `onUpdated()`
---
## Install & Usage
```
//npm
npm install vue-autorequest
//yarn
yarn add vue-autorequest
```
```javascript
import Autorequest from 'vue-autorequest'
Vue.use(Autorequest)
```
## Lifecycle
The life-cycle variable and its corresponding watch method.
- Lifecycle stage | Watch method
- created | onCreated
- mounted | onMounted
- updated | onUpdated
# License
MIT
# Contact
[@ytbryan](http://twitter.com/ytbryan) | [email](mailto:ytbryan@gmail.com)