Nuxt-breakpoints-media NPM

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,
    fallback: { // usefull to force pc first (ssr)
      sm: false,
      lSm: false,
      sSm: true,

      md: false,
      lMd: false,
      sMd: true,

      lg: false,
      lLg: false,
      sLg: true,

      xl: false,
    },
  },
})

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
}