Vue based

match-media.js

export default {
  name: "match-media",
  props: {
    mediaWidth: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      isMatch: false
    };
  },
  mounted() {
    this.handleMatchMediaOnResize();
    window.addEventListener("resize", this.handleMatchMediaOnResize, false);
  },
  destroyed() {
    window.removeEventListener("resize", this.handleMatchMediaOnResize, false);
  },
  methods: {
    handleMatchMediaOnResize() {
      this.mediaWidth.forEach(width => {
        this.isMatch = window.matchMedia(width).matches;
      });
    }
  }
};

match-media.vue

<!--
<match-media :mediaWidth="['(min-width: 768px)', '(min-width: 1024px)']">
    <events-list eventType="live"></events-list>
</match-media>
-->
<template>
    <div v-if="isMatch">
        <slot></slot>
    </div>
</template>
<script src="./match-media.js">
</script>