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({
    ponents: { VueApp},
    template: document.querySelector('#app')!.innerHTML,
  });


  library.add(fas);

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

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

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

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({
    ponents: { VueApp},
    template: document.querySelector('#app')!.innerHTML,
  });


  library.add(fas);

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

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

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

• javascript
• vue.js
• vuejs3
• socialsharing-plugin

• 1 Which version of the plugin are you using? Only the alpha build supports Vue3: I suspect that you’re not using that version, hence the error message. – Terry Commented May 8, 2022 at 11:39
• Hello Terry, I've installed the plugin via this mand npm install --save vue-social-sharing@next – user18722819 Commented May 8, 2022 at 13:53
• 1 You should register is like a plugin, not a ponent. It should be Vue.use(VueSocialShare) – Duannx Commented May 9, 2022 at 2:54

2 Answers 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.

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

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

And in your ponent, use like this:

<ShareNetwork
  network="facebook"
  url="https://news.vuejs/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>