Using Environment Variables in Nuxt 3

There's only a slight difference in how to reference environment variables from Nuxt 2 to Nuxt 3. Nuxt 3 provides a simple composable that you can include in your setup() method. Nuxt 2 set the environment variables in a global $config variable. The functionality is similar, but the syntax is slightly different, let's take a look.

Step 1: Setting an Environment Variable

To set an environment variable, you must have a .env file in the root of your directory. Both versions of Nuxt have built in support for dotenv and can load variables from this file. What that means is any variable in the .env is loaded into process.env and can be handled from there. Let's set our API base url variable in our .env:

API_BASE_URL: https://api.roastandbrew.coffee/api/v1

This is super helpful if you are working in multiple environments. You'd set this to the environment according to where you are located. For example, this URL might be https://api-roast.dev.test/api/v1 on your local testing environment. Now that we have the variable set, let's load it into our Nuxt 3 application

Step 2: Using the Variable in Your App

We use the base url variable to make API requests from within our app so we have to access it. To do this, it's the same on both Nuxt 2 and Nuxt 3. You have to set it in your run time config accordingly. Since the URL is not secret and sensitive data, we can use the publicRuntimeConfig: key. If it was private, like an API token, you'd want to do this using the privateRuntimeConfig:. These are set within your nuxt.config.ts file in Nuxt 3:

publicRuntimeConfig: {
    API_BASE_URL: process.env.API_BASE_URL
},

Remember, using .env with dotenv support, any variable defined in your .env file is accessible through process.env.{variable_name}. Now let's get to how we actually access this within our component. This is where it differs from Nuxt 2 to Nuxt 3.

Step 3: Accessing these variables

So in Nuxt 2, if you were to access your API Base URL, you'd use the global $config variable:

this.$config.API_BASE_URL

In Nuxt 3, it's slightly different. You'd first load the config using the useRuntimeConfig() composable method in your setup() method or <script setup>:

<script setup>
    const config = useRuntimeConfig();
</script>

Now you can access your configuration variables like this:

config.API_BASE_URL

from anywhere within your component. Slight difference, same functionality!

Conclusion

Hopefully these little migration tips help out a little bit! So far, our experience with Nuxt 3 has made it completely worth it! If you'd like to see how we use environment variables in the context of a Single Page Application, we have a book. The book shows you how to build an entire API + SPA with Nuxt 3.

Feel free to reach out on Twitter or on our community if you have any questions!