# Nuxt Social Share

> Simple social sharing for your Nuxt Sites

Canonical Origin: https://nuxt-social-share.stefanobartoletti.it/

## LLM Resources

- [Full Content](https://nuxt-social-share.stefanobartoletti.it/llms-full.txt): Complete page content in markdown format.

## Pages

### /

Source: https://nuxt-social-share.stefanobartoletti.it/

<u-page-hero className="dark:bg-gradient-to-b,from-neutral-900,to-neutral-950" orientation="horizontal">
<template v-slot:top="">
<hero-background>



</hero-background>

<stars-bg>



</stars-bg>
</template>

<template v-slot:title="">

Simple social sharing for your <span className="text-primary">

Nuxt Sites

</span>
</template>

<template v-slot:description="">

Add simple social sharing buttons to your Nuxt sites and apps, with a minimal config <span className="text-primary">
<SocialShare>
</span>

 component.

</template>

<template v-slot:links="">
<u-button icon="i-lucide-rocket" size="xl" to="/getting-started">

Getting started

</u-button>

<u-button icon="i-simple-icons-github" size="xl" to="https://github.com/stefanobartoletti/nuxt-social-share" color="neutral" target="_blank" variant="outline">

Star on GitHub

</u-button>
</template>

<u-container>
<prose-pre filename="app.vue">

```vue-html [app.vue]
<SocialShare
  v-for="network in ['facebook', 'x', 'linkedin', '...']"
  :key="network"
  :network="network"
  :styled="true"
/>
```

</prose-pre>

<share-buttons>



</share-buttons>
</u-container>
</u-page-hero>

<u-page-section className="dark:bg-neutral-950">
<template v-slot:title="">

Powerful, customizable and easy to use

</template>

<template v-slot:features="">
<u-page-card description="Flexible implementation and fully customizable, with a minimal config" icon="i-lucide-flame" title="Simple yet powerful">



</u-page-card>

<u-page-card description="Created with custom styling in mind, for easy integration in any UI" icon="i-lucide-palette" title="Designer Friendly">



</u-page-card>

<u-page-card description="Supports sharing on all major social networks" icon="i-lucide-users" title="Many Networks supported">



</u-page-card>

<u-page-card description="Localize in any language by editing just two strings" icon="i-lucide-languages" title="Easily Translatable">



</u-page-card>

<u-page-card description="A11y guidelines implemented Out of the Box" icon="i-lucide-accessibility" title="Accessible by design">



</u-page-card>

<u-page-card description="Minimal bundle size, no negative impact on SEO" icon="i-lucide-feather" title="Lightweight and SEO friendly">



</u-page-card>
</template>
</u-page-section>

---

### Installation

Source: https://nuxt-social-share.stefanobartoletti.it/getting-started
Description: How to quickly add Nuxt Social Share to your Nuxt project.

h2. Installation

Add `@stefanobartoletti/nuxt-social-share` dependency to your project:

<code-group>

```bash [nuxt]
npx nuxt@latest module add nuxt-social-share
```

```bash [pnpm]
pnpm i @stefanobartoletti/nuxt-social-share
```

```bash [yarn]
yarn add @stefanobartoletti/nuxt-social-share
```

```bash [npm]
npm install @stefanobartoletti/nuxt-social-share
```

</code-group>

Nuxt CLI should have already added `@stefanobartoletti/nuxt-social-share` to the `modules` section of `nuxt.config`. If not, add it manually:

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: [
    '@stefanobartoletti/nuxt-social-share'
  ],
})
```

h2. Configuration

Add your website base URL to the module options:

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

h2. Use

Use the `<SocialShare>` component wherever you need it in your app:

```vue
<SocialShare network="facebook" :styled="true" />
```

<note>

That's it, this is all that is required to start using Nuxt Social Share!

</note>

h2. Tailwind Compatibility

<caution>

**Tailwind v4 Required:** Starting from version **v2.0.0**, this module requires **Tailwind v4**. It's no longer compatible with Tailwind v3 (used also by the current version of [@nuxtjs/tailwindcss](https://nuxt.com/modules/tailwindcss) module). [Read more](/usage/styling-with-tailwind).

</caution>

---

### Styling with Tailwind

Source: https://nuxt-social-share.stefanobartoletti.it/usage/styling-with-tailwind
Description: How to apply custom styles to the <SocialShare> component with Tailwind.

<caution>

**Tailwind v4 Required:** Starting from version **v2.0.0**, this module requires **Tailwind v4**. It's no longer compatible with Tailwind v3 (used also by the current version of [@nuxtjs/tailwindcss](https://nuxt.com/modules/tailwindcss) module). Keep reading for more info.

</caution>

h2. Getting Started

Styling with Tailwind is straightforward: simply apply your desired classes to the `<SocialShare>` component.

The component provides a `--color-brand` CSS variable that contains each network's brand color. You can use this variable in your Tailwind classes:

```vue
<SocialShare
    network="facebook"
    :styled="true"
    class="rounded-full bg-transparent text-(--color-brand) border-2 border-(--color-brand)"
