Vue tutorial: Crear un componente

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>
export default {
  data () {
    return {
      movies: [
        {
          "vote_average":7,
          "title":"Wonder Woman",
          "poster_path":"\/gfJGlDaHuWimErCr5Ql0I8x9QSy.jpg",
          "overview":"An Amazon princess comes to the world of Man to become the greatest of the female superheroes.",
          "release_date":"2017-05-30"
        },
        {
          "vote_average":8.1,
          "title":"Interstellar",
          "poster_path":"\/nBNZadXqJSdt05SHLqgT0HuC5Gm.jpg",
          "overview":"Interstellar chronicles the adventures of a group of explorers who make use of a newly discovered wormhole to surpass the limitations on human space travel and conquer the vast distances involved in an interstellar voyage.",
          "release_date":"2014-11-05"
        }
      ]
    }
  }
}
</script>

routerIndex.js

//src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ]
})