Terminuxt

Terminuxt is a terminal-style web interface built with Nuxt 3 and Tailwind CSS.
It provides a command-driven experience for exploring APIs, sending HTTP requests, managing reusable endpoints, and inspecting response metadata.

Screenshot

Features

• Terminal-like command input with history navigation and tab completion
• Built-in API commands: get, post, put, patch, delete
• Configurable base URL with support for named endpoints
• Header management commands for custom request headers
• Response analysis (analyze) with status, timing, headers, and payload metrics
• Multiple visual themes (default, matrix, cyberpunk, ocean, sunset)
• Adjustable UI settings (font, cursor style, glow/glass effects, animation speed)
• Local persistence of terminal settings and API state

Tech Stack

• Nuxt 3
• Vue 3
• Tailwind CSS
• @nuxthub/core

Getting Started

Prerequisites

• Node.js 18+ (recommended)
• npm, pnpm, or yarn

Install

npm install

Run in Development

npm run dev

Open the local URL printed by Nuxt (typically http://localhost:3000).

Build for Production

npm run build

Preview Production Build

npm run preview

Generate Static Output

npm run generate

Available Scripts

• npm run dev - Start local development server
• npm run build - Build the app for production
• npm run preview - Preview the production build
• npm run generate - Generate static files

Terminal Command Reference

Basic Commands

• help - Show full command help
• clear - Clear terminal output
• ls - List available commands
• whoami - Show current session/user info
• date - Show current date/time
• pwd - Show virtual working directory
• settings - Open settings panel
• status - Show current API configuration/status

API Commands

• set-base <url> - Set base API URL (default: https://jsonplaceholder.typicode.com)
• get <path|url|@endpoint>
• post <path|url|@endpoint> '<json>'
• put <path|url|@endpoint> '<json>'
• patch <path|url|@endpoint> '<json>'
• delete <path|url|@endpoint>

Endpoint Commands

• endpoint add <name> <path> - Save endpoint alias
• endpoint list - List saved endpoints
• endpoint remove <name> - Remove endpoint alias

Use endpoint aliases in requests with @name, for example:

endpoint add users /users
get @users

Header Commands

• headers - Show active headers
• header set <name> <value> - Add/update header
• header remove <name> - Remove header

Analysis Command

• analyze - Display metadata from the last successful API request

Keyboard Shortcuts

• Enter - Execute command
• Arrow Up / Arrow Down - Navigate command history
• Tab - Command auto-complete
• Ctrl + L - Clear terminal output

Project Structure

.
├─ app.vue
├─ components/
│  ├─ Terminal.vue
│  ├─ TerminalSettings.vue
│  └─ WelcomeAnimation.vue
├─ composables/
│  └─ useTerminalCommands.js
├─ assets/css/
│  └─ main.css
├─ public/
│  └─ site.webmanifest
├─ nuxt.config.ts
└─ tailwind.config.js

State and Persistence

The app stores UI preferences and API state in localStorage:

• terminal-settings
• terminal-api-state

This preserves theme, visual preferences, base URL, headers, and saved endpoints across sessions.

Notes

• The app is command-first and designed for interactive API exploration.
• It ships with JSONPlaceholder as the default API target to make first-run testing easy.

License

No license file is currently defined in this repository.