Nuxt Social Share

Easy social share for Nuxt for doing amazing things.

Features

💡 Single customizable component for sharing
🚀 Share to Twitter, Facebook, Reddit, LinkedIn and WhatsApp
🔨 Configure where you can share to
🔗 Smart relative link parsing

Quick Setup

Add @eckidevs/nuxt-social-share dependency to your project

# Using pnpm
pnpm add -D @eckidevs/nuxt-social-share

# Using yarn
yarn add --dev @eckidevs/nuxt-social-share

# Using npm
npm install --save-dev @eckidevs/nuxt-social-share

Add @eckidevs/nuxt-social-share to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: ["@eckidevs/nuxt-social-share"],
});

That's it! You can now use Nuxt Social Share in your Nuxt app ✨

Usage

SocialShare Component Props

url (optional): The url to share, defaults to location.href
platforms (optional): The platforms to show share for, defaults to facebook,reddit,twitter,whatsapp,linkedin
text (optional): The extra text to show with the post if supported

Simply add the component to where you want to render the share button

<template>
  <article>
    <SocialShare text="Check out this cool post!" />
    <h1>My cool post</h1>
  </article>
</template>

At a basic level this handles everything and uses the current location.href as the link to share. You can configure the share link too:

<template>
  <article>
    <SocialShare url="/relative" />
    <!-- or -->
    <SocialShare url="https://site.com/absolute" />

    <h1>My cool post</h1>
  </article>
</template>

The component accepts relative URLs and uses the current location.origin as the base URL, but also allows for any url that starts with http to make it absolute.

You can also specify which social platforms to show:

<template>
  <article>
    <SocialShare url="/relative" :platforms="['facebook', 'reddit']" />
    <h1>My cool post</h1>
  </article>
</template>

The available options are:

facebook
reddit
whatsapp
twitter
linkedin

Overriding Nuxt Social Share button slot

You can also use your own button for the sharing:

<template>
  <article>
    <SocialShare url="/relative">
      <template #activator="{" on }>
        <button v-on="on">Share this!</button>
      </template>
    </SocialShare>

    <h1>My cool post</h1>
  </article>
</template>

Eckhardt-D / nuxt-social-share