HyvorTalk / hyvor-talk-vue

Vue.js component for Hyvor Talk
2 stars 1 forks source link

SSR error window is undefined #2

Open denis-snyk opened 1 year ago

denis-snyk commented 1 year ago

Hi,

I'm trying to use this library in a Vue3 SSR project. I only render the component on the client side, however it still errors out due to this line. https://github.com/HyvorTalk/hyvor-talk-vue/blob/f76386bd0afd5c45d16c5d5bd22e03a116204adf/src/lib-components/Embed.vue#L11

document.title is used in the props definition which ends up getting run server-side even though the component has not rendered yet.

Fix for this would be to run create the title variable in computed

sefrijn commented 1 year ago

@denis-snyk Ran into this issue with Nuxt 2.x (so Vue 2), but might also work in Vue 3. Solved this myself by looking into the code of this repository, and reusing certain parts.

  1. Add <div id="hyvor-talk-view"></div> somewhere in your template where you want hyvor comments to appear.

  2. Add following two methods in vue methods: {} object, and add config options to HYVOR_TALK_CONFIG object:

    setVariables() {
    window.HYVOR_TALK_WEBSITE = <YOUR_HYVOR_ID>
    window.HYVOR_TALK_CONFIG = {
    url: false,
    id: <A_UNIQUE_IDENTIFIER>, // Must be unique per page. Can be an ID or page slug
    language: 'nl', // Or any other language. You can add aditional Hyvor parameters here
    }
    },
    addScript() {
    let hyvorScript = document.createElement('script')
    hyvorScript.setAttribute('src', '//talk.hyvor.com/web-api/embed.js')
    hyvorScript.setAttribute('async', 'true')
    document.head.appendChild(hyvorScript)
    },
  3. Call methods from mounted() {}:

    this.setVariables()
    this.addScript()