Deep Dive to UnJS and Nuxt 3

Slides for Vue Fes Japan 2023

Transcript

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

   View Slide

2. @NozomuIkuta
   

   View Slide

3. View Slide

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

   View Slide

5. Introduction
   

   View Slide

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

   View Slide

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

   View Slide

8. 2018/09/21 ~
   Nuxt 2
   

   View Slide

9. 2022/11/16 ~
   Nuxt 3
   

   View Slide

10. 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
    

    View Slide

11. Topic
    “What makes Nuxt 3 possible?”
    

    View Slide

12. Unified
    JavaScript
    Tools
    

    View Slide

13. What UnJS Is
    

    View Slide

14. 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
    

    View Slide

15. Packages
    50+
    

    View Slide

16. 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~
    

    View Slide

17. 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
    

    View Slide

18. 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
    

    View Slide

19. UnJS Usage In Nuxt
    

    View Slide

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

    View Slide

21. • 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
    

    View Slide

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

    View Slide

23. .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
    

    View Slide

24. 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
    

    View Slide

25. 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
    

    View Slide

26. unhead
    The

    View Slide

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

    View Slide

28. Summary
    

    View Slide

29. • 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
    

    View Slide

30. Favorite phrase
    “[Contribution is] more than welcome”
    

    View Slide

31. Thank you
    

    View Slide