`useScreenSize`

The useScreenSize composable allows you to have a dynamic and responsive UI when dealing with your Javascript code. When possible, it is recommended to use the responsive CSS classes instead, for performance reasons.

Overview

typescript

interface ScreenSizes {
  sm: number;
  md: number;
  lg: number;
  xl: number;
  '2xl': number;
}

interface ScreenSizesLt {
  sm: boolean;
  md: boolean;
  lg: boolean;
  xl: boolean;
  '2xl': boolean;
}

interface ScreenSizesGt {
  xs: boolean;
  sm: boolean;
  md: boolean;
  lg: boolean;
  xl: boolean;
}

interface ScreenSize {
  width: number;
  height: number;
  name: string;
  sizes: ScreenSizes;
  lt: ScreenSizesLt;
  gt: ScreenSizesGt;
  xs: boolean;
  sm: boolean;
  md: boolean;
  lg: boolean;
  xl: boolean;
  '2xl': boolean;
}

declare function useScreenSize(): Ref<ScreenSize>;

Example

html

<template>
  <div>
    <div v-if="screen.lt.md">
      This content will be showed only on screens lower than md sizes
    </div>
    <div v-if="screen.gt.md">
      This content will be showed only on screens greater than md sizes
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useScreenSize } from '@/composables';

  const screen = useScreenSize();
</script>

This composable was inspired on Screen Plugin of Quasar and adapted to Tailwindcss requirements.

useScreenSize ​

Overview ​

Example ​

`useScreenSize`

Overview

Example