Using with nuxt.js
tkachenko1 opened this issue · comments
Hi!
Thanks for your library, it's pretty cool!
Please, tell me, if it can be used together with Nuxt.js and сan it work in SSR mode?
And how i can to connect it correctly?
Thanks.
Thanks for opening your first issue here! 🎉 Be sure to follow the issue template!
In the closed issues I found a variant that I used:
-
Create a plugin
vue-goodshare.js
in folderplugins
with config:import Vue from 'vue'; import VueGoodshareVkontakte from "vue-goodshare/src/providers/Vkontakte.vue"; import VueGoodshareOdnoklassniki from "vue-goodshare/src/providers/Odnoklassniki.vue"; import VueGoodshareFacebook from "vue-goodshare/src/providers/Facebook.vue"; import VueGoodshareTwitter from "vue-goodshare/src/providers/Twitter.vue"; import VueGoodshareTelegram from "vue-goodshare/src/providers/Telegram.vue"; import VueGoodshareWhatsApp from "vue-goodshare/src/providers/WhatsApp.vue"; import VueGoodshareViber from "vue-goodshare/src/providers/Viber.vue"; import VueGoodshareEmail from "vue-goodshare/src/providers/Email.vue"; Vue.component ("vue-goodshare-vkontakte", VueGoodshareVkontakte); Vue.component ("vue-goodshare-odnoklassniki", VueGoodshareOdnoklassniki); Vue.component ("vue-goodshare-facebook", VueGoodshareFacebook); Vue.component ("vue-goodshare-twitter", VueGoodshareTwitter); Vue.component ("vue-goodshare-telegram", VueGoodshareTelegram); Vue.component ("vue-goodshare-whatsapp", VueGoodshareWhatsApp); Vue.component ("vue-goodshare-viber", VueGoodshareViber); Vue.component ("vue-goodshare-email", VueGoodshareEmail);
-
Include plugin in file
nuxt.config.js
:export default { plugins: [ { src: '~/plugins/vue-goodshare' } ] }
-
Include component on the page
<vue-goodshare-facebook></vue-goodshare-facebook>
Ok, it's works, but i have a many errors in next step.
Problems:
-
When i include the component without link. (I though the component would take it automatically).
<vue-goodshare-facebook title_social="Facebook" has_counter has_icon></vue-goodshare- facebook>
I have an error
Document is not defined.
in file href.js.Ok, i write
<vue-goodshare-facebook :page_url="$nuxt.$route.path"></vue-goodshare-facebook>
but the path is relative and Facebook do not share page with error
href should represent a valid URL
-
When i include the Vkontakte component i have an error
Document is not defined.
in file title.js.
What am I doing wrong? :)
@tkachenko1 hi! 🤝 thx for issue.
Unfortunately, I don't use Nuxt.js
(only vanilla Vue.js at all time) and don't know how to correctly write config for its plugin. I can give you only idea for solving this.
- Error
href should represent a valid URL
.
Not sure, but URL like :page_url="$nuxt.$route.path"
created from root path, like /some-link
and not from domain. Try to edit :page_url
manually with full domain.
- Error
Document is not defined in file title.js
.
I think, it's happen, because you don't specify :page_title="..."
on <vue-goodshare-vkontakte>
component. It's strange, but try this, please 😉
-
Ok, i'll try it :)
-
That is my VK code:
<vue-goodshare-vkontakte :page_url="$nuxt.$route.path" :page_title="Title" title_social="Вконтакте" has_counter has_icon ></vue-goodshare-vkontakte>
and i have the same problem about title :)
Can we keep this task open for now? Suddenly, someone also needs to install the plugin in Nuxt :)
The document issue is because you are probably using SSR and the server has no window
(thats only client side). You can fix it by making the plugin only load on the client side.
plugins: [
{ src: "@/plugins/socialShare", mode: "client" }
]
The only issue i am having myself right now with nuxt is that the css does not get compiled..
Resulting in:
You need to install the sass modules:
npm install --save node-sass sass-loader
I also wrapped my blocks in <client-only>
which got rid of some DOM out of sync errors
👋 Hello. Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?
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.
⚡️ This issue has been automatically closed because it has not had recent activity.