Everything is fun and games until you try to understand and do server-side rendering.

I am creating a PWA using quasar, which uses vue.js at core.
Now the router is working fine. In production code, The address url is updating dynamically upon clicking route-links. Say, there are 4 routes, namely /user , /friends, /human, /robots. But when I visit one of those route paths using web address or say I reload the application/web page, when the route path is /robot or any other path, server reply with cannot GET /[route path]. I know that I had not set up the route handler at server, but I am not expecting this behavior. I dont want to make request to server like this.
While in dev mode, everything is working fine and as expected. when I visit /robot or any other route path , instead of contacting the server, it render the component that was bound to handle that route path

So as part of my news years resolution, I thought id build an app and I thought I would build it in vue.js and native script with a shared codebase, I've started with a fresh project and already I have an error, one that I've not caused, this is in router.js. see if you can spot it.

module.exports = (api, options) => {
require('@vue/cli-plugin-router/generator')(api, {
historyMode: options.routerHistoryMode
};
export default new Router(options);
}

When I've fixed the syntax error, I then get, the error:

/src/router.js: 'import' and 'export' may only appear at the top level (5:0)

This is when I run "npm run serve:ios"

if anyone has encountered this, please let me know how you fixed this.

Anyone else feeling like this html, css, js, vue setup pattern, vite, vue-router, pinia - etc - is a bit of. Golden moment?

Vue <router-link> cant parse props data when parsed using path="" rather than name=""

WHAAAAAAAATTTT??????