1---
2category: Browser
3---
4 
5# usePerformanceObserver
6 
7Observe performance metrics.
8 
9## Usage
10 
11```ts
12import { usePerformanceObserver } from '@vueuse/core'
13 
14const entrys = ref<PerformanceEntry[]>([])
15usePerformanceObserver({
16  entryTypes: ['paint'],
17}, (list) => {
18  entrys.value = list.getEntries()
19})
20```
21 
22## Type Declarations
23 
24```ts
25export type UsePerformanceObserverOptions = PerformanceObserverInit &
26  ConfigurableWindow & {
27    /**
28     * Start the observer immediate.
29     *
30     * @default true
31     */
32    immediate?: boolean
33  }
34/**
35 * Observe performance metrics.
36 *
37 * @see https://vueuse.org/usePerformanceObserver
38 * @param options
39 */
40export declare function usePerformanceObserver(
41  options: UsePerformanceObserverOptions,
42  callback: PerformanceObserverCallback,
43): {
44  isSupported: UseSupportedReturn
45  start: () => void
46  stop: () => void
47}
48```
49