DEV Community

Cover image for Nuxt Social Share module has been released 🎉
Stefano Bartoletti
Stefano Bartoletti

Posted on • Edited on

Nuxt Social Share module has been released 🎉

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:

Nuxt Social Share

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


Enter fullscreen mode Exit fullscreen mode

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



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


Enter fullscreen mode Exit fullscreen mode

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" />


Enter fullscreen mode Exit fullscreen mode

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) 🎉

Top comments (2)

Collapse
 
mfazail profile image
Fazail Alam

I think i will be having hard time remembering that long package name 😜. So just added the link to my notes. Will try it ❣️👍🏻

Collapse
 
stefanobartoletti profile image
Stefano Bartoletti

ehehe, that's just my name :)

Luckily you don't have to remember it after having installed it :)