How to importing ProductHunt widget in Vue app? (external widget script)

Hello :wave:, awesome Vue developers,

I am implementing a ProductHunt widget in Vue CLI 3 app. Not working! Folder structure: (standard Vue CLI 3 ‘Vue create example-app’)

Below is 2 methods I try to implement the code :point_down:

1. Provided code by ProductHunt:
(try to add in ‘publish/index.html’ and not working properly :point_right: same issue as in ‘Result’ section )

      window.productHuntUpcoming = {
        appId: 19607,
        position: 'bottomLeft',
      (function(doc, scr, src, a, b) {
        a = doc.createElement(scr);
        b = doc.getElementsByTagName(scr)[0];
        a.async = true;
        a.src = src;
        b.parentNode.insertBefore(a, b);
      })(document, 'script', '');

2. My app code: ( try to add as ‘mounted’ and ‘methods’ )


        <v-content class="pt-0">
          <v-fade-transition mode="out-in">



    export default {
      name: 'App',
      data () {
        return {
          appId: 19607,
          position: 'bottomLeft'
      mounted () {
      methods: {
        scriptContents () {
          window.productHuntUpcoming = {
            appId: this.appId,
            position: this.position || 'bottomLeft'
          }; (function (doc, scr, src, a, b) {
            a = doc.createElement(scr)
            b = doc.getElementsByTagName(scr)[0]
            a.async = true
            a.src = src
            b.parentNode.insertBefore(a, b)

Both ways have the same issue. Can not load properly and if it loads then the email subscription button not working (get console warning). How can I fix this?



I don’t think this is really a vue problem. I tried the code myself and it complained about same-site policy instead of the same-site cookie like you have in your error log. See this page for explanation of same-site cookies: