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

Not working with Nuxt JS After build #191

Closed devzakir closed 4 years ago

devzakir commented 4 years ago

Hi,

I am using this plugin in Nuxt SSR Mode. Actually this plugin is working on local server. But It's not working on server after build.

Here is my code.

plugins: [
    {src: '~/plugins/social-sharing', mode: 'client'},
], 
import Vue from 'vue';
var SocialSharing = require('vue-social-sharing');
Vue.use(SocialSharing);
<no-ssr>
<social-sharing v-if="share" :url="url" :title="product.title" hashtags="loovum" twitter-user="loovum" inline-template>
       <div class="social-share">
                <network network="pinterest" class="share-icon pinterest">
                          <font-awesome-icon :icon="['fab', 'pinterest']"/>
                </network>
                <network network="twitter" class="share-icon twitter">
                           <font-awesome-icon :icon="['fab', 'twitter']"/>
                </network>
                 <network network="facebook" class="share-icon facebook">
                            <font-awesome-icon :icon="['fab', 'facebook']"/>
                </network>
                <network network="email" class="share-icon envelope">
                            <font-awesome-icon :icon="['fas', 'envelope']"/>
                </network>
      </div>
</social-sharing>
</no-ssr>
devzakir commented 4 years ago

It was css related issue. After hours of debugging, I was able to solve it.

.social-share {
     display: block !important;
}
.share-icon { 
     display: inline-block !important 
}