Nozomu Ikuta 28th Oct. 2023 Deep Dive to UnJS and Nuxt 3

@NozomuIkuta

No content

• Software Engineer • Vue.js-JP Core Staff • Nuxt Contributor • UnJS Member

Introduction

Understand what UnJS is Understand how UnJS is used in Nuxt Introduction Goals

2018/01/08 ~ 2019/09/21 Nuxt 1

2018/09/21 ~ Nuxt 2

2022/11/16 ~ Nuxt 3

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

Topic “What makes Nuxt 3 possible?”

Unified JavaScript Tools

What UnJS Is

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

Packages 50+

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~

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

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

UnJS Usage In Nuxt

• CLI • Configuration • Server Engine • Data Fetching • SEO

• 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

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()

.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

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

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

unhead The

Nuxt Architecture CLI with runtime “hard to extend” connect ky / Axios vue-meta citty c12 / giget Nitro / h3 ofetch unhead Nuxt 2 Nuxt 3

Summary

• 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

Favorite phrase “[Contribution is] more than welcome”

Thank you