Vue3 installation and usage: a few pointers

[Sjoerd82]

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

[webistomin]

I apologize for that.

Components aren't fully renderless, it renders <a> tag, but icons aren't included, you're right. Global registration isn't recommended since it will increase bundle size. It's better to register the component at the place of use.

Your example with super-tiny-icons is correct, but don't forget to make image accessible.

<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"
      height="24"
      aria-hidden="true"
      alt=""
    />
 </s-whats-app>

[webistomin]

Fixed in v2.0.2

[Sjoerd82]

That ARIA is a good addition!

Sidenote: This has nothing to do with vue-socials; choosing your image is mostly personal taste, I actually ended up with using Font-Awesome instead, because I wanted the icons with custom colors, which is not possible with super-tiny-icons, unless you edit the SVG or use JS SVG loaders. Just something to consider as well.