Skip to content
codingtube

codingtube

Coding and Programming tutorials

  • javascript
  • React
  • ES6
  • React js
  • coding
  • ffmpeg
  • java
  • programming
  • information
  • coding
  • Privacy Policy
  • Twitter trends
  • Age Calculatore
  • Codingtube Community
  • YouTube Tags Generator
  • About
  • Toggle search form

Vue component for social sharing

Posted on December 4, 2021December 4, 2021 By christo No Comments on Vue component for social sharing

If you want to implement a vue component for sharing links to social networks then follow these steps

vue-socialmedia-share
vue-socialmedia-share

vue-socialmedia-share is a vue component for sharing links to social networks

Features

  • No external script loading
  • Opens a new share tab
  • Share Button for:
    • Facebook
    • Twitter
    • Reddit
    • LinkedIn
    • Google +
    • WhatsApp
    • Telegram
    • Email
    • Pinterest
  • Social Media icons includes in the library
  • Change the size of icons

Installation

yarn add vue-socialmedia-share

or

npm install vue-socialmedia-share

API

Facebook

import { Facebook } from 'vue-socialmedia-share';

// usage in local component

export default {
  components: {
    Facebook
  }
};

Props

PropData TypeRequiredDescription
urlStringtrueURL to share.
scaleStringSize of icon (1-9)

Twitter

import { Twitter } from 'vue-socialmedia-share';

// usage in local component

export default {
  components: {
    Twitter
  }
};
PropData TypeRequiredDescription
urlStringtrueURL to share.
scaleStringSize of icon(1-9)
titleStringTitle of the shared page

LinkedIn

import { Linkedin } from 'vue-socialmedia-share';

// usage in local component

export default {
  components: {
    Linkedin
  }
};
PropData TypeRequiredDescription
urlStringtrueURL to share.
scaleStringSize of icon(1-9)

Reddit

import { Reddit } from 'vue-socialmedia-share';

// usage in local component

export default {
  components: {
    Reddit
  }
};
PropData TypeRequiredDescription
urlStringtrueURL to share.
scaleStringSize of icon(1-9)
titleStringTitle of the shared page

Telegram

import { Telegram } from 'vue-socialmedia-share';

// usage in local component

export default {
  components: {
    Telegram
  }
};
PropData TypeRequiredDescription
urlStringtrueURL to share.
scaleStringSize of icon(1-9)
titleStringTitle of the shared page

WhatsApp

import { WhatsApp } from 'vue-socialmedia-share';

// usage in local component

export default {
  components: {
    WhatsApp
  }
};
PropData TypeRequiredDescription
urlStringtrueURL to share.
scaleStringSize of icon(1-9)
titleStringTitle of the shared page

Pinterest

import { Pinterest } from 'vue-socialmedia-share';

// usage in local component

export default {
  components: {
    Pinterest
  }
};
PropData TypeRequiredDescription
urlStringtrueURL to share.
scaleStringSize of icon(1-9)

Google +

import { Google } from 'vue-socialmedia-share';

// usage in local component

export default {
  components: {
    Google
  }
};
PropData TypeRequiredDescription
urlStringtrueURL to share.
scaleStringSize of icon(1-9)

Email

import { Email } from 'vue-socialmedia-share';

// usage in local component

export default {
  components: {
    Email
  }
};
PropData TypeRequiredDescription
urlStringtrueURL to share.
scaleStringSize of icon(1-9)
subjectStringSubject of email
bodyStringBody of email
Demo
Full Project
vue.js Tags:Vue component for social sharing, vue.js

Post navigation

Previous Post: Vue JSON to CSV file
Next Post: A Vue.js slideshow component working with Three.js and GSAP

Related Posts

An advanced and flexible Vue.js 2.x component for displaying data tables vue.js
A simple and flexible implementation of toast style notifications using Vue.js vue.js
A simple hands-on mobile nested menu UI component with a smooth slide animation vue.js
Color Pickers for Sketch Photoshop, Chrome & more with Vue.js vue.js
Circular Progressbar using Vue.js vue.js
Zoom the image or other thing with mouse or touch using vue.js vue.js

