Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vue social sharing

Related:
Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

A Vue.js component for sharing links to social networks. This component adds social media sharing links to your vue app.

component name: vue-social-sharing


vue social sharing

Installation

Install the component with yarn, npm or bower.

bash
# Yarn
yarn add vue-social-sharing

# NPM
npm install --save vue-social-sharing

# Bower
bower install vue-social-sharing

Usage

Loading the library with browserify/webpack or html.

Browserify / Webpack

javascript
var SocialSharing = require('vue-social-sharing');

Vue.use(SocialSharing);

HTML

html
<script src="/dist/vue-social-sharing.min.js"></script>

Using the social sharing component

Example code below:

 <social-sharing url="https://vuejs.org/"
title="The Progressive JavaScript Framework"
description="Intuitive, Fast and Composable MVVM for building interactive interfaces."
quote="Vue is a progressive framework for building user interfaces."
hashtags="vuejs,javascript,framework"
twitter-user="vuejs"
inline-template>
<div>
<network network="email">
Email
</network>
<network network="facebook">
Facebook
</network>
<network network="googleplus">
Google +
</network>
<network network="line">
Line
</network>
<network network="linkedin">
LinkedIn
</network>
<network network="odnoklassniki">
Odnoklassniki
</network>
<network network="pinterest">
Pinterest
</network>
<network network="reddit">
Reddit
</network>
<network network="skype">
Skype
</network>
<network network="sms">
SMS
</network>
<network network="telegram">
Telegram
</network>
<network network="twitter">
Twitter
</network>
<network network="vk">
VKontakte
</network>
<network network="weibo">
Weibo
</network>
<network network="whatsapp">
Whatsapp
</network>
</div>
</social-sharing>

Github: http://github.com/nicolasbeauvais/vue-social-sharing#readme


© vuejsexamples.net - Privacy Policy - Cookie Policy