Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

413
Views
Facebook share button disappear when route changed in nuxt.js (vue.js)

In my nuxt.js ("nuxt": "^2.15.7") web app I am using Facebook share button as described in this full code example.

When application loads for the first time, then facebook share button is rendered correctly. Unfortunately, when I navigate to another route and/or navigate back, then facebook share button disappears. Why this happens and how to fix it?

I have tried to implement following solutions including offered by the @Cbroe and @kissu:

  1. Facebook share button dissapear after updatePanel
  2. How to add a 3rd party script code into Nuxt
  3. Facebook social plug-in not showing up when added dynamically

Unfortunately, above offered solutions doesn't solved my problem.

What is interesting, that Vue developer tools in Chrome browser indicates, that component <FbShareButton> is present, but it doesn't show up on the page.

There is my initial code:

I have created nuxt plugin loadFacebookSdk.js to load Facebook SDK into the app, there is the code:

Vue.prototype.$loadFacebookSDK = async (d, s, id) => {
    var js = d.getElementsByTagName(s)[0]
    var fjs = d.getElementsByTagName(s)[0]
    if (d.getElementById(id)) {
        return
    }
    js = d.createElement(s)
    js.id = id
    js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0"
    fjs.parentNode.insertBefore(js, fjs)
}

Then registered above plugin in the nuxt.config.js as following:

plugins: [
    { src: "~/plugins/loadFacebookSdk.js", mode: 'client' }
  ]

And finally created FbShareButton.vue component to load facebook SDK and render facebook share button:

<template>
    <div>
        <div id="fb-root"></div>
        <div class="fb-share-button" 
                data-href="https://developers.facebook.com/docs/plugins/" 
                data-layout="button" 
                data-size="small"
                >
        </div>
    </div>    
</template>

<script>
export default {
    async created () {
        if (process.client) {
            await this.$loadFacebookSDK(document, 'script', 'facebook-jssdk')
        }
    }
}
</script>
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

There is a solution that solved a problem.

I have created a separate component FbShareButton.vue

Put all the logic (including Facebook SDK loading) inside that component as perthis and this post.

That's why:

 <template> <div id="1"> <div id="fb-root"></div> <div class="fb-share-button" :data-href="this.articleUrl" data-layout="button" data-size="small" > </div> </div> </template> <script> export default { props: ['articleUrl', 'articleTitle', 'articleImage', 'articleDescription'], head () { return { meta: [ { property: "og:url", content: this.articleUrl }, { property: "og:type", content: "website" }, { property: "og:title", content: this.articleTitle }, { property: "og:description", content: this.articleDescription }, { property: "og:image", content: this.articleImage }, { property:"fb:app_id", content:"YOUR_FB_APP_ID" } ], script: [ { hid: 'fb', src: 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0', defer: true, // changed after script load callback: () => { FB.XFBML.parse() } } ] } } } </script>
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!