vue-wired

Inspired by wiretie.

Install

yarn add vue-wired

Usage

Instead of writing:

<template>
  <div>{{ loading ? 'Loading...' : user.name }}</div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      user: null
    }
  },
  created() {
    Promise.resolve({ name: 'EGOIST' }) // mock API call
      .then(user => {
        this.user = user
        this.loading = false
      })
  }
}
</script>

You write:

User.vue:

<template>
  <div>{{ pending.user ? 'Loading...' : user.name }}</div>
</template>

WiredUser.js:

import wired from 'vue-wired'
import User from './User.vue'

export default wired({
  user: Promise.resolve({ name: 'EGOIST' }),
  // Use a function if you want to access component instance
  // via `this` or `vm` in arrow function
  // user: vm => Promise.resolve({ name: 'EGOIST' })
})(User)

Now async API logic is extracted from your User component. You can write these two components in one file if you use render function instead of template.

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

vue-wired © egoist, Released under the MIT License. Authored and maintained by egoist with help from contributors (list).

egoistian.com · GitHub @egoist · Twitter @rem_rin_rin