Build a Vue.js 3 Popup Modal Social Sharing Buttons in Browser Using vue-social-sharing in TS

npm i vue-social-sharing

main.ts

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import VueSocialSharing from "vue-social-sharing";

const app = createApp(App);

app.use(VueSocialSharing);

// Mount the app
app.mount("#app");

import { createApp } from "vue";

import "./style.css";

import App from "./App.vue";

import VueSocialSharing from "vue-social-sharing";

const app = createApp(App);

app.use(VueSocialSharing);

// Mount the app

app.mount("#app");

App.vue

<template>
  <div id="app">
    <h1>Social Sharing Example</h1>
    <div class="social-buttons">
      <!-- Facebook -->
      <ShareNetwork
        network="facebook"
        url="https://freemediatools.com"
        title="Check out this amazing site!"
        description="This is an example of a site worth sharing."
        hashtags="VueJS,SocialSharing"
        quote="Vue makes sharing easy!"
      >
        <button class="share-btn facebook">Share on Facebook</button>
      </ShareNetwork>

      <!-- Twitter -->
      <ShareNetwork
        network="twitter"
        url="https://freemediatools.com"
        title="Check out this amazing site!"
        hashtags="VueJS,SocialSharing"
        twitter-user="exampleUser"
      >
        <button class="share-btn twitter">Tweet This</button>
      </ShareNetwork>

      <!-- LinkedIn -->
      <ShareNetwork
        network="linkedin"
        url="https://freemediatools.com"
        title="Check out this amazing site!"
      >
        <button class="share-btn linkedin">Share on LinkedIn</button>
      </ShareNetwork>

      <ShareNetwork
        network="whatsapp"
        url="https://freemediatools.com"
        title="Check out this amazing site!"
      >
        <button class="share-btn whatsapp">Share on Whatsapp</button>
      </ShareNetwork>

      <ShareNetwork
        network="reddit"
        url="https://freemediatools.com"
        title="Check out this amazing site!"
      >
        <button class="share-btn reddit">Share on Reddit</button>
      </ShareNetwork>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import VueSocialSharing from "vue-social-sharing";

export default defineComponent({
  name: "App",
  components: {
    ShareNetwork: VueSocialSharing.ShareNetwork,
  },
});
</script>

<style>
.social-buttons {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.share-btn {
  padding: 10px 15px;
  font-size: 14px;
  border: none;
  border-radius: 5px;
  color: white;
  cursor: pointer;
}

.facebook {
  background-color: #3b5998;
}

.twitter {
  background-color: #1da1f2;
}

.linkedin {
  background-color: #0077b5;
}

.whatsapp {
  background-color: #25D366;
}

.reddit {
  background-color: #FF4500;
}

</style>

100

101

102

103

104

<h1>Social Sharing Example</h1>

<ShareNetwork

network="facebook"

url="https://freemediatools.com"

title="Check out this amazing site!"

description="This is an example of a site worth sharing."

hashtags="VueJS,SocialSharing"

quote="Vue makes sharing easy!"

<button class="share-btn facebook">Share on Facebook</button>

</ShareNetwork>

<ShareNetwork

network="twitter"

url="https://freemediatools.com"

title="Check out this amazing site!"

hashtags="VueJS,SocialSharing"

twitter-user="exampleUser"

<button class="share-btn twitter">Tweet This</button>

</ShareNetwork>

<ShareNetwork

network="linkedin"

url="https://freemediatools.com"

title="Check out this amazing site!"

<button class="share-btn linkedin">Share on LinkedIn</button>

</ShareNetwork>

<ShareNetwork

network="whatsapp"

url="https://freemediatools.com"

title="Check out this amazing site!"

<button class="share-btn whatsapp">Share on Whatsapp</button>

</ShareNetwork>

<ShareNetwork

network="reddit"

url="https://freemediatools.com"

title="Check out this amazing site!"

<button class="share-btn reddit">Share on Reddit</button>

</ShareNetwork>

</div>

</template>

import { defineComponent } from "vue";

import VueSocialSharing from "vue-social-sharing";

export default defineComponent({

name: "App",

components: {

ShareNetwork: VueSocialSharing.ShareNetwork,

});

</script>

<style>

.social-buttons {

display: flex;

gap: 10px;

margin-top: 20px;

}

.share-btn {

padding: 10px 15px;

font-size: 14px;

border: none;

border-radius: 5px;

color: white;

cursor: pointer;

}

.facebook {

background-color: #3b5998;

}

.twitter {

background-color: #1da1f2;

}

.linkedin {

background-color: #0077b5;

}

.whatsapp {

background-color: #25D366;

}

.reddit {

background-color: #FF4500;

}

</style>

Build a Vue.js 3 Popup Modal Social Sharing Buttons in Browser Using vue-social-sharing in TS

Comments

Leave a Reply Cancel reply

Archives