---
title: "Dynamic baseUrl"
description: "How to use dynamic values for the required \"basUrl\" option."
canonical_url: "https://nuxt-social-share.stefanobartoletti.it/examples/dynamic-baseurl"
last_updated: "2026-07-29T16:43:23.771Z"
---

## Basic Use

The `baseUrl` option is the [only one required](/getting-started/options#options) for the correct use of this module, all URLs to be shared will be built as relative paths to it.

The most straightforward way to provide this vital variable is to simply place your site URL here:

```ts [nuxt.config.ts]
export default defineNuxtConfig({

  socialShare: {
    baseUrl: 'https://www.yoursiteurl.com'
  }

})
```

## Environment variable

A more flexible and handy solution to manage this option is to use an environment variable:

```ini [.env]
SITE_BASE_URL=https://www.yoursiteurl.com
```

```ts [nuxt.config.ts]
export default defineNuxtConfig({

  socialShare: {
    baseUrl: process.env.SITE_BASE_URL || 'http://localhost:3000',
  }

})
```

This way, you can provide a dynamic value according to each environment/deploy (i.e. local, staging, production, etc.)

This example also uses a fallback `http://localhost:3000` which is the local development server, so you can avoid using the environment variable in this case.

## Deploy platform variables

Deploy platforms often use internal/system environment variables that return the production site URL. This is the most handy way to define your `baseUrl`, as it will also be automatically provided to you without needing to set it manually.

<warning>

The following examples are included here only as a sample and quick reference for the most popular platforms. Always refer to your platform documentation for more precise or updated information!

</warning>

### Netlify

1. Variable name: `URL` ([Docs](https://docs.netlify.com/configure-builds/environment-variables/#deploy-urls-and-metadata))
2. Example

```ts [nuxt.config.ts]
export default defineNuxtConfig({

  socialShare: {
    baseUrl: process.env.URL || 'http://localhost:3000',
  }

})
```

### Vercel

1. Variable name: `VERCEL_PROJECT_PRODUCTION_URL` ([Docs](https://vercel.com/docs/projects/environment-variables/system-environment-variables#VERCEL_PROJECT_PRODUCTION_URL))
2. Example

```ts [nuxt.config.ts]
export default defineNuxtConfig({

  socialShare: {
    // Vercel provides only the hostname, without the initial 'https://'
    baseUrl: process.env.VERCEL_PROJECT_PRODUCTION_URL ? `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}` : 'http://localhost:3000',
  }

})
```

### Render

1. Variable name: `RENDER_EXTERNAL_URL` ([Docs](https://docs.render.com/environment-variables#all-runtimes))
2. Example

```ts [nuxt.config.ts]
export default defineNuxtConfig({

  socialShare: {
    baseUrl: process.env.RENDER_EXTERNAL_URL || 'http://localhost:3000',
  }

})
```