Nuxt exemple

[frederic117]

Hello I would like to use iframe-resizer with nuxt to resize a cross domain iFrame Do someone have an exemple with nuxt please?

[davidjbradshaw]

Not sure how that would differ from the VueJS example. But if it is different, I'd be happy to add it to the docs.

[vondras]

It's not significantly different. If you're looking to register the directive globally, the conventional way is to put the directive shown in the VueJS example in a file under the plugins directory:

// plugins/iframe-resize.js
import Vue from 'vue'
import iframeResize from 'iframe-resizer/js/iframeResizer'

Vue.directive('resize', {
  bind: function(el, { value = {} }) {
    el.addEventListener('load', () => iframeResize(value, el))
  }
})

then register the plugin in nuxt.config.js:

// nuxt.config.js

export default {
  plugins: [
    { src: '~/plugins/iframe-resize', mode: 'client' }
  ]
}

If you only want to use it locally, you could register it under the Vue component's directives property:

import iframeResize from 'iframe-resizer/js/iframeResizer';

export default {
  directives:  {
    resize: {
      bind (el, { value = {} }) {
        el.addEventListener('load', () => iframeResize(value, el))
      }
    }
  }
}

Check the Vue.js docs for more on custom directives. Instead of a directive, you could also make a custom component and use the component's API as a gateway to iframe-resizer's, but that's more of a general Vue.js consideration than anything specific to Nuxt.js.

[mkruip05]

I would love this as well, is there any example or solution for a Nuxt application?

[ah-lait]

I'm having trouble wit this - I've tried implementing like suggested by @vondras. I don't get any errors besides the log from the "v-resize='{log: true}'. In the browser, nothing happens

implementation:

		<iframe
			id="iFrameResizer0"
			v-resize="{ log: true }"
			width="560"
			height="315"
			src="https://www.youtube.com/embed/VR43cu5Vvsw"
			title="YouTube video player"
			frameborder="0"
			allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
			allowfullscreen
		></iframe>

[iFrameSizer][Host page: iFrameResizer0] [init] Sending msg to iframe[iFrameResizer0] (iFrameResizer0:8:false:true:32:true:true:null:bodyOffset:null:null:0:false:parent:scroll:true) targetOrigin: https://form.jotform.com

[Archetipo95]

Any nuxt 3 examples?

[guilherme-moneri]

After a whole morning of trial and error, I used @vondras method but the real problem was that I forgot to place the iframeResizer.contentWindow.min.js file in my iFrame file script. Also I needed to host the contentWindow file (I just uploaded it to the same bucket as the file I use for the iFrame). Reading the documentation patiently would've saved me a couple hours.

[vfcoding]

To use this package with Nuxt3, create a new plugin in your project's plugins directory. Define a new Nuxt plugin and use the Vue resize directive to add the iframeResize method.

import iframeResize from "iframe-resizer/js/iframeResizer";
import iframeResizeContentWindow from "iframe-resizer/js/iframeResizer.contentWindow.js";
// eslint-disable-next-line no-undef
export default defineNuxtPlugin((NuxtApp) => {
  NuxtApp.vueApp.use(iframeResizeContentWindow);
  NuxtApp.vueApp.directive("resize", {
    bind: function (el, { value = {} }) {
      el.addEventListener("load", () => iframeResize(value, el));
    }
  });
});

[mathieuCatapulpe]

@vfcoding I tried your code I get no errors whatsoever but nothing happens, I don't get logs in the console. Is there anything else to do apart from setting the plugin and adding v-resize="{ log: true }" to the iframe ?

[mathieuCatapulpe]

After some digging I managed to make it work with this code

import iframeResize from "iframe-resizer/js/iframeResizer";

// eslint-disable-next-line no-undef
export default defineNuxtPlugin((NuxtApp) => {
    NuxtApp.vueApp.use(iframeResize);

    NuxtApp.vueApp.directive("resize", {
        mounted(el, binding) {
            el.addEventListener("load", () => iframeResize(binding, el));
        },
    });
});