From a backend perspective, that URL would be like an id
for a user. In order to achieve that, I suggest you store the user URL on the Database. Let's say it is on the user
table:
{
_id: <ObjectId>,
username: "alex",
email: "alex@example.com",
url: "alex"
}
You just need to store the unique URL because the default user URL, which is in your case domain.com/user/
would be the same for all of the users.
Let's say that URL would redirect to a user profile page. So when you redirect on your client code (In your case, Vue.js). Just add the URL on the default user URL like this:
"domain.com/user/"+url_user
If you want the unique URL to be the username of the concerned user, just directly insert the username to the url
column on your database. Or if you want to generate a random string like this:
domain.com/user/XwPp9xazJ0ku5CZnlmgAx2Dld8SHkAeT
In Node.js you can use this node-randomstring library or follow this method from this StackOverflow discussion.
And for your question
Problem: As I am new to this, how can I build such a feature where I
can generate a unique public URL directory as mentioned above that can
still call the APIs at api.domain.com?
No matter where you put your application, it should always be able to access the public API. By default, a domain (api.domain.com
) is public and everyone can access it unless the developer (I assume it is you) restricts it. So the full control is on you.