feat(cli): add tab completions

README.md

@@ -6,6 +6,33 @@
 
 All commands are listed on https://nuxt.com/docs/api/commands.
 
+## Shell Autocompletions
+
+Nuxi provides shell autocompletions for commands, options, and option values powered by [`@bomb.sh/tab`](https://github.com/bombshell-dev/tab).
+
+### Setup
+
+For permanent setup in zsh, add this to your `~/.zshrc`:
+
+```bash
+# Add to ~/.zshrc for permanent autocompletions (same can be done for other shells)
+source <(nuxi complete zsh)
+```
+
+### Package Manager Integration
+
+`@bomb.sh/tab` integrates with [package managers](https://github.com/bombshell-dev/tab?tab=readme-ov-file#package-manager-completions). Autocompletions work when running nuxi directly:
+
+```bash
+npx nuxi <Tab>
+npm exec nuxi <Tab>
+pnpm nuxi <Tab>
+yarn nuxi <Tab>
+bun nuxi <Tab>
+```
+
+For package manager autocompletions, you should install [tab's package manager completions](https://github.com/bombshell-dev/tab?tab=readme-ov-file#package-manager-completions) separately.
+
 ## Contributing
 
 ```bash

packages/nuxi/package.json

@@ -39,6 +39,7 @@
     "test:dist": "node ./bin/nuxi.mjs info ./playground"
   },
   "devDependencies": {
+    "@bomb.sh/tab": "^0.0.5",
     "@nuxt/kit": "^4.1.3",
     "@nuxt/schema": "^4.1.3",
     "@nuxt/test-utils": "^3.19.2",

packages/nuxi/src/completions.ts

@@ -0,0 +1,84 @@
+import type { ArgsDef, CommandDef } from 'citty'
+import tab from '@bomb.sh/tab/citty'
+
+export async function initCompletions<T extends ArgsDef = ArgsDef>(command: CommandDef<T>) {
+  const completion = await tab(command)
+
+  const devCommand = completion.commands.get('dev')
+  if (devCommand) {
+    const portOption = devCommand.options.get('port')
+    if (portOption) {
+      portOption.handler = (complete) => {
+        complete('3000', 'Default development port')
+        complete('3001', 'Alternative port')
+        complete('8080', 'Common alternative port')
+      }
+    }
+
+    const hostOption = devCommand.options.get('host')
+    if (hostOption) {
+      hostOption.handler = (complete) => {
+        complete('localhost', 'Local development')
+        complete('0.0.0.0', 'Listen on all interfaces')
+        complete('127.0.0.1', 'Loopback address')
+      }
+    }
+  }
+
+  const buildCommand = completion.commands.get('build')
+  if (buildCommand) {
+    const presetOption = buildCommand.options.get('preset')
+    if (presetOption) {
+      presetOption.handler = (complete) => {
+        complete('node-server', 'Node.js server')
+        complete('static', 'Static hosting')
+        complete('cloudflare-pages', 'Cloudflare Pages')
+        complete('vercel', 'Vercel')
+        complete('netlify', 'Netlify')
+        complete('aws-lambda', 'AWS Lambda')
+        complete('azure', 'Azure')
+        complete('firebase', 'Firebase')
+        complete('deno-deploy', 'Deno Deploy')
+        complete('bun', 'Bun runtime')
+      }
+    }
+  }
+
+  const initCommand = completion.commands.get('init')
+  if (initCommand) {
+    const templateOption = initCommand.options.get('template')
+    if (templateOption) {
+      templateOption.handler = (complete) => {
+        complete('v3', 'Nuxt 3 template')
+        complete('v4', 'Nuxt 4 template')
+      }
+    }
+  }
+
+  const addCommand = completion.commands.get('add')
+  if (addCommand) {
+    const cwdOption = addCommand.options.get('cwd')
+    if (cwdOption) {
+      cwdOption.handler = (complete) => {
+        complete('.', 'Current directory')
+      }
+    }
+  }
+
+  const logLevelCommands = ['dev', 'build', 'generate', 'preview', 'prepare']
+  for (const cmdName of logLevelCommands) {
+    const cmd = completion.commands.get(cmdName)
+    if (cmd) {
+      const logLevelOption = cmd.options.get('logLevel')
+      if (logLevelOption) {
+        logLevelOption.handler = (complete) => {
+          complete('silent', 'No logs')
+          complete('info', 'Standard logging')
+          complete('verbose', 'Detailed logging')
+        }
+      }
+    }
+  }
+
+  return completion
+}

packages/nuxi/src/main.ts

@@ -9,6 +9,7 @@ import { provider } from 'std-env'
 import { description, name, version } from '../package.json'
 import { commands } from './commands'
 import { cwdArgs } from './commands/_shared'
+import { initCompletions } from './completions'
 import { setupGlobalConsole } from './utils/console'
 import { checkEngines } from './utils/engines'
 import { logger } from './utils/logger'
@@ -84,4 +85,8 @@ export const main = defineCommand({
   },
 })
 
-export const runMain = () => _runMain(main)
+export async function runMain() {
+  await initCompletions(main)
+
+  return _runMain(main)
+}