1---
2category: Browser
3---
4 
5# useSSRWidth
6 
7Used to set a global viewport width which will be used when rendering SSR components that rely on the viewport width like [`useMediaQuery`](../useMediaQuery/index.md) or [`useBreakpoints`](../useBreakpoints/index.md)
8 
9## Usage
10 
11```ts
12import { provideSSRWidth } from '@vueuse/core'
13 
14const app = createApp(App)
15 
16provideSSRWidth(500, app)
17```
18 
19Or in the root component
20 
21```vue
22<script setup lang="ts">
23import { provideSSRWidth } from '@vueuse/core'
24 
25provideSSRWidth(500)
26</script>
27```
28 
29To retrieve the provided value if you need it in a subcomponent
30 
31```vue
32<script setup lang="ts">
33import { useSSRWidth } from '@vueuse/core'
34 
35const width = useSSRWidth()
36</script>
37```
38 
39## Type Declarations
40 
41```ts
42export declare function useSSRWidth(): number | undefined
43export declare function provideSSRWidth(
44  width: number | null,
45  app?: App<unknown>,
46): void
47```
48