fix(add,init): improve default ux (#737)

Co-authored-by: Sébastien Chopin <[email protected]>

package.json

@@ -12,8 +12,8 @@
     "build:stub": "pnpm -r dev:prepare",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
-    "nuxi": "node ./bin/nuxi.mjs",
-    "nuxi-bun": "bun --bun ./bin/nuxi.mjs",
+    "nuxi": "node ./packages/nuxi/bin/nuxi.mjs",
+    "nuxi-bun": "bun --bun ./packages/nuxi/bin/nuxi.mjs",
     "prepack": "pnpm -r build",
     "test:types": "tsc --noEmit",
     "test:knip": "knip",

packages/nuxi/package.json

@@ -2,7 +2,7 @@
   "name": "nuxi",
   "type": "module",
   "version": "3.21.1",
-  "description": "⚡️ Nuxt Generation CLI Experience",
+  "description": "Nuxt CLI",
   "license": "MIT",
   "repository": {
     "type": "git",

packages/nuxi/src/commands/init.ts

@@ -5,6 +5,7 @@ import { existsSync } from 'node:fs'
 import process from 'node:process'
 
 import { defineCommand } from 'citty'
+import { colors } from 'consola/utils'
 import { downloadTemplate, startShell } from 'giget'
 import { installDependencies } from 'nypm'
 import { relative, resolve } from 'pathe'
@@ -78,6 +79,11 @@ export default defineCommand({
   async run(ctx) {
     const cwd = resolve(ctx.args.cwd)
 
+    let templateDownloadPath = resolve(cwd, ctx.args.dir)
+
+    logger.info(colors.greenBright(`Welcome to ${colors.bold(('Nuxt'))}!`))
+    logger.info(`Creating a new project in ${colors.cyan(relative(cwd, templateDownloadPath) || templateDownloadPath)}.`)
+
     // Get template name
     const templateName = ctx.args.template || DEFAULT_TEMPLATE_NAME
 
@@ -86,15 +92,14 @@ export default defineCommand({
       process.exit(1)
     }
 
-    let templateDownloadPath = resolve(cwd, ctx.args.dir)
     let shouldForce = Boolean(ctx.args.force)
 
     // Prompt the user if the template download directory already exists
     // when no `--force` flag is provided
     const shouldVerify = !shouldForce && existsSync(templateDownloadPath)
     if (shouldVerify) {
       const selectedAction = await logger.prompt(
-        `The directory \`${templateDownloadPath}\` already exists. What would you like to do?`,
+        `The directory ${colors.cyan(templateDownloadPath)} already exists. What would you like to do?`,
         {
           type: 'select',
           options: ['Override its contents', 'Select different directory', 'Abort'],

packages/nuxi/src/commands/module/add.ts

@@ -309,7 +309,7 @@ async function resolveModule(moduleName: string, cwd: string): Promise<ModuleRes
   ) {
     logger.warn(`It seems that \`${pkgName}\` is not a Nuxt module.`)
     const shouldContinue = await logger.prompt(
-      `Do you want to continue installing \`${pkgName}\` anyway?`,
+      `Do you want to continue installing ${colors.cyan(pkgName)} anyway?`,
       {
         type: 'confirm',
         initial: false,

packages/nuxi/src/main.ts

@@ -2,11 +2,12 @@ import { resolve } from 'node:path'
 import process from 'node:process'
 
 import { defineCommand } from 'citty'
-import { provider } from 'std-env'
+import { hasTTY, provider } from 'std-env'
 
 import { description, name, version } from '../package.json'
 import { commands } from './commands'
 import { cwdArgs } from './commands/_shared'
+import { nuxtIcon } from './utils/ascii'
 import { setupGlobalConsole } from './utils/console'
 import { checkEngines } from './utils/engines'
 import { logger } from './utils/logger'
@@ -30,6 +31,10 @@ export const main = defineCommand({
     const dev = command === 'dev'
     setupGlobalConsole({ dev })
 
+    if (hasTTY && (!command || command === 'init')) {
+      logger.log(`${nuxtIcon}\n`)
+    }
+
     // Check Node.js version and CLI updates in background
     let backgroundTasks: Promise<any> | undefined
     if (command !== '_dev' && provider !== 'stackblitz') {

packages/nuxi/src/utils/ascii.ts

@@ -0,0 +1,16 @@
+import { colors } from 'consola/utils'
+
+/**
+ * Thank you to Matt Eason for the proposal of this ASCII art
+ * https://bsky.app/profile/matteason.me/post/3lhwnl5e4g22l
+ */
+const icon = [
+  `     __`,
+  `    /  \\  __ `,
+  `   / /\\ \\/  \\     `,
+  `  / /  \\  /\\ \\    `,
+  ` / /___/ / _\\ \\   `,
+  `/_______/ /____\\  `,
+]
+
+export const nuxtIcon = icon.map(line => colors.greenBright(line)).join('\n')

packages/nuxi/src/utils/logger.ts

@@ -1,3 +1,4 @@
 import { consola } from 'consola'
+import { colors } from 'consola/utils'
 
-export const logger = consola.withTag('nuxi')
+export const logger = consola.withTag(colors.whiteBright(colors.bold(colors.bgGreenBright(' nuxi '))))

packages/nuxt-cli/package.json

@@ -2,7 +2,7 @@
   "name": "@nuxt/cli",
   "type": "module",
   "version": "3.21.1",
-  "description": "⚡️ Nuxt Generation CLI Experience",
+  "description": "Nuxt CLI",
   "license": "MIT",
   "repository": {
     "type": "git",