Comments (8)
same problem
from vue-social-sharing.
I got this problem as well. But I dont think it is an issue with vue-social-sharing. The nuxt support is for Nuxt 2 if I understand it correctly. In Nuxt 3 it is possible to simply register the Vue plugin directly:
Create a new file in the plugins folder.
Register the vue-social-sharing plugin (not the vue-social-sharing/nuxt):
See: https://nuxt.com/docs/guide/directory-structure/plugins#vue-plugins
This will work:
plugins/vue-social-sharing.client.js:
import VueSocialSharing from 'vue-social-sharing';
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(VueSocialSharing);
});
If using SSR make sure to wrap it in a ClientOnly tag to avoid it getting rendered twice.
<ClientOnly>
<ShareNetwork
network="twitter"
url="https://news.vuejs.org/issues/180"
>
<span>Share on Twitter</span>
</ShareNetwork>
</ClientOnly>
from vue-social-sharing.
@muzicaed get new error on this way. Cannot set properties of undefined (setting '$SocialSharing')
from vue-social-sharing.
@muzicaed get new error on this way. Cannot set properties of undefined (setting '$SocialSharing')
follow these steps:
Install the specified version by running either of the following commands:
Using Yarn: yarn add vue-social-sharing@next
Using npm: npm install --save vue-social-sharing@next
Version to install:
For Vue 3, Nuxt3: "vue-social-sharing": "^4.0.0-alpha4"
Utilize it as a plugin in Nuxt, rather than a module.
If you encounter any issues, you can resolve them by creating a custom plugin. Follow these steps:
Create a new file in the "/plugins" directory named "vue-social-sharing.client.ts".
Insert the following content into the file:
import VueSocialSharing from "vue-social-sharing";
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(VueSocialSharing);
});
from vue-social-sharing.
Cannot read properties of undefined (reading 'Index')
I had this problem, too.
If i don't add "vue-social-sharing/nuxt" line to nuxt.config.ts, it works.
from vue-social-sharing.
If you see it:
A plugin must either be a function or an object with an "install" function
Change vue-social-sharing.ts to this:
import VueSocialSharing from 'vue-social-sharing/src/vue-social-sharing'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(VueSocialSharing)
})
from vue-social-sharing.
Cannot read properties of undefined (reading 'Index')
I had this problem, too. If i don't add "vue-social-sharing/nuxt" line to nuxt.config.ts, it works.
in nuxt.config.js add vuesocialsharing in build transpile like below
build: {
transpile: ["vuesocialsharing", ...],
...
}
and create plugin vuesocialsharing.client.js
just copy paste below code
import { defineNuxtPlugin } from "#app";
import VueSocialSharing from 'vue-social-sharing';
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(VueSocialSharing);
});
from vue-social-sharing.
Related Issues (20)
- Messenger isn't working HOT 4
- Used in nuxt, the property “popup“” setting width and height are invalid
- Share to instagram HOT 1
- vue3 error ‘’Network fakeblock does not exist‘’ HOT 3
- How to add socials such as Tiktok, Twitch.tv using this library? HOT 1
- Pinterest Share Button Can't Work After Closing the Tab Open (Mobile Safari) HOT 1
- Nuxt3 nuxt.config.ts module error HOT 11
- Issue Uncaught DOMException: Permission denied to access property "__v_isRef" on cross-origin object HOT 7
- LinkedIn share on mobile opens the App but doesnt share content HOT 1
- Cannot restart nuxt: Cannot read properties of undefined (reading 'Index') HOT 8
- SMS share problem : Android13 device can not use sms share. the body message get lost HOT 1
- Can you please add Medium network? HOT 1
- Types diverge from the code HOT 1
- share by line, not the "url" I defined but to the domain HOT 1
- Range Issue, When I am using min and max value dynamically it is giving different values as I take slider from min and bring it back to the min end. It was 23000 but now it is showing 20000 05 61000 HOT 1
- When click share via LINE, there are errors keep appearing until popup closed HOT 3
- This library appears to be busted when using Vue 3's script setup syntax. HOT 1
- Support for Kakao Talk HOT 1
- Change Twitter to X. HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-social-sharing.