Vue and Nuxt
Damon Chen avatar
Written by Damon Chen
Updated over a week ago

We are going to use the iframe-resizer library. You can install it via npm command:

npm i iframe-resizer –save

Then I made a plugin with the following code:

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

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

And added it as a plugin to my config file:

{ src: '~/plugins/iframe-resize', mode: 'client' }

Finally, I added it to a page like this:

v-resize="{ log: true }"

You will find the YOUR_EMBED_URL in the embed code

notion image

In the embed code part, check the <iframe> tag, and find the data-src parameter

<iframe src="" id="testimonialto-flurly-demo-light" data-src="" frameborder="0" scrolling="no" width="100%"></iframe>

Copy the string in the data-src parameter, in the sample case, you just need to copy

Then paste the URL in the iframe src prop.

That's it! 🥳

If you still have a question, please reach out on the live chatbox on the 💬

Did this answer your question?