vue-iframes

library0.0.21jsnpmunverified

vue-iframes is a Vue.js 2.x component designed for embedding dynamic, asynchronously loaded iframes into applications. The current stable version is 0.0.21. Its release cadence is sporadic, primarily driven by dependency updates and minor bug fixes rather than feature development, with the last update two years ago. This library differentiates itself by providing a declarative Vue component interface for iframe management, abstracting away some complexities of iframe loading techniques, particularly those related to performance as outlined in Aaron Peter's article. It offers explicit support for Nuxt.js, including server-side rendering (SSR) capabilities through a dedicated build. While functional for its intended purpose, it is specifically tied to Vue 2 and does not currently support Vue 3, making it suitable for maintaining existing Vue 2 projects or specific use cases where a Vue 2 iframe solution is required.

web-framework

npm install vue-iframes

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-IFRAMES

vue-iframes

web-frameworkjavascriptv0.0.21

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueIframe

✓ import VueIframe from 'vue-iframes';

✗ const VueIframe = require('vue-iframes');

For global component registration via `Vue.use()` in Vue 2 projects. Requires a bundler like Webpack or Rollup for ESM import.

VueIframe (Nuxt SSR)

✓ import VueIframe from 'vue-iframes/dist/vue-iframes.ssr';

✗ import VueIframe from 'vue-iframes';

Use this specific import path when configuring `vue-iframes` within a Nuxt.js application that leverages Server-Side Rendering (SSR) to ensure proper server-side execution and hydration.

VueIframe (Nuxt Module)

✓ modules: ['vue-iframes/nuxt']

✗ plugins: [{ src: '~/plugins/vue-iframes' }]

Nuxt.js offers a simplified module-based configuration. While plugin registration is also supported, using the dedicated module `vue-iframes/nuxt` might streamline integration for some setups.

Demonstrates installation, global plugin registration, and basic usage of the `vue-iframe` component to embed external content, including handling the load event and dynamically changing the source.

import Vue from 'vue'; import VueIframe from 'vue-iframes'; Vue.use(VueIframe); new Vue({ el: '#app', template: ` <div id="app"> <h1>My Dynamic Iframe App</h1> <vue-iframe :src="iframeSrc" allow="camera *; geolocation *; microphone *; autoplay *" frame-id="my-dynamic-iframe" @load="onIframeLoad" name="dynamic-content-frame" width="100%" height="500px"> </vue-iframe> </div> `, data: () => ({ iframeSrc: 'https://example.com/some-content', myIframeContentWindow: null }), methods: { onIframeLoad(frame) { this.myIframeContentWindow = frame.contentWindow; console.log('Iframe loaded:', this.myIframeContentWindow); // Example of interacting with the iframe content (if same-origin) // try { // this.myIframeContentWindow.document.body.style.backgroundColor = 'lightblue'; // } catch (e) { // console.warn('Could not access iframe content due to same-origin policy:', e); // } } }, mounted() { // Dynamically update iframe source setTimeout(() => { this.iframeSrc = 'https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe'; }, 5000); } });

Debug

Known issues

breakingThis library explicitly supports Vue 2 (`>= 2.1.4`) but is fundamentally incompatible with Vue 3. Attempts to use it in a Vue 3 project will result in runtime errors due to breaking changes in Vue's internal API and component lifecycle.

fix

For Vue 3 projects, consider alternative iframe management libraries designed for Vue 3, such as `vue3-iframe` or `@open-iframe-resizer/vue`, or implement iframe handling manually using Vue 3's reactivity system.

affects: >=0.0.1

gotchaWhen using `vue-iframes` with Nuxt.js for Server-Side Rendering (SSR), you must import the SSR-specific build from `vue-iframes/dist/vue-iframes.ssr`. Importing the standard build will likely lead to hydration mismatches or other runtime issues on the server and client.

fix

Adjust your Nuxt plugin file (`~/plugins/vue-iframes.js`) to `import VueIframe from 'vue-iframes/dist/vue-iframes.ssr'` and ensure the plugin is configured for client-side execution if the component is client-only: `{ src: '~/plugins/vue-iframes', mode: 'client' }`. Alternatively, use the Nuxt module approach: `modules: ['vue-iframes/nuxt']`.

affects: >=0.0.14

gotchaDirect interaction with the content inside an iframe is subject to the browser's Same-Origin Policy. If the iframe's `src` is on a different domain, protocol, or port than the parent application, you will be blocked from accessing its `contentWindow` or `document` for security reasons.

fix

For cross-origin communication, use the `window.postMessage()` API. This requires cooperation from both the parent frame and the iframe's content to send and receive messages securely.

affects: >=0.0.1

gotchaThe component relies on global Vue registration via `Vue.use(VueIframe)`. If not explicitly registered, Vue will report an 'Unknown custom element: <vue-iframe>' error when attempting to render the component.

fix

Ensure `Vue.use(VueIframe)` is called before your main Vue instance is created, typically in your main.js or a dedicated plugin file. For local component registration, import and add `VueIframe` to the `components` option of your parent component.

affects: >=0.0.1

Errors

Common errors & fixes

[Vue warn]: Unknown custom element: <vue-iframe> - did you register the component correctly?

The `vue-iframe` component has not been registered globally via `Vue.use()` or locally in the parent component's `components` option.

fix

Add `import VueIframe from 'vue-iframes'; Vue.use(VueIframe);` to your application's entry point before creating the Vue instance, or include `VueIframe` in the `components` object of the consuming Vue component.

Uncaught SecurityError: Blocked a frame with origin "..." from accessing a cross-origin frame.

Attempting to access properties or methods of an iframe's `contentWindow` or `document` when the iframe's origin (protocol, domain, or port) differs from the parent window. This is a browser security feature (Same-Origin Policy).

fix

Ensure the iframe's `src` is on the same origin as your parent application if direct DOM manipulation is required. For cross-origin communication, use the `window.postMessage()` API.

TypeError: Cannot read properties of undefined (reading 'contentWindow')

This error often occurs if you try to access `frame.contentWindow` immediately after the `@load` event or if the iframe element itself isn't fully ready or accessible. It can also happen in Nuxt SSR if the correct SSR-specific build isn't used.

fix

Ensure the iframe has fully loaded and is accessible. For Nuxt SSR, verify that `import VueIframe from 'vue-iframes/dist/vue-iframes.ssr'` is used. Also, ensure the `frame` object passed to your `onLoad` method is valid.

Upgrade

Version history

0.0.21latest on npm

Audit

Dependencies

vuerequiredRequired peer dependency for the Vue component. Supports Vue 2.1.4 and above, but not Vue 3.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/chantouchsek/vue-iframes ↗

packagehttps://www.npmjs.com/package/vue-iframes ↗