vi

vue-iframes

A Vue js component for creating super fast loading, non-blocking iframes.

Showing:

Popularity

Downloads/wk

576

GitHub Stars

14

Maintenance

Last Commit

15d ago

Contributors

6

Package

Dependencies

2

Size (min+gzip)

5.9KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

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' },
    .....
]

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

PropDescriptionRequiredDefault
srcThe iframe resourcetrue
crossoriginCross originfalseanonymous
targetTarget of iframefalse_parent
classNameIframe's classfalsenull
allowIframe's allowfalse'camera ; geolocation ; microphone ; autoplay '
nameIframe's namefalse'vue-iframes'
frame-idIframe's idfalse'vue-iframes'
scrollingSet scrolling to iframefalsenull
widthSet width to iframefalsenull
heightSet height to iframefalsenull

Events

NameDescription
iframe-loadWhen the iframe is loaded
loadWhen 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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100