---
title: "Initial Configuration — Setting Your Project URL"
description: "A complete, beginner-friendly guide to configuring Nuxas for your own domain. Learn how to edit nuxt.config.ts, understand environment variables, and prepare the project for deployment."
canonical_url: "https://nuxas.pages.dev/docs/05-nuxt-config"
---

> Index of every page on this site: [llms.txt](https://nuxas.pages.dev/llms.txt)

## Initial Configuration — Setting Your Project URL

In the previous chapter, we installed the project's dependencies and started the development server. You saw the Nuxas homepage running on your computer for the first time. Now it is time to make the project yours.

This chapter explains how to configure the project for your own domain. We will edit two files: `nuxt.config.ts` and `.env`. Both are important, and both are easy to understand once you know what they do.

Before we begin, let us clarify what we mean by "configuration."

### What Is Configuration?

Every Nuxt project has a file called `nuxt.config.ts`. This file tells Nuxt how to build and run your site. It contains settings like:

- Which modules to load
- Which CSS files to include
- What the site's URL is
- Where to send contact form submissions
- Which third-party services to connect to

The file is written in TypeScript, which is a typed version of JavaScript. Do not let that intimidate you. The file is mostly structured data, and you will only need to change a handful of values.

In addition to `nuxt.config.ts`, Nuxt uses a file called `.env` to store **secrets**. These are values that should never be committed to Git, such as API keys and passwords. The `.env` file is not included in the ZIP you downloaded (for security reasons), so you will need to create it yourself.

### Part 1 — Editing nuxt.config.ts

Open the project in VS Code if it is not already open. In the file explorer on the left, find `nuxt.config.ts` and click it.

You will see something like this:

```ts
export default defineNuxtConfig({
  compatibilityDate: '2025-01-01',
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  modules: [
    '@nuxt/content',
    '@nuxtjs/seo',
    '@nuxt/image',
  ],
  // ... more settings
})
```

The exact content depends on which edition of Nuxas you purchased, but the overall structure is the same.

We need to change three things in this file:

1. The site URL.
2. The site name.
3. The site description.

Let us find the `site` block. It looks like this:

```ts
site: {
  url: 'https://nuxas.pages.dev',
  name: 'NuxtSass Starter',
  description: 'Production-ready Nuxt 4 SaaS template kit',
  defaultLocale: 'en',
},
```

Change the `url` to your own domain. If you do not have a domain yet, you can use a placeholder like `https://example.com` for now. You can update it later when you are ready to deploy.

Change the `name` to the name of your project. This name appears in the browser tab and in social media previews.

Change the `description` to a one-sentence summary of your project. This description appears in search engine results and social media previews.

For example:

```ts
site: {
  url: 'https://my-saas.com',
  name: 'My SaaS',
  description: 'The best tool for managing your freelance business',
  defaultLocale: 'en',
},
```

Save the file with **Ctrl + S**. Nuxt will automatically restart the development server, and you will see the change reflected in the browser tab.

### Understanding the site.url Field

The `site.url` field is used by several Nuxt modules, including `@nuxtjs/seo`. It tells these modules what your site's canonical URL is, so they can generate correct sitemaps, canonical tags, and Open Graph URLs.

If you set `site.url` to `https://example.com` but you deploy to `https://my-saas.com`, your sitemap will point to the wrong domain, and search engines may not index your site correctly. This is why it is important to update `site.url` before you deploy.

During local development, `site.url` does not need to be accurate. You can leave it as `https://example.com` while you are working on the site, and change it to your real domain before deploying.

### Part 2 — Creating the .env File

The `.env` file stores secrets. Nuxas uses environment variables for three things:

1. **Formspree ID** — the ID of your Formspree form, used for the contact page.
2. **Resend API key** — the API key for sending transactional emails (optional).
3. **Contact email** — the email address where contact form submissions are sent.

To create the `.env` file:

1. In VS Code's file explorer, right-click the project root folder.
2. Choose **New File**.
3. Name the file `.env` (with the dot at the beginning, no extension).
4. Press Enter.

VS Code will create an empty file. Paste the following content into it:

```env
NUXT_CONTACT_FORMSPREE_ID=YOUR_FORMSPREE_ID
NUXT_RESEND_API_KEY=YOUR_RESEND_API_KEY
NUXT_CONTACT_TO_EMAIL=your-email@example.com
NUXT_CONTACT_FROM_EMAIL=noreply@your-domain.com
```

Replace each placeholder with your actual values. We will cover how to get a Formspree ID and a Resend API key in a later chapter. For now, you can leave the placeholders as they are.

**Important:** The `.env` file should never be committed to Git. Nuxt's default `.gitignore` file already excludes it, so you do not need to do anything special. Just make sure you do not accidentally add it to Git.

Save the file with **Ctrl + S**.

### Understanding Environment Variables

Environment variables are a way to pass configuration to your application without hardcoding it in the source code. This is useful for two reasons:

1. **Security.** Secrets like API keys should never be in your source code, because anyone who reads your code can read the keys.
2. **Flexibility.** You can use different values in development, staging, and production without changing the code.

Nuxt reads environment variables from the `.env` file during development. During deployment, you will set the same variables in your hosting provider's dashboard. We will cover that in the deployment chapters.

### Part 3 — Verifying the Configuration

After editing `nuxt.config.ts` and creating `.env`, restart the development server to make sure everything is working:

1. Go to the terminal.
2. Press **Ctrl + C** to stop the server.
3. Type `npm run dev` and press Enter.
4. Open `http://localhost:3000/` in your browser.

The site should load without errors. The browser tab should show the name you set in `site.name`. If you inspect the page source (right-click → View Page Source), you should see your `site.description` in the `<meta name="description">` tag.

If you see an error, check the terminal output. The most common causes are:

- A typo in `nuxt.config.ts` (missing comma, mismatched quote).
- A syntax error in `.env` (missing equal sign, extra spaces).
- A missing module in `package.json`.

Read the error message carefully. Nuxt is usually very specific about what went wrong.

### What to Expect in the Next Chapter

In the next chapter, we will take a tour of the project structure. You will learn what each folder does and where to find the files you will edit most often. This is a short but important chapter — it will save you time later when you need to find a specific file.

See you in the next chapter.

## Sitemap

See the full [sitemap](https://nuxas.pages.dev/sitemap.md) for all pages.