Capture HTML to PNG in Vue 3

1. Install

npm install @zumer/snapdom@latest

Zero runtime dependencies and an ES module entry. In Nuxt, keep imports and capture calls inside the browser boundary.

2. Minimal capture component (Composition API)

<script setup>
import { ref } from 'vue';
import { snapdom } from '@zumer/snapdom';

const cardRef = ref(null);

async function capture() {
  if (!cardRef.value) return;
  const img = await snapdom.toPng(cardRef.value, { scale: 2 });
  document.body.appendChild(img);
}
</script>

<template>
  <div>
    <div ref="cardRef" class="card">
      <h3>Hello SnapDOM</h3>
      <p>This whole div will be captured.</p>
    </div>
    <button @click="capture">Capture</button>
  </div>
</template>

That's the entire component. The template ref name (cardRef) must match the variable declared in the script setup.

Try it live

This is the component above, running on this page. The button fires snapdom.toPng(cardRef.value) and the captured PNG appears below. SnapDOM only sees the DOM node, so the call is identical whether Vue, React or plain HTML rendered it.

3. Download instead of appending

async function download() {
  if (!cardRef.value) return;
  const result = await snapdom(cardRef.value);
  await result.download({ format: 'png', filename: 'card' });
}

4. Render a live preview

Capture to a Blob and create an object URL to use as the preview <img> source:

<script setup>
import { ref } from 'vue';
import { snapdom } from '@zumer/snapdom';

const cardRef = ref(null);
const previewUrl = ref('');

async function capture() {
  if (!cardRef.value) return;
  const blob = await snapdom.toBlob(cardRef.value, { format: 'png' });
  previewUrl.value = URL.createObjectURL(blob);
}
</script>

<template>
  <div ref="cardRef">…</div>
  <button @click="capture">Capture</button>
  <img v-if="previewUrl" :src="previewUrl" alt="preview" />
</template>

Revoke the object URL with URL.revokeObjectURL(previewUrl.value) when you're done with it to avoid leaks.

5. Reusable composable

// useSnapdom.js
import { ref } from 'vue';
import { snapdom } from '@zumer/snapdom';

export function useSnapdom(options = {}) {
  const target = ref(null);

  async function capture(format = 'png') {
    if (!target.value) return null;
    const result = await snapdom(target.value, options);
    return result.to(format);
  }

  return { target, capture };
}

<script setup>
import { useSnapdom } from './useSnapdom';

const { target, capture } = useSnapdom({ scale: 2, embedFonts: true });
</script>

<template>
  <div ref="target">…</div>
  <button @click="capture('png')">Capture</button>
</template>

Choose the Vue export target

Keep the ref on the visible card, invoice or dashboard, and keep the export controls outside that root. Use the invoice export recipe for a printable report or the dashboard recipe for several widgets. After nextTick() and asset readiness, the PNG Blob recipe provides a file for your upload endpoint.