{"id":12478,"library":"vue-friendly-iframe","title":"Vue Friendly Iframe","description":"Vue Friendly Iframe is a Vue.js component designed to simplify the creation and management of dynamic, asynchronous iframes, based on Aaron Peters' iframe loading techniques. The current stable version is 0.20.0, with releases occurring somewhat irregularly but indicating active maintenance, often driven by feature additions or bug fixes. Its primary differentiator is providing a controlled, event-driven mechanism for loading external content within an iframe, making it easier to interact with the iframe's lifecycle and attributes. It specifically supports Vue 2.x projects and integrates as a Vue plugin, offering props for `src`, `sandbox`, `allow`, `allowfullscreen`, and custom events for load states, aiming to provide a safer and more performant iframe experience compared to native iframe usage. It abstracts away some of the complexities of handling iframe content and security attributes.","status":"active","version":"0.20.0","language":"javascript","source_language":"en","source_url":"https://github.com/officert/vue-friendly-iframe","tags":["javascript","iframe","async","dynamic","friendly iframe","vue","vuejs","components"],"install":[{"cmd":"npm install vue-friendly-iframe","lang":"bash","label":"npm"},{"cmd":"yarn add vue-friendly-iframe","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-friendly-iframe","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for the Vue.js component functionality.","package":"vue","optional":false}],"imports":[{"note":"The component is exported as a default export.","wrong":"import { VueFriendlyIframe } from 'vue-friendly-iframe'; // This is a default export, not named.","symbol":"VueFriendlyIframe","correct":"import VueFriendlyIframe from 'vue-friendly-iframe';"},{"note":"Since version 0.17.0, the component must be installed as a Vue plugin using `Vue.use()` before being used in templates.","wrong":"new Vue({\n components: { VueFriendlyIframe }\n}); // Component must be installed as a plugin globally since v0.17.0.","symbol":"Plugin Installation","correct":"import Vue from 'vue';\nVue.use(VueFriendlyIframe);"},{"note":"The component tag is `vue-friendly-iframe`. Use `:src` for dynamic source and `@load`, `@message` for events.","symbol":"Component Usage in Template","correct":""}],"quickstart":{"code":"import Vue from 'vue';\nimport VueFriendlyIframe from 'vue-friendly-iframe';\n\nVue.use(VueFriendlyIframe);\n\nnew Vue({\n el: '#app',\n data: {\n iframeSrc: 'https://example.com/some-content',\n iframeLoaded: false,\n iframeMessage: ''\n },\n methods: {\n onIframeLoad() {\n this.iframeLoaded = true;\n console.log('Iframe content loaded!');\n },\n onIframeMessage(event) {\n this.iframeMessage = event.data;\n console.log('Message from iframe:', event.data);\n }\n },\n template: `\n
\n

My App with Friendly Iframe

\n

Loading iframe...

\n

Iframe loaded!

\n

Message received: {{ iframeMessage }}

\n \n
\n `\n});","lang":"javascript","description":"This quickstart demonstrates how to install `vue-friendly-iframe` as a Vue plugin, set its source, and handle `load` and `message` events, including essential `sandbox` and `allow` attributes for security and functionality."},"warnings":[{"fix":"Ensure your Vue application calls `Vue.use(VueFriendlyIframe)` once during initialization, typically in your main.js file.","message":"Starting from version 0.17.0, `vue-friendly-iframe` must be installed as a Vue plugin using `Vue.use(VueFriendlyIframe)` instead of being directly imported and registered as a component.","severity":"breaking","affected_versions":">=0.17.0"},{"fix":"Remove the `scrolling` attribute from your `` component. Use CSS properties like `overflow: auto;` or `overflow: scroll;` on the iframe or its containing element if you need to control scrolling behavior.","message":"The `scrolling` attribute for iframes was removed in v0.10.0 as it is obsolete. It should be controlled via CSS instead.","severity":"deprecated","affected_versions":">=0.10.0"},{"fix":"Use this package exclusively with Vue 2.x projects. For Vue 3, consider looking for a Vue 3 compatible iframe component or building a custom solution.","message":"This component is designed for Vue 2.x. It does not officially support Vue 3.x and may require significant adaptations or not function as expected in a Vue 3 environment.","severity":"gotcha","affected_versions":"all"},{"fix":"Ensure the content loaded in the iframe has appropriate CORS headers if you need to access its DOM or listen to events from it. For sandboxed iframes, explicitly include `allow-same-origin` in the `sandbox` attribute if necessary.","message":"When loading external content, be mindful of browser same-origin policies. Cross-Origin Resource Sharing (CORS) restrictions can prevent access to the iframe's content or events unless properly configured by the iframe's source server.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you have `import VueFriendlyIframe from 'vue-friendly-iframe';` and `Vue.use(VueFriendlyIframe);` in your main Vue entry file (e.g., main.js) before your Vue instance is created.","cause":"The `vue-friendly-iframe` component was not registered globally as a Vue plugin, or it was not imported/used correctly in a local component.","error":"[Vue warn]: Unknown custom element: - did you register the component correctly?"},{"fix":"This is a server-side restriction. You must either use a different `src` that permits embedding or request the owner of the content to modify their server's `X-Frame-Options` or CSP. You cannot bypass this client-side.","cause":"The server hosting the iframe's content explicitly denies embedding in iframes via the `X-Frame-Options` HTTP header or a Content Security Policy (CSP).","error":"Refused to display 'https://example.com' in a frame because it set 'X-Frame-Options' to 'deny'."}],"ecosystem":"npm"}