https://github.com/vueonrails/vue-autorequest

Automatic Loading of Vue component
https://github.com/vueonrails/vue-autorequest

Last synced: about 1 month 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 6 years ago)
• Default Branch: master
• Last Pushed: 2021-05-07T12:16:44.000Z (over 3 years ago)
• Last Synced: 2023-03-02T01:35:37.846Z (almost 2 years 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:[email protected])