Best practice on storing API keys, secrets, environment variables for custom vue components

What is the best practice for storing API keys, secrets, environment variables etc for custom vue components?

My understanding is that anything you use in a section or element custom component is bundled and sent to the browser, so any secret is not secret anymore.

Plugins should have the ability to store public and private setting so that you can use the private setting when in the editor.

What is your use case?

But then the secrets will be visible on GitHub? That is a bad practice.

I am creating a plugin which requires me to send an API key every API request.

Rather than storing the secret on GitHub, the only thing I can think of which is secure is if I create an API which uses GitHub environment variables with terraform to replace the secret then I can retrieve securely.

Instead of putting the secret in the code you can have the secret as a property of your element. Then the user of your element will fill the parameter with the correct token in the weweb editor. In this way your secret is not stored in github but on weweb.