stack/v1/packages/mosaic/framework/skills/vueuse-functions/references/useSSRWidth.md

category

category
Browser

useSSRWidth

Used to set a global viewport width which will be used when rendering SSR components that rely on the viewport width like useMediaQuery or useBreakpoints

Usage

import { provideSSRWidth } from '@vueuse/core';

const app = createApp(App);

provideSSRWidth(500, app);

Or in the root component

<script setup lang="ts">
import { provideSSRWidth } from '@vueuse/core';

provideSSRWidth(500);
</script>

To retrieve the provided value if you need it in a subcomponent

<script setup lang="ts">
import { useSSRWidth } from '@vueuse/core';

const width = useSSRWidth();
</script>

Type Declarations

export declare function useSSRWidth(): number | undefined;
export declare function provideSSRWidth(width: number | null, app?: App<unknown>): void;