title: How to handle 404 error request in vuejs SPA with nginx server
body: <p>I have set up my vue-cli version 3 SPA so that any requests not found in my routes.js file will default to my 404 view as shown in the official <a href="https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations" rel="noreferrer">documentation</a>:</p>
  
  <p>Inserted near bottom of <code>routes.js</code> file:</p>
  
  <pre><code>{ // catches 404 errors
    path: '*',
    name: '404',
    component: () =&gt; import(/* webpackChunkName: "NotFoundComponent" */ './views/NotFoundComponent.vue'),
  },
  </code></pre>
  
  <p>Inserted into nginx configuration file:</p>
  
  <pre><code>location / {
    try_files $uri $uri/ /index.html;
  }
  </code></pre>
  
  <p>This successfully alerts the user that the page they requested doesn't exist.</p>
  
  <p><strong>My Question:</strong></p>
  
  <p>I would like for the error 404 component to return a 404 response header (it current returns the 200 status code) and also log this error to the nginx error.log file. I imagine this is only possible through using nginx configuration. Has anyone achieved this goal?</p>
  
  <p>I noticed that this issue is addressed in the following page in the vue-cli official docs, but it only is concerned with node express servers and not nginx:
  <a href="https://router.vuejs.org/guide/essentials/history-mode.html#caveat" rel="noreferrer">https://router.vuejs.org/guide/essentials/history-mode.html#caveat</a></p>