How to correctly use the useSocialShare composable in nuxt-social-share?

[hoanghiep1x0]

Hi,

I'm trying to use the useSocialShare composable from the nuxt-social-share module in my Nuxt.js project, but I'm having some trouble understanding how to properly use it. Here’s what I’ve done so far:

Installed the nuxt-social-share module and configured it in nuxt.config.js. Tried to set up the useSocialShare composable in a component like this:

<template>
  <div>
    <h1>Share this post</h1>
    <button @click="shareOnFacebook">Share on Facebook</button>
    <button @click="shareOnTwitter">Share on Twitter</button>
  </div>
</template>

<script setup>

const shareFacebook = useSocialShare({
  network: 'facebook',
  url: 'https://www.example.com',
  title: 'My Custom Title'
})

const shareTwitter = useSocialShare({
  network: 'twitter',
  url: 'https://www.example.com',
  title: 'My Custom Title',
  user: 'twitter_user',
  hashtags: 'list,of,hashtags'
})

const shareOnFacebook = () => {
  shareFacebook()
}

const shareOnTwitter = () => {
  shareTwitter()
}
</script>

However, I encountered an issue where shareFacebook and shareTwitter are not functions, so I'm not sure how to trigger the sharing actions.

Could you please provide an example of how to correctly use the useSocialShare composable to trigger social media shares?

Thank you!

[stefanobartoletti]

Hi, the composable is not returning a function, but an object with all the data you need to build your own custom sharing component:

{
  "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
}

This is explained in the docs too.

Anyway, the best option is to try using the component first and use its customization capabilities, it should cover almost all use cases, and resort to using the composable only if the component is not enough.