Nuxt3组件中第三方Pretix Widget无法显示问题求助

可能的原因及对应解决方案 #

1. 脚本加载时机不匹配 #

你当前使用async: true加载Pretix的脚本，可能导致组件渲染完成后脚本才加载完毕，错过了Widget的自动初始化时机。

解决方法：

• 去掉async属性，确保脚本在组件渲染前加载完成：

// nuxt.config.ts
app: {
  head: {
    link: [
      {rel: 'stylesheet', href: 'Pretix Widget对应的CSS文件URL'},
    ],
    script: [
      {src: 'Pretix Widget对应的JS文件URL'}, // 移除async
    ],
  }
},

• 或者在客户端组件中手动加载脚本并触发初始化：

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  // 检查脚本是否已加载
  const scriptSrc = 'Pretix Widget对应的JS文件URL'
  if (!document.querySelector(`script[src="${scriptSrc}"]`)) {
    const script = document.createElement('script')
    script.src = scriptSrc
    script.onload = () => {
      // 脚本加载完成后手动触发Pretix初始化
      if (window.pretixWidget) {
        window.pretixWidget.reloadAll()
      }
    }
    document.head.appendChild(script)
  } else {
    // 脚本已存在，直接触发初始化
    if (window.pretixWidget) {
      window.pretixWidget.reloadAll()
    }
  }
})
</script>

2. 手动触发Widget初始化 #

即使脚本加载完成，Nuxt的客户端渲染流程可能不会自动触发Pretix Widget的初始化逻辑，需要手动调用。

解决方法：
在组件的onMounted钩子中执行初始化：

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  // 等待DOM稳定后触发初始化
  setTimeout(() => {
    if (window.pretixWidget) {
      window.pretixWidget.reloadAll()
    }
  }, 100)
})
</script>

3. 确认自定义元素配置正确 #

确保你的自定义元素配置覆盖了所有Pretix相关标签：

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

4. 检查样式加载与隔离 #

Nuxt的样式隔离可能导致Pretix的CSS无法生效，尝试：

• 确保CSS链接在app.head中正确加载，可在浏览器开发者工具的Elements标签中检查link标签是否存在且可访问。
• 如果使用了scoped样式，尝试将Widget放在无scoped样式的组件中，避免样式隔离影响Widget的默认样式。

5. 验证本地环境的路径配置 #

将Widget的event属性改为相对路径，并通过Nuxt代理转发请求，避免潜在的跨域或路径解析问题：

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/proxy'],
  proxy: {
    '/td/': {
      target: 'http://localhost:8000',
      changeOrigin: true
    }
  }
})

然后修改Widget代码：

<pretix-widget event="/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="/td/testevent/">click here</a>.
          </div>
     </div>
</noscript>

内容的提问来源于stack exchange，提问作者Calle