Hydration Mismatch Constraints with Browser-Specific APIs

Nuxt.js employs a universal rendering strategy where the server generates the initial HTML and the client-side Vue instance hydrates that DOM to enable interactivity. For this process to succeed, the server-rendered output must match the client-side initial render exactly.

A technical challenge arises when integrating browser-specific APIs, such as localStorage or window, within the setup or created hooks. While the <ClientOnly> component can isolate client-side UI, it may not be sufficient for logic that must influence the initial state before the component mounts, potentially leading to hydration node mismatch warnings.

Given these constraints, what are the best practices for managing state that depends on browser-only data without triggering hydration errors? In what specific scenarios does <ClientOnly> fail to prevent a mismatch when the server-side state differs from the client-side initial state?