Configuration with Composition API

useScreen

useScreen(ssrConfig?, debounceDelay? = 100)

export interface SsrConfig {
    width?: number;
    height?: number;
    orientation?: 'portrait' | 'landscape';
    touch?: boolean;
}

• ssrConfig: an optional SsrConfig object for server-side rendering
• debounceDelay: an optional delay in milliseconds to debounce the resize event on the window object. Defaults to 100ms.

ssrConfig is used on the initial screen configuration, and is mostly used for server-side rendering where there is no window object to obtain screen information from. The default value is taken from the Google Bot mobile crawler to force a mobile-first approach:

{
  width: 430,
  height: 730
  orientation: 'portrait',
  touch: true
}

If you are not performing server-side rendering in your app, this config has no impact.

useGrid

useGrid(config: string)

• config: a grid config.

The value can either be a string literal, with one of the supported UI frameworks:

'tailwind' | 'bootstrap' | 'bootstrap4' | 'bootstrap5' | 'bulma' | 'foundation' | 'materialize' | 'semanticUi'

or an object that specifies a custom grid:

Record<string, number | string | ComputedBreakpoint>

For example:

import { useGrid } from 'vue-screen'

useGrid({
  phone: '340px',
  tablet: 768,
  desktop: '32em',
})

Computed breakpoints

Aside from using direct breakpoint values, you can also specify breakpoints that depend on other breakpoints, for example:

import { useGrid } from 'vue-screen'

useGrid({
  phone: '340px',
  tablet: 768,
  desktop: '32em',
  tabletAndDown: grid => !grid.desktop,
})

In this example, the breakpoint tabletAndDown will be recalculated everytime desktop breakpoint changes.

Extending default UI frameworks breakpoints

Sometimes it's useful to add new breakpoints to the default configuration of one of the supported UI frameworks.
You can do that by using the extendGrid helper:

import { useGrid, extendGrid } from 'vue-screen'

useGrid(extendGrid('tailwind', {
  mdAndDown: grid => !grid.lg
}))