Connecting Nuxt front-end to Adonis 5 API

#adonis #nuxt #tutorial #api

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