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,689