Online demo about vue-instagram HOT 4 CLOSED

<template>
  <div id="app">
    <vue-instagram token="yourtokenhere" username="yourusername" :count="5">
      <template slot="feeds" scope="props">
        <div class="card">
          <div class="card-image">
            <figure class="image is-4by3">
              <img :src="props.feed.images.low_resolution.url" alt="Image">
            </figure>
          </div>
          <div class="card-content">
            <div class="media">
              <div class="media-left">
                <figure class="image" style="height: 40px; width: 40px;">
                  <img :src="props.feed.user.profile_picture" alt="Image">
                </figure>
              </div>
              <div class="media-content">
                <p class="title is-4">{{ props.feed.user.full_name }}</p>
                <p class="subtitle is-6">@ {{ props.feed.user.username }}</p>
              </div>
            </div>

            <div class="content">
              {{ props.feed.caption.text }}
              <br>
              <small>likes: {{ props.feed.likes.count }}</small>
              <small>comments: {{ props.feed.comments.count }}</small>
              <strong style="float: right"><a :href="props.feed.link" target="_blank">link</a></strong>
            </div>
          </div>
        </div>
      </template>
    </vue-instagram>
  </div>
</template>

<script>
import VueInstagram from 'vue-instagram'

export default {
  name: 'app',

  components: {
    VueInstagram
  }
}
</script>

<style lang="sass">
@import "node_modules/bulma/bulma.sass"
#app
  max-width: 320px
  margin: auto

.card
  margin-top: 2rem
  margin-bottom: 2rem
</style>