{"id":51126535,"url":"https://github.com/apiverve/translator-app-vue-tutorial","last_synced_at":"2026-06-25T08:01:58.214Z","repository":{"id":338744371,"uuid":"1158968447","full_name":"apiverve/translator-app-vue-tutorial","owner":"apiverve","description":"Language translator app built with Vue 3 for translating text between 100+ languages","archived":false,"fork":false,"pushed_at":"2026-02-16T07:41:15.000Z","size":16,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-16T14:19:07.744Z","etag":null,"topics":["apiverve","language","localization","translation","translator","tutorial","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://apiverve.com/marketplace/translator","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/apiverve.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-16T06:26:15.000Z","updated_at":"2026-02-16T07:41:19.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/apiverve/translator-app-vue-tutorial","commit_stats":null,"previous_names":["apiverve/translator-app-vue-tutorial"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/apiverve/translator-app-vue-tutorial","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apiverve%2Ftranslator-app-vue-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apiverve%2Ftranslator-app-vue-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apiverve%2Ftranslator-app-vue-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apiverve%2Ftranslator-app-vue-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/apiverve","download_url":"https://codeload.github.com/apiverve/translator-app-vue-tutorial/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apiverve%2Ftranslator-app-vue-tutorial/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34765322,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-25T02:00:05.521Z","response_time":101,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apiverve","language","localization","translation","translator","tutorial","vue","vuejs"],"created_at":"2026-06-25T08:01:58.128Z","updated_at":"2026-06-25T08:01:58.204Z","avatar_url":"https://github.com/apiverve.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Translator App | APIVerve API Tutorial\r\n\r\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)\r\n[![Build](https://img.shields.io/badge/Build-Passing-brightgreen.svg)]()\r\n[![Vue](https://img.shields.io/badge/Vue-3-42b883)](https://vuejs.org)\r\n[![Vite](https://img.shields.io/badge/Vite-5-646cff)](https://vitejs.dev)\r\n[![APIVerve | Translator](https://img.shields.io/badge/APIVerve-Translator-purple)](https://apiverve.com/marketplace/translator?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=translator-app-vue-tutorial)\r\n\r\nA clean, responsive language translator app built with Vue 3. Translate text between 100+ languages with auto-detection support.\r\n\r\n![Screenshot](https://raw.githubusercontent.com/apiverve/translator-app-vue-tutorial/main/screenshot.jpg)\r\n\r\n---\r\n\r\n### Get Your Free API Key\r\n\r\nThis tutorial requires an APIVerve API key. **[Sign up free](https://dashboard.apiverve.com?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=translator-app-vue-tutorial)** - no credit card required.\r\n\r\n---\r\n\r\n## Features\r\n\r\n- Translate text between 100+ languages\r\n- Auto-detect source language\r\n- Swap languages with one click\r\n- Copy translation to clipboard\r\n- Character count display\r\n- Clean, modern UI with responsive design\r\n- Built with Vue 3 and Vite for fast development\r\n\r\n## Quick Start\r\n\r\n1. **Clone this repository**\r\n   ```bash\r\n   git clone https://github.com/apiverve/translator-app-vue-tutorial.git\r\n   cd translator-app-vue-tutorial\r\n   ```\r\n\r\n2. **Install dependencies**\r\n   ```bash\r\n   npm install\r\n   ```\r\n\r\n3. **Add your API key**\r\n\r\n   Open `.env` and add your API key:\r\n   ```\r\n   VITE_API_KEY=your-api-key-here\r\n   ```\r\n\r\n4. **Start the development server**\r\n   ```bash\r\n   npm run dev\r\n   ```\r\n\r\n5. **Open in browser**\r\n\r\n   Visit http://localhost:5173 and start translating!\r\n\r\n## Project Structure\r\n\r\n```\r\ntranslator-app-vue-tutorial/\r\n├── src/\r\n│   ├── App.vue         # Main Vue component\r\n│   ├── style.css       # Styles\r\n│   └── main.js         # Entry point\r\n├── index.html          # HTML template\r\n├── package.json        # Dependencies\r\n├── vite.config.js      # Vite configuration\r\n├── .env                # Environment variables (add your API key)\r\n├── screenshot.jpg      # Preview image\r\n├── LICENSE             # MIT license\r\n├── .gitignore          # Git ignore rules\r\n└── README.md           # This file\r\n```\r\n\r\n## How It Works\r\n\r\n1. User selects source and target languages\r\n2. User enters text to translate\r\n3. Vue captures the input and calls the Translator API\r\n4. API returns the translated text\r\n5. Component displays the translation with copy option\r\n\r\n### The API Call\r\n\r\n```javascript\r\nconst response = await fetch('https://api.apiverve.com/v1/translator', {\r\n  method: 'POST',\r\n  headers: {\r\n    'Content-Type': 'application/json',\r\n    'x-api-key': API_KEY\r\n  },\r\n  body: JSON.stringify({\r\n    text: sourceText,\r\n    source: 'en',\r\n    target: 'es'\r\n  })\r\n});\r\n```\r\n\r\n## API Reference\r\n\r\n**Endpoint:** `POST https://api.apiverve.com/v1/translator`\r\n\r\n**Request Body:**\r\n\r\n| Parameter | Type | Required | Description |\r\n|-----------|------|----------|-------------|\r\n| `text` | string | Yes | Text to translate |\r\n| `target` | string | Yes | Target language code (e.g., \"es\") |\r\n| `source` | string | No | Source language code (auto-detected if omitted) |\r\n\r\n**Example Response:**\r\n\r\n```json\r\n{\r\n  \"status\": \"ok\",\r\n  \"error\": null,\r\n  \"data\": {\r\n    \"sourceLang\": \"en\",\r\n    \"targetLang\": \"es\",\r\n    \"translatedText\": \"¡Hola! ¿Cómo estás?\"\r\n  }\r\n}\r\n```\r\n\r\n## Supported Languages\r\n\r\nThe API supports 100+ languages including:\r\n\r\n| Code | Language | Code | Language |\r\n|------|----------|------|----------|\r\n| en | English | es | Spanish |\r\n| fr | French | de | German |\r\n| it | Italian | pt | Portuguese |\r\n| ru | Russian | ja | Japanese |\r\n| ko | Korean | zh | Chinese |\r\n| ar | Arabic | hi | Hindi |\r\n\r\n## Customization Ideas\r\n\r\n- Add speech-to-text input\r\n- Add text-to-speech for translations\r\n- Save translation history to localStorage\r\n- Add favorite/frequent language pairs\r\n- Implement real-time translation as you type\r\n- Add dark mode toggle\r\n\r\n## Related APIs\r\n\r\nExplore more APIs at [APIVerve](https://apiverve.com/marketplace?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=translator-app-vue-tutorial):\r\n\r\n- [Language Detector](https://apiverve.com/marketplace/languagedetector?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=translator-app-vue-tutorial) - Detect the language of text\r\n- [Text Summarizer](https://apiverve.com/marketplace/textsummarizer?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=translator-app-vue-tutorial) - Summarize long text\r\n- [Sentiment Analysis](https://apiverve.com/marketplace/sentimentanalysis?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=translator-app-vue-tutorial) - Analyze text sentiment\r\n\r\n## Free Plan Note\r\n\r\nThis tutorial works with the free APIVerve plan. Some APIs may have:\r\n- **Locked fields**: Premium response fields return `null` on free plans\r\n- **Ignored parameters**: Some optional parameters require a paid plan\r\n\r\nThe API response includes a `premium` object when limitations apply. [Upgrade anytime](https://dashboard.apiverve.com/plans) to unlock all features.\r\n\r\n## License\r\n\r\nMIT - see [LICENSE](LICENSE)\r\n\r\n## Links\r\n\r\n- [Get API Key](https://dashboard.apiverve.com?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=translator-app-vue-tutorial) - Sign up free\r\n- [APIVerve Marketplace](https://apiverve.com/marketplace?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=translator-app-vue-tutorial) - Browse 300+ APIs\r\n- [Translator API](https://apiverve.com/marketplace/translator?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=translator-app-vue-tutorial) - API details\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapiverve%2Ftranslator-app-vue-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapiverve%2Ftranslator-app-vue-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapiverve%2Ftranslator-app-vue-tutorial/lists"}