stefanobartoletti / nuxt-social-share Goto Github PK

Great package!
Right now the text is always "Share", which is a problem when app is not in English. Is is possible to add parameter so the text "Share" can be modified? Might be also useful when someone wants to add nicer text like "Share on Facebook" 😃

Using useRequestUrl composable is returning localhost on some production environments.

According to the docs here https://nuxt.com/docs/api/composables/use-request-url it is a known behavior, caused by Nitro caching features.

Currently, this is happening regardless of the hosting platform, i.e. both the playground of this module here, hosted on GitHub Pages:

• https://stefanobartoletti.github.io/nuxt-social-share/

and a live website here, on Netlify:

• https://nuxt-storyblok-starter.netlify.app/blog/article-8/ (here it is happening only if accessed directly, if navigating from another page on the site, the URL seems correct)

If possible, some configuration to be placed here in the module is desirable, to avoid setting this up in every project that uses the module.

Some help and clarifications have been asked here nuxt/nuxt#27393

Hi,

I'm trying to use the useSocialShare composable from the nuxt-social-share module in my Nuxt.js project, but I'm having some trouble understanding how to properly use it. Here’s what I’ve done so far:

Installed the nuxt-social-share module and configured it in nuxt.config.js.
Tried to set up the useSocialShare composable in a component like this:

<template>
  <div>
    <h1>Share this post</h1>
    <button @click="shareOnFacebook">Share on Facebook</button>
    <button @click="shareOnTwitter">Share on Twitter</button>
  </div>
</template>

<script setup>

const shareFacebook = useSocialShare({
  network: 'facebook',
  url: 'https://www.example.com',
  title: 'My Custom Title'
})

const shareTwitter = useSocialShare({
  network: 'twitter',
  url: 'https://www.example.com',
  title: 'My Custom Title',
  user: 'twitter_user',
  hashtags: 'list,of,hashtags'
})

const shareOnFacebook = () => {
  shareFacebook()
}

const shareOnTwitter = () => {
  shareTwitter()
}
</script>

However, I encountered an issue where shareFacebook and shareTwitter are not functions, so I'm not sure how to trigger the sharing actions.

Could you please provide an example of how to correctly use the useSocialShare composable to trigger social media shares?

Thank you!

Additional network option for instagram

Summary (generated):

Here is a brief summary of the provided text:

Environment details are listed, including operating system, Node version, Nuxt version, CLI version, and more.

A code snippet is shown, featuring the SocialShare component with a v-for loop rendering multiple networks.

The bug is described as an issue with sharing links that have spaces in them, which causes the link to be converted to normal text instead of displaying as a link.

Environment

• Operating System: Linux
• Node Version: v20.11.1
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: [email protected]
• Builder: -
• User Config: devtools, runtimeConfig, image, socialShare, modules, gtag, googleFonts, i18n, colorMode, ui
• Runtime Modules: @nuxt/[email protected], @nuxtjs/[email protected], @pinia/[email protected], @pinia-plugin-persistedstate/[email protected], @nuxt/[email protected], @nuxtjs/[email protected], [email protected], @stefanobartoletti/[email protected]
• Build Modules: -

Reproduction

<SocialShare
  v-for="network in ['facebook', 'whatsapp', 'instagram']"
  :key="network"
  :network="network"
>
  <template #icon><Icon name="mdi:${network}" /></template>
</SocialShare>

Describe the bug

The issue is with sharing a link that have spaces in it like https://domain.com/Fournitures%20création%20accessoires%20cheveux this will be converted to normal text instead of a link https://domain.com/Fournitures création accessoires cheveux leading to the wrong page

Additional context

No response

Logs

No response

Environment

• nuxt-social-share version: ^0.1.7
• nuxt version: 3.4.1

Reproduction Link

https://stackblitz.com/edit/nuxt-starter-wuk7is?file=app.vue (Currently not working, because of the following error:

Failed to resolve import "@iconify/vue" from "node_modules/@stefanobartoletti/nuxt-social-share/dist/runtime/components/SocialShare.vue". Does the file exist?

Describe the bug

Trying to use the component throws an error on yarn dev

Steps To Reproduce

1. Install the package
2. Follow the instructions (add it to nuxt.config > modules)
3. Include

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

in a component
4. Run dev-script
5. See: Internal server error: [unimport] failed to find "useRequestURL" imported from "#imports" in the terminal

Expected behavior

The component should render as described in the documentation

Sharing to Facebook is not working, even on https://stefanobartoletti.github.io/nuxt-social-share.

Maybe they changed the URL for sharing? Didn't find anything on their docs yet.

Thank you for your great package!!

Describe your suggestion

I would like to share to below SNS.

• LINE
• Bluesky
• Hatena Bookmark

Use cases

I would like to support new networks.

Describe alternatives you've considered

I couldn't find any good ideas..

Additional context

Specifications and Color for each SNS are below.

• LINE
  • https://line.me/R/share?text=[u](ref)
  • #06C755 (ref)
• Bluesky
  • https://bsky.app/intent/compose?text=[u] (ref)
  • #1185FE
• Hatena Bookmark
  • https://b.hatena.ne.jp/entry?url=[u] (ref)
  • #00A4DE (ref)

And, I'm developing this feature a bit.
If you don't mind, can I submit a PR?

• e281b50

P.S.
I'm not good at English, and this is my first issue.
Forgive me if I make you feel bad by using incorrect words in English, i don't mean it at all.

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency @nuxt/module-builder to ^0.7.1
• chore(deps): update dependency @types/node to ^20.14.5
• chore(deps): update dependency sass to ^1.77.6
• chore(deps): update dependency eslint to ^9.5.0
• chore(deps): update pnpm to v9.4.0
• fix(deps): update nuxtjs monorepo to ^3.12.2 (@nuxt/kit, @nuxt/schema, nuxt)
• chore(deps): update dependency @stefanobartoletti/eslint-config to v2
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository