How to implement two vue.js applications on the same nginx domain?

Question

Nginx

There are two paths:
/home/web/domainname/public/user - User interface
/home/web/domainname/public/admin - Admin panel

And there is nginx configuration

server_name domainname;

  location / {
    try_files $uri $uri/ /index.html;
    alias /home/web/domainname/public/user/;
  }

  location /admin/ {
    try_files $uri $uri/ /index.html;
    alias /home/web/domainname/public/admin/;
  }

It looks like something is moving. For example, I go to domainname/admin/ and I see my admin panel, I can dig into it, etc. But if I go to the admin panel like this domainname/admin/page/, then I will be thrown to a non-existent page, the request will start processing the first application.

As I understand it, I need to prohibit processing the /admin/ path in location / {}, but I have no idea how to do this.

UPD:
Can it go the other way and prevent the UI from handling the /admin/ route? Is this possible, fellow Vue.js experts?

Answer 1

server {
    server_name domainname;

    root /home/web/domainname/public/user;
    
    location / {
        try_files $uri $uri/ /index.html;
    }

    location /admin/ {
        root /home/web/domainname/public;
        try_files $uri $uri/ /admin/index.html;
    }
}

Answer 2

There is no need to duplicate directives and come up with some kind of aliases.

server {

root /home/web/domainname/public;
try_files $uri $uri/ /index.html;

location /user { если захотите как-то по-разному обрабатывать эти пути }
location /admin { }

location / { тут какой-нибудь редирект или что ещё захотите }

}