Google Search Console - v1.0.0

The package ships three UI implementations — one Livewire, one React, one Vue — of each of the three reports it exposes. All three implementations render the same information and are backed by the same server-side data:

Every component handles:

• Missing base package — renders an install-the-base call to action.
• No connected Google account — renders a connect call to action.
• Empty data — renders an empty state rather than a misleading zero-metric card.
• API errors — renders the message, not a stack trace.

Sub-pages:

• Livewire components — the three <livewire:google-search-console::*> components.
• React components — three React components + the shared TypeScript fetch client.
• Vue components — three Vue components + the same shared client.
• Building your own — fetching directly from the HTTP endpoints to render in any framework.

Data flow

The Livewire components fetch server-side inside mount():

Livewire::mount() → SearchAnalyticsClient::query() → Google API
                                                   ↓
                                            component state
                                                   ↓
                                                render

The React and Vue components fetch client-side via fetch() against the package's HTTP endpoints:

React/Vue::mount() → fetch('/google-search-console/performance')
                          ↓
                    controller → SearchAnalyticsClient::query() → Google API
                          ↓
                     JSON response
                          ↓
                    component state
                          ↓
                       render

The shape a component ends up rendering is identical either way — the controllers serialise the same DTOs the Livewire components put on $this->totals, $this->trend, $this->rows.

Choosing a component

The Livewire components render server-side and can be dropped into any Blade view without touching a bundler. The React and Vue components need to be imported through your bundler (or published into your app's tree via vendor:publish --tag=google-search-console-js).

Labels and i18n

The Livewire surfaces run every string through __() / trans_choice(). The React and Vue components can't call those directly, so they inline English defaults — override by publishing the JS sources and editing them, or by wrapping the components in your own framework's i18n layer before rendering.

Continue to HTTP Endpoints →