feat(cli): add tab completions

[AmirSa12]

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This PR introduces tab completion functionality for the nuxt cli, improving developer experience by allowing shell(zsh, powershell, fish, bash) autocompletion for commands, options, values, and flags. With this PR, users can navigate available commands, options and values more efficiently and faster with speeding up workflow.

A small video of how this works:

nuxi.mp4

A small documentation of how CLIs can integrate tab ( in this case, I'm using the citty adapter )

import { defineCommand, createMain } from 'citty';
import tab from '@bomb.sh/tab/citty';

const main = defineCommand({
  meta: { name: 'my-cli', description: 'My CLI tool' },
  subCommands: {
    dev: defineCommand({
      meta: { name: 'dev', description: 'Start dev server' },
      args: {
        port: { type: 'string', description: 'Specify port' },
        host: { type: 'string', description: 'Specify host' },
      },
    }),
  },
});

// Initialize tab completions
const completion = await tab(main);

// Add custom completions
const devCommand = completion.commands.get('dev');
const portOption = devCommand?.options.get('port');
if (portOption) {
  portOption.handler = (complete) => {
    complete('3000', 'Development port');
    complete('8080', 'Production port');
  };
}

const cli = createMain(main);
cli();

[github-actions]

📦 Bundle Size Comparison

📈 nuxi

Metric	Base	Head	Diff
Rendered	5079.11 KB	5114.86 KB	+35.75 KB (+0.70%)

➡️ nuxt-cli

Metric	Base	Head	Diff
Rendered	108.86 KB	108.86 KB	0.00 KB (0.00%)

➡️ create-nuxt

Metric	Base	Head	Diff
Rendered	2178.73 KB	2178.73 KB	0.00 KB (0.00%)

[pkg-pr-new]

nuxt-cli-playground

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

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

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

commit: 11dd4bd

[codspeed-hq]

CodSpeed Performance Report

Merging #1082 will not alter performance

_{Comparing AmirSa12:feat/tab-completions (11dd4bd) with main (d8e89aa)}

Summary

✅ 2 untouched

[danielroe]

this is looking very, very exciting!

[danielroe]

we no longer advise running nuxi as a cli but nuxt directly, for example pnpm nuxt dev within a nuxt project. @nuxt/cli is the package most nuxt users have installed, and it works with both the nuxi and nuxt binaries. nuxi is a legacy all-dependencied-inlined version for portability, but we've chosen to use a lighter version without inlined dependencies for smaller installed size, greater security (and to dedupe deps).

[AmirSa12]

Oh, Thanks for the details! I'll handle it!

[danielroe]

could we split these up into two sets of completions?

create-nuxt will only need the the init completions (yet won't have init as a subcommand).

[AmirSa12]

yeah sure. I'll do it!

[danielroe]

we have a very long list of possible providers here:

https://nitro.build/deploy

I wonder if it's possible to use nitropack at build time to get this list rather than hard code any of them?

[AmirSa12]

hmm.. are there any approaches you prefer? I thought of fetching from the url (https://nitro.build/deploy) and extracting the names of the providers, but the CLI preset names don't always match the provider names directly. for example, the docs page says “Cloudflare” but the actual valid presets are: "cloudflare-pages" and "cloudflare-workers" (not just cloudflare)

[AmirSa12]

It would be great if there is a json or a file where we can get the full internal preset keys

[danielroe]

I think we can import from nitropack directly

[danielroe]

our first-party templates are available at https://github.com/nuxt/starter/tree/templates/templates.

again, do you think maybe we could grab data from these at build-time?