blest-vue

BLEST Vue

A Vue client for BLEST (Batch-able, Lightweight, Encrypted State Transfer), an improved communication protocol for web APIs which leverages JSON, supports request batching and selective returns, and provides a modern alternative to REST.

To learn more about BLEST, please visit the website: https://blest.jhunt.dev

Features

• Built on JSON - Reduce parsing time and overhead
• Request Batching - Save bandwidth and reduce load times
• Compact Payloads - Save more bandwidth
• Selective Returns - Save even more bandwidth
• Single Endpoint - Reduce complexity and improve data privacy
• Fully Encrypted - Improve data privacy

Installation

Install BLEST Vue from npm

With npm:

npm install --save blest-vue

or using yarn:

yarn add blest-vue

Usage

Wrap your app (or just part of it) with BlestProvider.

<template>
  <BlestProvider url='http://localhost:8080' options={{ headers: { Authorization: 'Bearer token' } }}>
    <!-- Your app here -->
  </BlestProvider>
</template>

<script>
import { BlestProvider } from 'blest-vue'
export default {
  data() {
    return {
    };
  },
  mounted() {
  },
  methods: {
  },
};
</script>

Use the blestRequest function to perform passive requests on mount and when parameters change.

<template>
  <div>
    <p v-if="loading">Loading...</p>
    <p v-else-if="error">Error: {{ error.message }}</p>
    <p v-else>{{ JSON.stringify(data) }}</p>
  </div>
</template>

<script>
import { blestRequest } from 'blest-vue'
export default {
  setup() {
    const { data, error, loading } = blestRequest('listItems', { limit: 24 }, ['data', ['pageInfo', ['endCursor', 'hasNextPage']]])

    return { data, error, loading }
  }
};
</script>

Use the blestCommand function to generate a request function you can call when needed.

<template>
  <div>
    <!-- Your form here -->
    <button v-on:click="handleSubmit()">Submit</button>
    <p v-if="loading">Loading...</p>
    <p v-else-if="error">Error: {{ error.message }}</p>
    <p v-else>{{ JSON.stringify(data) }}</p>
  </div>
</template>

<script>
import { blestCommand } from 'blest-vue'
export default {
  setup() {
    const [submitForm, { data, loading, error }] = blestCommand('submitForm')

    const handleSubmit = () => {
      submitForm({
        hello: 'World'
      })
    }

    return { handleSubmit, data, loading, error }
  }
};
</script>

License

This project is licensed under the MIT License.