Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to use server side? #10

Open
iBobik opened this issue Mar 30, 2020 · 3 comments
Open

How to use server side? #10

iBobik opened this issue Mar 30, 2020 · 3 comments

Comments

@iBobik
Copy link

iBobik commented Mar 30, 2020

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

@iBobik
Copy link
Author

iBobik commented Mar 30, 2020

Workaround:

Define method:

isBrowser () {
  return process.browser
}

And prepend it in queries:

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

@iBobik
Copy link
Author

iBobik commented Apr 21, 2020

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

@AStaroverov
Copy link
Owner

AStaroverov commented Apr 22, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants