feat(cli): add tab completions

README.md

@@ -6,6 +6,32 @@
 
 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 <(nuxt 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 `nuxt` directly within a Nuxt project:
+
+```bash
+pnpm nuxt <Tab>
+npm run nuxt <Tab>
+yarn nuxt <Tab>
+bun nuxt <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/create-nuxt/package.json

@@ -33,6 +33,7 @@
     "citty": "^0.1.6"
   },
   "devDependencies": {
+    "@bomb.sh/tab": "^0.0.6",
     "@types/node": "^22.18.10",
     "rollup": "^4.52.4",
     "rollup-plugin-visualizer": "^6.0.4",

packages/create-nuxt/src/main.ts

@@ -2,6 +2,7 @@
 import { provider } from 'std-env'
 
 import init from '../../nuxi/src/commands/init'
+import { setupInitCompletions } from '../../nuxi/src/completions-init'
 import { setupGlobalConsole } from '../../nuxi/src/utils/console'
 import { checkEngines } from '../../nuxi/src/utils/engines'
 import { logger } from '../../nuxi/src/utils/logger'
@@ -15,6 +16,11 @@
   },
   args: init.args,
   async setup(ctx) {
+    const isCompletionRequest = ctx.args._?.[0] === 'complete'
+    if (isCompletionRequest) {
+      return
+    }
+
     setupGlobalConsole({ dev: false })
 
     // Check Node.js version and CLI updates in background
@@ -25,3 +31,5 @@
     await init.run?.(ctx)
   },
 })
+
+await setupInitCompletions(main)

packages/nuxi/package.json

@@ -29,16 +29,18 @@
   },
   "scripts": {
     "dev:prepare": "unbuild --stub",
-    "build": "unbuild",
+    "build": "pnpm generate:completions-data && unbuild",
     "build:stub": "unbuild --stub",
     "dev": "node ./bin/nuxi.mjs dev ./playground",
     "dev:bun": "bun --bun ./bin/nuxi.mjs dev ./playground",
+    "generate:completions-data": "tsx ./scripts/generate-completions-data.ts",
     "nuxi": "node ./bin/nuxi.mjs",
     "nuxi-bun": "bun --bun ./bin/nuxi.mjs",
     "prepack": "unbuild",
     "test:dist": "node ./bin/nuxi.mjs info ./playground"
   },
   "devDependencies": {
+    "@bomb.sh/tab": "^0.0.6",
     "@nuxt/kit": "^4.1.3",
     "@nuxt/schema": "^4.1.3",
     "@nuxt/test-utils": "^3.19.2",

packages/nuxi/scripts/generate-completions-data.ts

@@ -0,0 +1,74 @@
+/** generate completion data from nitropack and Nuxt starter repo */
+
+import { writeFile } from 'node:fs/promises'
+import { createRequire } from 'node:module'
+import { fileURLToPath } from 'node:url'
+import { dirname, join, resolve } from 'node:path'
+
+const require = createRequire(import.meta.url)
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+interface PresetMeta {
+    _meta?: { name: string }
+}
+
+async function generateCompletionData() {
+    const data: {
+        nitroPresets: string[]
+        templates: string[]
+    } = {
+        nitroPresets: [],
+        templates: [],
+    }
+
+    const nitropackPath = dirname(require.resolve('nitropack/package.json'))
+    const presetsPath = join(nitropackPath, 'dist/presets/_all.gen.mjs')
+    const { default: allPresets } = await import(presetsPath) as { default: PresetMeta[] }
+
+    data.nitroPresets = allPresets
+        .map(preset => preset._meta?.name)
+        .filter((name): name is string => Boolean(name))
+        .filter(name => !['base-worker', 'nitro-dev', 'nitro-prerender'].includes(name))
+        .filter((name, index, array) => array.indexOf(name) === index)
+        .sort()
+
+    const response = await fetch(
+        'https://api.github.com/repos/nuxt/starter/contents/templates?ref=templates'
+    )
+
+    if (!response.ok) {
+        throw new Error(`GitHub API error: ${response.status}`)
+    }
+
+    const files = await response.json() as Array<{ name: string; type: string }>
+
+    const templateEntries = files
+        .filter(file => {
+            if (file.type === 'dir') return true
+            if (file.type === 'file' && file.name.endsWith('.json') && file.name !== 'content.json') {
+                return true
+            }
+            return false
+        })
+        .map(file => file.name.replace('.json', ''))
+
+    data.templates = Array.from(new Set(templateEntries))
+        .filter(name => name !== 'community')
+        .sort()
+
+    const outputPath = resolve(__dirname, '../src/utils/completions-data.ts')
+    const content = `/** Auto-generated file */
+
+export const nitroPresets = ${JSON.stringify(data.nitroPresets, null, 2)} as const
+
+export const templates = ${JSON.stringify(data.templates, null, 2)} as const
+`
+
+    await writeFile(outputPath, content, 'utf-8')
+}
+
+generateCompletionData().catch((error) => {
+    console.error('Failed to generate completion data:', error)
+    process.exit(1)
+})
+

packages/nuxi/src/completions-init.ts

@@ -0,0 +1,28 @@
+import type { ArgsDef, CommandDef } from 'citty'
+import tab from '@bomb.sh/tab/citty'
+import { templates } from './utils/completions-data'
+
+export async function setupInitCompletions<T extends ArgsDef = ArgsDef>(command: CommandDef<T>) {
+    const completion = await tab(command)
+
+    const templateOption = completion.options?.get('template')
+    if (templateOption) {
+        templateOption.handler = (complete) => {
+            for (const template of templates) {
+                complete(template, '')
+            }
+        }
+    }
+
+    const logLevelOption = completion.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/completions.ts

@@ -0,0 +1,79 @@
+import type { ArgsDef, CommandDef } from 'citty'
+import tab from '@bomb.sh/tab/citty'
+import { nitroPresets, templates } from './utils/completions-data'
+
+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) => {
+        for (const preset of nitroPresets) {
+          complete(preset, '')
+        }
+      }
+    }
+  }
+
+  const initCommand = completion.commands.get('init')
+  if (initCommand) {
+    const templateOption = initCommand.options.get('template')
+    if (templateOption) {
+      templateOption.handler = (complete) => {
+        for (const template of templates) {
+          complete(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', 'init']
+  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)
+}

packages/nuxi/src/utils/completions-data.ts

@@ -0,0 +1,69 @@
+/** Auto-generated file */
+
+export const nitroPresets = [
+  "alwaysdata",
+  "aws-amplify",
+  "aws-lambda",
+  "azure-functions",
+  "azure-swa",
+  "bun",
+  "cleavr",
+  "cli",
+  "cloudflare-dev",
+  "cloudflare-durable",
+  "cloudflare-module",
+  "cloudflare-module-legacy",
+  "cloudflare-pages",
+  "cloudflare-pages-static",
+  "cloudflare-worker",
+  "deno-deploy",
+  "deno-server",
+  "deno-server-legacy",
+  "digital-ocean",
+  "edgio",
+  "firebase",
+  "firebase-app-hosting",
+  "flight-control",
+  "genezio",
+  "github-pages",
+  "gitlab-pages",
+  "heroku",
+  "iis-handler",
+  "iis-node",
+  "koyeb",
+  "netlify",
+  "netlify-builder",
+  "netlify-edge",
+  "netlify-legacy",
+  "netlify-static",
+  "node-cluster",
+  "node-listener",
+  "node-server",
+  "platform-sh",
+  "render-com",
+  "service-worker",
+  "static",
+  "stormkit",
+  "vercel",
+  "vercel-edge",
+  "vercel-static",
+  "winterjs",
+  "zeabur",
+  "zeabur-static",
+  "zerops",
+  "zerops-static"
+] as const
+
+export const templates = [
+  "doc-driven",
+  "hub",
+  "layer",
+  "module",
+  "module-devtools",
+  "ui",
+  "ui-vue",
+  "v2-bridge",
+  "v3",
+  "v4",
+  "v4-compat"
+] as const

packages/nuxt-cli/package.json

@@ -33,6 +33,7 @@
     "prepack": "unbuild"
   },
   "dependencies": {
+    "@bomb.sh/tab": "^0.0.6",
     "c12": "^3.3.0",
     "citty": "^0.1.6",
     "clipboardy": "^5.0.0",

packages/nuxt-cli/src/run.ts

@@ -4,6 +4,7 @@ import { fileURLToPath } from 'node:url'
 import { runCommand as _runCommand, runMain as _runMain } from 'citty'
 
 import { commands } from '../../nuxi/src/commands'
+import { initCompletions } from '../../nuxi/src/completions'
 import { main } from './main'
 
 globalThis.__nuxt_cli__ = globalThis.__nuxt_cli__ || {
@@ -17,7 +18,10 @@ globalThis.__nuxt_cli__ = globalThis.__nuxt_cli__ || {
   ),
 }
 
-export const runMain = () => _runMain(main)
+export const runMain = async () => {
+  await initCompletions(main)
+  return _runMain(main)
+}
 
 export async function runCommand(
   name: string,