Nuxt Social Share module has been released 🎉

#nuxt #vue #javascript #frontend

In some of my most recent Nuxt projects I have been in need of implementing some simple social sharing buttons, like those that you often find at the bottom of blog posts, to help users share your content across various social media and messaging applications:

Even if the process itself is quite simple (it just involves providing your current page URL as a parameter to another end-point URL specific to a given social network), it is repetitive and does not require complex configuration, so it is best managed with a dedicated component, and maybe from a module so it could be used in many projects, not just once.

After realizing that such a module did not exist yet in the official modules directory, I decided to write a little module myself and release it as open-source.

The module can be installed in your project with:



# pnpm
pnpm add -D @stefanobartoletti/nuxt-social-share
# yarn
yarn add --dev @stefanobartoletti/nuxt-social-share
# npm
npm install --save-dev @stefanobartoletti/nuxt-social-share

And by adding it to your nuxt.config.ts:



export default defineNuxtConfig({
  modules: [
    '@stefanobartoletti/nuxt-social-share'
  ],
  // optional configuration
  socialShare: {
    // module options
  }
})

It will then provide a simple component that you can include wherever you need in your templates:



<SocialShare network="facebook" />
<SocialShare network="twitter" />
<SocialShare network="linkdin" />

That's it! A more detailed documentation is available in the official repository hr -> https://github.com/stefanobartoletti/nuxt-social-share

This module is fully functional but it is an early release, more features and other networks will be available in future roles. Any kind of feedback and contribution is kindly welcome 💚

Happy coding (and sharing) 🎉