https://github.com/codelits/langie-api-sdk
A lightweight, flexible translation SDK for Vue.js applications that provides seamless multilingual support with minimal configuration. Built with TypeScript and Vue 3 Composition API.
https://github.com/codelits/langie-api-sdk
free-tier i18n internationalization localization nuxt rest-api translation translation-api vue
Last synced: about 1 month ago
JSON representation
A lightweight, flexible translation SDK for Vue.js applications that provides seamless multilingual support with minimal configuration. Built with TypeScript and Vue 3 Composition API.
- Host: GitHub
- URL: https://github.com/codelits/langie-api-sdk
- Owner: CodeLits
- License: apache-2.0
- Created: 2025-06-25T15:41:57.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-07-27T13:45:33.000Z (11 months ago)
- Last Synced: 2025-07-27T13:46:17.440Z (11 months ago)
- Topics: free-tier, i18n, internationalization, localization, nuxt, rest-api, translation, translation-api, vue
- Language: TypeScript
- Homepage: https://api.langie.uk/
- Size: 978 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: docs/contributing.md
- License: LICENSE
Awesome Lists containing this project
README
# Langie API SDK
[](https://www.npmjs.com/package/langie-api-sdk)
[](LICENSE)
Lightweight translation SDK for Vue.js, Nuxt.js, and vanilla JavaScript applications with smart interface language selection and limit monitoring.
## 🚀 [Live Demo](https://langie-demo.netlify.app/)
## Requirements
- Node.js 18.0.0 or higher
- Vue 3.2.0 or higher
- Nuxt 3.0.0 or higher (optional)
- Modern browser with ES2020+ support
## Installation
```bash
npm install langie-api-sdk
```
### Dependencies
The SDK uses the following external libraries:
- `countries-and-timezones` - For accurate timezone to country mapping (316KB, MIT license)
- `@vueform/multiselect` - For the language selection dropdown component
## Quick Start
### Basic Usage
```vue
import { useLangie } from 'langie-api-sdk'
import { lt } from 'langie-api-sdk/components'
const { lr, setLanguage } = useLangie()
{{ lr('Welcome to our application') }}
Hello world!
Switch to Spanish
```
### Global Component Registration
You can register the `lt` component globally for easier usage throughout your application:
```javascript
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { lt } from 'langie-api-sdk/components'
const app = createApp(App)
// Register lt component globally
app.component('lt', lt)
app.mount('#app')
```
Then use it directly in templates without importing:
```vue
Welcome to our application!
This text will be translated automatically.
Click me
import { useLangie } from 'langie-api-sdk'
const { setLanguage } = useLangie()
```
## Documentation
- **[Getting Started](./docs/getting-started.md)** - Installation and basic setup
- **[Vue.js Usage](./docs/vue.md)** - Vue composables, components, and best practices
- **[Components](./docs/components.md)** - Ready-to-use Vue components
- **[Composables](./docs/composables.md)** - Vue composables and reactive state
- **[Advanced Usage](./docs/advanced-usage.md)** - Complex patterns and optimization
- **[TypeScript Support](./docs/typescript.md)** - TypeScript integration guide
- **[Nuxt.js Integration](./docs/nuxt.md)** - SSR support, plugins, and deployment
- **[JavaScript Usage](./docs/javascript.md)** - Vanilla JS, React, and Node.js integration
- **[Core API](./docs/core-api.md)** - Core translation functions
- **[Backend Integration](./docs/backend-integration.md)** - API requirements and setup
- **[Contributing](./CONTRIBUTING.md)** - Development and contribution guidelines
- **[Compatibility Guide](./COMPATIBILITY.md)** - Version requirements and compatibility
## Required CSS
For `LanguageSelect` component:
```js
// main.js
import '@vueform/multiselect/themes/default.css'
import 'langie-api-sdk/dist/index.css'
```
## Advanced Usage
### Global Translation Defaults
You can set global defaults for all translation functions and the `lt` component to avoid repeating common parameters:
```javascript
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { lt, setLtDefaults } from 'langie-api-sdk/components'
const app = createApp(App)
// Register lt component globally
app.component('lt', lt)
// Set global defaults (optional)
setLtDefaults({
ctx: 'ui', // default context
orig: 'en' // optional original language (no default)
})
app.mount('#app')
```
Now you can use simplified syntax:
```vue
Cancel
Article title
Bonjour
Hola mundo
```
```javascript
// Functions also use global defaults
const { l, lr } = useLangie()
// Uses global defaults: ctx="ui"
l('Hello world') // Not reactive, for JS only
lr('Welcome message') // Reactive, for Vue templates/computed
// Override specific parameters
l('Article title', 'content') // Not reactive
lr('French text', 'ui', 'fr') // Reactive
```
## Features
- **Reactive translations** with automatic UI updates
- **SSR support** for Nuxt.js applications
- **Smart caching** with context-aware storage
- **Language detection** with browser locale support
- **Limit monitoring** with usage tracking
- **TypeScript support** with full type definitions
- **Multiple frameworks** - Vue.js, Nuxt.js, vanilla JavaScript
## Backend Requirements
Your translation service needs these endpoints:
- `POST /translate` - Translate texts
- `GET /languages` - Available languages
- `GET /limit` - API usage limits
- `GET /health` - Service health check
See [Backend Integration](./docs/backend-integration.md) for detailed API specifications and setup guide.
## License
[Apache 2.0](LICENSE)