From bec1857706b6d2763640f10ef8bdde21a1aea137 Mon Sep 17 00:00:00 2001
From: Stas Lashmanov <stasvarenkin@gmail.com>
Date: Mon, 27 Jul 2020 02:18:00 +0300
Subject: [PATCH] Use mounted hook to avoid hydration errors

---
 package-lock.json         | 2 +-
 package.json              | 2 +-
 src/MatchMedia.ts         | 2 +-
 src/MediaQueryProvider.ts | 7 +++++--
 4 files changed, 8 insertions(+), 5 deletions(-)

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) {