diff --git a/lib/useKResponsiveWindow/index.js b/lib/useKResponsiveWindow/index.js index 299ce46ae..f9e1515be 100644 --- a/lib/useKResponsiveWindow/index.js +++ b/lib/useKResponsiveWindow/index.js @@ -1,10 +1,8 @@ import { computed, onBeforeUnmount, onMounted, ref, watch } from '@vue/composition-api'; -import useKWindowDimensions from '../useKWindowDimensions'; +import useKWindowDimensions, { windowWidth, windowHeight } from '../useKWindowDimensions'; import MediaQuery from './MediaQuery'; /** Global variables */ -const { windowWidth, windowHeight } = useKWindowDimensions(); - /* Implementing breakpoint controlled by watchers to work around optimization issue: https://github.com/vuejs/vue/issues/10344 @@ -34,8 +32,10 @@ const heightQuery = new MediaQuery('screen and (max-height: 600px)', event => { * Initialize media query window properties */ function initProps() { - orientationQuery.eventHandler(orientationQuery.mediaQueryList); - heightQuery.eventHandler(heightQuery.mediaQueryList); + if (window.matchMedia) { + orientationQuery.eventHandler(orientationQuery.mediaQueryList); + heightQuery.eventHandler(heightQuery.mediaQueryList); + } } initProps(); diff --git a/lib/useKWindowDimensions.js b/lib/useKWindowDimensions.js index c29f35171..244c87fd8 100644 --- a/lib/useKWindowDimensions.js +++ b/lib/useKWindowDimensions.js @@ -2,8 +2,8 @@ import './composition-api'; //Due to @vue/composition-api shortcomings, add plug import { onMounted, onUnmounted, ref } from '@vue/composition-api'; /** Global variables */ -const windowWidth = ref(null); -const windowHeight = ref(null); +export const windowWidth = ref(null); +export const windowHeight = ref(null); const isListenerAdded = ref(false); const usageCount = ref(0);