webistomin / vue-socials Goto Github PK
View Code? Open in Web Editor NEW:speech_balloon: Social media share buttons and counts for Vue.js
Home Page: https://vue-socials.vercel.app/
License: MIT License
:speech_balloon: Social media share buttons and counts for Vue.js
Home Page: https://vue-socials.vercel.app/
License: MIT License
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.
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.
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 :-)
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.
app.use() ?
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.
It would be great to be able to edit the aria-label of the buttons via props.
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.
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)
@all-contributors please add @webistomin for a11y, tests, code and ideas
Hi, could you please add support for X (the new Twitter)? Thank you!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.