1---
2category: '@Electron'
3---
4 
5# useZoomLevel
6 
7Reactive [WebFrame](https://www.electronjs.org/docs/api/web-frame#webframe) zoom level.
8 
9## Usage
10 
11```ts
12import { useZoomLevel } from '@vueuse/electron'
13 
14// enable nodeIntegration if you don't provide webFrame explicitly
15// see: https://www.electronjs.org/docs/api/webview-tag#nodeintegration
16// Ref result will return
17const level = useZoomLevel()
18console.log(level.value) // print current zoom level
19level.value = 2 // change current zoom level
20```
21 
22Set initial zoom level immediately
23 
24```ts
25import { useZoomLevel } from '@vueuse/electron'
26 
27const level = useZoomLevel(2)
28```
29 
30Pass a `ref` and the level will be updated when the source ref changes
31 
32```ts
33import { useZoomLevel } from '@vueuse/electron'
34import { shallowRef } from 'vue'
35 
36const level = shallowRef(1)
37 
38useZoomLevel(level) // zoom level will match with the ref
39 
40level.value = 2 // zoom level will change
41```
42 
43## Type Declarations
44 
45```ts
46export declare function useZoomLevel(level: MaybeRef<number>): Ref<number>
47export declare function useZoomLevel(
48  webFrame: WebFrame,
49  level: MaybeRef<number>,
50): Ref<number>
51export declare function useZoomLevel(webFrame: WebFrame): Ref<number>
52export declare function useZoomLevel(): Ref<number>
53```
54