Using Environment Variables in Nuxt 3

Part 3 of 9 in Upgrading Nuxt 2 to Nuxt 3
Dan Pastori avatar
Dan Pastori March 22nd, 2022

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!

Keep Reading
View the course View the Course Upgrading Nuxt 2 to Nuxt 3
Up Next → Using asyncData in Nuxt 3

Support future content

The Ultimate Guide to Building APIs and Single-Page Applications with Laravel + VueJS + Capacitor book cover.

Psst... any earnings that we make off of our book is being reinvested to bringing you more content. If you like what you read, consider getting our book or get sweet perks by becoming a sponsor.

Written By Dan

Dan Pastori avatar Dan Pastori

Builder, creator, and maker. Dan Pastori is a Laravel certified developer with over 10 years experience in full stack development. When you aren't finding Dan exploring new techniques in programming, catch him at the beach or hiking in the National Parks.

Like this? Subscribe

We're privacy advocates. We will never spam you and we only want to send you emails that you actually want to receive. One-click unsubscribes are instantly honored.