title: Can't access device sensors using nuxtjs
body: <p>I'm trying to listen on Gyroscope event in a <code>nuxtjs</code> app.</p>
  
  <p>I have read about the sensor API, and tried to use it in the following way:</p>
  
  <pre class="lang-js prettyprint-override"><code>mounted () {
      this.gyroscope = new Gyroscope({ frequency: 60 })
      this.gyroscope.addEventListener('reading', this.gyro_event)
      this.gyroscope.start()
  }
  </code></pre>
  
  <p>where <code>this.gyro_event</code> is:</p>
  
  <pre class="lang-js prettyprint-override"><code>gyro_event (e) {
      if (this.sensorData.time.length &lt; 6000) {
          this.sensorData.time.push(this.gyroscope.time)
          this.sensorData.x.push(this.gyroscope.x)
          this.sensorData.y.push(this.gyroscope.y)
          this.sensorData.z.push(this.gyroscope.z)
      }
  }
  </code></pre>
  
  <p>When running with <code>npm run dev</code> I get no errors. I also don't get any readings, but that's because my laptop doesn't have a gyro.</p>
  
  <p>When running in production (serving the result of <code>npm run generate</code>) I get the following error:</p>
  
  <p><a href="https://i.stack.imgur.com/VC4U1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VC4U1.png" alt="reference error"></a></p>
  
  <p><strong>NOTE</strong>: I had similar errors in development mode when trying to initialize the <code>Gyroscope</code> object prior to mounting (i.e. in the <code>created</code> or <code>data</code> hooks).</p>
  
  <p>I also know that there are some other ways to access sensors (e.g. <code>ondeviceorientation</code> event), but I'm not sure what are the differences and which works best with <code>nuxt</code>/<code>vue</code>, so any advice would be appreciated.</p>