Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Deep Dive to UnJS and Nuxt 3

Nozomu Ikuta
October 28, 2023

Deep Dive to UnJS and Nuxt 3

Slides for Vue Fes Japan 2023

Nozomu Ikuta

October 28, 2023

More Decks by Nozomu Ikuta

Other Decks in Technology


  1. Introduction Vue 2 Webpack Legacy Browsers Support Good DX Node

    Vue 3 Vite / Webpack Evergreen browsers only Elegant DX Node / Deno / Bun / Worker Nuxt 2 Nuxt 3
  2. What UnJS Is Goals • High-quality and single-purpose JavaScript utilities

    • Consistency and compatibility across the ecosystem with projects that work in harmony • Independent development of solutions that benefit the majority of JavaScript ecosystem https://github.com/unjs/governance
  3. What UnJS Is History ~2017 2023 2022 2019 ~ Nuxt

    1.x 2018 Nuxt 2.x Nuxt 3.x UnJS Sigma (Nitro) Tools for Nuxt 3rd-party projects https://nuxt.com/docs/community/roadmap 2016-10-26~ ~2016-10-26 Pooya’s tools 2020-07~
  4. What UnJS Is History • Nuxt and UnJS are separate

    independent ecosystems, but collaborate closely • Pooya used to lead Nuxt and handed over the role to Daniel • Pooya now focuses mainly on UnJS and Nitro projects Nuxt Authors Nuxt Lead Sébastien Chopin Alexandre Chopin Daniel Roe Pooya Parsa UnJS Lead
  5. UnJS Project Maintainers What UnJS Is Members Sébastien Chopin Harlan

    Wilton Daniel Roe Pooya Parsa Anthony Fu Johann Schopplich Christian Preston Estéban Nozomu Ikuta Alexander Lichter Jan-Henrik Damaschke Xin Du (Clark) Heb Lucie https://github.com/orgs/unjs/teams
  6. • The core of Nuxt CLI • Pluggable and composable

    API • Lazy and async commands • ⚠ Under heavy development citty Elegant CLI Builder call dynamic import defineCommand() createMain() https://github.com/orgs/unjs/citty
  7. Remote files Remote files c12 Smart Configuration Loader • Poweres

    Nuxt Layers and Nitro presets • Supports various formats • Merges multiple sources • Loads remote layers by giget Remote files .ts .cjs .mjs .conf .env .json package.json merge loadConfig() https://github.com/unjs/c12 https://github.com/unjs/giget downloadTemplate()
  8. .output/server/index.mjs hackablility Nitro Web Server That Runs Anywhere • The

    server engine of Nuxt 3 • Full-stack server-side framework • Provider-agnostic deployments 
 with 15+ built-in presets • Will have a dedicated team in upcoming months abstraction defineCo Storages Assets Assets Assets defineCo Plugins defineCo Handlers Assets Assets Caches defineCo Hooks nitro build https://github.com/unjs/nitro
  9. h3 Minimal H(TTP) Framework • Server routes of Nuxt 3

    • Super fast route matching • Provides composable utilities createApp() App eventHandler() handler handler handler req res https://github.com/unjs/h3 handler event
  10. ofetch A better fetch API • Fetcher of Nuxt •

    Parsing response • Handling errors and auto-retry • Interceptor support ofetch() Resources auto-retry intercept parse https://github.com/unjs/ofetch
  11. unhead The <Head /> Manager • Framework agnostic • Support

    SSR and CSR • Hookable <html /> <head /> <body /> useHead() modify modify modify https://github.com/unjs/unhead
  12. Nuxt Architecture CLI with runtime “hard to extend” connect ky

    / Axios vue-meta citty c12 / giget Nitro / h3 ofetch unhead Nuxt 2 Nuxt 3
  13. • UnJS is an ecosystem of single- purpose utils working

    in harmony • Nuxt and UnJS are separate independent ecosystems but collaborate closely • Nuxt is build on top of UnJS ecosystem • The more UnJS evolves, the more Nuxt does