{"id":13701332,"url":"https://github.com/edisdev/vue-i18n-service","last_synced_at":"2026-03-02T15:35:00.058Z","repository":{"id":57396231,"uuid":"148488658","full_name":"edisdev/vue-i18n-service","owner":"edisdev","description":"vue-i18n single file component exporter/importer","archived":false,"fork":false,"pushed_at":"2022-12-09T11:06:31.000Z","size":1324,"stargazers_count":144,"open_issues_count":7,"forks_count":16,"subscribers_count":5,"default_branch":"develop","last_synced_at":"2024-10-29T11:43:24.106Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/edisdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-12T13:55:12.000Z","updated_at":"2023-10-16T03:50:35.000Z","dependencies_parsed_at":"2023-01-25T18:00:47.124Z","dependency_job_id":null,"html_url":"https://github.com/edisdev/vue-i18n-service","commit_stats":null,"previous_names":["f/vue-i18n-service"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edisdev%2Fvue-i18n-service","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edisdev%2Fvue-i18n-service/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edisdev%2Fvue-i18n-service/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edisdev%2Fvue-i18n-service/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/edisdev","download_url":"https://codeload.github.com/edisdev/vue-i18n-service/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237964648,"owners_count":19394436,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-08-02T20:01:29.939Z","updated_at":"2025-10-24T12:31:18.275Z","avatar_url":"https://github.com/edisdev.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# vue-i18n-service\n\nThe translation team (not developers) wants **a** file with all the keys to translate. But I love to use translations in **Single File Components**.\n\nAnd I found a solution to make everyone happy: `vue-i18n-service export|import`\n\nVue I18n Service makes to manage SFC translations easier in a file. It collects all the `\u003ci18n\u003e` definitions in Single File Components and collects them into a file.\n\n## What's the flow:\n`Hello.vue`\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e{{ hello }}\u003c/div\u003e\n\u003c/template\u003e\n\n\u003ci18n\u003e\n{\n  \"en\": {\n    \"hello\": \"Hi 🙁\"\n  },\n  \"tr\": {\n    \"hello\": \"Selam\"\n  }\n}\n\u003c/i18n\u003e\n```\n\n⬇️`npx vue-i18n-service export \u003e translations.json`\n```json\n{\n  \"src/components/Hello.vue\": {\n    \"en\": {\n      \"hello\": \"Hi 🙁\"\n    },\n    \"tr\": {\n      \"hello\": \"Selam\"\n    }\n  }\n}\n```\n\n✏️`translations.edited.json`\n\n```json\n{\n  \"src/components/Hello.vue\": {\n    \"en\": {\n      \"hello\": \"Hello 🙂\"\n    },\n    \"tr\": {\n      \"hello\": \"Merhaba\"\n    }\n  }\n}\n```\n\n### Editing `translations.json` using Web UI\n\nOpen [https://edisdev.github.io/vue-i18n-translator/](https://edisdev.github.io/vue-i18n-translator/) and drop `translations.json` file which you've just generated. It will parse it and generate an useful interface to translate.\n\n![vue-i18n-translator](https://pbs.twimg.com/media/DnDZ5yYX0AAzJyN.png)\n\n⬇️`npx vue-i18n-service import \u003c translations.edited.json`\n```\nupdating file src/components/Hello.vue\n```\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e{{ hello }}\u003c/div\u003e\n\u003c/template\u003e\n\n\u003ci18n\u003e\n{\n  \"en\": {\n    \"hello\": \"Hello 🙂\"\n  },\n  \"tr\": {\n    \"hello\": \"Merhaba\"\n  }\n}\n\u003c/i18n\u003e\n```\n\nAnd all is OK. Doesn't matter how many files you have, it simply distributes without any problem and any conflict.\n\n## Exporting i18n's in SFCs\n\nThis will generate a `translations.json` file (or whatever you named).\n\n```bash\nnpx vue-i18n-service export \u003e translations.json\n```\n\nIt has a simple format:\n\n```json\n{\n  \"\u003cfile path\u003e\": {\n    \"\u003clocale\u003e\": {\n      \"\u003ckey\u003e\": \"\u003cvalue\u003e\"\n    }\n  }\n}\n```\n\nHere is an example:\n\n```json\n{\n  \"src/components/Hello.vue\": {\n    \"en\": {\n      \"hello\": \"Hello\"\n    },\n    \"tr\": {\n      \"hello\": \"Merhaba\"\n    }\n  },\n  \"src/views/World.vue\": {\n    \"en\": {\n      \"world\": \"World\"\n    },\n    \"tr\": {\n      \"world\": \"Dünya\"\n    }\n  }\n}\n```\n\n### --dir\n\nBy default, `vue-i18n-service` looks for SFCs in the `src/` directory, if your components are in another directory, specify it by passing the `--dir` flag:\n\n```bash\nnpx vue-i18n-service export --dir=client/ \u003e translations.json\n```\n\n## Importing `translations.json` file to the SFCs\n\nAfter bulk changing files, you can distribute import all the files calling `import` command.\n\n```bash\nnpx vue-i18n-service import \u003c translations.json\n```\n\nThis will update `.vue` files and replace them with changes.\n\n## Creating new locale from other locale\n  You can creating a new locale by copying another locale `create` command\n\n  ```bash\n  npx vue-i18n-service create 'newlocale' 'extendedLocale'\n  ```\n\n  \u003cimg src=\"./creatingExample.gif\"/\u003e\n\n\n## Contributors\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/f\" target=\"_blank\"\u003e\n        \u003cimg src=\"https://avatars2.githubusercontent.com/u/196477?s=460\u0026u=736ef621d19b9cd1b0a6ef10d75d678d93c42254\u0026v=4\"\n          width=\"100px;\" alt=\"Fatih Kadir Akın\" /\u003e\n      \u003c/a\u003e\n      \u003cbr /\u003e\n      \u003csub\u003e\u003cb\u003eFatih Kadir Akın\u003c/b\u003e\u003c/sub\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/edisdev\" target=\"_blank\"\u003e\n        \u003cimg\n          src=\"https://avatars0.githubusercontent.com/u/21293903?s=460\u0026u=548d3c8eb6665f6b9a51a28b613c431a8eec9126\u0026v=4\"\n          width=\"100px;\" alt=\"Hatice Edis\" /\u003e\n      \u003c/a\u003e\n      \u003cbr /\u003e\n      \u003csub\u003e\u003cb\u003eHatice Edis\u003c/b\u003e\u003c/sub\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/paulgv\" target=\"_blank\"\u003e\n        \u003cimg src=\"https://avatars1.githubusercontent.com/u/4895885?s=460\u0026u=e2c8e9491e35125dd80f5e1e8254e526e054bd34\u0026v=4\"\n          width=\"100px;\" alt=\"Paul Gascou-Vaillancourt\" /\u003e\n      \u003c/a\u003e\n      \u003cbr /\u003e\n      \u003csub\u003e\u003cb\u003ePaul Gascou-Vaillancourt\u003c/b\u003e\u003c/sub\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## License\n\nMIT.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedisdev%2Fvue-i18n-service","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fedisdev%2Fvue-i18n-service","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedisdev%2Fvue-i18n-service/lists"}