title: Vue js ReferenceError: navigator is not defined
body: <p>I'm getting the error below upon refreshing the page:</p>
  <pre><code>ReferenceError: navigator is not defined
      at VueComponent.isMobile (src/views/user/Profile.vue:71:0)
      at fn (src/views/user/PublicProfile.vue?504b:30:0)
      at normalized (/Users/mark/Desktop/Sirius/SRS-556/sirius/node_modules/vue/dist/vue.runtime.common.dev.js:2584:37)
      at Proxy.renderSlot (/Users/mark/Desktop/Sirius/SRS-556/sirius/node_modules/vue/dist/vue.runtime.common.dev.js:2680:13)
      at Proxy.render (src/components/layouts/TwoColumn.vue?3126:22:0)
      at VueComponent.Vue._render (/Users/mark/Desktop/Sirius/SRS-556/sirius/node_modules/vue/dist/vue.runtime.common.dev.js:3538:22)
      at resolve (/Users/mark/Desktop/Sirius/SRS-556/sirius/node_modules/vue-server-renderer/build.dev.js:8415:27)
      at waitForServerPrefetch (/Users/mark/Desktop/Sirius/SRS-556/sirius/node_modules/vue-server-renderer/build.dev.js:8287:3)
      at renderComponentInner (/Users/mark/Desktop/Sirius/SRS-556/sirius/node_modules/vue-server-renderer/build.dev.js:8426:3)
      at renderComponent (/Users/mark/Desktop/Sirius/SRS-556/sirius/node_modules/vue-server-renderer/build.dev.js:8383:5)
      at RenderContext.renderNode (/Users/mark/Desktop/Sirius/SRS-556/sirius/node_modules/vue-server-renderer/build.dev.js:8294:5)
      at RenderContext.next (/Users/mark/Desktop/Sirius/SRS-556/sirius/node_modules/vue-server-renderer/build.dev.js:2598:23)
      at cachedWrite (/Users/mark/Desktop/Sirius/SRS-556/sirius/node_modules/vue-server-renderer/build.dev.js:2451:9)
      at renderElement (/Users/mark/Desktop/Sirius/SRS-556/sirius/node_modules/vue-server-renderer/build.dev.js:8544:5)
      at renderNode (/Users/mark/Desktop/Sirius/SRS-556/sirius/node_modules/vue-server-renderer/build.dev.js:8296:5)
      at resolve (/Users/mark/Desktop/Sirius/SRS-556/sirius/node_modules/vue-server-renderer/build.dev.js:8421:5)
      at runMicrotasks ()
      at processTicksAndRejections (node:internal/process/task_queues:96:5)
  </code></pre>
  <p>For example, suppose I'm in <code>127.0.0.1</code> and then I navigate to <code>127.0.0.1/test/</code>. No error occurs for me but if I am already at the <code>/test/</code> and then refreshes the page then the above error occurs.</p>
  <p>The code in question is below:</p>
  <pre><code>&lt;template #default&gt;
      &lt;u-modal v-model=&quot;reportUser&quot; :min-width=&quot;isMobile() == true ? '150px' : '700px'&quot; :max-width=&quot;isMobile() == true ? '300px' : '1000px'&quot;&gt;
          &lt;report-user-form :reportUser=&quot;reportUser&quot; :user=&quot;user&quot; @close=&quot;reportUser=false&quot;/&gt;
      &lt;/u-modal&gt;
  &lt;/template&gt;
  
  
  isMobile() {
    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
      return true
    } else {
      return false
    }
  },
  </code></pre>
  <p>As you can see I'm simply using the <code>navigator.useragent</code> to decide the modal size. I suspect <code>navigator</code> doesn't exist yet but the page I'm refreshing uses the <code>navigator</code>, but when I visit a different page the <code>navigator</code> gets populated hence I don't get the error when I do visit the page that uses <code>navigator</code> afterwards? In any case how do I fix this problem?</p>