framework icon indicating copy to clipboard operation
framework copied to clipboard

useHead() Scripts get undefined while changing pages

Open examgoal opened this issue 2 years ago • 0 comments

Environment

  • Operating System: Darwin
  • Node Version: v18.9.0
  • Nuxt Version: 3.0.0-rc.11
  • Nitro Version: 0.5.4
  • Package Manager: [email protected]
  • Builder: vite
  • User Config: -
  • Runtime Modules: -
  • Build Modules: -

Reproduction

useHead({ title: content.value.title, script: [ { src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8367669190234763', crossorigin: "anonymous", async: true }, { src: '/mathjax.js', }, { src: 'https://polyfill.io/v3/polyfill.min.js?features=es6', }, { src: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-svg.js' } ], link: [ { href: 'https://static.cdn.examgoal.net/css/themes/v1/theory.min.css', rel: 'stylesheet' }, { href: 'https://fonts.googleapis.com/icon?family=Material+Icons', rel: 'stylesheet' } ] })

Describe the bug

In a dynamic page, if we change the route through nuxt link, useHead scripts get undefined randomly.

Like in the above example MathJax gets undefined randomly but if we use global scripts through defineNuxtConfig() then the problem won't occur for global scripts, it impacts overall website performance as not every page requires the same scripts.

I think there should be an option to load the scripts once while the page content changes

Additional context

No response

Logs

No response

examgoal avatar Sep 22 '22 14:09 examgoal