RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://npmjs.com/package/vue3-social-sharing below:

vue3-social-sharing - npm

Style agnostic Vue 3 plugin for social sharing your links on major social networks. Typescript friendly!
Basically it's a modern fork of vue-social-sharing library. If you are using vue 2 you should use that library.

Baidu Bluesky Buffer Email EverNote Facebook FlipBoard HackerNews InstaPaper Line LinkedIn Messenger Odnoklassniki Pinterest Pocket Reddit Skype SMS StumbleUpon Telegram Threads Tumblr Twitter X Viber VK Weibo WhatsApp Wordpress Xing Yammer

# Using pnpm
pnpm add vue3-social-sharing

# Using yarn
yarn add vue3-social-sharing

# Using npm
npm 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 a regular vue plugin.

import Vue3SocialSharingPlugin from "vue3-social-sharing";


const app = 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 find the demo page.

<script setup lang="ts">
import { ShareNetwork } from "vue3-social-sharing";
</script>

<template>
  <ShareNetwork
      network="facebook"
      url="https://example.com"
      v-slot="{ share }"
  >
    <span @click="share">Share on Facebook</span>
  </ShareNetwork>
</template>

The url 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.

import Vue3SocialSharingPlugin from "vue3-social-sharing";

const app = 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 in the 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 the documentation if needed
Run npm run build, commit your changes and make a pull request.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4