Skip to content
Sign in
Google Search Console devtools

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 ViteNuxt setup

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

  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

Package documentationVite DevTools documentation