Fetch Instagram feeds with vue-instagram

vue-instagram

Use this Vue component to add Instagram feed to your page (requires permissions). With Vue-Instagram you can display a specific number of Instagram posts (Instagram basic permission limits to 20) from a profile and display them in any way you like.

Example

Installation

$ npm install vue-instagram --save

Style your feeds using scoped slots

<vue-instagram token="youraccessTokenHere" username="UsernameHere" :count="3">
    <template slot="feeds" scope="props">
        <li class="instagram-media fancy-list"> {{ props.feed.link }} </li>
        <img :src=" props.feed.images.standard_resolution.url " alt="">
    </template>
    <template slot="error" scope="props">
        <div class="fancy-alert"> {{ props.error.error_message }} </div>
    </template>
</vue-instagram>

<script>
import VueInstagram from 'vue-instagram'

export default {
  name: 'App',

  components: {
    VueInstagram
  }
}
</script>

Notes: this example will render as bellow. Before you begin, you must create an access token, which requires a instagram profile, and then register a new client and authorize your app. Instructions and details can be found on the Instagram Developers pages. You can check Vue-dev tools to see the response data.

Live Demo & GitHub repo.