Building a API Client for VueJS

Hello!
In this post i will show you how you could create a simple API Client service to use in your VueJS application so you could easily make HTTP Server calls from your app.
First, make sure to install the Vue-resource module in your app using npm or yarn like:
npm install vue-resource --save
Then, import it into your main.js file, like below:

	import Vue from 'vue'
	import App from './App.vue'
	import router from './router'
	// import vue-resource module
	import VueResource from 'vue-resource'
	Vue.config.productionTip = false
	// use the vue-resource module
	Vue.use(VueResource)
	new Vue({
	router,
	render: h => h(App)
	}).$mount('#app')

view raw main.js hosted with ❤ by GitHub

Now, create a new file named api-client.js, put it in a directory called "services" and add the code:

	import Vue from 'vue'
	export default class ApiClient {
	static callAPI (method, url, data) {
	const options = {
	method: method,
	url: `${process.env.VUE_APP_API_URL}/${url}`,
	headers: {
	'Content-Type': 'application/json'
	}
	}
	// add the block below, if you want to add authentication
	// get the local user token to authenticated requests
	let localUser = localStorage.getItem('mylocaluserwithtoken')
	if (localUser) {
	localUser = JSON.parse(localUser)
	if (localUser.token) {
	options.headers['Authorization'] = `Bearer ${localUser.token}`
	}
	}
	if (data) {
	options.body = data
	}
	return new Promise((resolve, reject) => {
	Vue.http(options).then(resp => {
	resolve(resp.body)
	}).catch(err => {
	reject(err)
	})
	});
	}
	static apiGet (url) {
	return this.callAPI('GET', url)
	}
	static apiPost (url, data) {
	return this.callAPI('POST', url, data)
	}
	static apiPut (url, data) {
	return this.callAPI('PUT', url, data)
	}
	static apiDelete (url) {
	return this.callAPI('DELETE', url)
	}
	}

view raw api-client.js hosted with ❤ by GitHub

The code is self explaining and you can modify it as your needs. Now, you only need to use your ApiClient anywhere in your application. Below, i'm giving you a sample of using it in a Login component.

	<template>
	<div class="login">
	<form>
	<div>
	<label for="">E-mail</label>
	<input type="email" v-model="user.email"/>
	</div>
	<div>
	<label for="">Password</label>
	<input type="password" v-model="user.password"/>
	</div>
	<input type="submit" value="Login"/>
	</form>
	</div>
	</template>
	<script>
	import ApiClient from '@/services/api-client'
	export default {
	data () {
	return {
	user: {
	email: '',
	password: ''
	}
	}
	},
	methods: {
	submit () {
	ApiClient.apiPost('user/login', user).then(resp => {
	// User authenticated!
	});
	}
	}
	}
	</script>

view raw Login.vue hosted with ❤ by GitHub

Hope you enjoy!