{"id":24969696,"url":"https://github.com/positivecrash/gridsome-plugin-translateit","last_synced_at":"2025-06-18T03:07:16.274Z","repository":{"id":57254223,"uuid":"394591147","full_name":"positivecrash/gridsome-plugin-translateit","owner":"positivecrash","description":"Make Gridsome website multilangual","archived":false,"fork":false,"pushed_at":"2022-09-14T08:14:21.000Z","size":46,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-11T10:17:18.393Z","etag":null,"topics":["localization","translation"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/positivecrash.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-08-10T09:09:56.000Z","updated_at":"2022-08-22T12:36:58.000Z","dependencies_parsed_at":"2022-08-31T09:31:37.140Z","dependency_job_id":null,"html_url":"https://github.com/positivecrash/gridsome-plugin-translateit","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/positivecrash/gridsome-plugin-translateit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/positivecrash%2Fgridsome-plugin-translateit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/positivecrash%2Fgridsome-plugin-translateit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/positivecrash%2Fgridsome-plugin-translateit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/positivecrash%2Fgridsome-plugin-translateit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/positivecrash","download_url":"https://codeload.github.com/positivecrash/gridsome-plugin-translateit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/positivecrash%2Fgridsome-plugin-translateit/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260477920,"owners_count":23015064,"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":["localization","translation"],"created_at":"2025-02-03T14:51:38.782Z","updated_at":"2025-06-18T03:07:11.255Z","avatar_url":"https://github.com/positivecrash.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Make Gridsome website multilangual\n\nSimple plugin to translate websites.\n\n## Install\n\n`npm install gridsome-plugin-translateit`\n\n## Usage\n\n### 1. gridsome.config.js\n\nInstall packages `js-yaml` and `fs` if not installed.\n\n```js\nconst yaml = require('js-yaml')\nconst fs   = require('fs')\n\nmodule.exports = {\n  plugins: [\n    {\n        {\n            use: \"gridsome-plugin-translateit\",\n            options: {\n                locales: [\"en\", \"ru\", \"zh\"],\n                defaultLocale: \"en\",\n                slugifyDefaultLocale: false, // this is default value; set 'true' if you want to add locale to all pathes, including default\n                translations: yaml.load(fs.readFileSync('./src/data/locales/translations.yaml', 'utf8')),\n                collections: ['blog'], // any collection name\n                exclude: [\"/404/\", \"/sitemap.xml/\"], // this is default value\n                routes: yaml.load(fs.readFileSync('./src/data/locales/routes.yaml', 'utf8')),\n            }\n        }\n    }\n  ]\n};\n```\n\n### 2. Create and edit routes.yaml\n\nAll pathes for pages that you need translate. Use option `typename: 'page'` for text page or `typename: 'component'` for collection page (this option is required for correct path translation).\n\n```yaml\n- path: '/'\n  component: './src/pages/index.vue'\n  typename: 'page'\n- path: '/another-page'\n  component: './src/pages/anotherPage.vue'\n  typename: 'page'\n- path: '/blog/'\n  component: './src/pages/blog.vue'\n  typename: 'component'\n```\n\n### 3. Create and edit translations.yaml\n\n```yaml\n- alias: index_title\n  en: This is some awesome title\n  ru: Это какой-то классный заголовок\n  zh: 这是一个很棒的标题\n```\n\n### 4. Use it on page\n\nFor example, let's add translation for the title on Index page **./src/pages/index.vue**\n\n```html\n\u003ch1 v-if=\"$ts('index_title')\"\u003e{{$ts('index_title')}}\u003c/h1\u003e\n```\n\n* You don't need to create any other files for pages, just use routes.yaml to share with plugin your plans. Localized pages will be generated automatically from routes.yaml.\n* If for some reason there is no translation for current alias, plugin will insert alias text. E.g. `$ts('This is title')` will display `This is title` for all languages, if there is no alias 'This is title'.\n\n### 5. Create collections\n\n**Folder structure**\n\nLet's suppose you have one collection on your website named 'blog'.\n\n*1 way, if you chosen option `slugifyDefaultLocale: false`:*\n\n```\n--- blog\n    |_ ru\n        |_images\n        |_post.md\n    |_ zh\n        |_images\n        |_post.md\n    |_images\n    |_post.md\n```\n\n*2 way, if you chosen option `slugifyDefaultLocale: true`:*\n\n```\n--- blog\n    |_ en\n        |_images\n        |_post.md\n    |_ ru\n        |_images\n        |_post.md\n    |_ zh\n        |_images\n        |_post.md\n```\n\nor\n\n```\n--- blog\n    |_images\n    |_ en\n        |_post.md\n    |_ ru\n        |_post.md\n    |_ zh\n        |_post.md\n```\n\n**Set attribute for post**\n\nFor all posts set attribute at the top of the Markdown file (this is set between triple-dashed lines) *locale: 'locale_code'*. You need to set it for all locales even if *slugifyDefaultLocale: false*. For example, both for `/blog/en/post.md` and `/blog/post.md` you will set `locale: 'en'`.\n\n```yaml\n---\ntitle: The post title\ndate: 2021-08-04\npublished: true\nlocale: 'en'\n---\n```\n\n**Edit gridsome.config.js**\n\nAdd all your collections name in option *collections*, e.g. `collections: ['blog']`\n\n**Filter posts**\n\nLet's say you have page for blog with list of all posts *./src/pages/blog.vue*. To show only posts with current locale you need to filter it while quering. e.g.\n\n```js\n\u003cpage-query\u003e\nquery ($locale: String!) {\n  \n  posts: allPost(filter: { published: { eq: true }, locale: { eq: $locale } }) {\n    edges {\n      node {\n        id\n        title\n        date (format: \"D. MMMM YYYY\")\n        description\n        cover_image (width: 1500, quality: 100)\n        path\n      }\n    }\n  }\n}\n\u003c/page-query\u003e\n```\n\n\n### 6. Helpers\n\nYou can manipulate locales, translate strings, translate paths within components.\n\n- `$locale` – current locale\n- `$defaultLocale` – default locale\n- `$ts('text')` – translate string; translations are taken from the file in config `translations: ...`\n- `$tp(path_without_locale)` – path will automatically generated with current locale\n- `$setLocale(new_locale)` – set new locale\n\n### 7. Example of switcher component\n\n```js\n\u003ctemplate\u003e\n\n    \u003cselect v-if=\"$localesList\" tabindex=\"0\" @change=\"changelocale($event)\"\u003e\n  \n      \u003ctemplate v-for=\"(item,key) in $localesList\"\u003e\n        \u003coption v-bind:key=\"key\" :selected=\"item == $locale\" v-bind:value=\"item\"\u003e{{ item }}\u003c/option\u003e\n      \u003c/template\u003e\n\n    \u003c/select\u003e\n\n\u003c/template\u003e\n\n\u003cscript\u003e\n\nexport default {\n\n  methods: {\n    changelocale(event) {\n\n        // get chosen locale\n        let lang = event.target.value\n\n        //update locale in options\n        this.$setLocale(lang)\n\n        //redirect to page with chosen locale\n        let newpath = this.$tp(this.$route.path, lang)\n        window.location.href = newpath\n\n    }\n  }\n\n}\n\n\u003c/script\u003e\n```\n\n### Path translation\n\nSet `slugifyDefaultLocale: false` while configuring your project to save your pathes on websites clean by default. It is helpfull if you are translating already existing website, so you don't need to redirect pathes from default to translated.\n\n### Exclude\n\nSome routes plugin can ignore. 404 page and sitemap.xml are set no to translate by default.\n\nSo e.g. path website-url/sitemap.xml will remain without translations.\n\nYou still can use `$ts()` helper within 404, content will be translated but pathes are not.\n\n\n### Troubleshoting\n\nIf you have any troubles, [create issue](https://github.com/positivecrash/gridsome-plugin-translateit/issues) on Github","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpositivecrash%2Fgridsome-plugin-translateit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpositivecrash%2Fgridsome-plugin-translateit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpositivecrash%2Fgridsome-plugin-translateit/lists"}