/>
```

h2. Tailwind v4

This module uses a `@layer components` CSS layer, integrating with Tailwind v4 setup to ensure proper specificity and priority.

Tailwind v4 layers are ordered this way:

- `@layer theme, base, components, utilities;`

`<SocialShare>` hooks into this setup, allowing it to override basic resets from the `base` layer while still being further customizable by utilities in the `utilities` layer.

h2. Tailwind v3

Nuxt Social Share v2 is no longer compatible with Tailwind v3 and earlier.

Tailwind v3 used to have a "hacky" non-native CSS layer implementation that conflicts with proper layers usage. This may cause build errors similar to:

```text
[plugin:vite:css] [postcss] /path/to/project/node_modules/@stefanobartoletti/nuxt-social-share/dist/runtime/SocialShare.vue?vue&type=style&index=0&lang.css:2:1: @layer components is used but no matching @tailwind components directive is present.
```

Unfortunately, the different internal setup of Tailwind v3 and v4 made it impossible to keep compatibility with both versions at the same time. When updating the Nuxt Social Share module, the current v4 version has been prioritized, discarding support for the outdated v3.

**Upgrading to Tailwind v4 is the recommended solution**

h2. `@nuxtjs/tailwindcss` module

The [Nuxt Tailwind](https://nuxt.com/modules/tailwindcss) module is still using Tailwind v3 currently, so everything above applies here too.

You can handle this in two ways:

1. **(Recommended)** Remove the Tailwind module and manually upgrade Tailwind to v4. Tailwind v4 has a more streamlined architecture and doesn't require a dedicated module for optimal integration.
2. If your setup doesn't allow you to remove the Tailwind module, stay on **Nuxt Social Share v1.x** until the module will support Tailwind v4 (You can monitor the [module's Tailwind v4 compatibility progress](https://github.com/nuxt-modules/tailwindcss/issues/919))

h2. Further reading

- [CSS `@layer` rule (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer)
- [Tailwind v4 CSS layers](https://tailwindcss.com/blog/tailwindcss-v4#designed-for-the-modern-web)
- [Tailwind v3 → v4 upgrade guide](https://tailwindcss.com/docs/upgrade-guide)
- [`@nuxtjs/tailwindcss` v4 compatibility discussion](https://github.com/nuxt-modules/tailwindcss/issues/919)

---

### Module Options

Source: https://nuxt-social-share.stefanobartoletti.it/getting-started/options
Description: Customize Nuxt Social Share according to your needs.

h2. 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>

h2. 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>

---

### Component

Source: https://nuxt-social-share.stefanobartoletti.it/usage/component
Description: How to use the <SocialShare> component.

h2. Using the component

The `<SocialShare>` component is the primary way to add social share buttons to your site.

Each component instance provides a share button for a single social network, that you must select with the required `network` prop; you will need to use it as many times as your total needed networks.

```vue
<!-- basic use -->

<SocialShare network="facebook" />

<SocialShare network="x" />

<SocialShare network="linkedin" />
```

```vue
<!-- customization with props -->

