Consuming APIs in Nuxt Using The Repository Pattern

In this article, we will be discussing how to consume APIs the smart way in Nuxtjs using the Repository pattern.

Prerequisites

1. Basic knowledge of Design patterns especially Repository pattern
2. Basic knowledge of Nuxtjs
3. Basic knowledge of JavaScript

This list shouldn’t hinder you from following through with this article, as you can always read up on any of them.

When Consuming APIs, give requisite attention to structuring them using best practices and industry standards so that it’s easy to debug, less code written, and most importantly using the DRY principle , etc.

Here, we would follow best practices in Consuming APIs using the Repository pattern and also create a custom plugin in Nuxtjs to do the work.

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

This article is a replica of the formal one for Vuejs developers, so if you are using Vuejs, do check out the article and also to get the general knowledge of Repository pattern and its benefits check it out here.

• NuxtJS

Nuxtjs is a free and open source web application framework based on Vuejs, Node.js, Webpack and Babel.js. An open source framework making web development simple and powerful. I refer to it as Framework of a Framework.

Nuxtjs ships with lots of benefits out of the box viz:

1. Server-side Rendering

2. Static Side generation

3. Single page Application

4. Modular

5. Performant

6. Enjoyable

Read the official documentation.

Consuming APIs in Nuxtjs using the Repository Pattern is a little tricky than that of Vue.js. However, we would achieve it with these simple steps.

1. Create the Repository folder.
2. Create a general Repository class that will import all your repositories. e.g. Repository.js
3. Create a Nuxtjs Plugin.
4. Import the general repository class into the Nuxtjs Plugin class and inject into Nuxtjs.
5. Add the Custom Plugin into nuxt.config.js file
6. Create the individual repository inside the repositories folder.
7. Import all the individual repositories e.g. PostRepository.js inside the general Repository class (Repository.js).
8. Import the individual repository inside your vuex store or components.

Enough of the theories, lets dive into the code and see how to put all this together to arrive at a solution.

Create a Repository folder

I will go ahead and create a repositories folder inside the src directory of my application.

cd src && mkdir repositories

Create a general repository class.

This will serve as a single export point for all the individual repositories, instead of individually importing all the repositories inside the Nuxtjs Plugin file and updating it each time, we simply add everything here and export.

touch Repository.js

Create Nuxtjs Plugin

This is where the magic happens, Nuxt.js allows you to define JavaScript plugins to be run before instantiating the root Vue.js Application.

cd plugins && touch repositories.js

In Nuxtjs, when adding global methods, configs, components, etc. just like in Vue.js when using Vue plugins ( Vue.use() ). We can also do that by creating a custom Nuxtjs Plugins and call the inject method which Nuxtjs provides freely to us.

Import the General repository class into the Nuxtjs Plugin class and inject into Nuxtjs

A Nuxtjs Plugin is automatically packaged with the Context API and the Inject method, we will use the context API to get access to Nuxtjs’ default Axios instance (which is passed as argument to the General Repository class) only in this article but you can read more about Nuxt Context here.

The Inject method takes in two parameters viz: name and what you’re injecting into the Vue instance.

Add the Custom Plugin into nuxt.config.js file

Its time to fire up our new Plugin each time we start Nuxtjs app, we will add the newly created plugin into the Plugins array of our Nuxtjs configuration file.

Create the individual repository inside the repositories folder.

The class contains the different API endpoints or operations that will be done within a particular feature of your application, which would be demonstrated with a single feature in the application which would be demonstrated with a single feature of the application… POST.

So I will create a PostRepository.js file inside the repositories folder and put in the below codes and even more.

cd repositories && touch PromotionRepository.js

Add the following code and even more to it.

Import Individual Repository into Repository.js

Next, we will import all the individual repositories e.g. PromotionRepository.js into Repository.js and pass on the axios instance gotten from our custom plugin like so:

Import the individual repository inside your vuex store or components.

Welldone for getting this far, we’re done with all the configuration setup, let’s move onto the fun part, using our repository pattern to make http calls inside Vuex store.

Vuex is a state management library for Vue.js. You can read more and how to get started here.

FYI, I always make all my API calls inside Vuex stores because its the “center of truth” for all my data — my choice anyways.

For easy demonstration, we will create a post.js file inside the store folder and include the following codes to interact with our API, retrieve list of posts and store it in the state for easy retrieval between multiple components.

Using Vuex store inside a component.

You can simply use the Vuex store inside any components of your choice like so;

Congratulations for getting to the end of this article, and thank you for reading

There you have it, if you have any further contributions, questions or feedback, please leave a comment.

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.

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 Nuxt, Vuex and Repository Pattern. The full code is on GitHub, get it now.

Thank you for reading my article. Here at my blog or medium I regularly write about backend development, digital marketing and content management system. To read my future posts simply join my publication or click ‘Follow’ Also feel free to connect with me via Twitter, Facebook, Instagram.

If you are interested in backend development (or you’re internet enthusiast) both (Mobile | Web | Desktop) videos subscribe to my Youtube channel, 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.

Sharing is caring.

PS: Don’t forget to drop 50 CLAPS and SHARE to your friends

---