Vue.js

Screenshot API for Vue.js

Capture screenshots in Vue applications. Use in components, composables, or server-side with Nuxt.

Installation

npm install

Vue.js Integration Example

<template>
  <div>
    <input v-model="url" placeholder="Enter URL" />
    <button @click="capture">Capture</button>
    <img v-if="imgSrc" :src="imgSrc" alt="Screenshot" />
  </div>
</template>

<script setup>
import { ref } from "vue";
const url = ref("");
const imgSrc = ref(null);

function capture() {
  const params = new URLSearchParams({ url: url.value, api_key: "YOUR_KEY", format: "png" });
  imgSrc.value = `https://snapapi.tech/v1/screenshot?${params}`;
}
</script>

Features

SnapAPI renders pages in a real Chromium browser, so JavaScript-heavy Vue.js apps render perfectly. You get:

• Full JavaScript rendering (React, Vue, Angular, etc.)
• 9 device presets for mobile emulation
• Dark mode, full page, CSS selector capture
• Metadata extraction (title, description, links, text)
• PNG, JPEG, WebP output formats