<SocialShare network="facebook" :styled="true" :label="false" />
```

<note>

See the example about adding [multiple buttons](/examples/multiple-buttons).

</note>

h2. Rendered HTML

The component will render by default the following minimal HTML:

```html
<a
  class="social-share-button social-share-button--{network}"
  href="{share url}"
  style="--color-brand: {network brand color};"
  aria-label="{Share on|Send with|Save to|Ask} {network}"
  rel="nofollow noopener noreferrer"
  target="_blank"
>
  <svg class="social-share-button__icon">{...}</svg>
  <span class="social-share-button__label">{Share|Send|Save|Ask AI}</span>
</a>
```

Additionally:

- a `social-share-button--styled` class will be added to the `<a>` element if `:styled="true"`
- the `<span>` element will be rendered conditionally according to the `label` prop.
- the `<svg>` element will be rendered conditionally according to the `icon` prop.
- the default label and `aria-label` wording adapt to the selected network's category: *"Share"* for social networks, *"Send"* for messaging apps, *"Save"* for bookmarking services and *"Ask AI"* for AI tools.

h2. Props

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

∗

</span>

 These props can also be set globally from the module options.
They are available also on a component level to allow a different behavior on a single instance.

</tip>

h3. `network`

- Required: `Yes`
- Type: `String`
- Default: none

The social network or messaging service where the content should be shared, to be chosen among the list of [supported networks](/usage/supported-networks). **This is required for the component to work**.

h3. `styled` <span className="text-error">∗</span>

- Required: `No`
- Type: `Boolean`
- Default: `false`

Whether the component should be styled or not. It is `false` by default to allow for easier custom styling. Additional customization is possible also when set to `true`.

h3. `label` <span className="text-error">∗</span>

- Required: `No`
- Type: `Boolean`
- Default: `true`

Whether the text label should be rendered or not.

h3. `icon` <span className="text-error">∗</span>

- Required: `No`
- Type: `Boolean`
- Default: `true`

Whether the icon should be rendered or not.

h3. `url`

- Required: `No`
- Type: `String`
- Default: the current page URL

The URL that will be shared on the selected social network. Defaults to the current page URL. On most cases you don't need another value, but if you need to change it, you can set it with this prop.

h3. `title`

- Required: `No`
- Type: `String`
- Default: none

Title used as a parameter of the sharing URL, in networks that support it. Optional, check the list of [supported networks](/usage/supported-networks).

h3. `user`

- Required: `No`
- Type: `String`
- Default: none

Username used as a parameter of the sharing URL, in networks that support it. Optional, check the list of [supported networks](/usage/supported-networks).

h3. `hashtags`

- Required: `No`
- Type: `String`
- Default: none

Comma separated list of hashtags used as a parameter of the sharing URL, in networks that support it. Optional, check the list of [supported networks](/usage/supported-networks).

h3. `image`

- Required: `No`
- Type: `String`
- Default: none

Image path used as a parameter of the sharing URL, in networks that support it. Optional, check the list of [supported networks](/usage/supported-networks).

h3. `prompt`

- Required: `No`
- Type: `String`
- Default: `Read this page so I can ask questions about it:`

Instructional text prepended to the page URL when building the prompt for AI networks (i.e. ChatGPT, Claude, Gemini, Perplexity, Grok). Only used by networks that support it, check the list of [supported networks](/usage/supported-networks).

h3. `rel`

- Required: `No`
- Type: `String`
- Default: `nofollow noopener noreferrer`

Sets some default values to the `rel` attribute of the link anchor. Customizable if needed, sets by default the [`nofollow`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel#nofollow), [`noopener`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel#noopener) and [`noreferrer`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel#noreferrer) for both SEO and security concerns.

h2. Slots

<note>

These slots are still affected by respective `label` and `icon` settings, either being provided by the module options or by the component props. If set to `false`, no label or icon will be rendered, even if a custom value is provided in the respective slots.

</note>

h3. `label`

Used to customize the button's label. Optional, defaults to *"Share"*, *"Send"*, *"Save"* or *"Ask AI"* according to the network's category, if not provided.

Example:

```vue-html
<!-- Custom label, renders the network name -->
<SocialShare
  v-for="network in ['facebook', 'x', 'linkedin', 'email']"
  :key="network"
  :network="network"
>
  <template #label>{{ network }}</template>
