vue-instagram

Currently this library is unusable because of Instagram's API changes

Instagram's feed fetcher component based on Vue.

Fetch instagram feed via GET /users/self

Works with Vue 2.*

Demo

My Instagram's feed

Installation

Install via CDN

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/[email protected]"></script>

<script>
  Vue.use(VueInstagram.default)
</script>

Install via NPM

$ npm install vue-instagram --save

Register as Component

import Vue from 'vue'
import VueInstagram from 'vue-instagram'

export default {
  name: 'App',

  components: {
    VueInstagram
  }
}

Register as Plugin

import Vue from 'vue'
import VueInstagram from 'vue-instagram'

Vue.use(VueInstagram)

Usage

Style your feeds using scoped slot

<template>
  <vue-instagram token="accessTokenHere" :count="5" :tags="['hashtag1', 'hashtag2']" mediaType="image">
    <template v-slot:loading="props">
      <h1 v-if="props.loading" class="fancy-loading">Loading, please wait...</h1>
    </template>
    <template v-slot:feeds="props">
      <li class="fancy-list"> {{ props.feed.link }} </li>
    </template>
    <template v-slot:error="props">
      <div class="fancy-alert"> {{ props.error.error_message }} </div>
    </template>
  </vue-instagram>
</template>

<script>
import VueInstagram from 'vue-instagram'

export default {
  name: 'App',

  components: {
    VueInstagram
  }
}
</script>

Props

License

Vue-Instagram is open-sourced software licensed under the MIT license

Support

Hello, I'm Kevin the maintainer of this project in my free time (which is getting lessen these days), if this project does help you in any way please consider to support me. Thanks 😃

• One-time donation via Paypal