Skip to content

Latest commit

 

History

History
138 lines (107 loc) · 3.66 KB

README.md

File metadata and controls

138 lines (107 loc) · 3.66 KB

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

Latest Version on NPM Software License npm npm

Requirements

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