Vue Chimera

Easiest way to interact with RESTful APIs

Simple GET

<template>
  <div class="example-box">
    <span
      v-if="simpleGet.loading"
      class="spinner"
    />
    <span v-else-if="simpleGet.data">
      {{ simpleGet.data.name }}
    </span>
    <br>
    <button @click="simpleGet.reload()">
      Reload
    </button>
  </div>
</template>

<script>
export default {
  chimera: {
    simpleGet: '/users/1'
  }
}
</script>

Reactive GET

<template>
  <div class="example-box">
    User ID: <input
      v-model="id"
      type="number"
    >
    <br>
    <span
      v-if="reactiveGet.loading"
      class="spinner"
    />
    <span v-else-if="reactiveGet.data">
      {{ reactiveGet.data.name }}
    </span>
    <br>
  </div>
</template>

<script>
export default {
  data () {
    return {
      id: 1
    }
  },
  chimera: {
    reactiveGet () {
      return '/users/' + this.id
    }
  }
}
</script>

User ID:

Auto refreshing (polling)

<template>
  <div class="example-box">
    <span
      v-if="endpoint.loading"
      class="spinner"
    />
    <span v-else-if="endpoint.data">
      {{ endpoint.data.name }}
    </span>
    <br>
    <span v-if="endpoint.lastLoaded">Last time loaded: {{ endpoint.lastLoaded.toTimeString() }}</span>
  </div>
</template>

<script>
export default {
  chimera: {
    endpoint: {
      url: '/users/1',
      interval: 4000 // 4 seconds poll interval
    }
  }
}
</script>

POST requests (manual sending)

<template>
  <div class="example-box">
    <span
      v-if="newUser.loading"
      class="spinner"
    />
    <span v-else-if="newUser.data">
      {{ newUser.data }}
    </span>
    <br>
    <button @click="newUser.send()">
      Submit
    </button>
  </div>
</template>

<script>
export default {
  chimera: {
    newUser: {
      url: '/users',
      method: 'post',
      params: {
        title: 'My test post',
        description: 'Vue Chimera is awesome'
      },
      auto: false // By default auto is false on POST/PUT/PATCH/DELETE requests, but can be set explicitly
    }
  }
}
</script>