Skip to content
iframe-resizer

Vue

This page contains a setup guide for Vue 3. If you are still using version 2 of Vue, then their is also a guide for creating a simple Vue 2 Directive.

Install

Install this package with the following command.

Terminal window
npm install @iframe-resizer/vue --save

You will also need to ensure that the @iframe-resizer/child package has been loaded into every page that loads into the iframe.

Usage

The <IframeResizer /> component can be passed all<iframe> attributes, along with options and events from iframe-resizer. Events need to be in the Vue format @on-ready(func).

<IframeResizer
  {iframe attributes}
  {iframe-resizer options}
  {iframe-resizer events}
/>

Typical setup

The normal configuration is to have the iframe resize when the browser window changes size or the content of the iframe changes. To set this up you need to configure one of the dimensions of the iframe to a percentage and tell the library to only update the other dimension. Normally you would set the width to 100% and have the height scale to fit the content.

<script setup>
  import IframeResizer from '@iframe-resizer/vue/sfc'
</script>


<template>
  <IframeResizer
    license="xxxx"
    src="http://anotherdomain.com/iframe.html"
    @on-ready="() => console.log('onReady')"
  />
</template>


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

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.

Was this page useful?