Nuxt 3, difference between useRuntimeConfig().vimeoClientId and process.env.VIMEO_CLIENT_ID

Question

Can someone explain the difference between the process.env and the runtimeConfig? In my eyes, they are the same and both can be accessed in the API and the other files. but if I wasn't to use runtimeConfig I have to do extra work for the same thing or I'm not understanding something.

In my server/api/vimeo folder I have a file where I connect to the vimeo API, and I have "

const client = new Vimeo(process.env.VIMEO_CLIENT_ID, process.env.VIMEO_CLIENT_SECRET, process.env.VIMEO_ACCESS_TOKEN)

in my head it would seem to be the same thing if I use process.env.VIMEO_CLIENT_ID and runtimeConfig.VIMEO_CLIENT_ID?

Answer 1

Certain environment variables are designated as public, while others remain private. We can liken this to a scenario where specific environment variables serve both the client and server, while others exclusively cater to the server and mustn't be exposed to the client.

Suppose, hypothetically, we could access environment variables directly via process.env instead of utilizing runtimeConfig. Such a situation would be disastrous and present a significant risk. By using process.env, all environment variables, including those not intended for client-side access, would be exposed. This approach lacks the necessary restriction on whether an environment variable should be accessible from the client or not.

Nuxt tackles this challenge by offering a mechanism where we can employ private, public, and runtime options for our environment variables. This way, we gain assurance that only the necessary environment variables are made accessible to the client, while others remain designated for the server or both client and server use.

For better understanding read this article: https://www.aabidsofi.com/posts/how-to-use-env-variables-in-nuxt-3/