IgorHalfeld / ouvue

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

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Ouvue πŸ‘‚πŸ»

Travis Coveralls Donate

⚠️ 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 πŸ˜‰)

About

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

License:MIT License


Languages

Language:TypeScript 100.0%