Nuxt Social Share
Examples

Dynamic baseUrl

How to use dynamic values for the required "basUrl" option

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:

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:

.env
SITE_BASE_URL=https://www.yoursiteurl.com
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.

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!

Netlify

  1. Variable name: URL (Docs)
  2. Example
nuxt.config.ts
export default defineNuxtConfig({

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

})

Vercel

  1. Variable name: VERCEL_PROJECT_PRODUCTION_URL (Docs)
  2. Example
nuxt.config.ts
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
nuxt.config.ts
export default defineNuxtConfig({

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

})

© 2023-present Stefano Bartoletti