An introduction to Nuxt Scripts
summary
Nuxt Scripts presents a concrete system: a useScript composable with a script registry (about 22 presets) that adds preload links, inserts script tags post-hydration, and offers triggers for element visibility or consent, a proxy that queues API calls, and script bundling/self-hosting as an opt-in to reduce third‑party risk. Benchmarks claim a ~46% faster YouTube embed when using headless facade components. The talk cites webalmanac stats (92% of sites use third parties, ~5 providers/78 requests) and notes low use of integrity checks (~23%) and CSP (<19%).
AI-written summary · about
chapters (20)
- 0:00Nuxt Scripts intro
- 1:47Why Nuxt Scripts created
- 4:15Third-party script problems
- 9:34Security risks of scripts
- 11:01Performance impact of scripts
- 13:10Scripts in Nuxt apps
- 16:23Traditional script loading issues
- 17:45Solutions with Nuxt Scripts
- 18:49How Nuxt Scripts works
- 20:36useScript composable features
- 21:42Script lifecycle control
- 22:04Script bundling for performance
- 22:47Script registry and integrations
- 23:50Programmatic and global setup
- 24:10Facade components for libraries
- 25:38Future plans for Nuxt Scripts
- 26:45Q&A: Benefits over traditional
- 27:29Q&A: When to avoid Nuxt Scripts
- 28:10Q&A: Cookie consent libraries
- 29:37Closing remarks
related talks
50mOptimizing third parties in frameworks with DX
56mThird Party Scripts
26mScripting in the 3rd Party True Tales of Horror and Hope
26mLet's talk about Security in Vue & Nuxt
26mOptimising Developer Experience with Nuxt 3
15mNuxt Enterprise Plugin Patterns
28mMore Secure Vue & Nuxt Apps - By Default
04mNuxt.js: Universal Vue.js Applications