Nuxt.js中实现客户端Bootstrap实时断点计算属性的最佳方案

核心实现前提 #

Nuxt.js 默认采用SSR服务端渲染模式，window 对象仅在客户端环境存在，直接在计算属性中读取视口宽度会导致服务端运行报错。同时要实现实时响应，需要监听视口尺寸变化更新状态，最终输出可直接在v-if中使用的布尔值计算属性，逻辑完全对齐Bootstrap内置响应式工具类的断点判断规则，和d-lg-block这类工具类的判断逻辑1:1等效。

实现时严格对齐Bootstrap默认的断点阈值标准：

• xs：视口宽度 < 576px
• sm：视口宽度 ≥ 576px 且 < 768px
• md：视口宽度 ≥ 768px 且 < 992px
• lg：视口宽度 ≥ 992px 且 < 1200px
• xl：视口宽度 ≥ 1200px 且 < 1400px
• xxl：视口宽度 ≥ 1400px

封装可复用的断点逻辑 #

通过组合式函数封装响应式状态，供所有组件复用：

import { ref, computed, onMounted, onBeforeUnmount } from 'vue'

// 对齐Bootstrap5默认断点阈值
const breakpoints = {
  sm: 576,
  md: 768,
  lg: 992,
  xl: 1200,
  xxl: 1400
}

export const useBootstrapBreakpoint = () => {
  // 初始值设为0，服务端渲染阶段不会访问window，避免报错
  const viewportWidth = ref(0)
  let resizeTimer = null

  // 仅在客户端读取真实视口宽度
  const updateViewport = () => {
    if (process.client) {
      viewportWidth.value = window.innerWidth
    }
  }

  // 带防抖的resize事件处理
  const handleResize = () => {
    clearTimeout(resizeTimer)
    resizeTimer = setTimeout(updateViewport, 150)
  }

  onMounted(() => {
    // 客户端挂载完成后，立刻获取真实视口宽度
    updateViewport()
    // 绑定resize事件监听
    window.addEventListener('resize', handleResize, { passive: true })
  })

  onBeforeUnmount(() => {
    // 组件卸载时清理资源，避免内存泄漏
    clearTimeout(resizeTimer)
    if (process.client) {
      window.removeEventListener('resize', handleResize)
    }
  })

  // 精准匹配单断点状态的计算属性
  const isXs = computed(() => viewportWidth.value < breakpoints.sm)
  const isSm = computed(() => viewportWidth.value >= breakpoints.sm && viewportWidth.value < breakpoints.md)
  const isMd = computed(() => viewportWidth.value >= breakpoints.md && viewportWidth.value < breakpoints.lg)
  const isLg = computed(() => viewportWidth.value >= breakpoints.lg && viewportWidth.value < breakpoints.xl)
  const isXl = computed(() => viewportWidth.value >= breakpoints.xl && viewportWidth.value < breakpoints.xxl)
  const isXxl = computed(() => viewportWidth.value >= breakpoints.xxl)

  // 断点及以上匹配的快捷属性，完全对齐Bootstrap响应式工具类逻辑
  const smAndUpper = computed(() => viewportWidth.value >= breakpoints.sm)
  const mdAndUpper = computed(() => viewportWidth.value >= breakpoints.md)
  const lgAndUpper = computed(() => viewportWidth.value >= breakpoints.lg)
  const xlAndUpper = computed(() => viewportWidth.value >= breakpoints.xl)

  return {
    isXs, isSm, isMd, isLg, isXl, isXxl,
    smAndUpper, mdAndUpper, lgAndUpper, xlAndUpper
  }
}

组件内实际使用 #

在需要使用断点判断的组件中，直接引入组合式函数，把返回的计算属性绑定到v-if上即可：

<script setup>
const { lgAndUpper, isXs, mdAndUpper } = useBootstrapBreakpoint()
</script>

<template>
  <!-- 视口≥992px（lg及以上）时才渲染桌面端导航 -->
  <nav v-if="lgAndUpper" class="desktop-nav">桌面端导航菜单</nav>
  <!-- 视口<576px（xs尺寸）时才渲染移动端汉堡按钮 -->
  <button v-if="isXs" class="hamburger-btn">打开菜单</button>
  <!-- 视口≥768px（md及以上）时才渲染侧边栏卡片 -->
  <aside v-if="mdAndUpper" class="side-panel">侧边推荐内容</aside>
</template>

关键实现细节 #

• 全程规避服务端报错：所有读取window的操作都放在客户端挂载完成后执行，服务端阶段使用默认初始值，从根源杜绝window is not defined的SSR报错
• 性能优化：给resize事件加150ms防抖，避免窗口拖拽过程中高频触发计算导致的页面卡顿；事件监听开启passive模式，进一步优化缩放交互的流畅度
• 内存泄漏防护：组件卸载时同步清理定时器、移除resize事件绑定，避免页面切换后残留无效的事件监听
• Hydration一致性兼容：因为初始状态在服务端和客户端首次渲染时完全统一，客户端挂载完成后才会更新为真实视口的状态，不会触发Nuxt的hydration mismatch警告

内容的提问来源于stack exchange，提问作者Mobin Samani