Wondering what’s next for npm?Check out our public roadmap! »

    @shaynekasai/v-fetch

    1.1.4 • Public • Published

    LinkedIn Stargazers License NPM


    v-fetch

    v-fetch is a Vue directive to add AJAX to your app without the boilerplate


    Summary

    v-fetch is a directive that adds AJAX functionality to your Vue 2 application so that you don't have to write all of the boilerplate code to call a simple API request to update a model or submit data to an end-point. The goal of v-fetch is to reduce the amount of code in your components and provide a more intuitive interface to making HTTP requests.

    Note: This is a work in progress, so the code and API is likely to change quickly.

    Installation

    npm install @shaynekasai/v-fetch --save
    

    Usage

    First, import and use v-fetch:

    import VueFetch from 'v-fetch'
    
    Vue.use(VueFetch);

    Simple GET example:

    <a href="/api/endpoint" v-fetch v-on:click.prevent>click</a>

    Simple GET example that updates a model from the AJAX return call:

    <span>{{ message }}</span>
    <a href="/api/endpoint" v-fetch="{updateModel: 'message'}" v-on:click.prevent>click</a>

    Important! when using updateModel, make sure your end-point returns data using the same name. If you want to access a nested value in the json that is returned from your end-point, see the returnField option below

    Simple form example that sends foo as json to /api/endpoint:

    <form method="post" action="/api/endpoint" v-fetch>
      <input type="hidden" name="foo" value="bar">
    </form>

    Form POST example that sends formModel data as json and updates the message data from the return request:

    <span>{{ message }}</span>
    <a href="/api/endpoint" v-fetch:post="{sendModel: 'formModel', updateModel: 'message'}" v-on:click.prevent>click</a>

    API

    Methods:

    v-fetch:get|post|put|patch|delete

    Options:

    • updateModel: '<string>' - the Vue model property to update
    • sendModel: '<string>' - the Vue model to send over as a form, json, or query args
    • sendAs: 'json|form' - send data as json data or as FormData
    • returnField: '<string>' - gets the value from your json end-point using dot notation (arrays/more complex notation not supported yet)
    • eventType: '<string>' - the event type to use
    • extraParams: <object> - these get merged into fetch's extra options.
    • onStart: '<string>' - calls your method just before the ajax call
    • onComplete: '<string>' - calls your method after ajax call is completed
    • onError: '<strong> - calls your method if there's an error

    Examples

    Here are some codepen examples where you can see how this all works:

    Callbacks

    onStart - before async call is made, includes params used in fetch

    onComplete - after async call is made, includes params used in fetch

    onError - on async error, call is made, includes params used in fetch

    Events

    v-fetch:start

    v-fetch:complete

    Install

    npm i @shaynekasai/v-fetch

    DownloadsWeekly Downloads

    5

    Version

    1.1.4

    License

    MIT

    Unpacked Size

    27.3 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar