Iframe (Lazy)
A lazy-loaded iframe component that loads content only when it comes into view, with customizable placeholder and intersection options.
Source code
Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.
Installation
Usage
Basic
The simplest way to use the component is by passing a src prop. The iframe will load only when it comes into view.
Custom Placeholder
You can customize the placeholder shown before the iframe loads using the #placeholder slot.
Scroll down to see custom placeholder
Loading content...
Eager Loading
Set loading="eager" to load the iframe immediately without waiting for intersection.
Loads immediately
No Placeholder
Disable the placeholder by setting placeholder to false.
No placeholder will be shown
With Load Event
Listen to the @load event to know when the iframe has finished loading.
Waiting for content
Custom Root Margin
Adjust when the iframe loads by changing the rootMargin. Positive values trigger loading earlier, negative values later.
Loads 500px before entering viewport
Waiting to load...
Multiple Iframes
Use multiple lazy-loaded iframes on the same page for better performance.
Each iframe loads independently when scrolled into view. Scrolling is disabled within the iframes.
Loading Nuxt UI...
Loading Origin UI...
Loading Reka UI...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | undefined | The URL of the page to embed in the iframe |
class | string | undefined | Additional classes to apply to the wrapper element |
iframeClass | string | undefined | Additional classes to apply to the iframe element |
loading | "lazy" | "eager" | "lazy" | When to load the iframe - lazy waits for intersection, eager loads immediately |
placeholder | boolean | true | Whether to show a placeholder before the iframe loads |
rootMargin | string | "150px" | Margin around the root for intersection detection (e.g., "150px", "20%") |
threshold | number | number[] | 0 | Threshold for intersection detection (0.0 to 1.0) |
disableScroll | boolean | false | Disable scrolling within the iframe |
Events
| Event | Payload | Description |
|---|---|---|
load | Event | Emitted when the iframe finishes loading |
Slots
| Slot | Props | Description |
|---|---|---|
placeholder | - | Custom content to show before the iframe loads |
Features
- Lazy Loading: Iframes only load when they enter the viewport, improving page performance
- Intersection Observer: Uses modern browser API for efficient viewport detection
- Custom Placeholders: Show loading states, skeletons, or custom content while waiting
- Flexible Configuration: Control when loading triggers with
rootMarginandthreshold - Load Events: React to iframe load completion with the
@loadevent - Performance: Reduces initial page load time and bandwidth usage
- Accessible: Maintains proper iframe attributes like
allowfullscreen
Use Cases
- Embedding third-party content (YouTube, maps, documentation)
- Loading multiple iframes on documentation pages
- Deferring heavy content until needed
- Improving Core Web Vitals scores
- Reducing initial page weight and load time