Подключаю usocial.pro (поделиться в соц сетях) в проекте nuxjs

Question

Пытаюсь подключить usocial.pro (поделиться в соц сетях) nuxt.js+vue.js, элемент появляется только тогда, когда первый раз заходишь на страницу. Если переходить на это страницу по внутреннему роуту, то элемент не появляется.
Код следующий:
на динамическу страницу добавил строку(pid заменен):

<client-only><div class="uSocial-Share" data-pid="XXXXXXXXXXXXXXXXXXXXXXXXXXXX" data-type="share" data-options="round-rect,style1,default,right,bg,slide-up,size32,eachCounter0,counter0,upArrow-right" data-social="twi,vk,lj,telegram,fb,ok,mail,lin,pinterest" data-mobile="vi,wa"></div></client-only>

в скрипт добавил

script: [
{ src: 'https://usocial.pro/usocial/usocial.js?v=6.1.4', async: true}
]

Не пойму в какую сторону рыть.

Answer 1

У uSocial не проработано взаимодействие с SPA/SSR фреймворками.
Можно попробовать вручную вызывать метод init() у их класса.

Быстро проверил на чистом nuxt.js приложении в режиме universal, работает.

Код компонента:

// @/components/usocial-bar.vue
<template>
  <div
    class="uSocial-Share"
    data-lang="en"
    data-pid="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
    data-type="share"
    data-options="round-rect,style1,default,absolute,horizontal,size48,eachCounter0,counter0"
    data-social="fb,twi,telegram,spoiler"
    data-mobile="vi,wa"
  />
</template>

<script>
export default {
  computed: {
    inited () {
      // проверяем, есть ли уже внутри кнопки
      return !!this.$el.children.length
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      // проверяем ssr
      if (process.server) {
        return
      }
      try {
        if (!this.inited) {
          // ручная инициализация панели
          window.uSocialShare.init()
        }
      } catch (e) {
        // этот код может сработать до инициализации главной библиотеки
        // поэтому метод замотан в конструкцию try/catch
        // если этот код не сработает, то сработает нативный вызов из главной библиотеки
      }
    }
  }
}
</script>

Код страницы:

// @/pages/index.vue
<template>
    <div class="your-page">
        <usocial-bar></usocial-bar>
    </div>
</template>

<script>
import usocialBar from '@/components/usocial-bar'

export default {
  components: {
    usocialBar
  }
}
</script>

А подключение библиотеки советую переместить в nuxt.config.js для того, чтобы каждый раз при mounted компонента не загружать ее заново.

// nuxt.config.js
export default {
  head: {
    script: [
      { src: 'https://usocial.pro/usocial/usocial.js?v=6.1.4', async: true }
    ]
  }
}

БЛОГ НА HUSL

Подключаю usocial.pro (поделиться в соц сетях) в проекте nuxjs

Ответы (1 шт):