A Vue directive to add AJAX to your app without the boilerplate

by Vue.js Examples

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

GitHub

https://github.com/shaynekasai/v-fetch