CheatPress

Nuxt Vue web framework

Version 4.6 · source

Nuxt, Postcard, light preview Light · Postcard 102 × 152 mm · PDF Nuxt, Postcard, dark preview Dark · Postcard 102 × 152 mm · PDF Nuxt, Postcard, ink saver preview Ink saver · Postcard 102 × 152 mm · PDF
Nuxt, A5, light preview Light · A5 148 × 210 mm · PDF Nuxt, A5, dark preview Dark · A5 148 × 210 mm · PDF Nuxt, A5, ink saver preview Ink saver · A5 148 × 210 mm · PDF
Nuxt, A4, light preview Light · A4 210 × 297 mm · PDF Nuxt, A4, dark preview Dark · A4 210 × 297 mm · PDF Nuxt, A4, ink saver preview Ink saver · A4 210 × 297 mm · PDF
Nuxt, A4 landscape, light preview Light · A4 landscape 297 × 210 mm · PDF Nuxt, A4 landscape, dark preview Dark · A4 landscape 297 × 210 mm · PDF Nuxt, A4 landscape, ink saver preview Ink saver · A4 landscape 297 × 210 mm · PDF
Nuxt, A3, light preview Light · A3 297 × 420 mm · PDF Nuxt, A3, dark preview Dark · A3 297 × 420 mm · PDF Nuxt, A3, ink saver preview Ink saver · A3 297 × 420 mm · PDF
Nuxt, A3 landscape, light preview Light · A3 landscape 420 × 297 mm · PDF Nuxt, A3 landscape, dark preview Dark · A3 landscape 420 × 297 mm · PDF Nuxt, A3 landscape, ink saver preview Ink saver · A3 landscape 420 × 297 mm · PDF
Nuxt, Letter, light preview Light · Letter 8.5 × 11 in · PDF Nuxt, Letter, dark preview Dark · Letter 8.5 × 11 in · PDF Nuxt, Letter, ink saver preview Ink saver · Letter 8.5 × 11 in · PDF
Nuxt, Tabloid, light preview Light · Tabloid 11 × 17 in · PDF Nuxt, Tabloid, dark preview Dark · Tabloid 11 × 17 in · PDF Nuxt, Tabloid, ink saver preview Ink saver · Tabloid 11 × 17 in · PDF

Start here

npm create nuxt <dir>
Scaffold a project
npx nuxt dev
Start the dev server
npx nuxt add-template page <name>
Create a page
npx nuxt module add <module>
Install a module
npx nuxt typecheck
Check types
npx nuxt build
Production build
npx nuxt generate
Static site output
npx nuxt preview
Try the build locally

Concepts

  1. nuxt dev HMR server
  2. .output Nitro server bundle
  3. Run SSR on Node or edge

Project

npm create nuxt <dir>
Scaffold a new project
npx nuxt dev
Start the dev server with HMR
Port also comes from PORT or NUXT_PORT.
npx nuxt build
Production build into .output
Output is a Nitro server; run it with node .output/server/index.mjs.
npx nuxt generate
Prerender to static HTML
Same as build --prerender.
npx nuxt preview
Serve the production build locally
Run build first.
npx nuxt prepare
Generate .nuxt and types
Handy as a postinstall script or in CI before linting.
npx nuxt typecheck
Type-check the whole app
Needs vue-tsc or Golar; offers to install one.
npx nuxt info
Print versions and modules
Paste the output into bug reports; --json for scripts.
npx nuxt cleanup
Delete .nuxt, .output and caches
First thing to try when types or HMR act strange.
npx nuxt upgrade
Upgrade Nuxt and dependencies
npx nuxt upgrade --channel nightly
Switch to the nightly channel
npx nuxt upgrade --force
Reinstall lockfile and node_modules
npx nuxt <cmd> --cwd <dir>
Run a command for another project root
npx nuxt <cmd> --logLevel verbose
More build output

Dev server

npx nuxt dev -p <port>
Listen on another port
Add --strictPort to fail instead of picking a free one.
npx nuxt dev -o
Open the browser on start
npx nuxt dev -h <host>
Bind to a host or IP
npx nuxt dev --public
Listen on all interfaces
Lets phones and other machines on the LAN reach it.
npx nuxt dev --qr
Show a QR code for the URL
npx nuxt dev --https
Serve over local HTTPS
Uses a generated, locally trusted certificate.
npx nuxt dev --tunnel
Share via a Cloudflare tunnel
npx nuxt dev --dotenv <file>
Load an extra .env file
Repeatable; later files win.
npx nuxt dev --no-tui
Plain log output
npx nuxt dev --inspect
Attach the Node inspector
npx nuxt dev --takeover
Replace a dev server already running
npx nuxt dev --clear
Clear the console on restart
npx nuxt dev --profile
Write a V8 CPU profile on exit

