Third-Party Widget is not displayed in Nuxt 3 component

Hej guys,

I am working on a Nuxt 3 application that should hold a frontend for my already existing backend. As a backend I use the open source software pretix to host my events. pretix offers some widgets that allow to show the checkout page embbeded into your own page which is exactly what I want (see docs).

My problem is that the widget is not shown on in my nuxt3 app. I can see that it is rendered in the DOM using the inspector but I cannot see the widget on the screen.

Both my backend and my frontend are hosted on localhost. When testing the widget code with a plain index.html file it is shown.

I have registered the external js and css files in my nuxt.config.ts:

app: {
    head: {
      link: [
        {rel: 'stylesheet', href: 'https://pretix.eu/demo/democon/widget/v1.css'},
      ],
      script: [
        {src: 'https://pretix.eu/widget/v1.en.js', async: true},
      ],
    }
  },

I have also registered my custom Component in the config:

vue: {  
    compilerOptions: {
      isCustomElement: (tag) => {
        return tag.startsWith('pretix-')
      },
    },
  },

And in my component I have the widget code as following:

<pretix-widget event="http://localhost:8000/td/testevent/" skip-ssl-check></pretix-widget>
<noscript>
     <div class="pretix-widget">
          <div class="pretix-widget-info-message">
              JavaScript is disabled in your browser. To access our ticket shop without JavaScript, please
              <a target="_blank" rel="noopener" href="http://localhost:8000/td/testevent/">click here</a>.
          </div>
     </div>
</noscript>

I have tested this with ssr which gives my a Hydration warning therefore I have disabled SSR, first using a <client-only> tag and then by diabling ssr globally with ssr: false, in the nuxt.config.ts.

I am using Nuxt 3 and I have tested a lot of differnt stuff but although my custom element is listed in the DOM and the script and the css as well I cannot see my widget.

If someone has an idea I am happy about every hint!

As described above I have tried with SSR enabled and also disabled. I have also tried to open just the plain widget in a html file on my machine which works fine. It is just not rendered in the Nuxt 3 component.

I was able to solve this by binding the external script to the DOM using Javascript.

The error seems to be with the script tag that couldn't be loaded by the widget for some reason.

I followed a strategy similar to terrymorse. See my code here:

<script setup>
    const config = useRuntimeConfig()
    let pretixScript = document.createElement('script')
    pretixScript.setAttribute('src', config.public.pretixBaseUrl + '/widget/v1.de.js')
    document.head.appendChild(pretixScript)
</script>

I also changed the <pretix-widget> tag to a <div class="pretix-widget-combat"> tag which is a pretix specific solution if problems with the custom tag occur.