Vue.js Instagram API Tutorial to Embed Posts on Website Using vue-instagram-embed Library in Javascript Full Tutorial For Beginners

Vue.js Instagram API Tutorial to Embed Posts on Website Using vue-instagram-embed Library in Javascript Full Tutorial For Beginners
  • Post author:
  • Post category:Vue
  • Post comments:0 Comments

 

Welcome folks today in this blog post we will be embedding instagram posts in vue.js using instagram api and vue-instagram-embed library. All the source code of the application is given below.

 

 

 

 

 

 

Get Started

 

 

In order to get started we need to install the following library by issuing the npm command

 

npm i vue-instagram-embed

 

After installing it just use the following code to include the library inside vue.js project and use it

 

import InstagramEmbed from 'vue-instagram-embed';

export default {
  components: {
    InstagramEmbed
  }
}

 

 

Here we are including the library in the above section of code. And then we can use it inside our vue.js component as shown below

 

<instagram-embed
  :url="'https://www.instagram.com/p/Bs_yHwHBjKo/'"
  :max-width=500
/>

 

See also  Vue.js Render PDF Documents Using vue-pdf Library Full Tutorial with Examples

 

Here in the above section of code we are providing the instagram post url and the width of the post Here you can play with the library options

There are a list of options that the library supports

 

Props

Property Type Default
url String
max-width Number 320
class-name String
hide-caption Boolean false

 

Leave a Reply