Leave a Reply Cancel reply

You must be logged in to post a comment.

Recent Posts

  • Affiliate Marketing Principles
  • The Basics You Need to Know About Affiliate Marketing
  • Affiliate Marketing Options
  • All About Affiliate Marketing
  • Classification of Database Management Systems
  • Three-Tier and n-Tier Architectures
    for Web Applications
  • Two-Tier Client/Server Architectures for DBMSs
  • Basic Client/Server Architectures in DBMS
  • Centralized DBMSs Architecture in DBMS
  • Tools, Application Environments, and Communications Facilities in DBMS

Categories

  • Affiliate marketing (5)
  • Algorithm (43)
  • amp (3)
  • android (223)
  • Android App (8)
  • Android app review (4)
  • android tutorial (60)
  • Artificial intelligence (61)
  • AWS (3)
  • bitcoin (8)
  • blockchain (1)
  • c (5)
  • c language (105)
  • cloud computing (4)
  • coding (4)
  • coding app (4)
  • complex number (1)
  • Computer Graphics (66)
  • data compression (65)
  • data structure (188)
  • DBMS (44)
  • digital marketing (9)
  • distributed systems (11)
  • ffmpeg (26)
  • game (3)
  • html (6)
  • image processing (35)
  • Inequalities (1)
  • information (4)
  • java (212)
  • java network (1)
  • javascript (9)
  • kotlin (4)
  • leetcode (1)
  • math (21)
  • maven (1)
  • mysql (1)
  • Node.js (8)
  • operating system (109)
  • php (310)
  • Principle Of Mathematical Induction (1)
  • programming (6)
  • Python (4)
  • Python data structure (9)
  • React native (1)
  • React.js (22)
  • Redux (1)
  • seo (4)
  • set (12)
  • trigonometry (6)
  • vue.js (35)
  • XML (3)

sitemap

sitemap of videos

sitemap of webstories

sitemap of website

  • Affiliate marketing
  • Algorithm
  • amp
  • android
  • Android App
  • Android app review
  • android tutorial
  • Artificial intelligence
  • AWS
  • bitcoin
  • blockchain
  • c
  • c language
  • cloud computing
  • coding
  • coding app
  • complex number
  • Computer Graphics
  • data compression
  • data structure
  • DBMS
  • digital marketing
  • distributed systems
  • ffmpeg
  • game
  • html
  • image processing
  • Inequalities
  • information
  • java
  • java network
  • javascript
  • kotlin
  • leetcode
  • math
  • maven
  • mysql
  • Node.js
  • operating system
  • php
  • Principle Of Mathematical Induction
  • programming
  • Python
  • Python data structure
  • React native
  • React.js
  • Redux
  • seo
  • set
  • trigonometry
  • vue.js
  • XML
  • Blog
  • Data compression tutorial - codingpoint
  • How to change mbstring in php 5.6
  • How to diagnose out of memory killed PHP-FPM
  • Introduction to jQuery
  • Privacy
  • Affiliate marketing
  • Algorithm
  • amp
  • android
  • Android App
  • Android app review
  • android tutorial
  • Artificial intelligence
  • AWS
  • bitcoin
  • blockchain
  • c
  • c language
  • cloud computing
  • coding
  • coding app
  • complex number
  • Computer Graphics
  • data compression
  • data structure
  • DBMS
  • digital marketing
  • distributed systems
  • ffmpeg
  • game
  • html
  • image processing
  • Inequalities
  • information
  • java
  • java network
  • javascript
  • kotlin
  • leetcode
  • math
  • maven
  • mysql
  • Node.js
  • operating system
  • php
  • Principle Of Mathematical Induction
  • programming
  • Python
  • Python data structure
  • React native
  • React.js
  • Redux
  • seo
  • set
  • trigonometry
  • vue.js
  • XML
  • Blog
  • Data compression tutorial - codingpoint
  • How to change mbstring in php 5.6
  • How to diagnose out of memory killed PHP-FPM
  • Introduction to jQuery
  • Privacy

© codingtube.tech