nuxt-env-shim inject env vars for your Nuxt app at runtime
Why
See https://github.com/nuxt/nuxt.js/issues/5100
This module, heavily inspired by samtgarson/nuxt-env, makes runtime environmental variables injection work both in unviversal in SPA mode. It also provides shims for some other nuxt modules to work with runtime environmental variables (currently, only @nuxtjs/axios).
⚠ WARNING: As with the config.env
option in Nuxt config, environment variables used in nuxt-env-shim
are exposed client side, so if you store secrets use the secret
config option. Read more below. ⚠
Usage
nuxt-env-shim
injects your environment variables into your Nuxt app using this.$env
.
N.B. If currently use Nuxt's config.env
option, fear not—nuxt-env
includes those env vars in the $env
object.
Get Setup
- Install the dependency:
yarn add nuxt-env-shim
- Add to your
nuxt.config.js
and configure:
// nuxt.config.js // Tell nuxt-env which env vars you want to injectmodules: 'nuxt-env-shim' keys: 'TEST_ENV_VAR' // Basic usage—equivalent of { key: 'TEST_ENV_VAR' } key: 'OTHER_ENV_VAR' default: 'defaultValue' // Specify a default value key: 'THIRD_ENV_VAR' secret: true // Only inject the var server side key: 'ANOTHER_ENV_VAR' name: 'MY_ENV_VAR' // Rename the variable
Options
Env vars can be injected in a basic way, just by specifying a string in the keys
option.
When the provided var is an object, it can have the following attributes:
key
required
The name of the environment variable by which it can be accessed in process.env
default
A default value for the env var in case it's not present in process.env
.
secret
default:
false
When true, this key will only be present server side.
name
Change the name of the env var that gets injected. e.g.: { key: 'API_URL', name: 'API_ENDPOINT' }
will read process.env.API_URL
and add it as $env.API_ENDPOINT
Shims
Shims can be enabled by setting corresponding boolean flags in the shimModules
option:
modules: 'nuxt-env-shim' shimModules: // exposes runtime environment variables API_HOST, API_PORT, API_PREFIX, API_URL and API_URL_BROWSER // and instructs axios module correspondingly axios: true
Shims are provided for some other nuxt modules. This is how you can enable shim for the axios module:
Use in your application
- Use
this.$env
in your components:
// any-component.vue computed: { return this$envTEST_VALUE }
- and in your Nuxt context
// any-component.vue { console }
- and in your store:
// store/index.js const mutations = { const val = this$envTEST_VALUE }
Contributing
Bug reports and pull requests are welcome on GitHub at https://github.com/simplesmiler/nuxt-env-shim. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.
Thanks
- Many thanks to Evan You and the VueJS team for sustaining such a vibrant and supportive community around Vue JS
- Many thanks also Alex Chopin, Sébastien Chopin, Pooya Parsa and the other Nuxt contributors for creating this awesome library
- Many thanks also Sam Garson for creating the original nuxt-env
License
The module is available as open source under the terms of the MIT License.