vue-iframes

Vue.js component for creating dynamic async iframes based on Aaron Peter's article: http://www.aaronpeters.nl/blog/iframe-loading-techniques-performance?%3E#dynamic

Requirements

• Vue.js (^v2.1.4)

Vue Support

Supports on Vue >= 2 & <3

Installation and Usage

npm install vue-iframes

yarn add vue-iframes

import Vue from 'vue'
import VueIframe from 'vue-iframes'

Vue.use(VueIframe)

Nuxt Support

• Create ~/plugins/vue-iframes.js

import Vue from 'vue'
import VueIframe from 'vue-iframes'

Vue.use(VueIframe)

Nuxt SSR

import Vue from 'vue'
import VueIframe from 'vue-iframes/dist/vue-iframes.ssr'

Vue.use(VueIframe)

nuxt.config.js

plugins: [
    // ...
    { src: '~/plugins/vue-iframes' },
    // ...
]

plugins: [
    // ...
    { src: '~/plugins/vue-iframes', mode: 'client' },
    // ...
]

Or another short way

export default {
    // ...
    modules: ['vue-iframes/nuxt']
    // ...
}

Components

<template>
  <vue-iframe
      :src="src"
      allow="camera *; geolocation *; microphone *; autoplay *"
      frame-id="my-ifram"
      @load="onLoad"
      name="my-frame"
      width="150px"
      height="200px"></vue-iframe>
</template>

<script>
  export default {
    name: 'MyIframe',
    data: () => ({
      myIframe: null
    }),
    methods: {
      onLoad(frame) {
        this.myIframe = frame.contentWindow
      }
    }
  }
</script>

Props

| Prop | Description | Required | Default | |-----------------|-------------------------|----------|-----------------------------------------------------| | src | The iframe resource | true | | | crossorigin | Cross origin | false | anonymous | | target | Target of iframe | false | _parent | | className | Iframe's class | false | null | | allow | Iframe's allow | false | 'camera *; geolocation *; microphone *; autoplay *' | | name | Iframe's name | false | 'vue-iframes' | | frame-id | Iframe's id | false | 'vue-iframes' | | scrolling | Set scrolling to iframe | false | null | | width | Set width to iframe | false | null | | height | Set height to iframe | false | null |

Events

| Name | Description | |-----------------|---------------------------| | iframe-load | When the iframe is loaded | | load | When the iframe is ready |

Contributing

Pull requests are welcome, or open up an issue if you have ideas for additional functionality, new features or bugs.

Contact

Twitter @DevidCs83