Nuxt js中计算的Bootstrap断点

npm install bootstrap

export default {
  css: [
    'bootstrap/dist/css/bootstrap.min.css'
  ],
  // ...
}

// _variables.scss
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

export default {
  computed: {
    bootstrapBreakpoints() {
      return {
        xs: 576,
        sm: 768,
        md: 992,
        lg: 1200,
        xl: 1400
      };
    }
  }
}

<template>
  <div>
    <p v-if="$mq === 'xs'">Extra small screen</p>
    <p v-else-if="$mq === 'sm'">Small screen</p>
    <p v-else-if="$mq === 'md'">Medium screen</p>
    <p v-else-if="$mq === 'lg'">Large screen</p>
    <p v-else-if="$mq === 'xl'">Extra large screen</p>
  </div>
</template>

<script>
export default {
  computed: {
    bootstrapBreakpoints() {
      return {
        xs: 576,
        sm: 768,
        md: 992,
        lg: 1200,
        xl: 1400
      };
    },
    $mq() {
      const width = window.innerWidth;
      if (width < this.bootstrapBreakpoints.sm) {
        return 'xs';
      } else if (width < this.bootstrapBreak基points.md) {
        return 'sm';
      } else if (width < this.bootstrapBreakpoints.lg) {
        return 'md';
      }  else if (width < this.bootstrapBreakpoints.xl) {
        return 'lg';
      } else {
        return 'xl';
      }
    }
  }
}
</script>