How to Convert HTML to an Image in Nuxt

Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.

For a user-triggered PNG download of a Nuxt component, render it in the browser with html2canvas after the component has mounted. For a server-generated image that must reflect browser layout and CSS, use a real Chromium screenshot instead. For a controlled Open Graph card, consider Satori’s supported SVG rendering model. These approaches solve different problems: html2canvas reconstructs a view from DOM and CSS rather than taking a literal browser screenshot, while Satori is not a full browser renderer.

Choose the rendering method for the image you need

“Convert HTML to an image” can mean capturing a live component after a user clicks Download, rendering a page in CI, or creating a fixed social-card design. The right Nuxt approach depends on where rendering happens and how closely the output needs to match a browser.

#	Preview	Product	Price
1		99 Formatting Tips for Self-Published Authors: How to Self-Publish a Better Book Using Various Tips...	$5.95	Buy on Amazon

Nuxt’s nuxt generate creates plain HTML files for static hosting, not image files. Don’t use static generation or Nuxt Image as a substitute for a page-capture renderer.

Render a Nuxt component to PNG with html2canvas

Use html2canvas when the user is already viewing the component and wants to download it. Install the package in the Nuxt project, then import it in code that runs only in the browser. This example waits until mount before enabling the button and captures the referenced section when clicked:

#1 Best Overall

99 Formatting Tips for Self-Published Authors: How to Self-Publish a Better Book Using Various Tips on Cover Design, HTML, Typography, Images, Layout and Conversion (Do it Yourself Guide 2)

$5.95

Buy on Amazon

npm install @html2canvas/html2canvas

<script setup lang="ts">
import html2canvas from '@html2canvas/html2canvas'
import { ref, onMounted } from 'vue'

const card = ref<HTMLElement | null>(null)
const ready = ref(false)

onMounted(() => {
  ready.value = true
})

async function downloadPng() {
  if (!card.value) return

  const canvas = await html2canvas(card.value, {
    scale: window.devicePixelRatio,
    useCORS: true,
  })

  const link = document.createElement('a')
  link.download = 'card.png'
  link.href = canvas.toDataURL('image/png')
  link.click()
}
</script>

<template>
  <section ref="card" class="card">
    <h1>Shareable card</h1>
    <p>Rendered by Nuxt in the browser.</p>
  </section>
  <button :disabled="!ready" @click="downloadPng">Download PNG</button>
</template>

The package’s API returns a Promise for a canvas. The download link is created only after that Promise resolves. To work with the image as a Blob instead of a data URL, use the browser canvas API’s toBlob; this can be preferable when you need to pass the image to another browser API or upload it. The example uses a PNG data URL because it is a direct download path.

Wait for the content you intend to capture

onMounted ensures the component exists in the browser DOM, but it does not guarantee that every async data request, custom font, or remote image has finished loading. Trigger capture only when the state shown to the user is ready. If a component’s data changes reactively, capture after the update that produces the desired view rather than immediately after starting that update.

Nuxt universal rendering first produces HTML on the server and then hydrates it in the browser. Browser globals such as document and window, and html2canvas itself, belong in client-side execution. Keep them out of module initialization or server-rendered code paths. A click handler in a mounted component is a natural boundary for the capture.

Understand fidelity, scale, and remote assets

• Fidelity: html2canvas rebuilds the image from DOM and CSS information; it does not take an actual screenshot of the browser surface. The result may differ from the page, especially where styles or content are unsupported.
• Resolution: scale: window.devicePixelRatio produces a higher-density canvas on many displays. It also increases the output pixel dimensions and memory required, so test the dimensions and file size your users need.
• Cross-origin images: useCORS: true can help only when the remote image server permits cross-origin access. It does not bypass browser security. Prefer same-origin assets, configure appropriate CORS headers on the asset host, or use a controlled proxy where appropriate.
• Excluded UI: Add data-html2canvas-ignore to a control or decoration that should not appear in the captured output.
• Unsupported content: Some CSS, plugin content, or external resources may be missing or rendered differently. Verify the exact component styles and assets used in production.

Generate an image on the server with a real browser

If a screenshot must be generated in server-side code or CI, use a browser screenshot route rather than trying to run html2canvas during Nuxt’s server render. The Nuxt OG Image module documents OgImageScreenshot, defineOgImageScreenshot, and a provider: 'browser' option. Its browser-provider guidance says Chromium may need to be installed with npx playwright install.

npx playwright install

Provision Chromium in the build or runtime environment that will do the capture, and follow the module’s browser-provider setup for the route or image you need. This is the better fit when the generated image must use browser layout, web fonts, and normal CSS behavior. It adds a browser binary and runtime requirements, so account for those in deployment and CI rather than expecting a lightweight server-only function.

