DevTools tab

In nuxt dev, the module adds a PGlite tab to Nuxt DevTools. It is on whenever DevTools is, and nothing of it is registered in a build.

export default defineNuxtConfig({
  devtools: { enabled: true }, // Nuxt DevTools itself
  pglite: {
    devtools: true, // the PGlite tab (default)
  },
})

pglite.devtools only toggles the tab. Actions are defined where they run: in the config files, and under pglite.socket.devtoolsActions; the terminal picker works with the tab off.

The tab has three panes:

• Overview: for the server and the client side, whether it is enabled and eager, the data directory and the extensions. With the socket running, its URL, the number of connected clients and the variables it exported, with their values.
• SQL: a query box for each instance, the server's and the browser's (the latter runs in the app's tab, against its worker). Several statements run at once, each with its own result, up to 500 rows shown per statement. The last 20 queries per instance are kept as history, in the DevTools frame's local storage.
• Tools: your actions, grouped by where they run, each with a button and its last result.

Where the server queries run

The server pane targets the instance that exists:

• With the development socket, the instance the socket serves, in the Nuxt process. Queries and actions queue with the socket's clients, so they never land inside another client's transaction.
• Without it, the instance in Nitro, through usePGlite(), over a development-only endpoint.
• With the server side disabled and no socket, there is no server instance to query.

The client pane needs the app open: the DevTools frame reaches the app's own instance, and an action or query there creates the worker if the page has not yet.

When init fails

The socket's instance is created, and init run, when nuxt dev starts. When either fails, for example on a migration that does not apply or on edited migrations, the dev server keeps running and the socket keeps its URL, but refuses every client with a FATAL 57P03 (cannot_connect_now) error: PGlite is not ready: <the error>, with a hint pointing at the fix. The Overview pane shows the same reason above the server's details.

Two ways out:

• Fix the cause and restart nuxt dev. A change to the config file restarts it by itself.
• Run Reset database from the Tools pane: the reset-database action deletes the data directory and creates the instance again, init included. If that fails too, the socket keeps refusing clients, with the new reason.