diff --git a/README.md b/README.md index ccc5e5c..b0f06e7 100644 --- a/README.md +++ b/README.md @@ -1,24 +1,25 @@ # pwa-test -## Project setup -``` -npm install -``` +[Original Stack Overflow question](https://stackoverflow.com/questions/68716680/accessing-css-variable-on-mount-in-vue) -### Compiles and hot-reloads for development -``` -npm run serve -``` +I'm working on a Vue.js PWA that requires the js to know the value of `env(safe-area-inset-top)`. I have the `env` reassigned to a css variable named `--sat` which I'm reading. But I can't find a way to get its value at the beginning of the lifecycle. -### Compiles and minifies for production -``` -npm run build -``` +The [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event) says that +>The Window `load` event is fired when the whole page has loaded, including all dependent resources such as **stylesheets** and images. -### Lints and fixes files -``` -npm run lint +So i've tried the following: +```javascript +methods: { + setSat() { + this.sat = getComputedStyle(document.body).getPropertyValue('--sat'); + }, +}, +mounted() { + window.onload = this.setSat; +}, ``` +However this doesn't seem to work. When I open the project on my phone from the home screen as a PWA the `setSat` method does get called by itself but returns `0px`. If I trigger it by clicking a button after the page is loaded it returns the appropriate `48px`. -### Customize configuration -See [Configuration Reference](https://cli.vuejs.org/config/). +If I try to run the function on a 0 or even 100ms timeout, the value of `env(safe-area-inset-top)` is still `0px`. + +For now I've resorted to waiting a second before getting the value but this is obviously not desirable.