vue-instagram-infinite-loader
v1.0.1
Published
An Instagram infinite scroll loader for Vue
Downloads
4
Maintainers
Readme
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