Dynamic baseUrl

Basic Use

The baseUrl option is the only one required 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:

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:

SITE_BASE_URL=https://www.yoursiteurl.com

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.

Netlify

1. Variable name: URL (Docs)
2. Example

export default defineNuxtConfig({

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

})

Vercel

1. Variable name: VERCEL_PROJECT_PRODUCTION_URL (Docs)
2. Example

export default defineNuxtConfig({

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

})

Render

1. Variable name: RENDER_EXTERNAL_URL (Docs)
2. Example

export default defineNuxtConfig({

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

})