How to implement vue-social-sharing correctly in vuejs 3

Question

I'm trying to use vue-social-sharing, but I get this error "Component is missing template or render function". this is my main.js file

import {library} from '@fortawesome/fontawesome-svg-core';
import {fas} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import VueSocialShare from 'vue-social-sharing';
window.addEventListener('load', () => {
  const VueApp = require('./App.vue').default;
  const app = createApp({
    components: { VueApp},
    template: document.querySelector('#app')!.innerHTML,
  });


  library.add(fas);

  app
  .component('font-awesome-icon', FontAwesomeIcon)
  .component('VueSocialShare', VueSocialShare)
  .mount('#app');
});

And on a vue file I'm using it as a normal component <VueSocialSharing />

What am I doing wrong and turn it into a functional component?

Answer 1

You can't register it as a component. All you need is:

import VueSocialSharing from 'vue-social-sharing';
const app = createApp(...);
app.use(VueSocialSharing);

And in your component, use like this:

<ShareNetwork
  network="facebook"
  url="https://news.vuejs.org/issues/180"
  title="Say hi to Vite! A brand new, extremely fast development setup for Vue."
  description="This week, I’d like to introduce you to 'Vite', which means 'Fast'. It’s a brand new development setup created by Evan You."
  quote="The hot reload is so fast it\'s near instant. - Evan You"
  hashtags="vuejs,vite"
>
  Share on Facebook
</ShareNetwork>

Answer 2

For Nuxt@3 users:

create a plugin. ( ~/plugins/socialShare.ts )

import VueSocialSharing from "vue-social-sharing";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueSocialSharing);
});

then you could use <ShareNetwork> everywhere in your templates to generate your share buttons.