nuxt-breakpoints-media

Nuxt3 or higher module

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

Installation

1npm i nuxt-breakpoints-media

Add to modules

1// nuxt.config.ts
2export default defineNuxtConfig({
3  modules: ['nuxt-breakpoints-media'],
4  breakpoints: {
5    sm: 576,
6    md: 768,
7    lg: 992,
8    xl: 1200,
9    fallback: { // usefull to force pc first (ssr)
10      sm: false,
11      lSm: false,
12      sSm: true,
13
14      md: false,
15      lMd: false,
16      sMd: true,
17
18      lg: false,
19      lLg: false,
20      sLg: true,
21
22      xl: false,
23    },
24  },
25})

Usage

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

Usage with composable

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

Plugin returns a ref value with next props

1interface IBreakpoints {
2  sm: boolean
3  lSm: boolean
4  sSm: boolean
5
6  md: boolean
7  lMd: boolean
8  sMd: boolean
9
10  lg: boolean
11  lLg: boolean
12  sLg: boolean
13
14  xl: boolean
15}

LICENSE

MIT