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
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' },
.....
]
nuxt.config.js
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"
/>
</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