Nuxt

Want to see it working? Check out the full example on GitHub - a minimal setup you can clone and run.

Nuxt is the full-stack framework for Vue. Since Nuxt uses Vite under the hood, the existing Vue component and Vite plugin work with a bit of wiring.

Getting Started

Install heroshot:

bash

npm install heroshot

Then run it:

bash

npx heroshot

This opens a browser with the visual picker. Start your Nuxt dev server (npm run dev), navigate to it in the heroshot browser, click on elements you want to capture, and close when done.

Where to Put Screenshots

Nuxt serves anything in public/ at the root URL. Set your heroshot output directory to public/heroshots so screenshots are served as /heroshots/whatever.png:

json

// .heroshot/config.json
{
  "outputDirectory": "public/heroshots"
}

Setting Up the Plugin

Add the Vite plugin to your Nuxt config:

// nuxt.config.ts
import { heroshot } from 'heroshot/plugins/vite';

export default defineNuxtConfig({
  vite: {
    plugins: [heroshot()],
    optimizeDeps: {
      exclude: ['heroshot'],
    },
  },
});

That's it. The plugin auto-registers the manifest when you import the <Heroshot> component.

Why optimizeDeps.exclude?

Vite pre-bundles dependencies for faster dev startup. This can split heroshot's manifest store into separate copies, breaking the connection between the plugin and component. Excluding heroshot keeps everything in one module.

Using Screenshots

Import and use the component in any page or component:

vue

<script setup>
import { Heroshot } from 'heroshot/nuxt';
</script>

<template>
  <Heroshot name="Dashboard" alt="Dashboard overview" />
</template>

The component handles everything:

Light/dark mode - Automatically switches based on your app's theme
Responsive viewports - Uses <picture> with media queries when you have multiple viewport variants
Lazy loading - Images load lazily by default
SSR - Renders the correct image on the server, no hydration mismatches

Props

Prop	Type	Description
`name`	`string`	Screenshot name (as defined in heroshot config)
`alt`	`string`	Alt text for accessibility
`class`	`string`	CSS class to apply to the image

Dark Mode Detection

The component detects dark mode by checking:

.dark class - Used by Nuxt Color Mode (@nuxtjs/color-mode), Tailwind, and many Vue UI libraries
prefers-color-scheme - Browser/OS preference

Nuxt's @nuxtjs/color-mode module sets class="dark" on <html> by default, which works out of the box.

Vue Component

For plain Vue apps (not Nuxt), see the Vue integration - it uses the same component with the same Vite plugin.

Nuxt ​

Getting Started ​

Where to Put Screenshots ​

Setting Up the Plugin ​

Using Screenshots ​

Props ​

Dark Mode Detection ​

Vue Component ​