Miss any of our Open RFC calls?Watch the recordings here! »

vue-component-observer

1.0.1 • Public • Published

vue-component-observer

Plugin for responsive components

Installation

yarn add vue-component-observer

Usage

Global install the component

import VueComponentObserver from 'vue-component-observer'
 
Vue.use(VueComponentObserver)

Declare the component breakpoints in the root of the component itself and then use the $eq property to render these computations.

<template>
  <div :class="componentClasses">
    Lorem ipsum dolor sit amet consectetur.
  </div>
</template>
 
<script>
import classnames from 'classnames'
 
export default {
  name: 'MyComponent',
 
  breakpoints: {
    medium: cx => cx.width < 800,
    small: cx => cx.width < 500
  },
 
  computed: {
    componentClasses () {
      return classnames(this.$style.component, {
        [this.$style.medium]: this.$eq.medium,
        [this.$style.small]: this.$eq.small
      })
    }
  }
}
</script> 
 
<style module>
  .component {
    border: 1px solid red;
    padding: 20px;
  }
 
  .medium {
    border-color: green;
  }
 
  .small {
    border-color: blue;
  }
</style> 

This example is made with CSS-Modules but it is possible to use any type of pre-processors.

Local install

It's possible to use the mixin just for the component you need, instead of globally.

import { VueComponentObserver } from 'vue-component-obserber'
 
export default {
  name: 'MyComponent',
  mixins: [VueComponentObserver]
}

Install

npm i vue-component-observer

DownloadsWeekly Downloads

0

Version

1.0.1

License

MIT

Unpacked Size

19.5 kB

Total Files

5

Last publish

Collaborators

  • avatar