diff --git a/package-lock.json b/package-lock.json index fd7b21a..c31b31e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "vue-component-media-queries", - "version": "1.0.0-alpha.3", + "version": "1.0.0-alpha.4", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index d04ddee..8894df5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-component-media-queries", - "version": "1.0.0-alpha.4", + "version": "1.0.0-alpha.5", "description": "Component-based media query matcher for Vue", "main": "dist/index.js", "module": "dist/index.es.js", diff --git a/src/MatchMedia.ts b/src/MatchMedia.ts index b20a771..f0d0da2 100644 --- a/src/MatchMedia.ts +++ b/src/MatchMedia.ts @@ -34,7 +34,7 @@ export const MatchMedia = Vue.extend({ matches: this.fallback, }; }, - beforeMount() { + mounted() { if (this.query) { const matcher = this.matcher = window.matchMedia(this.query); matcher.addListener(this.onMedia); diff --git a/src/MediaQueryProvider.ts b/src/MediaQueryProvider.ts index 388b66b..ff6df34 100644 --- a/src/MediaQueryProvider.ts +++ b/src/MediaQueryProvider.ts @@ -29,7 +29,9 @@ export const MediaQueryProvider = Vue.extend({ }, data(): Data { const mediaQueries = {} as MediaQueriesProvision; - const { fallback } = this; + const { fallback, queries } = this; + + Object.keys(queries).forEach(key => { mediaQueries[key] = false; }); if (fallback) { if (Array.isArray(fallback)) { @@ -41,7 +43,8 @@ export const MediaQueryProvider = Vue.extend({ return { mediaQueries, matchers: [] }; }, - beforeMount() { + // Matching on mounted to avoid hydration errors + mounted() { const { queries, mediaQueries } = this; for (const key in queries) {