insta-vue

[DEPRECIATED] Insta-vue

[Warning] Insta-vue will no longer function due to the new CORS policy Instagram has added to the endpoint the component used to get data. Please migrate to using Instagram's basic display API here: https://developers.facebook.com/docs/instagram-basic-display-api

Insta-vue is a simple vue component for displaying instagram account or hashtag post images.

Github Repo

NPM

Installation

Insta-vue can be installed with both npm and yarn as usual.

npm install insta-vue

yarn add insta-vue

And then can be imported into your project.

import 'InstaVue' from "insta-vue";

Configuration

Insta-vue takes the following props for configuration:

Prop	Type	Default	Function
tag	String	N/A, Required	The username or hashtag that you would like posts to be pulled from hashtags should be prefixed with '#'.
quantity	Integer	4	The number of posts you would like to be shown.
cols	Integer	4	The number of posts to be shown in a row before wrapping.
links	Boolean	false	When true, clicking on a post image will link to it on Instagram
descriptions	Boolean	false	When true, post captions will be shown for each post.

Error Handling

Insta-vue uses an emit function that fires when it fails to fetch Instagram posts. This can happen due to Instagram throttling requests and can be captured on the component using @error

Example

<template>
    <div id="app">
        An account feed, latest 6 posts, 5 columns. 
        <insta-vue tag="redsquirrelstudio" 
                   :quantity="6" 
                   :cols="5">
        </insta-vue>
        
        A hashtag feed, with defaults and error handling
        <insta-vue tag="#programming" @error="log">
        </insta-vue>
    </div>
</template>

<script>
import 'InstaVue' from 'insta-vue';

export default{
    components:{
        InstaVue,
    },
    methods: {
      log(error){
        console.log(error);
      }
    }
}
</script>