Use mounted hook to avoid hydration errors

CyberAP · Jul 26, 2020 · bec1857 · bec1857
1 parent 04ca98a
commit bec1857
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 5 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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) {