Using with nuxt.js

[tkachenko1]

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.

[welcome[bot]]

Thanks for opening your first issue here! 🎉 Be sure to follow the issue template!

[tkachenko1]

In the closed issues I found a variant that I used:

1. Create a plugin vue-goodshare.js in folder plugins 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);

2. Include plugin in file nuxt.config.js:

   export default {
    plugins: [
      {
        src: '~/plugins/vue-goodshare'
      }
    ]
   }

3. Include component on the page

   <vue-goodshare-facebook></vue-goodshare-facebook>

Ok, it's works, but i have a many errors in next step.

[tkachenko1]

Problems:

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

2. When i include the Vkontakte component i have an error Document is not defined. in file title.js.

What am I doing wrong? :)

[koddr]

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

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

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

[tkachenko1]

@koddr

1. Ok, i'll try it :)

2. 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 :)

[thebspin]

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:

[tsunaminoai]

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

[clouedoc]

I installed node-sass and sass-loader

Imported in Single File Component

With no nuxt.config.js modifications.

Importing in code that way:

Using <client-only> works

[stale[bot]]

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

[stale[bot]]

⚡️ This issue has been automatically closed because it has not had recent activity.