DEV Community

Cover image for Nuxt Social Share module has been released ๐ŸŽ‰
Stefano Bartoletti
Stefano Bartoletti

Posted on โ€ข Edited on

6

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) ๐ŸŽ‰

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

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

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

๐Ÿ‘‹ Kindness is contagious

Please leave a โค๏ธ or a friendly comment on this post if you found it helpful!

Okay