A Beginner’s Guide To Nuxt 3/

...

/

Configuration and Environment Variables

Configuration and Environment Variables

Learn how to add environment variables to the Nuxt app and override the default configuration.

We'll cover the following...

In our project so far, we have added some properties to the nuxt.config.ts file:

Press + to interact
export default defineNuxtConfig({
	runtimeConfig: {
        public: {
            pixabayApiKey: process.env.PIXABAY_API_KEY
        }
    },
	modules: ["@nuxt/image-edge"],
	app: {
		pageTransition: { name: "custom", mode: "out-in" },
	},
});

These included:

  • Line 4: This is a variable holding our API key.

  • Line 7: This is the nuxt-image module.

  • Line 9: These are the page transitions.

Environment variables

Creating variables like this in runtimeConfig expose variables to our app in a particular environment, either the server-side or client-side (public). Since we need to access the API key on the client, we add ...