Use Satori for constrained social-card templates

Satori converts a supported JSX/HTML/CSS subset to SVG. It is a good option when the design is a deliberate template—such as a title, summary, and brand mark—and you can express the layout within its supported styling model. It is not a drop-in browser screenshot: rewrite layouts that rely on unsupported CSS and provide fonts and images in the format its renderer expects. The Satori project describes it as a library for converting HTML and CSS to SVG and does not promise a 100% browser match.

Keep Nuxt Image for optimizing input images

NuxtImg outputs a native image element and supports provider-based image optimization, responsive sizes, and densities. Use it to prepare and serve image assets that a page displays. It does not turn an arbitrary Vue component or HTML fragment into a PNG. A common pipeline can use Nuxt Image for the input assets and a separate renderer—html2canvas, Chromium, or Satori—for the final composed output.

Implementation checklist

1. Choose where capture runs. Use html2canvas for a browser-side Download button, Chromium for server/CI browser screenshots, and Satori for a constrained SVG template.
2. Respect the Nuxt rendering boundary. Keep browser APIs and html2canvas in client-side execution; capture after the component and the intended data have rendered.
3. Prepare images and fonts. Ensure remote images permit CORS or serve them through a controlled path. For browser screenshots, verify the browser runtime can load the page’s fonts and assets.
4. Set the required output dimensions. Use html2canvas’s scale for density and verify the resulting canvas dimensions. For a server screenshot or template, configure the output size in that renderer’s documented options.
5. Test the actual target component. Check long text, responsive breakpoints, images, overlays, and any CSS that may not be supported by the chosen renderer.
6. Provision heavier server dependencies deliberately. When using Chromium, install it in the same environment that performs the capture and include its startup and resource cost in deployment planning.

Troubleshooting common capture problems

The capture throws because window or document is undefined

The code is executing during server rendering. Move the import and capture path into a client-only component or a browser event handler, and do not invoke it at module scope. In a universal Nuxt app, server rendering happens before browser hydration.

The image is blank or misses recent content

Confirm the element ref exists and the content is rendered before starting capture. If the component relies on async data or reactive changes, wait for the relevant state to settle. Check whether the missing item is a plugin or other content html2canvas cannot reproduce.

Remote images disappear

Set useCORS: true and check the remote server’s CORS response headers. If that server does not allow the request, the option cannot override its policy. Use same-origin assets or a controlled proxy instead.

The downloaded image looks soft or is the wrong size

Check the canvas dimensions and the selected scale. A device-pixel-ratio scale can sharpen output on high-density screens, but it also creates a larger canvas. Test the intended viewport and export dimensions rather than assuming the visible CSS size equals the bitmap size.

A server screenshot fails because Chromium is missing

The browser provider needs a browser runtime in the environment performing the capture. Install Chromium as indicated by the Nuxt OG Image browser-provider guide, and make sure the build or deployment image actually includes it.

A Satori layout does not match the browser design

Satori supports a subset of JSX/HTML/CSS, not the full browser layout engine. Simplify or rewrite the template using supported layout rules, and supply fonts and images as its renderer expects. If exact browser behavior is essential, use a Chromium screenshot path.

Or skip the browser setup

If you need an image of a URL rather than a particular in-app Vue ref, a screenshot API can return an image with one request. ScreenshotNeo is a website screenshot API and MCP server for developers; its clean-shot workflow accepts cookie banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets. Each step can be turned off. Bot checks/CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, with response headers indicating the page verdict and billing status. Its MCP server includes take_screenshot, get_page_info, and capture_pdf for AI agents. Plans include 1,000 screenshots per month free without a card and paid options starting at $5 for 3,000; every feature is on every plan. See ScreenshotNeo for the service details.

For example, capture a public URL as WebP with cURL:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Replace the target URL with the page you want and use your API key. See the ScreenshotNeo API documentation for request options. This captures a URL, not an arbitrary in-memory Vue element such as the card ref above. To try it, sign up for 1,000 free screenshots a month with no card.

FAQ

Can I use html2canvas for an Open Graph image?

It can create a browser-side image from a rendered component, but server/CI generation is better handled by the Nuxt OG Image browser provider or a constrained Satori template, depending on fidelity and layout needs.

Does nuxt generate export each page as an image?

No. It produces plain HTML files for static hosting. Use a renderer separately when you need an image file.

Quick Recap

Bestseller No. 1

99 Formatting Tips for Self-Published Authors: How to Self-Publish a Better Book Using Various Tips on Cover Design, HTML, Typography, Images, Layout and Conversion (Do it Yourself Guide 2)

$5.95

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.