https://github.com/makio64/vue-tiny-translation
https://github.com/makio64/vue-tiny-translation
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/makio64/vue-tiny-translation
- Owner: Makio64
- License: mit
- Created: 2025-05-24T11:25:39.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-05-24T16:42:57.000Z (6 months ago)
- Last Synced: 2025-06-28T19:57:57.105Z (5 months ago)
- Language: JavaScript
- Size: 676 KB
- Stars: 6
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-tiny-translation - Super lightweight (0.32KB) reactive translation plugin for Vue 3. [Demo](https://vue-tiny-translation.netlify.app/) (Components & Libraries / Utilities)
- fucking-awesome-vue - vue-tiny-translation - Super lightweight (0.32KB) reactive translation plugin for Vue 3. 🌎 [Demo](vue-tiny-translation.netlify.app/) (Components & Libraries / Utilities)
README
# Vue Tiny Translation 🌍✨
A minimalist reactive translation plugin for Vue 3. Super lightweight (**0.32KB gzipped**), simple, and efficient internationalization solution.
🌐 **[Live Demo](https://vue-tiny-translation.netlify.app/)** - Try it now !
[
](https://vue-tiny-translation.netlify.app/)
## Features
- 🚀 **Tiny**: Minimal footprint, maximum performance
- ⚡ **Reactive**: Automatically updates components when translations change, no page reload!
- 🔧 **Simple API**: Super easy to use with intuitive methods
- 🌐 **Dynamic Loading**: Load translations asynchronously
- 📦 **TypeScript Support**: Full TypeScript definitions included
## Installation
```bash
npm install vue-tiny-translation
```
## Quick Start
### 1. Install the plugin
```javascript
import { createApp } from 'vue'
import TinyTranslation from 'vue-tiny-translation'
import App from './App.vue'
const app = createApp(App)
app.use(TinyTranslation)
app.mount('#app')
```
### 2. Load translations and use in components
```vue
{{ $t('hello') }}
{{ $t('goodbye') }}
Change Language
import { loadTranslations } from 'vue-tiny-translation'
export default {
async mounted() {
// Auto-load based on browser language
const lang = navigator.language.split('-')[0]
await loadTranslations(`/translations/${lang}.json`)
},
methods: {
async changeLanguage() {
await loadTranslations('/translations/fr.json')
}
}
}
```
## Load translation files from anywhere
```javascript
// Load from anywhere
await loadTranslations('/translations/en.json') // Local files
await loadTranslations('/api/translations/en') // API endpoints
```
## Example of organization using local files
```
public/translations/
en.json
fr.json
de.json
```
```json
{
"hello": "Hello",
"goodbye": "Goodbye"
}
```
## API
- **`$t(key, fallback?)`** - Translate in templates
- **`translate(key, fallback?)`** - Translate in JavaScript
- **`loadTranslations(path)`** - Load translations from any source
## Demo & Testing
🌐 **[Live Demo](https://vue-tiny-translation.netlify.app/)** - Try it now !
**Local Testing**: Clone and run the example locally:
```bash
cd example
npm install
npm run dev
```
Open `http://localhost:5173` and see the plugin working with automatic language detection!
## License
MIT © Makio64