nuxt-breakpoints-media

Nuxt3 or higher module

Module adds to your app easy way to control web page breakpoints

Installation

npm i nuxt-breakpoints-media

Add to modules

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-breakpoints-media'],
  breakpoints: {
    sm: 576,
    md: 768,
    lg: 992,
    xl: 1200,
  },
})

Usage

const { $bp } = useNuxtApp()
const isSmallThanMd = computed(() => $bp.value.sMd)

Usage with composable

const bp = useBreakpoints()
const isSmallThanMd = computed(() => bp.value.sMd)

Plugin returns a ref value with next props

interface IBreakpoints {
  sm: boolean
  lSm: boolean
  sSm: boolean

  md: boolean
  lMd: boolean
  sMd: boolean

  lg: boolean
  lLg: boolean
  sLg: boolean

  xl: boolean
}

LICENSE

MIT