Tripcoster

well, a lot of companies that lead with one service e.g. flight booking, then allow you to build out the whole trip during the checkout process. I like that yours shows both simultaneously for a change...arguably a differentiator. I guess you could/should add some price filters as the project develops and show how your prices compare to some similar sites (if you can get that sort of data). Do you know https://travelbird.com/ ? They are slightly more like package holiday focused, but that's essentially the end game for referrals sites when they want to increase their margins :)

There's a few ways to do it.

1. You can go the full server-side rendering route. This would mean that all routing is done on the server and you would need to set up Vue as a multi page app, which is easily possible with Vue Cli 3. So now for example the authentication would do a post request and then you redirect on the server to the relevant page if the request was successful.

2. Go the full SPA route. Authentication is the "hardest" challenge to tackle because you'd have to go with JSON web tokens and have token based authentication. Fortunately there's a lot of libraries for this. I know of Passport Js but I'm sure you can find many others. So now you handle all of the routing logic in the front end. So for the authentication, if the post request was successful you'd get back an auth token and you would redirect to the relevant page in the front-end.

I don't have that much experience with express but usually, when you authenticate server side, the server automatically sets an authentication cookie on the browser so it can track the user session. You could return that cookie when the login was successful and set it manually on the browser from the front-end. So you still have the full SPA it's just a different auth method.

I like the tokens approach a bit more though because then your server doesn't need to keep the user's state.

3. Hybrid half-half monstrosity 😂. It's not that bad actually it just feels wrong to me.
   Apart from authentication, I don't see why you would need server-side routing because everything else can be easily made as API calls instead of returning pages.

The way I would approach this is have an SPA with client routing for everything except the authentication. So whenever a user makes any request to one of the SPA routes, you redirect them login page if necessary, otherwise you just ignore it server side and let it be handled on the client.

For example say a user wants to navigate to /account/settings.
You would intercept that request server-side. Check if the user is authenticated. If not you redirect to the login page.

After the post request is successful, you redirect to the URL of /account/settings but the html page you return is the SPA entry point. This way, when the SPA is loaded it will check the URL and go to the relevant client-side route.

I've used Vue.js quite a bit, mostly as embedded code (<script src="...") but also a handful of CLI apps. For the former, it has proven to be quite simple to handle both front-end and back-end navigation as natural hyperlinks. For the latter, I can't imagine implementing it in any way except exposing everything from the back-end as an API which can be consumed.

That being said, both approaches have proven to be very powerful.

Vue router should be really easy to include when scaffolding with vue cli, and it indeed can handle the requirements you described.

As for server-side rendering, you'd need an instance of Node js running somewhere on your server so it can actually process the javascript and render the page. You said its gonna be a problem in the future but it might be worth to at least make sure your prod env can run node js for now so you don't have to make the switch in the future when maybe you're locked in.

But yeah, Nuxt is the easiest option I think.

Good luck on your app!