vue-instagram-infinite-loader v1.0.1

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

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