sttatusx / vue-share-modal

A pure, lightweight, and beautiful share modal for Vue3 (SFC)

vue-share-modal

A pure, lightweight, and beautiful share modal for Vue 3
‌

‌

🪁 Live version

You can see the live version here:
https://freakingeek.github.io/vue-share-modal/

‌

💾 Install

$ yarn add vue-share-modal
# npm install vue-share-modal

Or you can use any package manager you want

‌

🚀 Usage

You should import share-modal and share-module components from the vue-share-modal package and use them like this.
‌

<template>
  <share-modal
    :show="showModal"
    @update:show="showModal = false"
    link="https://www.figma.com/community/file/999287868143091993"
  >
    <template v-for="(m, key) in modules" :key="key">
      <share-module tag="a" href="#" :name="m.name">
        <component :is="m.component" />
      </share-module>
    </template>
  </share-modal>
</template>

<script>
import ShareModal from "vue-share-modal";
import ShareModule from "vue-share-modal/src/components/share-module.vue";
import { ChatCircle, Instagram, Twitch, At, Share, Twitter } from "@salmon-ui/icons";

export default {
  name: "MyComponent",

  components: {
    At,
    Share,
    Twitch,
    Twitter,
    Instagram,
    ChatCircle,
    ShareModal,
    ShareModule,
  },

  data() {
    return {
      showModal: true,
    };
  },

  computed: {
    modules() {
      return [
        { name: "Chat", component: ChatCircle },
        { name: "Instagram", component: Instagram },
        { name: "Twitter", component: Twitter },
        { name: "Twitch", component: Twitch },
        { name: "E-mail", component: At },
        { name: "More", component: Share },
      ];
    },
  },
};
</script>

‌

NOTE: vue-share-modal does not contain any icons by default. So we use @salmon-ui/icons package for example here

‌

Options Or Props ( share-modal )

show prop is used for showing modal with animation
@update:show event is used to update show value

<share-modal
  :show="showModal"
  @update:show="showModal = false"
/>

‌

link prop is used for showing link in the footer

<share-modal
  link="https://www.figma.com/community/file/999287868143091993"
/>

‌

mode prop is used for changing modal style ( normal / outline )

<share-modal
  mode="outline"
/>

‌

direction prop is used for changing modal direction ( ltr / rtl )

<share-modal
  direction="rtl"
/>

‌

title prop is used for changing modal title

<share-modal
  title="Share with"
/>

‌

footerHint prop is used for changing the footer text

<share-modal
  footerHint="Or share with link"
/>

‌

variables prop is used for changing the modal CSS variables ( like font-family and colors )

<share-modal
  :variables="{
    fontFamily: 'Inter, sans-serif',
    red: '#ee4d4d',
    white: '#fefefe',
    primary: '#ee6c4d',
    primaryLight: '#ee6c4d08',
    secondary: '#3d5a80',
    secondaryLight: '#3d5a8096',
  }"
/>

‌

Options Or Props ( share-module )

tag generated tag for share-module component ( default: span )

<share-module
  tag="a"
/>

‌

name name of the module

<share-module
  tag="a"
  name="Pinterest"
/>

‌

iconClassName you can pass this prop to use font icons

<share-module
  tag="a"
  name="Twitter"
  iconClassName="bi bi-twitter"
/>

‌

mode you can pass this prop to overwrite share-modal mode prop

<share-modal mode="outline">
  <share-module
    tag="a"
    mode="normal"
  />
</share-modal>

‌

✏ Todo

• Support for different themes

  ‌

📝 License

This project is under ISC license

vue-share-modal's Issues

Copy button

Copy button works on local but it doesn't copy the link when the app is on the server. I tried on Firefox and Chrome... The demo version in the read me works as well. What can be the issue? It is the exact same code...

How to remove the copy button so users use the link by selecting and copying instead of the button...? It can also solve the problem.