/vue-instagram

Instagram's feed fetcher component based on Vue.js

Primary LanguageVueMIT LicenseMIT

vue-instagram

npm npm npm npm

Instagram's feed fetcher component based on Vue.

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/vue-instagram"></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" username="kevinongko" :count="5">
    <template slot="feeds" scope="props">
      <li class="fancy-list"> {{ props.feed.link }} </li>
    </template>
    <template slot="error" scope="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

Props Description Type Required
token Instagram's access token String true
username Instagram's username (token's owner) String true
count Numbers of feed to fetch Number true

License

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