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
slot
s cannot live at the root of atemplate
, this component introduces one extradiv
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 forslot="then"
andslot="catch"
will always be an array. You can destructure it withslot-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