</SocialShare>
```

h3. `icon`

Used to customize the button's icon. Useful when another icon style is required. Optional, defaults to the internal style icons if not provided. Both a raw `svg` or a custom component can be used.

Works nicely with the [NuxtIcon](https://nuxt.com/modules/icon) module, if used.

```vue-html
<!-- Custom icon -->
<SocialShare
  v-for="network in ['facebook', 'x', 'linkedin', 'email']"
  :key="network"
  :network="network"
>
  <!-- Either with a custom SVG ... -->
  <template #icon><svg>{...}</svg></template>
  <!-- ... OR with a component, i.e. from NuxtIcon -->
  <template #icon><Icon name="mdi:${network}" /></template>
</SocialShare>
```

h2. Styling

The `<SocialShare>` component comes unstyled by default, only providing some minimal flex properties to correctly align icon and label, to allow for easy integration in any kind of UI. This behavior can be easily overridden by using the `:styled="true"` prop.

Both the styled and unstyled versions can be further customized, mainly by working directly with its CSS. In addition to the CSS classes shown above, each button also has a *local* `--color-brand` CSS variable, that can be used to customize each instance.

Some examples of customization can be found it the [styling page](/examples/custom-styling)

---

### Localization

Source: https://nuxt-social-share.stefanobartoletti.it/examples/localization
Description: How to provide social sharing buttons in your needed languages.

h2. Localized strings

The `<SocialShare>` component comes with two localized strings, provided by default in English:

- the rendered label inside the button
- the value of the `aria-label` attribute, used for accessibility purposes

To fully localize the component in your needed languages, you only need to override their default values:

- to localize the label, you can use the `label` slot
- to localize the `aria-label` attribute, just pass it the `<SocialShare>` component

h2. Example

The following example fully localizes the component in Italian:

```vue-html
<SocialShare
  v-for="network in ['facebook', 'x', 'linkedin', 'email']"
  :key="network"
  :network="network"
  :aria-label="`Condividi con ${network}`"
>
  <template #label>Condividi</template>
</SocialShare>
```

<warning>

When customizing the `aria-label` attribute, make sure that values are unambiguous for people using assistive technologies. An easy way to solve this is using the network name as part of it, instead of i.e. "share button"

</warning>

---

### Supported Networks

Source: https://nuxt-social-share.stefanobartoletti.it/usage/supported-networks
Description: A list of the currently supported social networks.

h2. All Networks

<share-buttons>



</share-buttons>

The following table lists all the currently supported networks and their URL parameters.

Parameters can be used by passing the respective prop in the component or in the composable. Passing props to a network that does not support it won't have any effect, but it will not otherwise create any problem.

Some networks have aliases that can be used in place of the main name. All supported props remain the same.

<networks-table>



</networks-table>

- ✅ Supported, has a default value if not provided
- ☑️ Supported, it won't be used in the final sharing url if not provided
- ❌ Not supported

h2. Notes

h3. `x`

- `user` is the X username that will be mentioned in the post/tweet.
- `hashtags` is a "comma separated values" string that will be converted into individual hashtags

h3. `email`

- `title` is used in the subject of the email
- `url` is used in the body of the email

h3. `chatgpt`, `claude`, `gemini`, `perplexity`, `grok`

- these are AI tools rather than social networks: they use the `prompt` parameter to build an instructional message with the page URL appended to it.
- `prompt` defaults to *"Read this page so I can ask questions about it:"* if not provided.

h2. Deprecated Networks

The following networks have been removed from the module, as their services have been shut down:

- **pocket** ([More info](https://www.theverge.com/news/672924/mozilla-pocket-fakespot-shutting-down))
- **skype** ([More info](https://www.theverge.com/news/621353/microsoft-skype-shutting-down-retirement-may-2025))

---

### Styling with CSS

Source: https://nuxt-social-share.stefanobartoletti.it/usage/styling-with-css
Description: How to apply custom styles to the <SocialShare> component with CSS.

h2. Component default styles

The base for visual customization of the `<SocialShare>` buttons are the builtin CSS classes:

- `.social-share-button`
- `.social-share-button--{network name}`
- `.social-share-button--styled` (only if `styled` is set to `true`)
- `.social-share-button__icon`
- `.social-share-button__label`

and the CSS brand color variable, applied to the `<a>` element, and available to all its children:

- `--color-brand`

h2. CSS Specificity

The component CSS styles are placed inside a `@layer components` CSS layer.

Using a layer ensures a lower specificity over regular unlayered CSS, allowing for easy overwriting with your own customizations.

<note>

You can refer to MDN documentation on [CSS `@layer` rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) for more info about this feature

</note>

---

### Reducing Bundle Size

Source: https://nuxt-social-share.stefanobartoletti.it/usage/reducing-bundle-size
Description: Exclude unused networks from your final bundle with the 'networks' module option.

h2. Why

By default, all supported networks are bundled with your app, even if you only ever render a couple of them. Each network's data (icon, share URL template, color) is small on its own, but most sites only need a handful, so it is usually not necessary to load all 20+ of them.

h2. Usage

If you know in advance which networks your site needs, you can set the optional `networks` key in the module configuration, to define a whitelist of network names.

Networks not listed here will be excluded from the build entirely, rather than just being unused code in the final bundle:

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  socialShare: {
    baseUrl: 'https://www.yoursite.com',
    networks: ['facebook', 'x', 'linkedin', 'email'], // only these get bundled
  },
})
```

