Nuxt3 nuxt.config.ts module error about vue-social-sharing

[HochinChan]

+1

[kyng-cytro]

I ran into this issue—I fixed mine by creating a custom plugin.

To do this, create a new file in the /plugins directory. "plugins/vue-social-sharing.client.ts" it's content should loop like this:

import VueSocialSharing from "vue-social-sharing";

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

Hope this helps.

[oawebdev]

Nuxt 3.0.0-rc.11
#315

[kyng-cytro]

Awesome that should fix for everyone now.

[phailee]

I am getting this error after using above solution

[sanyaches]

Nuxt 3.0.0, it's still an issue

[kyng-cytro]

Here is a link to the project where I got it working.
Link hope this helps.

[sanyaches]

@kyng-cytro Thanks for sharing that, I noticed that it's working because of the version of vue-social-sharing package

So, the working recipe:

1. Install the version below, run yarn add vue-social-sharing@next or npm install --save vue-social-sharing@next:
   "vue-social-sharing": "^4.0.0-alpha4" - Works, for Vue 3
   "vue-social-sharing": "3.0.9" - Does not, for Vue 2

2. Use it like a plugin in Nuxt, not a module

I ran into this issue—I fixed mine by creating a custom plugin.

To do this, create a new file in the /plugins directory. "plugins/vue-social-sharing.client.ts" it's content should loop like this:

import VueSocialSharing from "vue-social-sharing";

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

Hope this helps.

UPD: Of course, Nuxt 3.0.0 is meant

[sanyaches]

@bonomite Could you recheck that, please?

[bonomite]

I started a new Nuxt3 project, installing the @next version, and after making a plug-in like instructed above, I did get a error that said "it could not resolve <ShareNetwork>", I just wrapped it in a <ClientOnly> tag, and it worked.

is the button supposed to be styled?

stackblitz: https://stackblitz.com/edit/nuxt-starter-nslbhm?file=package.json,app.vue&file=nuxt.config.ts,plugins%2Fvue-social-sharing.client.ts

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.