Embed Instagram Posts Into Your Vue.js App – instaEmbed.js

Install & Download:

Description:

A Vue.js component that makes it easier to embed an Instagram post into your web app.

How to use it:

1. Import the Vue Instagram Embed component.

import InstagramEmbed from 'vue-instagram-embed';

2. Register the component.

export default {
  components: {
    InstagramEmbed
  }
}

3. Add the component to the app template and specify the path to the Instagram post you want to embed into the app.

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

4. Determine the max-width of the Instagram image. Default: 320.

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

5. Determine whether to hide captions. Default: true.

<instagram-embed
  :url="'https://www.instagram.com/p/Bs_yHwHBjKo/'"
  :hide-caption=true
/>

5. All default props.

url: {
  type: String,
},
maxWidth: {
  type: Number,
  default: 320
},
hideCaption: {
  type: Boolean,
  default: false
},
omitScript: {
  type: Boolean,
  default: true
},
className: {
  type: String
}

Preview: