async-content

1.0.4 • Public • Published

async-content

A vue.js component that facilitates pulling from any asynchronous source (e.g. the WP-REST API) and displays default content until loaded

How-to use:

Install:

# install dependencies
npm install --save async-content

Use in your Vue component:

<template>
  <div id="app">
    <async-content :map-function="mapFunction" url="http://www.codeofmanycolors.com/blog/wp-json/wp/v2/posts?per_page=1">
      <div>
        <h3>{{{posts[0].title}}}</h3>
        <div>
          {{{posts[0].excerpt}}}
        </div>
      </div>
    </async-content>
  </div>
</template>
<script>
import asyncContent from './async-content.vue'
export default {
  components: {
    asyncContent
  },
  data: function () {
    const vm = {
      posts: [],
      mapFunction: (json)=> {
        vm.posts = json.map (p=> {
          return {
            title: p.title.rendered,
            excerpt: p.excerpt.rendered
          }
        })
      }
    }
    return vm
  }
}
</script>
 
<style>
  body {
    font-family: Helvetica, sans-serif;
  }
  
</style>

Example: Coming soon. In the meantime, clone this repo, install, buid and 'npm run dev'

Package Sidebar

Install

npm i async-content

Weekly Downloads

2

Version

1.0.4

License

ISC

Last publish

Collaborators

  • wakecoder