VueJS Examples

Best VueJS Iframe Libraries

A curated list of the best Iframe libraries for VueJS.

1. vue-frame

A simple component Vue 2.x for prototyping interfaces with iframes.

Step 1: Install

Using npm:

npm install --save vue-frame

Using yarn:

yarn add vue-frame

Step 2: Import

import VueFrame from 'vue-frame'
export default {
  components: { VueFrame },
  data () {
    return { /*...*/ }
  },
  methods: { /*...*/ }
}

Step 3: Usage

This is a project for vue.

<div id="vue-frame">
   <vue-frame text="VueJS" url="https://vuejs.org" frame="myframe" type="button" class="form-control"></vue-frame>
   <vue-frame text="Api Vue" url="https://vuejs.org/v2/api" frame="myframe" type="a"></vue-frame>
   <br />

   <iframe id="myframe" width="800"></iframe>
</div>

<script src="/dist/vue-frame.js"></script>

The rendered elements look like this:

CURRENTLY RECORDING

Read more


2. vue-friendly-iframe

Vue js component for creating dynamic async iframes based on Aaron Peter's article.

Requirements

Step 1: Installation and Usage

npm install vue-friendly-iframe --save-dev

Step 2: Use:

import Vue from 'vue';
import VueFriendlyIframe from 'vue-friendly-iframe';

Vue.use(VueFriendlyIframe);

Add the component to your HTML:

<vue-friendly-iframe :src="example1Form.src" @load="onLoad"></vue-friendly-iframe>

Read more


3. vue-lazy-loading

A vue plugin to better supporting lazy loading for image and iframe.

The plugin will preferentially use native image and iframe lazy-loading, if the browser does not support it, it will be implemented through IntersectionObserver

Step 1: Installation

yarn add vue-lazy-loading
# or
npm i vue-lazy-loading

Step 2: Usage

// Vue 3.X
import { createApp } from 'vue'
import LazyLoading from 'vue-lazy-loading'

createApp(App)
  .use(LazyLoading)
  .mount('#app')

// Vue 2.X
import Vue from 'vue'
import LazyLoading from 'vue-lazy-loading'

Vue.use(LazyLoading)
<template>
  <!-- Setting a fixed size is better for browser loading -->
  <!-- Replace src with v-lazy -->
  <img v-lazy="'img.jpg'" width="536" height="354" />

  <!-- Set loading="lazy" is not required -->
  <iframe v-lazy="'iframe.html'" loading="lazy" width="1000" height="500" />

  <!-- Load right away with set loading="eager" -->
  <iframe v-lazy="'iframe.html'" loading="eager" width="1000" height="500" />

  <!-- Pass in the Relative URLs like this -->
  <img v-lazy="logo" width="100" height="100" />

  <!-- Replace srcset with v-lazy:set or v-lazy:srcset -->
  <img v-lazy="'img.jpg'" v-lazy:set="'img.jpg 1000w, img-2x.jpg 2000w'" width="536" height="354" />

  <!-- Replace background-image with v-lazy:bg -->
  <div v-lazy:bg="logo">background</div>

  <!-- Replace background-image: image-set with v-lazy:bgset -->
  <div v-lazy:bgset="'url(bg.img) 1x, url(bg-2x.img) 2x'">background</div>
</template>

<script>
import logo from './assets/logo.png'

export default {
  data() {
    return {
      logo: logo
    }
  }
}

Read more