webistomin/vue-socials

:speech_balloon: Social media share buttons and counts for Vue.js

-environment

My home config, scripts and installation process

vue-socials's Issues

[vite] Error when evaluating SSR module /src/*.vue: failed to import "vue-socials"

Not able to use this package with a vite SSR environment. The project is type of module.

1:24:12 PM [vite] Error when evaluating SSR module /src/*.vue: failed to import "vue-socials"
|- /node_modules/vue-socials/dist/esm/vue-socials-esm.js:1
import * as index from './components/index.js';
^^^^^^

SyntaxError: Cannot use import statement outside a module
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1178:20)
at Module._compile (node:internal/modules/cjs/loader:1220:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
at Module.load (node:internal/modules/cjs/loader:1119:32)
at Module._load (node:internal/modules/cjs/loader:960:12)
at ModuleWrap. (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

[Typescript]: Cannot find declaration file for module 'vue-socials'

Hello, I encountered an issue while using this package with the moduleResolution: bundler option in the tsconfig.json file.

The issue is related to the package.json of the package, which requires an update to fix the issue.

I have prepared a reproduction example here: Reproduction Example. If you take a look at the task labeled "Check types," you'll notice an error related to the inability to find the declaration file.

Mastodon support

Seeing as so many people are frequenting mastodon now it would be really nice to have a mastodon button as well. I've yet to see a single library add support since a mastodon share button would require a modal or something to enter your instance address, which tends to upset the simple "click and go" flow.

Vue 3 support?

app.use() ?

Bump node engine to 18

Hi! Thanks for the component.

Could you upgrade the node version to 18? Or even remove the mention of it in the package.json to avoid this in the future.

Support for X (Twitter)

Hi, could you please add support for X (the new Twitter)? Thank you!

Contributors

@all-contributors please add @webistomin for a11y, tests, code and ideas

Import doesn't work in Nuxt for some reason

Trying to get vue-socials working with a Nuxt app. When I try to import VueSocials from 'vue-socials' in a plugin I get the following error:

Failed to resolve entry for package "vue-socials". The package may have incorrect main/module/exports specified in its package.json.

Ability to edit aria-label

It would be great to be able to edit the aria-label of the buttons via props.

SMastodon broken in 2.0.1?

Something is up with the SMastodon component in v2.0.1.

It can only be imported like so:

    import {
        SWhatsApp,
        STelegram,
        SEmail,
        SFacebook,
        STwitter,
        SReddit,
        SPinterest,
        SPocket,
    } from 'vue-socials'
    import SMastodon from 'vue-socials'

And when imported this way, it's not working, and it is not supporting the standard properties like shareOptions, etc.

Vue3 installation and usage: a few pointers

I just installed and used this component in my Vue3/Quasar project. Here are the three things I struggeled with a little bit to get it to work. It's meant as a constructive critism. It may help future users. :-)

Don't install next, (2.0.0) but install latest (2.0.1), the import fix is a must-have.

I didn't know this thing was renderless, so took me a while to figure that out. I think renderless is better, and had almost selected a different component as I thought this one wasn't. I now realize that is what was meant by "Customizable"/"Unstyled". IMHO, you might want to clarify this somewhere.

The global component registration isn't necessary. Unless the buttons are used everywhere, it's probably better (because code splitting) to locally register them. Or not?? Right?

Quasar boot file for global registration:

import { boot } from 'quasar/wrappers'
import { SWhatsApp } from 'vue-socials'

export default boot(({ app }) => {
    app.component('SWhatsApp', SWhatsApp)
})

Local registration:

<script setup lang="ts">
    import { SWhatsApp } from 'vue-socials'

    const windowFeatures = {}
    const shareOptions = {
        number: '1(999)999-99-99',
        text: 'Hello world!',
    }

    const useNativeBehavior = false
    const onClose = () => {
        return
    }
    const onOpen = () => {
        return
    }
    const onBlock = () => {
        return
    }
    const onFocus = () => {
        return
    }
</script>

Usage (SVG from the Storybook demo).
The super-tiny-icons package might be good companion to this plugin.

                <s-whats-app
                    :window-features="windowFeatures"
                    :share-options="shareOptions"
                    :use-native-behavior="useNativeBehavior"
                    @popup-close="onClose"
                    @popup-open="onOpen"
                    @popup-block="onBlock"
                    @popup-focus="onFocus"
                >
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        aria-hidden="true"
                        focusable="false"
                    >
                        <path
                            d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"
                        />
                    </svg>
                </s-whats-app>

With Super-Tiny-Icons, add the import import stiWhatsApp from 'super-tiny-icons/images/svg/whatsapp.svg'

                <s-whats-app
                    :window-features="windowFeatures"
                    :share-options="shareOptions"
                    :use-native-behavior="useNativeBehavior"
                    @popup-close="onClose"
                    @popup-open="onOpen"
                    @popup-block="onBlock"
                    @popup-focus="onFocus"
                >
                    <img
                        :src="stiWhatsApp"
                        width="24"
                    />
                </s-whats-app>

Just my experience :-)