Media query boundaries

[rosshulford]

I have the following custom breakpoints

Vue.use(VueMq, {
  breakpoints: {
    xsmall: 500,
    small: 768,
    medium: 1024,
    large: 1360,
    xlarge: 1800
  }
});

I want to do the following

 <span v-if="$mq==='small'>
       some text
            </span>
    <span v-else>
           diffrent text
 </span>

The text does change but as soon as I resize to the 'medium' breakpoint it reverts.

This would work but is a bit messy, is there not a way to check for small or above?

 <span v-if="$mq==='small' || $mq=='medium || $mq == 'large' || $mq == 'xlarge">
       some text
            </span>
    <span v-else>
           diffrent text
 </span>

[MarcoGomesr]

$mq property provide a wrapper component to facilitate conditional rendering with media queries.

<mq-layout :mq="['small', 'medium', 'large','xlarge']">
  <span> Display on small medium large and xlarge</span>
</mq-layout>

or

<mq-layout mq="small+">
  <span> Display on md and larger </span>
</mq-layout>

[entioentio]

meanwhile ...Shouldn't it be closed?

[Kezhich]

$mq property provide a wrapper component to facilitate conditional rendering with media queries.

<mq-layout :mq="['small', 'medium', 'large','xlarge']">
  <span> Display on small medium large and xlarge</span>
</mq-layout>

or

<mq-layout mq="small+">
  <span> Display on md and larger </span>
</mq-layout>

Hi! Can I make it simplier inside a computed property?

Like:

computed: {
getText() { return this.$mq === "sm" && this.$mq === "tb" ? "small text" : "large text"}
}

To:

computed: {
getText() { return this.$mq >= "tb" ? "small text" : "large text"}
}

Or something like that.