Recommended Free Tools
The simplest Nuxt screenshot API is a Nitro server route that receives a URL, opens it in a managed browser, and returns image bytes. The example below uses NuxtHub’s browser-rendering integration: install the module, create server/api/screenshot.ts, validate the URL and theme, set a viewport, navigate with domcontentloaded, and send the captured PNG. Keep browser automation in the server layer, not in a universal Vue component.
What you are building
A request such as /api/screenshot?url=https%3A%2F%2Fexample.com&theme=dark will produce a PNG response. Nuxt server endpoints run in Nitro, which is the appropriate context for browser automation. Browser globals and server-only helpers should not be moved into component setup code that can execute in the browser or during server rendering.
This implementation follows the browser-rendering sequence documented for NuxtHub. The exact helper import and response serialization can change with NuxtHub releases, so check the current English NuxtHub browser documentation when upgrading.
Prerequisites and installation
Use a Nuxt project with server routes
Create or open a Nuxt application that uses the standard server/ directory. Nitro discovers files in that directory as API endpoints.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitches#1 Best Overall
- CRISP CLARITY: This 23.8″ Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
- WORK SEAMLESSLY: This sleek monitor is virtually bezel-free on three sides, so the screen looks even bigger for the viewer. This minimalistic design also allows for seamless multi-monitor setups that enhance your workflow and boost productivity
- A BETTER READING EXPERIENCE: For busy office workers, EasyRead mode provides a more paper-like experience for when viewing lengthy documents
Add NuxtHub
- From the project root, run
npx nuxi module add hub. - Review
nuxt.config.ts. The command installs@nuxthub/coreand adds the module entry for you. - Confirm that the deployment target supports NuxtHub’s browser capability. A Nuxt deployment preset alone does not guarantee that every provider can launch or retain a browser session.
Create the screenshot route
Create server/api/screenshot.ts. This version accepts a required url and an optional theme limited to light or dark. It uses a 1920 × 1080 viewport and waits for domcontentloaded, matching the documented example.
import { getQuery, createError, setHeader } from 'h3'
import { hubBrowser } from '#imports'
export default defineEventHandler(async (event) => {
const query = getQuery(event)
const rawUrl = typeof query.url === 'string' ? query.url : ''
const theme = query.theme === 'dark' ? 'dark' : 'light'
let target: URL
try {
target = new URL(rawUrl)
} catch {
throw createError({ statusCode: 400, statusMessage: 'A valid url query parameter is required' })
}
if (!['http:', 'https:'].includes(target.protocol)) {
throw createError({ statusCode: 400, statusMessage: 'Only http and https URLs are allowed' })
}
const browser = await hubBrowser()
const page = await browser.newPage()
try {
await page.setViewportSize({ width: 1920, height: 1080 })
await page.emulateMedia({ colorScheme: theme })
await page.goto(target.toString(), { waitUntil: 'domcontentloaded' })
const image = await page.screenshot({ type: 'png' })
setHeader(event, 'Content-Type', 'image/png')
setHeader(event, 'Cache-Control', 'no-store')
return image
} finally {
await page.close()
await browser.close()
}
})The helper is shown in the form used by the surfaced NuxtHub example. If your installed release exposes the browser or page through a slightly different return shape, keep the route structure and adapt the import and session calls to that release’s canonical API.
Why each part matters
- Validation: malformed input fails before a browser is allocated.
- Protocol restriction: accepting only HTTP and HTTPS avoids unsupported schemes.
- Viewport: 1920 × 1080 is an example default, not a requirement. Mobile, tablet and social-card captures need different dimensions.
- Color scheme: the page receives the requested
prefers-color-schemevalue. domcontentloaded: navigation returns after the document has been parsed. It does not prove that client-rendered data, fonts, images, animations or delayed widgets are finished.- Finally block: closing the page and browser prevents leaked sessions when navigation or capture throws.
Call the endpoint locally
Browser or HTTP client
Start Nuxt with npm run dev, then open:
http://localhost:3000/api/screenshot?url=https%3A%2F%2Fexample.comFor dark mode, append &theme=dark. Save the binary response rather than trying to parse it as JSON.
cURL
curl -L "http://localhost:3000/api/screenshot?url=https%3A%2F%2Fexample.com" -o example.pngNuxt-side usage
Call the route from a server-side job, an authenticated admin page, or another backend service. Avoid exposing an unrestricted proxy directly to anonymous visitors.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Rank #2
- CRISP CLARITY: This 22 inch class (21.5″ viewable) Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- 100HZ FAST REFRESH RATE: 100Hz brings your favorite movies and video games to life. Stream, binge, and play effortlessly
- SMOOTH ACTION WITH ADAPTIVE-SYNC: Adaptive-Sync technology ensures fluid action sequences and rapid response time. Every frame will be rendered smoothly with crystal clarity and without stutter
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
Making readiness reliable
domcontentloaded is useful for simple, mostly server-rendered pages. Applications that fetch data after navigation need an explicit readiness strategy. Depending on the browser API available in your NuxtHub version, wait for a known selector, a short delay, network idle, or an application-specific readiness flag. A selector such as [data-screenshot-ready] is more deterministic than an arbitrary long sleep when you control the target page.
Images loaded lazily below the fold, web fonts, carousels and consent dialogs can all change the final pixels. If you own the target, add a stable marker after its data and critical assets are ready. If you do not own it, document the chosen wait behavior and expect occasional differences.
Secure a URL-driven endpoint
The sample validates syntax and protocol, but that is not a complete production policy. A public URL fetcher can be abused to scan internal services or consume browser capacity.
- Require authentication or a signed request.
- Allowlist hostnames when the endpoint serves a known set of sites.
- Block loopback, link-local, private-network and cloud metadata addresses after DNS resolution, including IPv4 and IPv6 forms.
- Set navigation and total-request timeouts.
- Rate-limit by user and destination; cap concurrent browser sessions.
- Limit response size and reject unexpected redirects to disallowed hosts.
- Log the request identity, destination, duration and failure class without recording secrets embedded in URLs.
These controls are design recommendations for any URL-fetching service; the NuxtHub example itself only demonstrates URL validation and a light/dark parameter.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Rank #3
- Clear visuals. Fluid motion: A 144Hz refresh rate and 1ms MPRT deliver smooth, tear‑free motion across work, gaming, and streaming for clearer, more fluid viewing.
- Eye comfort: TÜV Rheinland 3‑star* certification reduces harmful blue light while preserving stunning color quality without compromise. *TÜV Rheinland 3-star eye comfort certification.
- Wide viewing angle: Get consistent views across a wide 178° /178° viewing angle.
- In-Plane Switching (IPS): See excellent color accuracy and consistency across wide viewing angles with In-plane Switching (IPS) technology.
- Ultra-thin bezels: Maximize your viewing experience with thin bezels.
Deployment and operational checks
Runtime compatibility
Test the route in the same production preset and region you intend to use. Some serverless environments restrict child processes, sandboxing, filesystem access or execution time. Nuxt and Nitro support many deployment targets, but browser support is provider-specific.
Cold starts and concurrency
The first request may be slower while a browser runtime starts. Reuse a supported browser session when the NuxtHub integration permits it, but isolate pages between requests and always close them. Set a concurrency limit so a burst of URLs cannot exhaust memory.
Caching
If the same URL is captured repeatedly, cache by normalized URL, theme, viewport and any other rendering inputs. Do not cache private pages across users. Add an explicit cache policy rather than relying on a browser’s incidental cache.
Formats and full-page images
The sample returns PNG. Browser screenshot APIs commonly also expose JPEG, quality, full-page and element-capture settings, but availability and option names depend on the installed helper. Confirm those options in the current NuxtHub documentation before adding them to a public contract.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallRank #4
- CURVED FOR ENHANCED ENGAGEMENT: An immersive viewing experience with a curved monitor that wraps more closely around your field of vision; It creates a wider view, enhancing depth perception and minimizing peripheral distraction
- SMOOTH PERFORMANCE FOR SEAMLESS CONTENT: Stay in the action when playing games, watching videos, or working on creative projects; The 100Hz refresh rate reduces lag and motion blur so you don't miss a thing in fast-paced moments¹
- MORE GAMING POWER: Gain the edge with optimizable game settings; Color and image contrast can be adjusted to see scenes more vividly and spot enemies hiding in the dark; Game Mode adjusts any game to fill the screen so you can view every detail²
- KEEP IT EASY ON THE EYES: Care for your eyes and stay comfortable, even during long sessions; Advanced eye comfort technology certified by TÜV reduces eye strain by minimizing blue light and reducing irritating screen flicker²
- INCREASED VERSATILITY: Connect to more; Plug devices straight into your monitor for increased flexibility, making your computing environment even more convenient
Troubleshooting
Module or helper is not found
Run npx nuxi module add hub again, verify @nuxthub/core appears in dependencies and restart the development server. If hubBrowser is not exported by your version, use the import and helper name shown by that version’s browser-rendering guide.
400 response for a URL that looks correct
URL query strings must be percent-encoded. Use cURL’s URL encoding or pass a fully qualified http:// or https:// URL. Relative paths, empty values and unsupported schemes are rejected intentionally.
Blank or incomplete capture
Replace domcontentloaded with a documented selector, delay or network-idle wait appropriate to the page. Check lazy loading, authentication redirects, blocked third-party resources and client-side errors.
Navigation timeout
Confirm the destination is reachable from the deployment region, reduce expensive page work, and configure a bounded timeout. Do not solve repeated timeouts by allowing unlimited execution time.
Best Value
- 【INTEGRATED SPEAKERS】Whether you're at work or in the midst of an intense gaming session, our built-in speakers provide rich and seamless audio, all while keeping your desk clutter-free.
- 【EASY ON THE EYES】 Protect your eyes and enhance your comfort with Blue-Light Shift technology. This feature reduces harmful blue light emissions from your screen, helping to alleviate eye strain during long hours of use and promoting healthier viewing habits.
- 【WIDEN YOUR PERSPECTIVE】Our sleek minimal bezel design ensures undivided attention. The nearly bezel-free display seamlessly connects in a dual monitor arrangement, delivering an unobstructed view that lets you focus on more at once, completely distraction-free.
Works locally but fails in production
Check the provider’s browser support, sandbox requirements, outbound network policy, memory and execution limits. A deployment preset that can run Nitro does not automatically include a compatible headless browser.
Dark mode looks unchanged
The target must actually respond to prefers-color-scheme. Pages with a manual theme switch may need a click or cookie set before capture instead of media emulation alone.
Or skip the browser setup
ScreenshotNeo is a hosted screenshot API and MCP server. It removes cookie banners, newsletter popups and chat widgets before capture; bot checks, blank pages and failed loads are not billed; and AI agents can call its take_screenshot, get_page_info and capture_pdf tools through MCP.
One GET request is enough:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for options and authentication. It supports PNG, JPEG, WebP and PDF, full-page capture, CSS selectors, dark mode, device presets, custom CSS and JavaScript, waits, request blocking, cookies and headers, signed links, asynchronous webhooks, bulk capture and caching. Responses identify the page verdict and whether the request was billed.
The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is available on every plan. Create a free ScreenshotNeo account to try the endpoint.
ScreenshotNeo request examples in other languages
Python
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);When to choose each approach
| Need | NuxtHub route | ScreenshotNeo |
|---|---|---|
| Control over browser code | Write and operate the route yourself | Configure the request through an API |
| Consent and widget cleanup | You must implement page-specific handling | Known consent platforms, popups and chat widgets are removed before capture |
| AI-agent workflow | Build your own integration | MCP tools are provided |
| Billing on failed captures | Depends on your hosting costs | Failed loads, bot checks, blank pages and cache hits are not billed |
| Cost starting point | Depends on your NuxtHub and hosting setup | 1,000 free shots monthly; paid plans from $5 for 3,000 |
Frequently Asked Questions
Can I expose the route publicly without authentication?
You can technically do so, but a caller-controlled navigation endpoint should normally require authentication, rate limits and destination restrictions to reduce abuse and internal-network risks.
Does domcontentloaded wait for Vue data and images?
No. It signals that the document was parsed; client-rendered data, fonts, images and delayed content may still be loading. Use a page-specific readiness condition when those assets matter.
Why is browser support deployment-specific?
Nitro can target many providers, while launching a headless browser also depends on process, sandbox, memory, filesystem and execution-time capabilities supplied by the provider.
Quick Recap
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.
