vue-responsive-components helper

cssName.js

import _ from 'lodash';

const cssName = nameStr => _.lowerFirst(nameStr);

export default cssName;

responsive.js

import Vue from 'vue';
import { ResponsiveMixin } from 'vue-responsive-components';
import cssName from '@/lib/cssName';

Vue.mixin(ResponsiveMixin);

// Helper previous mixin
const responsiveHelper = {
  created() {
    this.cssName = cssName(this.$options.name);
    this.responsive = {
      [`${this.cssName}--xs`]: el => el.width < 600,
      [`${this.cssName}--sm`]: el => el.width >= 600 && el.width < 960,
      [`${this.cssName}--md`]: el => el.width >= 960 && el.width < 1264,
      [`${this.cssName}--lg`]: el => el.width >= 1264 && el.width < 1600,
      [`${this.cssName}--xl`]: el => el.width >= 1600,
    };
  },
  data: () => ({
    cssName: null,
    responsive: null,
  }),
};

Vue.mixin(responsiveHelper);