The BOffcanvas component with the responsive prop was causing hydration mismatch errors in SSR environments due to inconsistent initial state between server and client rendering.

Problem

When using BOffcanvas with the responsive prop in SSR applications (Nuxt, Next.js, etc.), the component would evaluate breakpoints differently during SSR vs client hydration:

• SSR Phase: No window object exists, so useBreakpoints returns fallback values
• Client Hydration: Real window dimensions are available, causing different breakpoint evaluation
• Result: isOpenByBreakpoint would have different initial values, triggering hydration mismatch errors

<!-- This would cause hydration issues in SSR -->
<BOffcanvas v-model="show" responsive="md" title="My Offcanvas">
  Content here
</BOffcanvas>

Users had to work around this by wrapping the component in client-only components, which defeats the purpose of SSR.

Solution

The fix ensures SSR compatibility by initializing isOpenByBreakpoint with an SSR-safe default value (false) and deferring the actual breakpoint evaluation to the onMounted hook (client-side only):

- const isOpenByBreakpoint = ref(props.responsive !== undefined && !smallerOrEqualToBreakpoint.value)
+ // Initialize with SSR-safe default value to prevent hydration mismatches
+ // The actual breakpoint evaluation is deferred to onMounted (client-side only)
+ const isOpenByBreakpoint = ref(false)

 onMounted(() => {
-  if (props.responsive !== undefined)
+  if (props.responsive !== undefined) {
+    // Update the breakpoint state after mounting (client-side only)
+    isOpenByBreakpoint.value = !smallerOrEqualToBreakpoint.value
     emit('breakpoint', buildTriggerableEvent('breakpoint'), isOpenByBreakpoint.value)
+  }
 })

Benefits

• ✅ Eliminates hydration mismatch errors in SSR environments
• ✅ No more need for client-only wrappers around responsive BOffcanvas
• ✅ Maintains all existing functionality and responsive behavior
• ✅ No breaking changes to props, events, or exposed methods
• ✅ No performance impact - same runtime behavior once mounted

The component now works seamlessly in SSR environments while preserving all responsive functionality after the initial client-side mount.

Fixes #1982.

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.