Responsive Media

2.1.0

2026-10-02

• New: the responsive-media/nuxt Nuxt module. Describe your breakpoints once in the responsive key of nuxt.config.ts (breakpoints, order, debounce, ssrState); useResponsive() and useBreakpoints() are auto-imported and typed from those breakpoints, useMediaQuery() and useContainerState() are auto-imported too, and a plugin installs the shared state on the app. See Nuxt Integration.
• New: defineResponsive(config, options?) in responsive-media/vue and responsive-media/react. It applies the config and returns useResponsive and useBreakpoints (plus a plugin in Vue) whose state and breakpoint keys are inferred from config, so a typo such as isAbove('nope') is a compile error and no generic has to be written by hand.
• New: the ssrState option of SetConfigOptions. Whenever matchMedia or ResizeObserver is unavailable — on the server — the listed keys take these values instead of false, so the server can render a layout. It works for createResponsiveState(), createContainerState(), setResponsiveConfig() and the Nuxt module.
• Types: useContainerState() infers the keys of its returned state from the config (Vue and React), and BreakpointHelpers takes an optional key type, BreakpointHelpers<K extends string = string>. Existing code keeps compiling.
• Fixed: the Vue useBreakpoints() ignored the configured order when the state was provided by ResponsivePlugin, and fell back to the order of the config keys — so current could name the wrong breakpoint when the two orders differed. The configured order is now used.
• New optional peer dependency: @nuxt/kit (^3.9.0 || ^4.0.0), needed only for responsive-media/nuxt; Nuxt already provides it.