Vue-iframes NPM

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