[Need Solution] Nuxt Public Runtime Config in Quasar

[UkonnRa]

Background

Nuxt has Runtime Config which can read Env Vars in SSR mode. But Quasar does not have the same feature (at least in documentation).

Target

After quasar build -m ssr, I hope the product can consume the given Enviroment Variables, like VITE_TEST_VAL='<no matter what>' NODE_ENV='<no matter what>' node dist/ssr/index.js.

Of course, the SPA mode should be workable as usual, following the old Vite's Env Var Replacement rule.

Solution / Found

MVP: https://github.com/UkonnRa/quasar-test, the secret sause is import * as process from 'node:process', which may prevent the vite's Replacement.

• You cannot put process.env in Vue components, or it will throw Hydration completed but contains mismatches error:
  • https://github.com/UkonnRa/quasar-test/blob/feature/process-env-for-hydration/src/pages/IndexPage.vue#L61-L64
• You can put process.env in stores, everything should work fine, no error found.
  • https://github.com/UkonnRa/quasar-test/blob/feature/process-env-for-hydration/src/stores/example-store.ts#L13-L18
  • The UI can be changed, followed by the given Env Vars changing.
  • If not provide any Env Var during the runtime, it will just undefined, rather than using the value in .env, that's interesting.

Conclusion

I think it's just hacking the process.env polyfill, hoping Quasar team can give a official solution about the runtime config.