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
Nuxt 3 Architecture Updates
- 11,927