Lightweight Social Share Vue Component

Often, we are using a social share plugin that helps us to share our content on various platforms. It might be a good choice for more complex sharing system, but still, we can keep it simple if we have no big needs.

Why don’t just pull in a plugin?

Having a faster solution has always a price on the other side. First of all, having dependencies is fine, we cannot avoid them. However, we need to be very careful, because they can quickly grow on our project if we don’t take care. This is true for both back end front-end.

So even for smaller things – like a social sharing JS library – we need to consider whether we need to handle a dependency or we can ship it as our own solution. Let’s see how easily can we make this component without having any other 3rd party code.

Need a WordPress website? Or you prefer the more performant headless and static solutions? We can help!

The Component

First of all, let’s see the code, then we will have some explanation. So before using the component, we need  to register it:

import Share from './Share';
Vue.component('share', Share);

Then let’s see the component itself:

<script>
    export default {
        props: {
            text: {
                type: String,
                required: true
            },
            url: {
                type: String,
                required: true
            }
        },

        data() {
            return {
                providers: {
                    twitter: 'https://twitter.com/intent/tweet/?url=:url&text=:text',
                    facebook: 'https://www.facebook.com/sharer/sharer.php?u=:u&title=:title'
                }
            };
        },

        methods: {
            share(url) {
                window.open(url, 'sharer', 'toolbar=0,status=0,width=648,height=395');

                return true;
            }
        },

        computed: {
            facebook() {
                return this.providers.facebook.replace(':u', this.url).replace(':title', this.text);
            },
            twitter() {
                return this.providers.twitter.replace(':url', this.url).replace(':text', this.text);
            }
        }
    }
</script>

<template>
    <div>
        <a @click.prevent="share(facebook)">Share on Facebook</a>
        <a @click.prevent="share(twitter)">Share on Twitter</a>
    </div>
</template>

As you can see, we accept two props, the text, and the URL. We use them to generate the URL with the proper query parameters. Also, we don’t use simple links here. We prevent the default action and open a new popup window with the given URL.

So the component should be used the following way:

<share title="Some title" text="Some text"></share>

Summary

The point of this post again is that, to cover how easily can we implement a lightweight solution – which is mostly enough – instead of pulling a robust library.

Every social platform has its own parameters, but you can easily cover and implement a new provider in the component. You can find more information about that at the docs of the platform you with to implement.