title: Vue frontend app on subdirectory with nginx
body: <p>I have a nuxt app deployed as the main website reverse proxied with nginx.
  The settings look as below</p>
  <pre><code>location / {
      proxy_pass http://127.0.0.1:3000;
  }
  </code></pre>
  <p>Now I have another vue app on same server that I want to run on a subpath e.g. <a href="https://www.app.com/dashboard" rel="nofollow noreferrer">https://www.app.com/dashboard</a></p>
  <p>Below is my settings for nginx and vue router</p>
  <pre><code>location ^~ /dashboard {
      alias /srv/www/dashboard-app/dist;
      try_files $uri $uri/ /srv/www/dashboard-app/dist/index.html;
  }
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>const router = createRouter({
    history: createWebHistory('/dashboard'),
    routes,
  })
  </code></pre>
  <p>I am able to load my main dashboard when I visit <strong><em>/dashboard</em></strong> and the vue app renders fine.</p>
  <p>However if I visit a subpath e.g. <strong><em>/dashboard/team</em></strong> it seems nginx isn't matching my dashboard path and it passes the request to nuxt application which is on / (root) which in returns throws a 404 as there's path that matches /dashboard/team in my nuxt app</p>