Consuming APIs Using Repository Design Pattern in Vue.js
Tags: webdev, designpatterns, code, vue
Published: 2019-12-01 22:42:34

---
title: Consuming APIs Using Repository Design Pattern in Vue.js
published: true
date: 2019-12-01 21:16:56 UTC
tags: web-development,design-patterns,code,vuejs
canonical_url: https://medium.com/backenders-club/consuming-apis-using-the-repository-pattern-in-vue-js-e64671b27b09
---

In this article, we will be discussing how to consume API data with Vue.js using the Repository Pattern.

![](https://cdn-images-1.medium.com/max/800/1*bbomWRY9yease6uUz70-fQ.png)<figcaption>Consuming API data using the Repository Pattern in Vue.js.</figcaption>

The Repository pattern is one of the most popular patterns to create an enterprise level application. It restricts us to work directly with data in the application and creates new layers for database operations, business logic and the application UI.

Why you should use Repository Design Pattern

1. The data access code can be reused.

2. Its easy to implement domain logic.

3. It aids us with decoupling of logic.

4. Your business logic can be unit tested easily without data access logic.

5. Its also a good way to implement dependency injection which makes your code more testable.

In Repository Design Pattern, you an hide the details of the data eventually stored or retrieved to and from the data store.

Vue.js is a progressive JavaScript framework mainly used to write front-end but Vue.js has evolved a lot more than just a front-end framework. [Read more here](https://vuejs.org/v2/guide/).

There are many articles and talks about Repository Design Pattern and how to implement it in many programming languages but in this article, I will be showing how to implement Repository Design Pattern in your Vue.js application.

**Prerequisites**

1. Basic knowledge of Design Patterns especially Repository Patterns

2. Basic knowledge of Vue.js

3 .Basic Knowledge of JavaScript.

_You know you can always learn without prior knowledge of some of them._

Before we start take a look at what we will be building here. https://repository-pattern-vue.firebaseapp.com/

To consume data with Vue.js using the Repository Design Pattern which aids us with decoupling, follow these simple steps.

1. Create a Repository folder

1. Create a Clients folder (Could be named any though, I personally like _Clients_ )

3. Create a _Client.js_ class/interface: Contains all the API Client configuration including all CRUD/ verb methods and again it could be named anything you like.

4. Create the individual repository class e.g. _PostRepository.js_: This class contains all the manipulation involved with Post endpoint.

5. Import the _Client.js_ class into all the Individual Repository classes created.

6. Define the different API requests inside individual repository e.g CRUD.

7. Create a _RepositoryFactory.js_ Class to retrieve all the different repository by name or key.

8. Use it within any of your model, controller or Vuex stores.

So there you have it. That’s all there is to consuming your data with Vue.js using the Repository Design pattern theoretically, now let’s get our hands dirty with codes so we can understand it practically too.

_I will take it step by steps and show screenshots along._

**Create a Repository folder**

I will go ahead to create a _`repositories`_ folder inside my _`src`_ folder of my application.

```
cd src && mkdir repositories
```

**Create a Clients folder**

I will create a _`Clients`_ folder inside my newly created _`repositories`_ folder, basically what will be inside this folder are the different HTTP Clients you might want to make use of, for example, if you want to use Axios (my best) or Vue-resource etc.

```
cd repositories && mkdir Clients
```

**Create a xxxClient.js class/interface**

You can create an interface/abstract class that will enforce a contract between each Clients if you are going to be using different Clients. But in my case I use only Axios, so I just create _AxiosClient.js_ file and put in all default configuration for Axios.

In summary, you might want to use many HTTP Clients, so you create different _xxxClient.js_ file for each with their specific configuration or an interface/abstract class for generic configuration.

```
touch xxxClient.js
```

For Axios, These are my default configurations just for this test.

{% gist https://gist.github.com/Kaperskyguru/e829be771b47863601a529148fdacd94 %}

**Create individual repository class**

You should already guess what will be in these classes (if not), the different API operations that will be done within a particular feature of your application. I will demonstrate with a single feature of my application… POST.

So I will create a _PostRepository.js_ file inside the _`repositories`_ folder and put in the below codes and even more.

```
touch PostRepository.js
```

_Paste in the codes below._

{% gist https://gist.github.com/Kaperskyguru/cea6979b70479cf5c0517442f869d2e2 %}

**Import the Client.js class into all the Individual Repository classes**

If you look at the source code above we imported/required the _xxxClient.js_ file into all the individual repository classes and use it to make API requests.

**Define the different API requests inside individual repository**

Also in the code above we define and export all our API requests in our case we simply did CRUD

**Create a RepositoryFactory.js Class**

Create a Factory Class inside the _`repositories`_ folder called _`RepositoryFactory`_ to export all the different individual repositories that you may have created, so its easy to use anywhere across our application.

```
touch RepositoryFactory.js
```

Put in the following codes and make changes accordingly if you are not following our example project.

{% gist https://gist.github.com/Kaperskyguru/7b1448c78b3599ebc380154d2278b991 %}

**Use it within any of your model, controller or Vuex stores**

If you are here, congratulations, this is where we make use of our hard works above, Since we are dealing with Vue.js, I will demonstrate how to use it in Vue Components and Vuex Stores. But its same approach to use it in Models, Controllers in fact anywhere.

**USING IT IN VUE COMPONENTS**

Create a Posts Component and import and use the repository as shown below.

{% gist https://gist.github.com/Kaperskyguru/d0958b8a90164d9e696a37308c3f2e7f %}

**USING IT IN VUEX STORE**

I love Vuex and will love to explain more about it but its just beyond the scope of this article but just a tip won’t hurt.

Vuex is State management library for Vue, [You can read more and how to get started here.](https://vuex.vuejs.org/guide/)

Create a _`store.js`_ file and paste in the following code.

{% gist https://gist.github.com/Kaperskyguru/21dae23aeb71f1730843ceec4f3a9505 %}

Now you can use the vuex store inside your post component like so.

{% gist https://gist.github.com/Kaperskyguru/9d5f8d165e7ff50456e076c4f0e76311 %}

_N/B: I created a new post.vuex.vue component just to use Vuex with it._

Alright guys, there you have it, if you got here well done, congratulations and thank you for reading.

**Summary**

Using Repository Design pattern can help you write clean and less code in a component therefore reducing code coupling just as we have demonstrated.

Don’t forget to drop **50 CLAPS**

**Conclusion**

There you have it, if you have any further contributions, questions or feedback, please drop it. Also don’t forget to **CLAP** if you find the article useful,

I hope you learnt something new with Vue, Vuex and Repository Pattern. [The full code is on GitHub, get it now](https://github.com/Kaperskyguru/vue-with-repository-pattern).

Thank you for reading my article. Here at my [blog](https://bit.ly/multimegablog) or [medium](https://bit.ly/mymediumprofile) I regularly write about backend development, digital marketing and content management system. To read my future posts simply [join my publication](https://bit.ly/mymediumpublication) or click ‘Follow’ Also feel free to connect with me via [Twitter](http://twitter.com/kaperskyguru), [Facebook](https://facebook.com/multimegaitschool), [Instagram](https://instagram.com/kaperskyguru).

_If you are interested in backend development (or you’re internet enthusiast) both (Mobile | Web | Desktop) videos subscribe to my_ [_Youtube channel_](http://bit.ly/multimegaschool)_, we will be posting a collection of help full tutorials and guides like this one for artisans_.

If you enjoy this post, make sure to let us know and share it with your friends and subscribe to my growing [channel](http://bit.ly/multimegaschool).

Sharing is caring.

* * *