Instagram Embed
Instagram hosts photo and video posts.
<ScriptInstagramEmbed> fetches embed HTML through your server and proxies supported media and static assets. Changing the post URL or caption setting after client-side navigation refetches your Nuxt endpoint.
Nuxt Config Setup
Add this to your nuxt.config.ts to register the server routes that power <ScriptInstagramEmbed>:
export default defineNuxtConfig({
scripts: {
registry: {
instagramEmbed: {},
}
}
})This script's proxy endpoints use HMAC URL signing when you configure a NUXT_SCRIPTS_PROXY_SECRET. See the security guide for setup instructions.
This registers the required server API routes (/_scripts/embed/instagram, /_scripts/embed/instagram-image, and /_scripts/embed/instagram-asset) that handle fetching embed HTML and proxying images/assets.
<ScriptInstagramEmbed>
Demo
.
The Cloudflare Zaraz ecosystem is expanding! Read more to learn how you can now connect with Certified Zaraz Developers to help you with migrating to Zaraz, maintaining your configuration and more.
These certified developers are now available to assist you with everything related to Zaraz, whether it's migration, configuration, or ongoing support. They are well-equipped to ensure that you get the most out of your Zaraz experience, and they have a direct line of communication with the Cloudflare Zaraz team when a need arises.
Read more on our blog from the link in our BIO or stories feed.
Slot Props
The default slot receives:
interface SlotProps {
html: string // Processed embed HTML with scripts removed and scoped CSS injected
shortcode: string // The post shortcode (e.g., "C3Sk6d2MTjI")
postUrl: string // The original post URL
}
The rewriter removes script, noscript, and original style elements. It fetches linked Instagram stylesheets, scopes their selectors, and injects the resulting CSS into the returned HTML. It does not perform general HTML sanitization. The default source is restricted to Instagram. If you pass html through your own renderer or introduce a custom endpoint, sanitize it according to your application's content policy before using v-html.
Named Slots
| Slot | Description |
|---|---|
default | Main content, receives { html, shortcode, postUrl }. By default renders the HTML. |
loading | Shown while fetching embed HTML |
error | Shown if embed fetch fails, receives { error } |
Supported URL formats
- Posts:
https://www.instagram.com/p/ABC123/ - Reels:
https://www.instagram.com/reel/ABC123/ - TV:
https://www.instagram.com/tv/ABC123/
How it works
- Server-side fetch: Nuxt fetches the Instagram embed HTML from
{postUrl}/embed/ - Asset proxying: Images from Instagram's media hosts and assets from
static.cdninstagram.comare rewritten to proxy through your server - Script removal: Nuxt removes Instagram's
embed.js(not needed for static rendering) - Caching: Nuxt caches responses for 10 minutes at the server level
Browser privacy
The rendered embed loads no Instagram JavaScript, forwards no Meta Set-Cookie response, and sends image and asset requests to your Nuxt server. Instagram sees the server's connection rather than the visitor's. Links in the embed can still take the visitor to Instagram if they choose to open them.
Limitations
- Only supports single-image posts (galleries show first image only)
- Videos display as static poster images
- Some interactive features are not available (likes, comments)
- The image endpoint rejects redirects. The static-asset endpoint currently follows them without revalidating the destination host.
postUrlstring required The Instagram post URL to embed.
captionsboolean = trueWhether to include captions in the embed.
apiEndpointstring = '/_scripts/embed/instagram'Custom API endpoint for fetching embed HTML.