Vue 2

The following guide describes how to make minimal Vue 2 Directive for use with iframe-resizer. For Vue 3, it is recommended to use the Vue3 Component, which provides access to the full iframe-resizer feature set.

Install Framework API

Install the core iframe-resizer Framework API with the following command.

npm install @iframe-resizer/core --save

pnpm add @iframe-resizer/core

yarn add @iframe-resizer/core

Create Vue2 Directive

Create the following Vue directive, which will give you basic iframe-resizer functionality.

import Vue from "vue";
import connectResizer from "@iframe-resizer/core";

Vue.directive("iframeResizer", {
  bind: function (el, { value = {} }) {
    connectResizer(value)(el);
  },
  unbind: function (el) {
    el.iframeResizer.disconnect();
  },
});

and then include it on your page as follows.

<iframe
  v-iframeResizer
  license="xxxx"
  src="myiframe.html"
  waitForLoad
></iframe>

<style>
iframe {
  width: 100%;
  height: 100vh;
}
</style>

Thanks to Aldebaran Desombergh for this example.

Setting the initial height of the iframe to 100vh makes the loading in of the iframe appear smoother to the user, as they will only see the content below the iframe once it has completed loading and undergone it’s initial sizing.

Child page

You will then need to install the @iframe-resizer/child package on every page in the iframe.

Once everything is setup, keep an eye on the browser console, as iframe-resizer will warn about any potential issues it detects and provide advice on how to fix them. For more details on using iframe-resizer see the Advanced Setup and Trouble Shooting sections of this guide.