Search⌘ K
Home
Courses
A Beginner’s Guide To Nuxt 3

Configuration and Environment Variables

Explore how to configure Nuxt 3 projects by creating environment variables accessible on server and client sides. Understand customizing the nuxt.config.ts file to manage API keys, third-party plugins, and page directories. Learn to override default build and directory settings to tailor the application structure.

We'll cover the following...

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

TypeScript 3.3.4
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 it to the public ...