---
title: "Composable"
description: "How to use the 'useSocialShare' composable."
canonical_url: "https://nuxt-social-share.stefanobartoletti.it/usage/composable"
last_updated: "2026-07-29T16:43:23.506Z"
---

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

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