vue-await

Render blocks based on the status of a Promise. See a demo.

<template>
  <Await :p="prom">
    <p>Waiting...</p>
    <p slot="then" slot-scope="[result]">Success: {{result}}</p>
    <p slot="catch" slot-scope="[error]">Error: {{error}}</p>
    <p slot="none">(promise is null)</p>
  </Await>
</template>

<script>
export default {
  data() {
    return {
      prom: fetch('http://thecatapi.com/api/images/get'),
    };
  },
}
</script>

Installation

npm install --save vue-await

Prior Art

• This project was inspired by svelte's Await blocks.

Caveats

• Because slots cannot live at the root of a template, this component introduces one extra div of nesting. This has the potential to break some css rules using the > immediate child selector.
• Promises can resolve and reject with multiple arguments, so the slot-scope value for slot="then" and slot="catch" will always be an array. You can destructure it with slot-scope="[result]" if you like.

Future Work

This would likely be better as a directive along the lines of v-if:

<div v-await="todosPromise">
    <p>loading...</p>
</div>
<div v-then="todos">
    <TodoList :data="todos" />
</div>
<div v-catch="error">
    <p>Uh oh, something went wrong: {{ error }}</p>
</div>

This would require a patch to the Vue core library. I intend to look into this, but don't have time just now. Note to self: check out here

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Run your unit tests

npm run test:unit