Open denis-snyk opened 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.
Add <div id="hyvor-talk-view"></div>
somewhere in your template where you want hyvor comments to appear.
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)
},
Call methods from mounted() {}
:
this.setVariables()
this.addScript()
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