import { MediaQueries } from 'plugins/mediaqueries'

// Define your breakpoints or import them from elsewhere
const breakpoints = {
  small: 400,
  medium: 768,
  large: 1100,
  huge: 1400
}

Vue.use(MediaQueries, { breakpoints })

// JSX Example
Vue.component({
  // ...
  render (h) {
    return (
      <div>
      {this.$query({ from: 'medium' })
        ? 'Small Content'
        : 'Large Content'}
      </div>
    )
  }
})

this.$query({ from: 'medium' })
this.$query({ from: 'small', to: 'large' })
this.$query({ to: 'large' })

// JSX Example
Vue.component({
  name: 'DevStats'
  // ...
  render (h) {
    return (
      <span> Current Breakpoint: {this.$mq.current.name} @ {this.$mq.current.value}px </span>
    )
  }
})