Deep Dive to UnJS and Nuxt 3

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

@NozomuIkuta

• Software Engineer • Vue.js-JP Core Staﬀ • 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 beneﬁt 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 • Conﬁguration • 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 deﬁneCommand() 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 <Head /> Manager • Framework agnostic • Support
SSR and CSR • Hookable <html /> <head /> <body /> useHead() modify modify modify https://github.com/unjs/unhead

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

Deep Dive to UnJS and Nuxt 3

Deep Dive to UnJS and Nuxt 3

Nozomu Ikuta

More Decks by Nozomu Ikuta

Other Decks in Technology

Featured

Transcript

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

@NozomuIkuta

• Software Engineer • Vue.js-JP Core Staﬀ • Nuxt Contributor

Introduction

Understand what UnJS is Understand how UnJS is used in

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

Topic “What makes Nuxt 3 possible?”

Unified JavaScript Tools

What UnJS Is

What UnJS Is Goals • High-quality and single-purpose JavaScript utilities

Packages 50+

What UnJS Is History ~2017 2023 2022 2019 ~ Nuxt

What UnJS Is History • Nuxt and UnJS are separate

UnJS Project Maintainers What UnJS Is Members Sébastien Chopin Harlan

UnJS Usage In Nuxt

• CLI • Conﬁguration • Server Engine • Data Fetching

• The core of Nuxt CLI • Pluggable and composable

Remote files Remote files c12 Smart Configuration Loader • Poweres

.output/server/index.mjs hackablility Nitro Web Server That Runs Anywhere • The

h3 Minimal H(TTP) Framework • Server routes of Nuxt 3

ofetch A better fetch API • Fetcher of Nuxt •

unhead The <Head /> Manager • Framework agnostic • Support

Nuxt Architecture CLI with runtime “hard to extend” connect ky

Summary

• UnJS is an ecosystem of single- purpose utils working

Favorite phrase “[Contribution is] more than welcome”

Thank you