Spotify Gridsome

Index.vue

<template>
  <div>

    <h1 v-html="$page.oneGraph.spotify.me.id" />
 		<ul>
      <li v-for="(item, index) in $page.oneGraph.spotify.me.playlists" :key="index"> 
			<g-link :to="item.externalUrls.spotify">{{item.name}}</g-link>
			<img :src="item.images[0].url" :height="300" :width="300" />
      </li>
    </ul>
  </div>
</template>


<page-query>
{
  oneGraph {
    spotify {
      me {
        id
        playlists(limit: 10) {
          id
          name
          images {
          url
          height
          width
        }
          externalUrls {
            spotify
          }
          tracks {
            id
            name
            durationMs
            artists {
              id
              name
            }
          }
        }
      }
    }
  }
}

</page-query>

<script>
export default {
  metaInfo: {
    title: 'Hello, world!'
  }
}
</script>

<style>
li {
  margin-bottom: 1.5rem;
}
</style>