feat: use clack to add more ✨

[danielroe]

🔗 Linked issue

#1078

❓ Type of change

• 👌 Enhancement (improving an existing functionality)

📚 Description

This is a pretty thorough refactor of logging/prompting with the aim of improving the DX of using the CLI.

It's probably only the beginning as I think we need to improve consistency between commands (with colours, for example), and the line on the left side.

I'd also like to avoid printing more than a couple of lines to stdout (using the tasklog) when upgrading or building nuxt or installing dependencies - any ideas @43081j?

I've removed the global console setup as I think this is now not needed, but I'll need to test to see if this is really the case.

much testing required 🙏

🙋 key questions

• use of note vs box
• highlight colour is currently cyan - would we like to use the Nuxt colour?
• what about highlighting versions? in some cases we're using cyan, some are de-emphasised (in nuxt info command). in some we add v prefix, in others not
• should we print something for every command, e.g. what command was just run?
• on every usage error message should we also print out help text for the CLI?
• what about colours - see module search command
• maybe we could use some wrapping utilities (for example the nuxt info command)

I'd like to build a 'style language' for the CLI and document what we're aiming for.

🔥 notable improvements/changes

general

• more things are highlighted
• in more places we use a relative path from process.cwd() to wherever we are doing work

nuxt add

• more accurate/helpful prompts on error

nuxt init

video

CleanShot.2025-11-06.at.16.19.58.mp4

nuxt info

• formatted in a box
• copies a markdown table rather than links
• adds more info, including Deno/Bun version if applicable, builder version + OS version
• dropped display of buildModules unless someone's using bridge

screenshot

screenshot of complex project

example of formatted markdown

Operating system	macOS 24.6.0
CPU	Apple M2 Max (12 cores)
Node.js version	v24.8.0
nuxt/cli version	3.30.0
Package manager	pnpm@10.20.0
Nuxt version	4.2.0
Nitro version	2.12.8
Builder	rolldown-vite@7.1.20
Config	$development, app, colorMode, compatibilityDate, content, css, devtools, eslint, experimental, hooks, hub, icon, image, llms, mdc, modules, nitro, routeRules, sourcemap, turnstile, twoslash, typescript, ui
Modules	@nuxt/ui@4.1.0, nuxt-content-twoslash@0.1.2, @nuxt/content@3.7.1, @nuxt/image@1.10.0, @nuxtjs/plausible@2.0.1, @nuxt/eslint@1.9.0, @nuxt/scripts@0.13.0, @nuxtjs/turnstile@1.1.1, @vueuse/nuxt@13.9.0, nuxt-og-image@5.1.12, motion-v/nuxt@1.7.4, nuxt-llms@0.1.3, @nuxthub/core@0.9.0, nuxt-charts@1.0.2, nuxt-auth-utils@0.5.25

[github-actions]

📦 Bundle Size Comparison

📈 nuxi

Metric	Base	Head	Diff
Rendered	4434.53 KB	4461.33 KB	+26.80 KB (+0.60%)

📈 nuxt-cli

Metric	Base	Head	Diff
Rendered	125.42 KB	131.46 KB	+6.03 KB (+4.81%)

📉 create-nuxt

Metric	Base	Head	Diff
Rendered	2462.51 KB	2388.68 KB	-73.83 KB (-3.00%)

[pkg-pr-new]

nuxt-cli-playground

npm i https://pkg.pr.new/create-nuxt@1121

npm i https://pkg.pr.new/nuxi@1121

npm i https://pkg.pr.new/@nuxt/cli@1121

commit: 1dcfa62

[codspeed-hq]

CodSpeed Performance Report

Merging #1121 will not alter performance

_{Comparing feat/more-clack (1dcfa62) with main (1b26dec)}

Summary

✅ 2 untouched

[dreyfus92]

overall looks really good, dunno what are your thoughts on sticking with styleText rather than using picocolors? 👀

[danielroe]

very happy to use picocolors (I did in an earlier version of the pr)

what are the benefits to switching?

[dreyfus92]

trimming the dep tree like the lumberjack would suggest @43081j, styleText is a node native util, so that would mean reducing the bundle size.

[danielroe]

ohh, I see what you mean!

currently I'm using colors from consola/utils as it's already a dep, but it would be nice at some point to migrate to styleText

[atinux]

use of note vs box

I like the box usage

highlight colour is currently cyan - would we like to use the Nuxt colour?

I think the cyan color is good. I am afraid that using the Nuxt green color will look like too much "success" as it's to highlight informative data (comontly associated to blue).

what about highlighting versions? in some cases we're using cyan, some are de-emphasised (in nuxt info command). in some we add v prefix, in others not

I would keep the cyan in the info command for the values though (within the box)

before

after

A mix of the two will be perfect 👌

should we print something for every command, e.g. what command was just run?

Not just if necessary as we see it right above:

on every usage error message should we also print out help text for the CLI?

Do you have examples in mind? I always find good to help on fixing an error 💯

what about colours - see module search command

I would probably, like the info command, use bold white instead of green. Probably try everything in cyan on the right, feels weird to have many different colours (why package grey but compat white?)

maybe we could use some wrapping utilities (for example the nuxt info command)

Do you have an example in mind?

[43081j]

a lot of this logic looks like it is figuring out terminal bounds etc

what exactly is this rendering? 👀 i feel like most of this should use clack helpers one day, if/when they exist

[danielroe]

exactly - and i did look to see if it was exported but it wasn't

i'm using this to render columns in the box (so i have to know when to wrap)

if you want this in clack, i'll happily refactor this upstream

[danielroe]

extracted logic into a new util and applied it to the module search DX as well