Vue tutorial: Comunicación con la api

api.js

//src/services/api.js

import axios from 'axios'

const host = 'https://api.themoviedb.org/3'
const apiKey = 'api_key=4bcacd5bcdf6d2ae0125c890eab6e4ae';

export default {
  getMovies() {
    return axios.get(`${host}/discover/movie?${apiKey}`)
      .then(function (response) {
        return response.data.results;
      })
      .catch(function (error) {
        console.log(error);
      });
  }
}

Home.vue

<template>
  <div>
    <article v-for="movie in movies">
      <img :src="`https://image.tmdb.org/t/p/w500/${movie.poster_path}`" alt="">
      <h4>{{ movie.title }}</h4>
      <p>{{movie.vote_average}}</p>
    </article>
  </div>
</template>

<script>
import api from '@/services/api'

export default {
  data () {
    return {
      movies: []
    }
  },
  created() {
    api.getMovies().then(data => {
      this.movies = data
    })
  }
}
</script>