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 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?

[AmirSa12]

@danielroe I made some changes.. I imported the presets internally from the nitro package and fetched the templates from the starter repo. It's working, but it feels like a lot of overhead just for completion values... Not sure if that is overkill, but that is just my impression.