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?

Which version of the plugin are you using? [Only the alpha build supports Vue3](https://github.com/nicolasbeauvais/vue-social-sharing#vue-3-support): I suspect that you’re not using that version, hence the error message. — Terry, May 08 '22 at 11:39
Hello Terry, I've installed the plugin via this command ```npm install --save vue-social-sharing@next``` — sona Rapanj, May 08 '22 at 13:53
You should register is like a plugin, not a component. It should be `Vue.use(VueSocialShare)` — Duannx, May 09 '22 at 02:54

score 3 · Answer 1 · answered Sep 28 '22 at 22:56

3

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.

answered Sep 28 '22 at 22:56

Ario

549
1
8
18

doesnt work even if you add `'vue-social-sharing/nuxt'` to nuxt config – Jim Ovejera Mar 14 '23 at 09:58
@JimOvejera, I confirm it works.I have couple of websites using this. no need to add anything to nuxt config just create the plugin and use it. – Ario Mar 15 '23 at 16:01

score 2 · Answer 2 · edited Sep 02 '22 at 22:33

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>

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

2 Answers2