Iframe-resizer: 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