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
Part 2: Setting up Adonis v5 with PostgreSQL
Part 3: Creating a REST API using Adonis v5
Part 4: Connecting Nuxt front-end to Adonis 5 API
Part 5: Deploying a multi-server app with Cleavr

Frameworks and tools used

• Front-end: NuxtJS and TailwindCSS/UI
• Back-end: AdonisJS
• Database: PostgreSQL
• Server provision and deployment: Cleavr

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

Back in themovies 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

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:

  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 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.

<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.

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.

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

We'll perform similar steps for our movie details page, _title.vue.

Within <script> tags, add the following:

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.

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

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.