Build & deploy

npx nuxt build --prerender
Build and prerender static routes
npx nuxt build --preset <name>
Choose a deploy target
E.g. node-server, vercel, netlify, cloudflare-pages; NITRO_PRESET also works.
npx nuxt build --envName <env>
Pick the env for config overrides
Matches the $env.<name> blocks in nuxt.config.
npx nuxt analyze
Inspect the bundle size
Experimental; serves a report unless --no-serve or CI is set.
npx nuxt analyze --no-serve
Analyze without serving results
npx nuxt preview -p <port>
Preview on another port
node .output/server/index.mjs
Run the built server
PORT and HOST env vars control where it listens.
npx nuxt build --extends <layer>
Build extending a layer

Scaffolding

npx nuxt add-template page <name>
New page in app/pages
npx nuxt add-template component <Name>
New component in app/components
npx nuxt add-template composable <name>
New composable in app/composables
npx nuxt add-template layout <name>
New layout in app/layouts
npx nuxt add-template middleware <name>
New route middleware
Add --global to run it on every route.
npx nuxt add-template plugin <name>
New plugin in app/plugins
--client or --server adds a mode suffix.
npx nuxt add-template api <name>
New API handler in server/api
Add --get or --post to restrict the method.
npx nuxt add-template server-route <name>
New route in server/routes
npx nuxt add-template server-util <name>
New helper in server/utils
npx nuxt add-template <tpl> <name> --force
Overwrite an existing file

Modules

npx nuxt module add <module>
Install and register a module
Edits package.json and the modules list in nuxt.config.
npx nuxt module search <query>
Find modules by keyword
npx nuxt module remove <module>
Uninstall and unregister a module
npx nuxt module add <module> --skipInstall
Only edit nuxt.config
npx nuxt module add <module> --dev
Install as a dev dependency
npx nuxt module search <query> --json
Machine-readable results
npx nuxt add <module>
Short form of module add
Modules and layers only; templates moved to add-template.

Directories

Where things go
Path Holds
app/pages/ file-based routes (about.vue, [id].vue)
app/components/ auto-imported components
app/composables/ auto-imported use* functions
app/layouts/ page wrappers, used with <NuxtLayout>
app/middleware/ route guards
app/plugins/ code that runs when the app starts
app/utils/ auto-imported helpers
server/api/ handlers served at /api/*
server/routes/ handlers served at their path
server/middleware/ run on every server request
public/ static files served from /
shared/ code usable by app and server

Config

nuxt.config.ts: modules
List of extensions, loaded in order
nuxt.config.ts: runtimeConfig
Env-backed settings
Keys outside public stay server-only; override with NUXT_<KEY> env vars.
nuxt.config.ts: css
Global stylesheets
nuxt.config.ts: app
baseURL, head tags, transitions
nuxt.config.ts: ssr
Turn server rendering on or off
ssr: false gives a client-only SPA.
nuxt.config.ts: routeRules
Per-route caching and rendering
Mix prerender, swr, redirect and ssr: false per path.
nuxt.config.ts: compatibilityDate
Pin behaviour of presets and modules
nuxt.config.ts: devtools
Enable Nuxt DevTools
nuxt.config.ts: nitro
Server engine options
nuxt.config.ts: vite
Pass options to Vite
nuxt.config.ts: imports
Control auto-import directories
nuxt.config.ts: components
Control component auto-registration
nuxt.config.ts: future
Opt in to upcoming behaviour
Env var to config
Env var Sets
NUXT_PORT / PORT dev and preview port
NUXT_HOST / HOST listen host
NUXT_<KEY> runtimeConfig.<key>
NUXT_PUBLIC_<KEY> runtimeConfig.public
NITRO_PRESET build deploy target

Recipes

New project
npm create nuxt my-appcd my-appnpx nuxt dev
Add a module and a page
npx nuxt module add @nuxt/imagenpx nuxt add-template page about# edit app/pages/about.vue
Static site
npx nuxt generatenpx nuxt preview# upload .output/public
Minimal nuxt.config.ts
export default defineNuxtConfig({  compatibilityDate: '2025-07-15',  modules: ['@nuxt/image'],  runtimeConfig: { public: { apiBase: '' } },  routeRules: { '/blog/**': { prerender: true } },})