A minimalist reactive translation plugin for Vue 3. Super lightweight (0.32KB gzipped), simple, and efficient internationalization solution.

🌐 Live Demo - Try it now !

• 🚀 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

npm install vue-tiny-translation

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')

<template> <div> <h1>{{ $t('hello') }}</h1> <p>{{ $t('goodbye') }}</p> <button @click="changeLanguage">Change Language</button> </div> </template> <script> 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')  }  } } </script>

// Load from anywhere await loadTranslations('/translations/en.json') // Local files await loadTranslations('/api/translations/en') // API endpoints

public/translations/ en.json fr.json de.json 

{ "hello": "Hello", "goodbye": "Goodbye" }

• $t(key, fallback?) - Translate in templates
• translate(key, fallback?) - Translate in JavaScript
• loadTranslations(path) - Load translations from any source

🌐 Live Demo - Try it now !

Local Testing: Clone and run the example locally:

cd example npm install npm run dev

Open http://localhost:5173 and see the plugin working with automatic language detection!

MIT © Makio64