# vue-instagram-infinite-loader

> An Instagram infinite scroll loader for Vue

Latest version **1.0.1** (published 2019-06-06) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install vue-instagram-infinite-loader
pnpm add vue-instagram-infinite-loader
yarn add vue-instagram-infinite-loader
bun add vue-instagram-infinite-loader
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2019-06-06 |
| First published | 2019-06-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 42.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | André Casal |
| Maintainers | andrecasal |
| Keywords | vue, instagram, infinite, scroll, loader |

## Links

- npm: https://www.npmjs.com/package/vue-instagram-infinite-loader
- npm.io page: https://npm.io/package/vue-instagram-infinite-loader

## Dependencies (2)

- [lodash](https://npm.io/package/lodash.md) ^4.17.4
- [browser-jsonp](https://npm.io/package/browser-jsonp.md) ^1.1.5

## Recent versions

- 1.0.1 (latest) — 2019-06-06
- 1.0.0 — 2019-06-06

## README

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

[![npm](https://img.shields.io/npm/v/vue-instagram.svg)](https://www.npmjs.com/package/vue-instagram)
[![npm](https://img.shields.io/npm/dt/vue-instagram.svg)](https://www.npmjs.com/package/vue-instagram)
[![npm](https://img.shields.io/npm/dm/vue-instagram.svg)](https://www.npmjs.com/package/vue-instagram)
[![npm](https://img.shields.io/npm/l/vue-instagram.svg)](http://opensource.org/licenses/MIT)

Instagram's feed fetcher component based on [Vue](https://vuejs.org/).

Fetch instagram feed via [`GET /users/self`](https://www.instagram.com/developer/endpoints/users/)

**Works with Vue 2.\***

## Installation

### Install via CDN

```html
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-instagram"></script>

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

### Install via NPM

```sh
$ npm install vue-instagram --save
```

## Usage

Style your feeds using [scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots)

```vue
<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](http://opensource.org/licenses/MIT)

---
_Source: https://npm.io/package/vue-instagram-infinite-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._