nicolasbeauvais / vue-social-sharing

A renderless Vue.js component for sharing links to social networks, compatible with SSR
https://nicolasbeauvais.github.io/vue-social-sharing/
MIT License
1.39k stars 196 forks source link

Nuxt3 nuxt.config.ts module error #324

Closed bonomite closed 1 year ago

bonomite commented 1 year ago

stackblitz: https://stackblitz.com/edit/nuxt-starter-xjjuoe?file=nuxt.config.ts,tsconfig.json

image

HochinChan commented 1 year ago

+1

oawebdev commented 1 year ago

image Nuxt 3.0.0-rc.11 https://github.com/nicolasbeauvais/vue-social-sharing/issues/315

kyng-cytro commented 1 year ago

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.

phailee commented 1 year ago

err

I am getting this error after using above solution

sanyaches commented 1 year ago

Nuxt 3.0.0, it's still an issue

kyng-cytro commented 1 year ago

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

sanyaches commented 1 year ago

@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

kyng-cytro commented 1 year ago

Awesome that should fix for everyone now.

sanyaches commented 1 year ago

@bonomite Could you recheck that, please?

bonomite commented 1 year ago

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. image

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[bot] commented 1 year ago

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.