Connecting Nuxt front-end to Adonis 5 API 
Tags: adonis, nuxt, tutorial, api
Published: 2020-09-23 16:06:05

> In this multi-part tutorial, we'll create and deploy a multi-server architecture web application. 

> Part 1: [Creating a front-end using NuxtJS and TailwindCSS](https://dev.to/armiedema/create-and-deploy-a-multi-server-app-w-adonis-nuxt-and-cleaver-part-1-set-up-front-end-5185)
> Part 2: [Setting up Adonis v5 with PostgreSQL](https://dev.to/armiedema/setting-up-adonis-v5-with-postgresql-adl)
> Part 3: [Creating a REST API using Adonis v5](https://dev.to/armiedema/creating-a-rest-api-using-adonis-v5-4n1p)
> Part 4: Connecting Nuxt front-end to Adonis 5 API
> Part 5: [Deploying a multi-server app with Cleavr](https://dev.to/armiedema/deploying-a-multi-server-app-with-cleavr-3jh3)

#### Frameworks and tools used
* Front-end: [NuxtJS](https://nuxtjs.org/) and [TailwindCSS/UI](https://tailwindcss.com/)
* Back-end: [AdonisJS](https://adonisjs.com/) 
* Database: [PostgreSQL](https://www.postgresql.org/)
* Server provision and deployment: [Cleavr](https://cleavr.io)

# Part 4 - Connecting Nuxt front-end to Adonis 5 API

Back in [themovies](https://github.com/armgitaar/themovies/tree/part-4) project, we'll now update the Nuxt front-end to connect with our Adonis 5 API. 

## Fetch data from API for our Nuxt `index.vue` page using Axios

{% youtube ELST3NG1Mhw %}

Let's open `index.vue`, import the Axios library, and then fetch the list of movies data from our API. 

Locate the `<script>` section and add the following:

```javascript
  import axios from 'axios'
  export default {
    async asyncData() {
      const { data } = await axios.get('http://0.0.0.0:3333/movies')
      return {
        movies: data
      }
    }
  }
```
We're using Nuxt's [Async Data](https://nuxtjs.org/guide/async-data) in conjunction with async/await method in the above example.

We'll also take note that once we deploy the app, we'll need to update the url. 

You can also see that we assign the data that is returned to `movies`. We can now use the `movies` array to dynamically fill in the contents of our movie list. 

If you look at the `<template>` section, we'll keep one `<li>` set and remove the other `<li>` sections as we'll use a for loop to iterate through the array, creating the other list items. 

```html
<li v-for="movie in movies" class="...">
```

Now, let's swap out the raw movie info text with our dynamic placeholders: 
* `movie.id `
* `movie.poster_image`
* `movie.title`
* `movie.release_year`
* `movie.genres`
* `movie.top_billed`
* `movie.movie_description`

You can view the full html for this section on [GitHub](https://github.com/armgitaar/themovies/blob/part-4/pages/index.vue).

To check our work, let's run both the `movieapi` and `themovies` projects. `cd` into the projects and run the appropriate commands to run the projects. If the API is running on a different port, then update the port in `themovies` so that we can interface with the API. 

![CleanShot 2020-09-20 at 12.42.20@2x](https://dev-to-uploads.s3.amazonaws.com/i/eb0uzrnmnsljgn9l1qt9.png)

Awesome! We now have the data dynamically being called from our Adonis API and displayed in our Nuxt app. 🤩  

## Fetch data from the API for our Nuxt details page

{% youtube kSc4_Lqw51M %}

We'll perform similar steps for our movie details page, [_title.vue](https://github.com/armgitaar/themovies/blob/part-4/pages/_title.vue).

Within `<script>` tags, add the following: 

```javascript
import axios from 'axios'

  export default {
    async asyncData({ params }) {
      const { data } = await axios.get(`http://0.0.0.0:3333/movies/${params.title}`)
      return {
        movie: data
      }
    }
  }
```

The above passes the movie title id from the url and adds it to the get method to pull the data only for the movie with the provided id. 

We'll assign the returned data to the `movie` array. 

Just like in the previous step, we can now swap out the placeholder data with the movie placeholder so that the content is dynamically placed. 

View the resulting updates on [GitHub](https://github.com/armgitaar/themovies/blob/part-4/pages/_title.vue).

And, now let's test our work by checking the browser 

![CleanShot 2020-09-20 at 12.49.01@2x](https://dev-to-uploads.s3.amazonaws.com/i/4jxisbqjnr6urnm2csx9.png)

We did it! 🙌

Now that we have the front-end and back-end all built out, we can now deploy our app onto multiple servers using Cleavr in [step 5]().
 
---
Following along? View Part 4 on GitHub at https://github.com/armgitaar/themovies/tree/part-4. 

[Watch the full tutorial series uninterrupted on Youtube.](https://www.youtube.com/playlist?list=PLApnZzwJN4G5gHKMr4owbFKUdAtdwPB-X)