vue-instagram-infinite-loader

vue-instagram forked from https://github.com/kevinongko/vue-instagram

Instagram's feed fetcher component based on Vue.

Fetch instagram feed via GET /users/self

Works with Vue 2.*

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

Usage

Style your feeds using scoped slot

<template>
	<vue-instagram ref="instagram" v-if="ready" v-bind:token="accessToken" :count="9" :tags="['hashtag1', 'hashtag2']" mediaType="image">
		<template slot="feeds" slot-scope="props" class="instagram">
			<a :href="props.feed.link" target="_blank" class="vue-instagram">
				<p>{{ props.feed.caption.text }}</p>
				<div class="vue-instagram__image" :style="{ backgroundImage: `url('${props.feed.images.standard_resolution.url}')` }"></div>
			</a>
		</template>
		<template slot="error" slot-scope="props">
			<div class="fancy-alert">{{ props.error.error_message }}</div>
		</template>
	</vue-instagram>
</template>

<script>
import VueInstagram from 'vue-instagram';

export default {
	name: 'Instagram',
	components: {
		VueInstagram,
	},
	data() {
		return {
			accessToken: '',
		};
	},
};
</script>

Props

Props	Description	Type	Required
token	Instagram's access token	String	true
count	Numbers of feed to fetch	Number	true
tags	Filter profile's feed by hastag	Array	false
mediaType	Filter profile's feed by media type: image or video	String	false

Methods

Notice the ref="instagram" on the <vue-instagram> element. You can now call this.$refs.instagram.hasNextPage() and this.$refs.instagram.getNextPage() to automatically get more content from the instragram API. If there is no next page, this.$refs.instagram.hasNextPage() will return false. this.$refs.instagram.getNextPage() will automatically get more items on the wall.

License

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