- Notifications
You must be signed in to change notification settings - Fork5
chantouchsek/vue-iframes
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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
- Vue.js (^v2.1.4)
Supports on Vue >= 2 & <3
npm install vue-iframesyarn add vue-iframesimportVuefrom'vue'importVueIframefrom'vue-iframes'Vue.use(VueIframe)
- Create
~/plugins/vue-iframes.js
importVuefrom'vue'importVueIframefrom'vue-iframes'Vue.use(VueIframe)
importVuefrom'vue'importVueIframefrom'vue-iframes/dist/vue-iframes.ssr'Vue.use(VueIframe)
plugins:[// ...{src:'~/plugins/vue-iframes'},// ...]
plugins:[// ...{src:'~/plugins/vue-iframes',mode:'client'},// ...]
Or another short way
exportdefault{// ...modules:['vue-iframes/nuxt']// ...}
<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>exportdefault { name:'MyIframe',data: ()=> ({ myIframe:null }), methods: {onLoad(frame) {this.myIframe=frame.contentWindow } } }</script>
| 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 |
| Name | Description |
|---|---|
| iframe-load | When the iframe is loaded |
| load | When the iframe is ready |
Pull requests are welcome, or open up an issue if you have ideas for additional functionality, new features or bugs.
Twitter@DevidCs83
About
A Vue js component for creating super fast loading, non-blocking iframes.
Resources
Stars
Watchers
Forks
Packages0
No packages published