See [Supported Networks](/usage/supported-networks) for the full list of valid names, including aliases (e.g. `twitter` for `x`).

<tip>

Once this is set, you can read the same list back in your own components via `useRuntimeConfig().public.socialShare.networks` instead of hardcoding it a second time wherever you render your share buttons.<br />


See [Avoiding duplication with the `networks` option](/examples/multiple-buttons#avoiding-duplication-with-the-networks-option)

</tip>

h2. What happens with excluded networks

If a `<SocialShare>` component (or a `useSocialShare()` call) references a network that isn't in your `networks` list, it fails gracefully: no share button is rendered, and a warning is logged to the console explaining that the network was excluded by your configuration (as opposed to being genuinely unsupported), so you know to add it to the list rather than assuming you made a typo.

h2. Nuxt Layers

<tip>

If you use [Nuxt Layers](https://nuxt.com/docs/getting-started/layers), be aware that array options are merged by concatenation, not overridden: a base layer's `networks: ['facebook']` combined with an extending app's `networks: ['linkedin']` results in `networks: ['linkedin', 'facebook']`, not just the app's value.

</tip>

---

### Composable

Source: https://nuxt-social-share.stefanobartoletti.it/usage/composable
Description: How to use the 'useSocialShare' composable.

h2. Using the composable

Using the customizable [component](/usage/component) is the main intended way to use "Nuxt Social Share", as it should cover almost every use case.

However, the `useSocialShare` composable, that is also used internally to create the `<SocialShare>` components, is also available to be used directly if your project requires even more flexibility.

Like the component, one instance of `useSocialShare` should be used for every needed share.

```vue
<script setup>
// Basic minimal use, network property is required
const shareFacebook = useSocialShare({ network: 'facebook' })
</script>
```

```vue
<script setup>
// All possible options
const shareFacebook = useSocialShare({
  network: 'facebook', // Required!
  url: 'https://www.example.com', // Optional, defaults to current page URL if not provided
  title: 'My Custom Title', // Optional, available on networks supporting it
  user: 'twitter_user', // Optional, available on networks supporting it
  hashtags: 'list,of,hashtags', // Optional, available on networks supporting it
  image: 'https://www.example.com/path/to/image.jpg', // Optional, available on networks supporting it
  prompt: 'Read this page so I can ask questions about it:', // Optional, available on AI networks
})
</script>
```

h2. Output

The composable returns the following object:

```json
{
  "name": "facebook", // Name of the selected social network
  "shareUrl": "https://www.facebook.com/sharer/sharer.php?u=https://www.example.com", // Sharing url
  "icon": {
    "viewBox": "0 0 24 24",
    "path": "M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4z"
  }, // SVG Icon attributes
  "color": "#0866FF", // Main brand color of the selected network
  "category": "social" // Category of the selected network: "social", "messaging", "bookmark", "ai" or "other"
}
```

You can then use some or all the returned properties, according to your project setup and requirements.

<warning>

Since the composable only returns raw data, you must create from scratch your own HTML structure and make sure that everything works as you desire.

</warning>

---

### Using multiple buttons

Source: https://nuxt-social-share.stefanobartoletti.it/examples/multiple-buttons
Description: How to easily create a consistent and reusable multi-button component.

h2. Multiple buttons

The `<SocialShare>` component provides only a single social share button for a specific network.

Since you will typically need to add multiple instances to cover all your desired networks, a wise and simple approach is to iterate the component with a `v-for`:

```vue-html
<SocialShare
  v-for="network in ['facebook', 'x', 'linkedin', 'email']"
  :key="network"
  :network="network"
  :styled="true"
/>
```

h2. Reusable component

If you need to place these share buttons in multiple places of your website/app, to avoid code duplication and to keep visual consistency, you can create a custom wrapper component that will provide both logic and custom styling.

```vue-html [ShareButtons.vue]
<template>
  <div class="flex gap-2 justify-center flex-wrap">
    <SocialShare
      v-for="network in ['facebook', 'x', 'linkedin', 'email']"
      :key="network"
      :network="network"
      :styled="true"
      :label="false"
      class="rounded-none"
    />
  </div>
</template>
```

h2. Avoiding duplication with the `networks` option

If you've set the [`networks`](/usage/reducing-bundle-size) module option to restrict which networks get bundled, you've already declared the exact list you want to render, there is no need to also hardcode it in your component. Read it back from the runtime config instead:

```vue-html [ShareButtons.vue]
<template>
  <div class="flex gap-2 justify-center flex-wrap">
    <SocialShare
      v-for="network in networks"
      :key="network"
      :network="network"
      :styled="true"
      :label="false"
      class="rounded-none"
    />
  </div>
</template>

<script setup>
const { networks } = useRuntimeConfig().public.socialShare
</script>
```

This way, adding or removing a network only requires updating `nuxt.config.ts` in one place: your component picks it up automatically, and it can never drift out of sync with your `networks` allow-list.

---

### Custom Styling

Source: https://nuxt-social-share.stefanobartoletti.it/examples/custom-styling
Description: Some recipes for advanced visual customization.

h2. Outlined Buttons

<recipe-outline>



</recipe-outline>

```vue
<template>
  <div class="share-buttons">
    <SocialShare
      v-for="network in ['facebook', 'x', 'linkedin']"
      :key="network"
      :network="network"
    />
  </div>
</template>

<style scoped>
.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.social-share-button {
  color: var(--color-brand);
  border: 2px solid var(--color-brand);
  padding: 0.5rem 0.75rem;
}

.social-share-button:hover {
  background-color: var(--color-brand);
  color: white;
}
</style>
```

h2. Square Buttons, icons only

<recipe-square>



</recipe-square>

```vue
<template>
  <div class="share-buttons">
    <SocialShare
      v-for="network in ['facebook', 'x', 'linkedin']"
      :key="network"
      :network="network"
      :styled="true"
      :label="false"
    />
  </div>
</template>

<style scoped>
.share-buttons {
  display: flex;
  flex-wrap: wrap;
}

.social-share-button {
  color: #fff;
  padding: 1rem;
  aspect-ratio: 1;
  border-radius: 0;
}
</style>
```

h2. Icons only, colorize on hover

<recipe-icons>



</recipe-icons>

```vue
<template>
  <div class="share-buttons">
    <SocialShare
      v-for="network in ['facebook', 'x', 'linkedin']"
      :key="network"
      :network="network"
      :label="false"
    />
  </div>
</template>

<style scoped>
.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.social-share-button {
  color: #63738a;
  padding: 1rem;
}

.social-share-button:hover {
  color: var(--color-brand);
}
</style>
```

---

### Dynamic baseUrl

Source: https://nuxt-social-share.stefanobartoletti.it/examples/dynamic-baseurl
Description: How to use dynamic values for the required "basUrl" option.

h2. 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'
  }

})
```

h2. 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.

h2. 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>

h3. 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',
  }

})
```

h3. 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',
  }

})
```

h3. 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',
  }

})
```

---