title: Accessing css variable on mount in Vue
body: <p>I'm working on a Vue.js PWA that requires the js to know the value of <code>env(safe-area-inset-top)</code>. I have the <code>env</code> reassigned to a css variable named <code>--sat</code> which I'm reading. But I can't find a way to get its value at the beginning of the lifecycle.</p>
  <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event" rel="nofollow noreferrer">MDN documentation</a> says that</p>
  <blockquote>
  <p>The Window <code>load</code> event is fired when the whole page has loaded, including all dependent resources such as <strong>stylesheets</strong> and images.</p>
  </blockquote>
  <p>So i've tried the following:</p>
  <pre class="lang-js prettyprint-override"><code>methods: {
    setSat() {
      this.sat = getComputedStyle(document.body).getPropertyValue('--sat');
    },
  },
  mounted() {
    window.onload = this.setSat;
  },
  </code></pre>
  <p>However this doesn't seem to work. When I open the project on my phone from the home screen as a PWA the <code>setSat</code> method does get called by itself but returns <code>0px</code>. If I trigger it by clicking a button after the page is loaded it returns the appropriate <code>48px</code>.</p>
  <p>If I try to run the function on a 0 or even 100ms timeout, the value of <code>env(safe-area-inset-top)</code> is still <code>0px</code>.</p>
  <p>For now I've resorted to waiting a second before getting the value but this is obviously not desirable.</p>
  <p><a href="https://github.com/anatolykopyl/pwa-question" rel="nofollow noreferrer">Repo with minimal code for reproduction</a></p>