Styled & Label

By using props:

<SocialShare
	:styled="true"
	:label="true"
/>

By using options:

export default defineNuxtConfig({
	socialShare: {
		styled: true,
		label: true,
	}
})

'label' is 'true' by default, and can be omitted here to get the same result.

Styled & No Label

By using props:

<SocialShare
	:styled="true"
	:label="false"
/>

By using options:

export default defineNuxtConfig({
	socialShare: {
		styled: true,
		label: false,
	}
})

Styled & No Label, with custom style

By using props:

<SocialShare
	:styled="true"
	:label="false"
/>

By using options:

export default defineNuxtConfig({
	socialShare: {
		styled: true,
		label: false,
	}
})

Custom styles can always be applied, no matter the value of 'style'.

No Style & Label (Default)

By using props:

<SocialShare
	:styled="false"
	:label="true"
/>

By using options:

export default defineNuxtConfig({
	socialShare: {
		styled: false,
		label: true,
	}
})

Both 'styled' and 'label' can be omitted here to get the same result, as these are the default values.

Composable

Usage example:

<script setup>
const getFacebook = useSocialShare({ network: 'facebook' })
</script>

Returned object:

{
  "name": "facebook",
  "shareUrl": "https://www.facebook.com/sharer/sharer.php?u=http://localhost/nuxt-social-share",
  "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"
  },
  "color": "#0866FF"
}

Complete share URLs when using all Props

facebook

https://www.facebook.com/sharer/sharer.php?u=https://www.example.com/

twitter

https://twitter.com/intent/tweet?url=https://www.example.com/&text=Test Title&via=test_user&hashtags=test,hashtags

https://www.linkedin.com/sharing/share-offsite/?url=https://www.example.com/

https://pinterest.com/pin/create/button/?url=https://www.example.com/&description=Test Title&media=https://www.example.com/image.jpg

https://www.reddit.com/submit?url=https://www.example.com/&title=Test Title

bluesky

https://bsky.app/intent/compose?text=https://www.example.com/

pocket

https://getpocket.com/edit?url=https://www.example.com/

https://api.whatsapp.com/send?text=https://www.example.com/%20Test Title

https://t.me/share/url?url=https://www.example.com/&text=Test Title

skype

https://web.skype.com/share?url=https://www.example.com/&text=Test Title

line

https://line.me/R/share?text=https://www.example.com/

mailto:?body=https://www.example.com/&subject=Test Title