npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

nuxt-env

v0.1.0

Published

Inject env vars for your Nuxt app at runtime

Downloads

11,607

Readme

nuxt-env

nuxt-env inject env vars for your Nuxt app at runtime

CircleCI

Why

Nuxt currently provides a very handy way of injecting environment variables which uses webpack substitution to inject your env vars at build time. This works most of the time, but if your build process is environment-agnostic (e.g. if you build a Docker image on CI and use the same image for staging and production), you end up with a result which has the environment baked into it (meaning that in our example, the docker image would be coupled to the environment it was built in).

This module allows you to read environment variables server side—at runtime—and inject them into your app, meaning your Nuxt bundle is decoupled from your environment variables.

⚠️ WARNING: As with the config.env option in Nuxt config, environment variables used in nuxt-env are exposed client side, so if you store secrets use the secret config option. Read more below. ⚠️

Usage

nuxt-env 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

  1. Install the dependency:
yarn add nuxt-env
  1. Add to your nuxt.config.js and configure:
// nuxt.config.js

// Tell nuxt-env which env vars you want to inject
modules: [
  'other-nuxt-module',
  ['nuxt-env', {
    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: 'THIRD_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

Use in your application

  • Use this.$env in your components:
// any-component.vue

export default {
  computed: {
    testValue () { return this.$env.TEST_VALUE }
  }
}
  • and in your Nuxt context
// any-component.vue

export default {
  asyncData ({ app }) {
    console.log(app.$env.TEST_VALUE)
  }
}
  • and in your store:
// store/index.js

export const mutations = {
  storeEnv (commit) {
    const val = this.$env.TEST_VALUE
    commit('testValue', val)
  }
}

Develop

# Forlk the repo
git clone [email protected]:your_username/nuxt-env.git
cd nuxt-env
yarn
yarn test

# To use while developing other apps:
yarn link
cd ../my-other-app
yarn link nuxt-env

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/samtgarson/nuxt-env. 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

License

The module is available as open source under the terms of the MIT License.