---
title: "Module Options"
description: "Customize Nuxt Social Share according to your needs."
canonical_url: "https://nuxt-social-share.stefanobartoletti.it/getting-started/options"
last_updated: "2026-07-29T16:43:23.352Z"
---

## Module configuration

Nuxt Social Share provides some module options that you can set to customize it according to your needs. You must set them by using the `socialShare` key inside your `nuxt-config`:

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  // module options
  socialShare: {
    baseUrl: 'https://www.yoursite.com' // required!
    // other optional module options
  }
})
```

<tip>

There are some suggested ways to set a [dynamic baseUrl](/examples/dynamic-baseurl)

</tip>

## Options

<table>
<thead>
  <tr>
    <th>
      Name
    </th>
    
    <th>
      Required
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Notes
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        baseUrl
      </code>
    </td>
    
    <td>
      <code>
        Yes
      </code>
    </td>
    
    <td>
      <code>
        String
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      This is the base URL of your website, likely the address of the homepage. <strong>
        It is required
      </strong>
      
      , all URLs to be shared will be built as relative paths to this. <em>
        You can also use an environment variable
      </em>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        styled
      </code>
    </td>
    
    <td>
      <code>
        No
      </code>
    </td>
    
    <td>
      <code>
        Boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Whether the <code>
        <SocialShare>
      </code>
      
       components should be styled or not. It is <code>
        false
      </code>
      
       by default to allow for easier integration in any UI. <span className="text-error">
        ∗
      </span>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        label
      </code>
    </td>
    
    <td>
      <code>
        No
      </code>
    </td>
    
    <td>
      <code>
        Boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Whether the text label in the <code>
        <SocialShare>
      </code>
      
       components should be rendered or not. <span className="text-error">
        ∗
      </span>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        icon
      </code>
    </td>
    
    <td>
      <code>
        No
      </code>
    </td>
    
    <td>
      <code>
        Boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Whether the icon in the <code>
        <SocialShare>
      </code>
      
       components should be rendered or not. <span className="text-error">
        ∗
      </span>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        networks
      </code>
    </td>
    
    <td>
      <code>
        No
      </code>
    </td>
    
    <td>
      <code>
        String[]
      </code>
    </td>
    
    <td>
      all networks
    </td>
    
    <td>
      Restrict the bundled networks to this allow-list to reduce your final bundle size. See <a href="/usage/reducing-bundle-size">
        Reducing bundle size
      </a>
      
      .
    </td>
  </tr>
</tbody>
</table>

<tip>
<span className="text-error">

∗

</span>

 These options can also be set on a single component level via props.
Anyway, it is usually better to set them from the module options to create your defaults, and override it with props only if needed.

</tip>