Detect Window Size And Media Query In Vue – vue-screen

Install & Download:

# Yarn
$ yarn add vue-screen@next
# NPM
$ npm install vue-screen@next

Description:

Reactive window size and media query states for VueJS 3. It supports your favorite UI framework grid breakpoints out of the box and can be configured with any custom breakpoints.

Features:

• Reactive and debounced window innerWidth and innerHeight
• Reactive media query states and device orientation
• Detect touch screen capability
• Breakpoints for most common ui frameworks provided out of the box: Tailwind, Bootstrap, Bulma, Foundation, Materialize, Semantic UI
• SSR compatible (Nuxt module included)

How to use it:

1. Import and register the vue-screen.

// with composition API
import { useScreen, useGrid } from 'vue-screen'
export default {
  setup() {
    const screen = useScreen()
    const grid = useGrid('tailwind')
    return {
      screen
      grid,
    }
  }
}

// as a plugin
import { createApp } from 'vue'
import VueScreen from 'vue-screen'
createApp()
  .use(VueScreen, 'tailwind')
  .mount('#app')

2. Basic usages.

<p>Screen width is {{ screen.width }}</p>
<p>Screen height is {{ screen.height }}</p>
<p>Current breakpoint is {{ grid.breakpoint }}</p>

3. Supported frameworks.

• Bootstrap
• Bulma
• Foundation
• Materialize
• Semantic UI
• Tailwind

4. Or using custom breakpoints.

import { useGrid } from 'vue-screen'
const grid = useGrid({
  a: 340,
  b: 768,
  c: 1024,
})

import VueScreen from 'vue-screen'
createApp().use(VueScreen, {
  grid: {
    a: 340,
    b: 768,
    c: 1024,
  }
})

Preview:

Changelog:

v2.4.0 (03/24/2024)

• Add provide/inject to pass screen and grid properties to all components when using the plugin version.

v2.3.2 (08/05/2023)

• Improve compatibility with jsdom environment

v2.3.1 (08/03/2023)

• Provide endpoints for different Bootstrap versions

v2.0.0 (03/16/2023)

• Improvements to the logic that detects the current breakpoint

v1.5.3 (11/15/2020)

• fix: add backwards compatibility for matchMedia queries

v1.5.2 (11/09/2020)

• Fixed: Do not include breakpointsOrder property when looping breakpoint keys

v1.5.0 (11/07/2020)

• Add Tailwind 2xl breakpoint
• Add config property on $screen object

v1.4.4 (09/01/2020)

• Fix Tailwind lg and xl breakpoint values