Ship less javascript to your client with Nuxt Island

on YouTube ↗24m

" summary

Nuxt Island claims to avoid shipping JavaScript by rendering isolated components server‑side that return a JSON payload which the page inserts as a static vnode so no chunk is imported for noninteractive parts. It requires enabling experimental.componentIslands = true, supports slots and scoped slots, offers remote islands (fetches JSON from other servers) and client components for nested interactivity, preserves TypeScript props with server components, and the demo rendering from a personal site succeeds.

AI-written summary · about

" chapters (11)

1. 0:00Introduction
2. 1:44Nuxt Islands purpose
3. 6:43Server-only components benefits
4. 9:57Enable Nuxt Island components
5. 12:31Server components abstraction
6. 14:23How Nuxt Island works
7. 15:29Slots in Nuxt Island
8. 16:56Remote Islands rendering
9. 19:24Client components in server
10. 21:45Island-only pages features
11. 23:23Nuxt Island best practices

" related talks

• 07mDIY Islands Architecture with ViteBen Holmes · ViteConf 2022
• 26mNuxt Server Components Crash CourseMichael Thiessen · Nuxt Nation 2024
• 27mUnpacking BundlingDaniel Roe · Vue.js Nation 2025
• 21mNuxt PerformancesDebbie O'Brien · Vuejs Amsterdam 2021
• 26mOptimising Developer Experience with Nuxt 3Daniel Roe · Vue.js London Live 2021
• 22mIslands Architecture, Astro, and YouNate Moore · ViteConf 2022
• 38mLarge Scale Nuxt ArchitectureFotis Adamakis · vueday 2022
• 44mRethinking Isomorphic JavaScript with SolidStartRyan K Carniato · TheJam.dev 2023