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 )

   <script>
      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', 'https://assets.producthunt.com/assets/upwigloader.js');
    </script>

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

    <template>
      <v-app>
        <appHeader/>

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

        <appFooter/>

      </v-app>
    </template>

    <script>
    export default {
      name: 'App',
      data () {
        return {
          appId: 19607,
          position: 'bottomLeft'
        }
      },
      mounted () {
        this.scriptContents()
      },
      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)
          })(
            document,
            'script',
            'https://assets.producthunt.com/assets/upwigloader.js'
          )
        }
      }
    }
    </script>

Result:
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?
https://gfycat.com/commoncommonhaddock

Console:

Hi

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: https://web.dev/samesite-cookies-explained/