- Notifications
You must be signed in to change notification settings - Fork4
Vue 3 social sharing plugin
License
hedint/vue3-social-sharing
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Style agnostic Vue 3 plugin for social sharing your links on major social networks.Typescript friendly!
Basically it's a modern fork ofvue-social-sharing library.If you are using vue 2 you should use that library.
BaiduBlueskyBufferEmailEverNoteFacebookFlipBoardHackerNewsInstaPaperLineLinkedInMessengerOdnoklassnikiPinterestPocketRedditSkypeSMSStumbleUponTelegramThreadsTumblrTwitterXViberVKWeiboWhatsAppWordpressXingYammer
# Using pnpmpnpm add vue3-social-sharing# Using yarnyarn add vue3-social-sharing# Using npmnpm install vue3-social-sharing
<script setup lang="ts">import {useShareLink}from"vue3-social-sharing";const {shareLink}=useShareLink();const share= ()=> {shareLink({ network:"facebook", url:"https://example.com" }) }</script><template> <main> <span@click="share">Share on facebook</span> </main></template>
You can use this package as aregular vue plugin.
importVue3SocialSharingPluginfrom"vue3-social-sharing";constapp=createApp(App);app.use(Vue3SocialSharingPlugin);app.mount("#app");
After you'll be able to use ShareNetwork component in your app like this:
<share-network network="facebook" url="https://example.com"v-slot="{share }" > <span @click="share">Share on Facebook</span></share-network>
Here you can findthe demo page.
<script setup lang="ts">import {ShareNetwork }from"vue3-social-sharing";</script><template> <ShareNetworknetwork="facebook"url="https://example.com"v-slot="{ share }" > <span@click="share">Share on Facebook</span> </ShareNetwork></template>
Theurl is the only property required for all networks.
| Prop | Type | Description |
|---|---|---|
url* | String | URL to share. |
network* | String | Network name. |
title | String | Sharing title (if available). |
description | String | Sharing description (if available). |
quote | String | Facebook quote (Facebook only). |
hashtags | String | A list of comma-separated hashtags (Twitter and Facebook). |
twitter-user | String | Twitter user (Twitter only). |
media | String | Url to a media (Pinterest, VK, Weibo, and Wordpress). |
You are able to add your custom network by providing shareNetworks option to the vue plugin.
importVue3SocialSharingPluginfrom"vue3-social-sharing";constapp=createApp(App);app.use(Vue3SocialSharingPlugin,{shareNetworks:{"my-network":"https://example.com?url=@u&title=@t"}});app.mount("#app");
Available template properties in your link:
@u= url@t= title@d= description@q= quote@h= hashtags@m= media@tu= twitterUser
You can find a full example inthe demo.
You can find more examples in the playground dir of this repo.
Feel free to open an issue to ask for a new social network support.
- Fork the repo
- Create a feature branch with an issue number if it's related to any existing issue
- Run npm install
- Make you changes
- Run the tests
npm run test(Ofc you can write your own tests if you feel the need) - Update thedocumentation if needed
- Run
npm run build, commit your changes and make a pull request.
About
Vue 3 social sharing plugin
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.