AStaroverov / v-media-query

easy media query for vue

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to use server side?

iBobik opened this issue · comments

I tried to use it in Nuxt but it fails on "window is not defined". Without it (defined as client-only) it fails on: "matchMedia is not defined" because my core uses it.

I would load it like this:

import Vue from 'vue'
import vMediaQuery from 'v-media-query'

if (process.browser) {
  Vue.use(vMediaQuery)
}
else {
  // Use mockup
}

What to put in the else section? Some mockup what can be used in components but always will pass (so it will be rendered).

Workaround:

Define method:

isBrowser () {
  return process.browser
}

And prepend it in queries:

<div v-show="isBrowser() && $mq.resize && $mq.above('600px')">

Would be nice to have process.browser check inside a resize. Could I make a PR?

Hi, of course u can make PR.
But you shouldn't use process.browser for check enviroment, because process available only if u use webpack or something like.
I think we should add guard for check window and addEventListener, matchMedia methods.