Using The Movie Database (TMDb) with Vue.js and axios

We are going to create an application where we can search for movies. Here for, we are going to use Vue.js, The Movie Database (TMDb) and axios.

Getting started

Fire up your terminal and type the following:

$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev
$ npm install axios

This will create a new Vue application and install axios. Webpack will start serving your project on port 8080.

Let’s clean up!

Open your project in your favourite text editor. Open /src/App.vue and delete the <HelloWorld/> component and the <img> tag on line 3 and 4.

Now let’s make our own component in the /src/components folder and let’s call it Search.vue.

Inside of the Search.vue component, paste the following code:

<template>
  <div class="search">
    <h1>Search</h1>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'search',
  data () {
    return {

    }
  }
}
</script>

This is a starting template for our component. Let’s hop back to /src/App.js and add our newly created component.
You can copy and paste the following code block:

<template>
 <div id='app'>
  <Search/>
 </div>
</template>
<script>
import Search from './components/Search'
export default {
 name: 'App',
 components: {
  Search
 }
}
</script>

Now you should see something similar to this:

Let’s listen to the input

Now we have this, we can move on and add some more code. We are going to create a movie search application, so we need an input element to search with.

Let’s add the input element under our <h1> element in Search.vue:

<input type='text' v-model='query' @keyup='getResult(query)'>

At each keyup, we are going to run the getResult function. So let’s declare that in our script. Copy the following code and replace it with your <script> tag:

<script>
import axios from 'axios'
export default {
 name: 'search',
 data () {
 return {
  query: '',
}
 },
 methods: {
  getResult(query) {
   console.log(query)
  }
 }
}
</script>

As you can see, we have added a function that is going to log the search query on each keyup in the console. If everything is well done, we should see the search queries in the console.

HTTP requests using axios

Now let’s change our getResult method so we can perform HTTP requests (replace the hashtags with your own API key of TMDb):

<template>
  <div class='search'>
     <h1>Search</h1>
     <input type='text' v-model='query' @keyup='getResult(query)'>
  </div>
</template>
<script>
import axios from 'axios'
export default {
 name: 'search',
 data () {
  return {
   query: '',
   results: ''
  }
 },
 methods: {
  getResult(query) {
   axios.get('https://api.themoviedb.org/3/search/movie?  api_key=##################query=' + query).then(response => { this.results = response.data.results })
     console.log(this.results)
   }
 }
}
</script>

This will perform GET requests and pass the results to our results array. Now we can see the results of our GET requests in the console, but still not on our page. Let’s do that now!

Showing the results

We are going to loop over our results array and print the results on our page. We need a div where we can use the v-for directive and render our results. Inside of that, we can place a <p> and <img> tag to show the title and the poster of the movie. Copy the following and replace it with your <template> on /src/components/Search.vue:

<template>
 <div class='search'>
  <h1>Search</h1>
  <input type='text' v-model='query' @keyup='getResult(query)'>
  <div v-for='result in results' :key='result.id'>
   <p>{{result.title}}</p>
   <img v-bind:src="'http://image.tmdb.org/t/p/w500/' +    result.poster_path" width='100px'>
  </div>
 </div>
</template>

Congratulations, you made it! 👏👏👏