fix: Fix hydration missmatch on /modules

[divagueame]

🔗 Linked issue

#2165

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This PR adds a ssrWidth value to useBreakpoints to avoid hydration mismatches.

https://vueuse.org/core/useBreakpoints/#server-side-rendering-and-nuxt

To see this problem, go to:
https://nuxt.com/modules?category=Fonts

on the browser console:
Hydration completed but contains mismatches.

[vercel]

@divagueame is attempting to deploy a commit to the Nuxt Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

The pull request updates the useBreakpoints call in app/pages/modules/index.vue, adding a second argument: an options object { ssrWidth: 1024 }. This change alters the server-side rendering initialization width used by the hook while leaving client-side runtime breakpoint values and other logic unchanged.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Merge Conflict Detection	⚠️ Warning	❌ Merge conflicts detected (100 files): ⚔️ .env.example (content) ⚔️ .github/workflows/ci.yml (content) ⚔️ .github/workflows/e2e.yml (content) ⚔️ .github/workflows/provenance.yml (content) ⚔️ .gitignore (content) ⚔️ README.md (content) ⚔️ app/app.vue (content) ⚔️ app/components/AdminDashboard.vue (content) ⚔️ app/components/ModulesMarquee.vue (content) ⚔️ app/components/OgImage/Module.vue (content) ⚔️ app/components/PageHeaderLinks.vue (content) ⚔️ app/components/SocialLinks.vue (content) ⚔️ app/components/TemplateCard.vue (content) ⚔️ app/components/UInputCopy.vue (content) ⚔️ app/components/ads/Ads.vue (content) ⚔️ app/components/content/enterprise/support/EnterpriseSupportFormSection.vue (content) ⚔️ app/components/feedback/FeedbackChart.vue (content) ⚔️ app/components/header/Header.vue (content) ⚔️ app/components/home/HomeSectionContributors.vue (content) ⚔️ app/components/module/ModuleItem.vue (content) ⚔️ app/components/newsletter/NewsletterForm.vue (content) ⚔️ app/composables/useDocsVersion.ts (content) ⚔️ app/composables/useEnterpriseJobs.ts (content) ⚔️ app/composables/useFeedback.ts (content) ⚔️ app/composables/useModules.ts (content) ⚔️ app/composables/useNavigation.ts (content) ⚔️ app/composables/useSponsors.ts (content) ⚔️ app/composables/useStats.ts (content) ⚔️ app/error.vue (content) ⚔️ app/layouts/default.vue (content) ⚔️ app/pages/blog/[slug].vue (content) ⚔️ app/pages/deploy/[slug].vue (content) ⚔️ app/pages/deploy/index.vue (content) ⚔️ app/pages/index.vue (content) ⚔️ app/pages/modules/[slug].vue (content) ⚔️ app/pages/modules/index.vue (content) ⚔️ app/pages/showcase.vue (content) ⚔️ app/pages/team.vue (content) ⚔️ app/pages/templates.vue (content) ⚔️ app/pages/video-courses.vue (content) ⚔️ app/plugins/newsletter.client.ts (content) ⚔️ app/plugins/stats.ts (content) ⚔️ app/types/index.ts (content) ⚔️ app/utils/index.ts (content) ⚔️ app/utils/showcase.ts (content) ⚔️ content/blog/32.nuxt-ui-v3.md (content) ⚔️ content/blog/35.building-a-feedback-widget.md (content) ⚔️ content/blog/39.nuxt-ui-v4.md (content) ⚔️ content/blog/40.building-nuxt-mcp.md (content) ⚔️ content/blog/41.nuxt-image-v2.md (content) ⚔️ content/deploy/cloudflare.md (content) ⚔️ content/deploy/firebase.md (content) ⚔️ content/deploy/vercel.md (content) ⚔️ content/deploy/zeabur.md (content) ⚔️ content/index.yml (content) ⚔️ content/showcase.yml (content) ⚔️ content/templates/agency-os.yml (content) ⚔️ content/templates/atidone.yml (content) ⚔️ content/templates/atidraw.yml (content) ⚔️ content/templates/canvas.yml (content) ⚔️ content/templates/charts-dashboard.yml (content) ⚔️ content/templates/content-wind.yml (content) ⚔️ content/templates/dailyhub-directory-template.yml (content) ⚔️ content/templates/glideai.yml (content) ⚔️ content/templates/green-chronicle.yml (content) ⚔️ content/templates/habit.yml (content) ⚔️ content/templates/hackernews.yml (content) ⚔️ content/templates/happy-paws.yml (content) ⚔️ content/templates/hato.yml (content) ⚔️ content/templates/image-gallery.yml (content) ⚔️ content/templates/materio.yml (content) ⚔️ content/templates/movies.yml (content) ⚔️ content/templates/nucommerce-store.yml (content) ⚔️ content/templates/nuxt-deno-kv.yml (content) ⚔️ content/templates/nuxt-starter-kit.yml (content) ⚔️ content/templates/nuxt-ui-portfolio.yml (content) ⚔️ content/templates/nuxtship.yml (content) ⚔️ content/templates/shadcn-docs.yml (content) ⚔️ content/templates/shadcn-landing-pro.yml (content) ⚔️ content/templates/sokol.yml (content) ⚔️ content/templates/spike.yml (content) ⚔️ content/templates/supastarter.yml (content) ⚔️ content/templates/supersaas.yml (content) ⚔️ content/templates/vucommerce-store.yml (content) ⚔️ content/templates/woonuxt.yml (content) ⚔️ content/templates/zooper.yml (content) ⚔️ content/video-courses.yml (content) ⚔️ content/video-courses/full-stack-nuxt-course.yml (content) ⚔️ content/video-courses/nuxt-3-crash-beginners.yml (content) ⚔️ content/video-courses/nuxt-3-crash-course-2025.yml (content) ⚔️ content/video-courses/nuxt-3-crash-course-prismic.yml (content) ⚔️ helpers/mdc-parser.mjs (content) ⚔️ modules/screenshot.ts (content) ⚔️ nuxt.config.ts (content) ⚔️ package.json (content) ⚔️ pnpm-lock.yaml (content) ⚔️ public/assets/blog/nuxt-image-v2.png (content) ⚔️ public/assets/blog/v4.2.png (content) ⚔️ server/api/feedback/index.post.ts (content) ⚔️ server/utils/team.ts (content) These conflicts must be resolved before merging into main.	Resolve conflicts locally and push changes to this branch.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: fixing a hydration mismatch on the /modules page, which aligns with the changeset that adds SSR-related configuration to useBreakpoints.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	The pull request description clearly explains the issue being fixed (hydration mismatches) and the specific solution applied (adding ssrWidth value to useBreakpoints).

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
nuxt	Error		Feb 17, 2026 0:04am