---
title: "Google Search Console in Vite · gscdump"
canonical_url: "https://gscdump.com/google-search-console/vite"
last_updated: "2026-10-06T11:30:15.311Z"
meta:
  description: "Add Google Search Console to Vite DevTools. Set up the gscdump plugin to view page clicks, impressions, position, and queries as you develop your app."
  "og:description": "Add Google Search Console to Vite DevTools. Set up the gscdump plugin to view page clicks, impressions, position, and queries as you develop your app."
  "og:title": "Google Search Console in Vite · gscdump"
---

[Google Search Console devtools](https://gscdump.com/google-search-console)

# Google Search Console in Vite

View clicks, impressions, CTR, position, and top queries for the page you are editing. The dock follows page navigation in your app.

[**Set up Vite**](#setup) [**Nuxt setup**](https://gscdump.com/google-search-console/nuxt)

## Setup

1. ### **1. Connect your Site **

   Sign in to gscdump with Google. Connect your Site and wait for its initial sync. The dock reads the same Hosted record as your dashboard. [**Join the waitlist **](https://gscdump.com/#get-access)
2. ### **2. Install the devtool **

   Use Node.js 22.13 or later. Use Vite 8.3 or later with Vite DevTools.

   ```
   pnpm add -D @gscdump/devframe @vitejs/devtools @vitejs/devtools-kit
   ```


3. ### **3. Add the plugin**

   Replace example.com with your registered Site host or exact Site ID.

   ```
   // vite.config.ts import { gscdump } from '@gscdump/devframe/vite' import { defineConfig } from 'vite' export default defineConfig({ devtools: true, plugins: [gscdump({ site: 'example.com' })], })
   ```


4. ### **4. Sign in from the terminal **

   Complete the browser login opened by this command.

   ```
   pnpm dlx @gscdump/cli auth login --mode hosted
   ```

   If you already have a user API key, set GSCDUMP\_API\_KEY in your dev server environment.
5. ### **5. Open Search Console **

   Start your app, then open the Search Console dock in Vite DevTools.

   ```
   pnpm dev
   ```

   If DevTools asks for a code, enter the code printed in your terminal. Navigate to a page. Follow app updates the dock with that page's stats.

## What you can read

- Clicks, impressions, CTR, and average position, compared with the previous window.
- A daily chart for the last 7 days, 28 days, or 3 months.
- The top queries that brought people to the page.
- An Open in gscdump link to the full page view.

## Questions

The dock reads your Hosted record in gscdump. Google usually reports data two to three days later. The date window excludes recent days that Google has not finalized.

Yes. Enter its path or URL in the dock, then select Show. Follow app switches back to the page you are editing.

The credential stays in your dev server. The browser calls that server. Never put the key in public runtime config or a VITE\_ environment variable.

Set site to the exact Site ID or registered host. Without that option, the dock asks you to select a Site.

[~~Package documentation~~](https://github.com/harlan-zw/gscdump/tree/main/packages/devframe) · [~~Vite DevTools documentation~~](https://devtools.vite.dev/)

## Sitemap

See the full [sitemap](/sitemap.md) for all pages.