Deep Dive into NuxtJS internals

Sébastien Chopin

@Atinux

Co-author of Nuxt.js

nuxt dependencies

@nuxt/core

@nuxt/cli

@nuxt/builder

@nuxt/generator

@nuxt/webpack

@nuxt/loading-screen

nuxt-start dependencies

@nuxt/core

@nuxt/cli

Nuxt generates your Vue app

It all starts with .nuxt/

pages/**/*.vue -> .nuxt/router.js

store/**/*.js -> .nuxt/store.js

middleware/*.js -> .nuxt/middleware.js

layouts/*.js -> .nuxt/App.js

assets/**/*.css -> .nuxt/App.js

plugins/*.js -> .nuxt/index.js

They are lodash templates

This was @nuxt/vue-app internal

Nuxt bundles your Vue app

Nuxt uses Webpack 4

and soon Webpack 5

Entries

.nuxt/client.js

.nuxt/client.js + changes babel presets

Always:

Universal mode (default):

.nuxt/server.js

Modern (nuxt build --modern):

BABEL 7

@nuxt/babel-preset-app

- Polyfills

- @babel/preset-env

- @vue/babel-preset-jsx

- @babel/plugin-syntax-dynamic-import

- @babel/plugin-proposal-decorators

- @babel/plugin-proposal-class-properties

- @babel/plugin-transform-runtime

WEBPACK LOADERS

vue-loader: .vue

pug-plain-loader: .pug & .vue

ts-loader: .ts, .tsx & .vue

babel-loader: .js, .jsx & .vue

style-loader: .css, .postcss, .less, .sass, etc

file-loader: .webm, .mp4 & .ogv

url-loader: .png, .jpeg, .gif, .svg & .webp

url-loader: .woff2?, .eot, .ttf & .otf

WEBPACK PLUGINS

extract-css-chunk

webpackbar

hard-source

vue-loader-plugin

bundle-analyser: nuxt build -a

env-plugin

html-plugin

modern-mode: nuxt build -m

nuxt build bundles to .nuxt/dist/

These were @nuxt/webpack & @nuxt/babel-preset-app internals

Nuxt can build 💪

const { Builder } = require('@nuxt/builder')

1/ Parses directories: pages/, layouts/, middleware/, etc

2/ Generates templates in .nuxt/: based on @nuxt/vue-app

3/ Create BundleBuilder: based on @nuxt/webpack

new Builer(nuxt).build()

4/ Watch file changes: only in development

Nuxt renders your Vue app

const { VueRenderer } = require('@nuxt/vue-renderer')

Two modes

  • renderers/ssr.js

  • renderers/spa.js

new VueRenderer(context).ready()

1/ Loads Webpack bundle

2/ Loads App templates
       .nuxt/views/app.template.html
       .nuxt/views/app.error.html

3/ Create renderer depending of chosen mode
                    nuxt --universal vs nuxt --spa
 

Render to HTML

Nuxt serves your Vue app

const { Server } = require('@nuxt/server')

Based on Connect.js

core of Express.js

Server Middleware

compression: gzip & deflate

timing: Server-Timing header, only when server.timing = true

serve-static: static/

serve-placeholder: smarter 404 placeholders

nuxt-renderer: nuxt.renderer.render(req, res)

error: render the error template on middleware error

custom-middleware: user's serverMiddleware

Nuxt is configurable

Nuxt exports to static websites

const { Generator } = require('@nuxt/generator')

1/ Waits for VueRenderer.ready()

2/ Runs Builder.build()

3/ Generates each route: nuxt.renderer.renderRoute(url)

new Generator(nuxt, builder).generate()

4/ Saves each route to ./dist/${route}/index.html

Nuxt hooks 🔗

Nuxt lifecycle listeners/modifiers

Nuxt

Builder/Webpack

Server/VueRenderer

Generator

nuxt.config.js

~/modules/extra/index.js

Nuxt has a heart 💚

const { Nuxt } = require('@nuxt/core')

1/ Initiate nuxt Server

2/ Add user hooks

3/ Load ModuleContainer

new Nuxt(config).ready()

1/ Load devModules & modules

2/ Add user hooks

3/ Load user modules

new ModuleContainer(nuxt).ready()

Let's see some source code 🤓

Nuxt 3

nuxt generate = full static app

asyncData: cached (open full offline when combined with @nuxtjs/pwa)

Smart crawler: no need to specify generate.routes anymore

Already tested on nuxtjs.org ✅

pages/_id.vue -> pages/[id].vue

Multiple params in a route file:
pages/product-[sku]-[variant].vue

Retro-compatibility with v2 ✅

npm install -g nuxt-cli

nuxt add http

nuxt test

nuxt create <my-project>

Learn more on nuxt/rfcs

ONE MORE THING

Grouping SSR Logs

Build indicator for HMR

And much more!

THANK YOU

Twitter: @nuxt_js   —   GitHub: nuxt/nuxt.js   —   Discord: discord.nuxtjs.org

Deep Dive into Nuxt 2 internals

By Sébastien Chopin

Deep Dive into Nuxt 2 internals

Ever wondered how Nuxt.js works? Sebastien, creator of Nuxt.js will explain how the framework works internally. Giving you the knowledge to enjoy the full power of Nuxt and its module ecosystem.

  • 1,002
Loading comments...

More from Sébastien Chopin