How are you organizing your API calls? Have you considered API factories to make your codebase easier to work with, increasing your team’s productivity?

Why You Should Use API Factories in Your Project

• This practice gathers all your endpoints inside one or multiple modules. Thus, they are not scattered randomly inside your project, and everyone can quickly have a glimpse of every endpoint the application is using.
• When you make a change to one endpoint, you only have to update it in one place. You will be more confident in your code, and it will prevent you from breaking your application.
• If you need to reuse your API modules in multiple projects, you can package them with npm.
• By comparing your backend API routes with your frontend API factories side by side, you can quickly identify all the endpoints that you do not call anymore. Your application becomes one bit easier to maintain by removing all the unused code.
• You can make all your API factories available from anywhere in your app by defining a new property to the Vue instance. Each endpoint will be accessible with something like this.$api.myModule.myEndpoint(). (Go to the end of the article—part 3—to learn more about how to properly proceed with Vue and Nuxt.)
Let's see how to get API factories up and running in our app.

1. Installing Axios

Vue.js

npm install --save axios vue-axios

// src/main.js
import Vue from "vue";
import axios from "axios";
import VueAxios from "vue-axios";

Vue.use(VueAxios, axios);

⚠️ Note: In Vue.js, you can access Axios with this.axios or this.http.

Nuxt.js

npm install @nuxtjs/axios

// nuxt.config.js
module.exports = {
 modules: ["@nuxtjs/axios"]
};

⚠️ Note: In Nuxt.js, you can access Axios with this.$axios.

2. Gathering All Your Endpoints Inside One or Multiple Modules

⚠️ If you are using Vue, this should be in src. On the other hand, Nuxt users will have to place that folder directly at the root of the project.

api
├── auth.js
├── blog.js
├── ..
└── settings.js

// api/auth.js

export default axios => ({
 forgotPassword(email) {
 return axios.post("/auth/password/forgot", { email });
 },
 
 login(email, password) {
 return axios.post("/auth/login", { email, password });
 },

 logout() {
 return axios.get("/auth/logout");
 },

 register(payload) {
 return axios.post("/auth/register", payload);
 },
 
 resetPassword(password, passwordConfirmation, resetToken) {
 return axios.post("/auth/password/reset", {
 password: password,
 password_confirmation: passwordConfirmation,
 token: resetToken
 });
 }
});

3. Making Your API Factories Available Everywhere in Your App

Vue.js

// src/api.js
import Vue from "vue";
import Auth from "@/api/auth";
import Blog from "@/api/blog";
import Settings from "@/api/settings";

// Initialize all or API factories
const factories = {
 auth: Auth(Vue.axios),
 blog: Blog(Vue.axios),
 settings: Settings(Vue.axios)
};

// Make them available in the app with this.$api
// https://vuejs.org/v2/cookbook/adding-instance-properties.html
Vue.$api = factories;

// src/main.js
// NPM
import Vue from "vue";
import axios from "axios";
import VueAxios from "vue-axios";

// PROJECT
import "@/api.js";

Vue.use(VueAxios, axios);

⚠️ Because Nuxt.js can also run code on the server side, the process is a little different than with a standard Vue application.

Nuxt.js

// plugins/api.js

import Auth from "@/api/auth";
import Blog from "@/api/blog";
import Settings from "@/api/settings";

export default (context, inject) => {
 // Initialize API factories
 const factories = {
 auth: Auth(context.$axios),
 blog: Blog(context.$axios),
 settings: Settings(context.$axios)
 };

 // Inject $api
 inject("api", factories);
};

// nuxt.config.js
module.exports = {
 plugins: [{ src: "@/plugins/api.js" }]
};

4. How to Use Your API Factories Now

<template>
 <div>
 <input v-model="email" type="text" placeholder="email" />
 <input v-model="password" type="password" placeholder="password" />
 <button @click="onLogin">Login</button>
 </div>
</template>
<script>

export default {
 data() {
 return {
 email: "",
 password: ""
 };
 },

 methods: {
 async onLogin() {
 const response = await this.$api.auth.login(this.email, this.password);
 console.log(response);
 }
 }
};
</script>

---