---
category: Browser
---

# usePerformanceObserver

Observe performance metrics.

## Usage

```ts
import { usePerformanceObserver } from '@vueuse/core';

const entrys = ref<PerformanceEntry[]>([]);
usePerformanceObserver(
  {
    entryTypes: ['paint'],
  },
  (list) => {
    entrys.value = list.getEntries();
  },
);
```

## Type Declarations

```ts
export type UsePerformanceObserverOptions = PerformanceObserverInit &
  ConfigurableWindow & {
    /**
     * Start the observer immediate.
     *
     * @default true
     */
    immediate?: boolean;
  };
/**
 * Observe performance metrics.
 *
 * @see https://vueuse.org/usePerformanceObserver
 * @param options
 */
export declare function usePerformanceObserver(
  options: UsePerformanceObserverOptions,
  callback: PerformanceObserverCallback,
): {
  isSupported: ComputedRef<boolean>;
  start: () => void;
  stop: () => void;
};
```