Vue Social Share2

Based on Web Share API https://www.w3.org/TR/web-share/

Installation

 npm install vue-social-sharing2

Loading the library in components/pages

Browserify / Webpack / Nuxt.js

 import VueSocialShare2 from "vue-social-sharing2"

Using the sharer component

 <VueSocialShare2
	:styleConfig="{
		backgroundColor: 'none',
		color: '#fff',
		top: '50%',
		right: '-10px',
		transform: 'translateY(-50%)',
		backgroundImage: 'BUTTON BACKGROUND IMAGE URL OR MENTION THE BUTTON TEXT BELOW',
		backgroundRepeat: none,
		height: '100px',
	}"
	:networks="networks"
	buttonText=""
	:webShareData="{
		title: 'Arju S Moon',
		text: 'Demo Text',
		url: 'https://schbang.com',
		image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80',
	}"
/>

• styleConfig prop overrides all the default styles of the sharer button.

• webShareData prop is specifically to use with the Web Share API on mobile devices

Available Networks

Network	Properties
facebook	title, description, url, hashtag
twitter	text, url, hashtags(Array)
whatsapp	text

Defining Network Array

 networks: [
	{
		network: "facebook",
		title: "Arju S Moon",
		description: "Arju Desc",
		url: "https://saffola.in/oodles",
		hashtag: "#arjusmoon",
	},
	{
		network: "twitter",
		text: "Saffola Oodles",
		url: "https://saffola.in/oodles",
		hashtags: ["hashtag", "test", "saffola"],
	},
	{
		network: "whatsapp",
		text: "Test Post https://schbang.com",
	},
],