Screenshot API for Vue.js

Capture screenshots, generate PDFs, and scrape web content from any Vue.js or Nuxt application. Server-side API calls keep your key secure; composable wrappers make the integration feel native.

Vue Composable (useScreenshot)

// composables/useScreenshot.ts
import { ref } from 'vue'

export function useScreenshot() {
  const loading = ref(false)
  const result = ref<string | null>(null)
  const error = ref<string | null>(null)

  async function capture(url: string, opts: Record<string, unknown> = {}) {
    loading.value = true
    error.value = null
    try {
      const res = await fetch('/api/screenshot', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ url, ...opts }),
      })
      const data = await res.json()
      result.value = data.url
    } catch (e) {
      error.value = String(e)
    } finally {
      loading.value = false
    }
  }

  return { loading, result, error, capture }
}

Using the Composable in a Component

<script setup lang="ts">
import { ref } from 'vue'
import { useScreenshot } from '@/composables/useScreenshot'

const { loading, result, error, capture } = useScreenshot()
const url = ref('')

async function handleCapture() {
  await capture(url.value, { fullPage: true, blockAds: true })
}
</script>

<template>
  <div>
    <input v-model="url" placeholder="https://example.com" />
    <button @click="handleCapture" :disabled="loading">
      {{ loading ? 'Capturing...' : 'Screenshot' }}
    </button>
    <p v-if="error" class="error">{{ error }}</p>
    <img v-if="result" :src="result" alt="Screenshot" />
  </div>
</template>

Nuxt Server Route (API Proxy)

// server/api/screenshot.post.ts
export default defineEventHandler(async (event) => {
  const body = await readBody(event)

  const res = await fetch('https://api.snapapi.pics/v1/screenshot', {
    method: 'POST',
    headers: {
      'X-Api-Key': process.env.SNAPAPI_KEY!,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(body),
  })

  return res.json()
})

Pinia Store Integration

// stores/screenshots.ts
import { defineStore } from 'pinia'

export const useScreenshotStore = defineStore('screenshots', {
  state: () => ({ items: [] as { url: string; screenshot: string }[] }),
  actions: {
    async capture(url: string) {
      const res = await $fetch('/api/screenshot', {
        method: 'POST', body: { url, fullPage: true }
      })
      this.items.push({ url, screenshot: res.url })
    },
  },
})

Pricing

Free: 200/mo. Starter $19/mo: 5K. Pro $79/mo: 50K. Business $299/mo: 500K. Get your free key — no card needed.