Scripts

Instagram Embed

Instagram is a photo and video sharing social media platform.

Nuxt Scripts provides a <ScriptInstagramEmbed> component that fetches Instagram embed HTML server-side and proxies all assets through your server - no client-side API calls to Instagram.

Instagram Embed

View source

Nuxt Config Setup

To use the Instagram Embed component, enable it in your nuxt.config:

export default defineNuxtConfig({
  scripts: {
    registry: {
      instagramEmbed: true
    }
  }
})

ScriptInstagramEmbed()

The ScriptInstagramEmbed composable lets you have fine-grain control over when and how Instagram Embed is loaded on your site.

const { proxy } = ScriptInstagramEmbed()

// renders server-side Instagram embed

Please follow the Registry Scripts guide to learn more about advanced usage.

Example

Using Instagram Embed only in production while using the proxy to send events.

<script setup lang="ts">
const { proxy } = ScriptInstagramEmbed()

// noop in development, ssr
// just works in production, client
function handleAction() {
  // renders server-side Instagram embed
}
</script>

<template>
  <div>
    <button @click="handleAction">
      Send Event
    </button>
  </div>
</template>

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>`

The <ScriptInstagramEmbed> component:

Fetches the official Instagram embed HTML server-side
Rewrites all image and asset URLs to proxy through your server
Removes Instagram's embed.js script (not needed)
Caches responses for 10 minutes

Demo

CommentSave

52 likes

<template>
  <ScriptInstagramEmbed
    post-url="https://www.instagram.com/p/C3Sk6d2MTjI/"
    :captions="true"
  />
</template>

<template>
  <ScriptInstagramEmbed
    post-url="https://www.instagram.com/p/C3Sk6d2MTjI/"
    :captions="true"
  >
    <template #loading>
      <div class="animate-pulse bg-gray-100 rounded-lg p-4 aspect-square max-w-md">
        Loading Instagram post...
      </div>
    </template>

    <template #error>
      <div class="bg-red-50 border border-red-200 rounded-lg p-4 max-w-md">
        Failed to load Instagram post
      </div>
    </template>
  </ScriptInstagramEmbed>
</template>

<template>
  <ScriptInstagramEmbed post-url="https://www.instagram.com/p/C3Sk6d2MTjI/">
    <template #default="{ html, shortcode, postUrl }">
      <div class="instagram-wrapper">
        <a :href="postUrl" target="_blank" class="text-sm text-gray-500 mb-2 block">
          View on Instagram ({{ shortcode }})
        </a>

        <div v-html="html" />
      </div>
    </template>
  </ScriptInstagramEmbed>
</template>

Slot Props

The default slot receives:

interface SlotProps {
  html: string // The processed embed HTML
  shortcode: string // The post shortcode (e.g., "C3Sk6d2MTjI")
  postUrl: string // The original post URL
}

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: All images from scontent.cdninstagram.com and assets from static.cdninstagram.com are 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