IgorHalfeld / ouvue

Simple and scalable service layer(with cache 🤩) for Vue REST clients

Ouvue 👂🏻

⚠️ Beta version!! Do not use in production!!

Simple and scalable service layer(with cache 🤩) for Vue REST clients

• 🔥 Suports Vue.js 2 and 3 (in progress on branch next)
• 😙 Zero dependencies
• 💅 Typescript support
• 😍 Code coverage with >90%

Install

import { create } from '@ouvue/core'

Usage

import { create } from '@ouvue/core'

const services = {
  posts: {
    async getAll () {
      console.log('Getting posts...')
      // You don't need to put on a try/catch, Ouvue does it for you 😉
      const res = await window.fetch('https://jsonplaceholder.typicode.com/posts')
      const result = await res.json()

      return result
    }
  }
}

const api = create({ services })

export default {
  async mounted () {
    const posts = await this.getPosts()
    console.log('Posts', posts)

    window.setTimeout(async () => {
      console.log(await this.getPosts())
    }, 2000)
  },
  methods: {
    async getPosts() {
      return api.fetch('posts/getAll')
    }
  }
}

See this code live and check out examples folder

API

• create(options) - create instance of Ouvue options signature

  {
    services,
    cache: {
      strategy: 'inmemory' // default
    }
  }

create return an object with a fetch function and OuvueRender component

• fetch(key, payload, options) - fetch executes a service.

    key: e.g.     'users/create'
    payload: e.g. { name: 'Igor' }
    options: e.g. { onlyNetwork: true } // if exists on cache, call the network and update the cache

• <ouvue-render :action="action" :payload="payload" :options="options" /> - fetch executes a service but with component-based approach

    e.g.
    <ouvue-render
      action="users/create"
      :payload="{ name: 'Igor' }"
      :options="{ onlyNetwork: true }" />

NPM scripts

• npm t: Run test suite
• npm start: Run npm run build in watch mode
• npm run test:watch: Run test suite in interactive watch mode
• npm run test:prod: Run linting and generate coverage
• npm run build: Generate bundles and typings, create docs
• npm run lint: Lints code
• npm run commit: Commit using conventional commit style (husky will tell you to use it if you haven't 😉)