---
canonical_url: "https://nuxt-social-share.stefanobartoletti.it/"
last_updated: "2026-07-29T16:43:21.860Z"
---

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