---
title: "Vue.js translation & i18n tutorials"
description: "Translate your Vue.js application with vue-i18n — setup, JSON translation files and language switching at runtime."
canonical: "https://www.codeandweb.com/tutorials/vuejs"
source: "html"
---

# Vue.js translation & i18n tutorials

Translate your Vue.js application with vue-i18n — setup, JSON translation files and language switching at runtime.  
We currently have these 4 tutorials [tagged](https://www.codeandweb.com/tags.md) with **vuejs**:

![How to translate your Vue.js 3 application with vue-i18n](https://www.codeandweb.com/static/06e0cbd5c4f41c3493bcb365199d8de8/d8f52/how-to-translate-your-vue-app-with-vue-i18n.png)

[How to translate your Vue.js 3 application with vue-i18n](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-vue-app-with-vue-i18n.md)

Free tutorial: Set up Vue.js with vue-i18n. Translate your templates, create and edit JSON translation files, switch languages at runtime. Covers Vue 3.

![Why using i18n sections in vue.js single file components is bad](https://www.codeandweb.com/static/21c2a1fb26c1eede4731a9209614a63f/d8f52/why-using-i18n-in-vue-files-is-a-bad-idea.png)

[Why using i18n sections in vue.js single file components is bad](https://www.codeandweb.com/babeledit/tutorials/why-using-i18n-sections-in-vue-single-component-files-is-a-bad-idea.md)

Using vue.js single file components with <i18n> sections for your translations? Learn why you should not do that and what alternatives there are.

![How to convert vue-i18n from single file components to JSON](https://www.codeandweb.com/static/f88752ecc8bfce9c00872bd3caca9a7c/d8f52/how-to-convert-vue-i18n-from-sfc-to-json.png)

[How to convert vue-i18n from single file components to JSON](https://www.codeandweb.com/babeledit/tutorials/how-to-convert-vue-i18n-from-sfc-to-json-files.md)

In this tutorial shows you how you can convert your vue-i18n project from using translations in vue files (single file components, sfc) to using JSON files.

![How to translate your Vue.js (v2) application with vue-i18n](https://www.codeandweb.com/static/06e0cbd5c4f41c3493bcb365199d8de8/d8f52/how-to-translate-your-vue-app-with-vue-i18n.png)

[How to translate your Vue.js (v2) application with vue-i18n](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-vue2-app-with-vue-i18n)

Free tutorial: Translate your Vue.js (Version 2) application with vue-i18n. Learn how to organise your translations in .vue or .json files.