feat(nuxt-module): sync to 1.17.0 and add reactive detection composables - #240
Draft
jrmybtlr wants to merge 1 commit into
Draft
feat(nuxt-module): sync to 1.17.0 and add reactive detection composables#240jrmybtlr wants to merge 1 commit into
jrmybtlr wants to merge 1 commit into
Conversation
Bring usemods-nuxt in line with usemods@1.17.0, upgrade the playground to Nuxt 4, and auto-import SSR-safe Vue composables for helpers that need event listeners. Update install/docs copy to document the composables. Co-authored-by: Jeremy Butler <jrmybtlr@users.noreply.github.com>
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
usemods | a7876b2 | Commit Preview URL Branch Preview URL |
Sep 08 2026, 08:25 PM |
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
The new reactive composables currently wire high-frequency events (scroll/mousemove) directly into reactive updates and matchMedia uses an API that can be incompatible with older WebKit without a small fallback.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
Updates the usemods-nuxt module to align with usemods@1.17.0, and introduces a set of SSR-safe, auto-imported Nuxt/Vue composables that wrap detection helpers requiring event listeners. The PR also refreshes related documentation across the library, website, and module package, and adds e2e coverage for Nuxt auto-import behavior.
Changes:
- Bump
usemods-nuxtto1.17.0(and dependency sync tousemods@1.17.0), update the Nuxt playground to Nuxt4.5.1. - Add reactive detection composables (e.g.
useBreakpoint,useScrollPosition,useWindowSize, etc.) and auto-import them via the Nuxt module. - Update docs/site copy to reflect composable availability, and add Nuxt e2e tests validating SSR-safe defaults + auto-imports.
File summaries
| File | Description |
|---|---|
| src/detections.ts | Updates detections module description to reference Nuxt composables as an alternative to manual listeners. |
| README.md | Updates Nuxt install section to advertise reactive composables and adds a short usage snippet. |
| nuxt-web/pages/intro/introduction.vue | Updates Nuxt module marketing copy to mention auto-imports + reactive composables. |
| nuxt-web/pages/intro/installation.vue | Updates Nuxt install copy and adds a Shiki snippet demonstrating composable usage. |
| nuxt-web/pages/docs/detections.vue | Updates detections page intro to reference usemods-nuxt composables. |
| nuxt-web/content/1.intro/2.installation.md | Updates Nuxt installation docs and adds a composables snippet. |
| nuxt-web/content/1.intro/1.introduction.md | Updates Nuxt module intro copy to mention auto-imports + reactive composables. |
| nuxt-module/tsconfig.json | Excludes the test directory from the Nuxt-module TS config. |
| nuxt-module/test/fixtures/basic/app.vue | Updates fixture to exercise auto-imported slugify and SSR-safe composable behavior. |
| nuxt-module/test/basic.test.ts | Replaces placeholder test with Nuxt e2e checks for auto-imports + SSR-safe composables. |
| nuxt-module/src/runtime/composables/useWindowSize.ts | Adds reactive, SSR-safe window-size composable. |
| nuxt-module/src/runtime/composables/useScrollPosition.ts | Adds reactive, SSR-safe scroll-position composable. |
| nuxt-module/src/runtime/composables/useRelativeMousePosition.ts | Adds reactive, SSR-safe relative mouse-position composable. |
| nuxt-module/src/runtime/composables/useOrientation.ts | Adds reactive, SSR-safe portrait/landscape composable. |
| nuxt-module/src/runtime/composables/useNetworkStatus.ts | Adds reactive, SSR-safe network-status composable. |
| nuxt-module/src/runtime/composables/useMousePosition.ts | Adds reactive, SSR-safe absolute mouse-position composable. |
| nuxt-module/src/runtime/composables/useContainerBreakpoint.ts | Adds reactive container-breakpoint composable (ResizeObserver + resize listener). |
| nuxt-module/src/runtime/composables/useColorScheme.ts | Adds reactive color-scheme composable based on matchMedia. |
| nuxt-module/src/runtime/composables/useBreakpoint.ts | Adds reactive Tailwind-breakpoint composable based on resize. |
| nuxt-module/src/runtime/composables/useActiveBrowser.ts | Adds reactive “active/hidden tab” composable based on visibilitychange. |
| nuxt-module/src/module.ts | Auto-imports all usemods exports and adds a composables imports directory. |
| nuxt-module/README.md | Documents the new composables, SSR-safe defaults, and the alias option. |
| nuxt-module/playground/package.json | Updates playground Nuxt dependency to ^4.5.1. |
| nuxt-module/playground/app.vue | Expands playground UI to render composable outputs for manual verification. |
| nuxt-module/package.json | Bumps module version + updates description and usemods dependency to 1.17.0. |
| docs/pages/devices.md | Documents Nuxt composable alternative for orientation reactivity. |
| docs/pages/detections.md | Updates detections docs to reference usemods-nuxt composables as the reactive option. |
Review details
- Files reviewed: 27/28 changed files
- Comments generated: 4
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+16
to
+24
| onMounted(() => { | ||
| update() | ||
| media = window.matchMedia('(prefers-color-scheme: dark)') | ||
| media.addEventListener('change', update) | ||
| }) | ||
|
|
||
| onUnmounted(() => { | ||
| media?.removeEventListener('change', update) | ||
| }) |
Comment on lines
+11
to
+21
| const update = (event: MouseEvent): void => { | ||
| position.value = detectMousePosition(event) | ||
| } | ||
|
|
||
| onMounted(() => { | ||
| window.addEventListener('mousemove', update, { passive: true }) | ||
| }) | ||
|
|
||
| onUnmounted(() => { | ||
| window.removeEventListener('mousemove', update) | ||
| }) |
Comment on lines
+11
to
+21
| const update = (event: MouseEvent): void => { | ||
| position.value = detectRelativeMousePosition(event) | ||
| } | ||
|
|
||
| onMounted(() => { | ||
| window.addEventListener('mousemove', update, { passive: true }) | ||
| }) | ||
|
|
||
| onUnmounted(() => { | ||
| window.removeEventListener('mousemove', update) | ||
| }) |
Comment on lines
+11
to
+22
| const update = (): void => { | ||
| position.value = detectScrollPosition() | ||
| } | ||
|
|
||
| onMounted(() => { | ||
| update() | ||
| window.addEventListener('scroll', update, { passive: true }) | ||
| }) | ||
|
|
||
| onUnmounted(() => { | ||
| window.removeEventListener('scroll', update) | ||
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Brings
usemods-nuxtup to date withusemods@1.17.0and adds the reactive Vue composables that install/docs have been promising for detections that need event listeners.Module refresh
usemodsdependency → 1.17.0@nuxt/test-utilse2e coverage (auto-import + SSR-safe composable defaults)pnpm-lock.yamlfor the isolated module packageReactive composables (auto-imported)
useScrollPositiondetectScrollPositionuseMousePositiondetectMousePositionuseRelativeMousePositiondetectRelativeMousePositionuseWindowSizedetectWindowSizeuseActiveBrowserdetectActiveBrowseruseColorSchemedetectColorSchemeuseBreakpointdetectBreakpointuseContainerBreakpointdetectContainerBreakpointuseNetworkStatusdetectNetworkStatususeOrientationisPortrait/isLandscapeDocs
nuxt-module/README.md(plus alias option)Notes
nuxt-webremains onusemods-nuxt@^1.16.0until this package is published to npmVerify
pnpm run test(2 passed)pnpm run test:typespnpm run dev:build(playground)