---
title: "Installation"
description: "How to quickly add Nuxt Social Share to your Nuxt project."
canonical_url: "https://nuxt-social-share.stefanobartoletti.it/getting-started"
last_updated: "2026-07-29T16:43:22.960Z"
---

## 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'
  ],
})
```

## 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
  }
})
```

## 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>

## 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>