Capture HTML to PNG in Vue 3

1. Install

npm install @zumer/snapdom

Zero runtime dependencies, ESM-only. Works with Vite, Vue CLI and Nuxt out of the box.

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, { type: '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>