Nuxt Architecture Updates

Nuxt Architecture Updates

Pooya Parsa

Head of Nuxt.js framework

 

@_pi0_

What's new?

Nuxt 3

💅 Codebase Cleanups

  • Major Rewrites (vue-app, builder, renderer and CLI)
  • Compose logic with functions instead of classes
  • Dropped deprecated features and vue2 workarounds
  • Simplified structure

Nuxt 3

  • Typed Internals (core and vue-app)
  • No need for @nuxt/types and nuxt-ts
  • Support typescript out of the box for vue components
  • Runtime and nuxt.config support (jiti)

Nuxt 3

First-class Typescript Support

Builder v3

  • ESBuild preset (3x faster than babel)
  • Webpack config presets
  • Webpack 5 (filesystem cache and more!)

Nuxt 3

Multi App

  • Extendable Project (theme)
  • Split structure by logic

Nuxt 3

├── shop
|  ├── components
|  |  └── nav.vue
|  ├── layouts
|  |  └── admin.vue
|  ├── middleware
|  |  └── admin.js
|  ├── pages
|  |  └── shop
|  |     └── index.vue
|  └── store
|     └── admin.js
├── nuxt.config.js
├── package.json
├── pages
|  └── index.vue
└── store
   └── public.js

Renderer v3

Independent server-side-rendering

  • First-class serverless support
  • Less dependencies for fast cold-start
  • No server-middleware (compression, serve-static, ...)

Vue-bundle-renderer ported for vue3

  • Source-map
  • Module Isolation (dev)
  • Same format used serverless bundle

Nuxt 3

  • Dropped IE11 support ( ⚰️ August 17th, 2021)
  • Default target is modern (new legacy option)
  • Upgrade modern baseline from module support to latest versions

Nuxt 3

🌿 Evergreen Browsers by Default

@nuxt/module-utils

Current module spec

  • Modules exposing a function and optional meta
  • Module container utils bound to module function
module.exports = function myModule(options) {
  const { nuxt } = this
  const moduleOptions = { ...nuxt.options.myModule, ...options }
  
  this.addPlugin({
    src: path.resolve(__dirname, 'plugin.js'),
    filename: 'mymodule.js'
  })
}

myModule.meta = require('../package.json')

@nuxt/module-utils

Module vs Core versioning

2.0.0

2.1.0

new util (v2)

Is user using nuxt@^2.1.0?

2.1.1

util fix (v2)

Are we using fixed version?

3.0.0

major change

Is util nuxt 2/3 compatible?

3.0.1

util fix (v3)

3.1.0

new util (v3)

Is util backported?

@nuxt/module-utils

Module Spec Limitations

  • Versioning against core
  • Applying default options
  • Runtime-only module support
  • Modules ordering

@nuxt/module-utils

@nuxt/module-utils

  • Independent versioning from core for utils
  • Backward and Forward Compatibility
  • Define module using hooks and meta instead of fn
// Module Meta
{
    name: "myModule",
    nuxt: "^2.14.0||^3.0.0",
    configKey: "myModule"
    options: {
      "token": { 
        "type":  string,
        "required": true
      }
    }
}

What about Nuxt 2?

Maintenance

  • Active support until ecosystem is ready for v3
  • Accepting all bug-fixes and faster releases
  • Accepting only important features (feature freeze)
  • Nuxt 3 migration guide and tools will be provided

What about Nuxt 2?

Update minimum Node.js to 10

  • Node.js 8 is EOL
  • A growing number of dependencies now require minimum of Node.js 10
    • postcss 8
    • {file, url, sass, css, postcss, thread, terser, memory-fs}-loader

What about Nuxt 2?

Nuxt 3 Backports

  • Composition API (@nuxtjs/composition-api)
  • Module utils
  • Nuxt Functions
  • Serverless Pre-Rendering (SPR)
  • Stale while revalidate (SWR)

What about Nuxt 2?

Thanks!

@_pi0_

Nuxt 3 Architecture Updates

By pooya parsa

Made with Slides.com

Nuxt 3 Architecture Updates

  • 11,675