{"id":20817280,"url":"https://github.com/intlify/vue-i18n-loader","last_synced_at":"2025-05-16T13:07:30.075Z","repository":{"id":37028606,"uuid":"86607372","full_name":"intlify/vue-i18n-loader","owner":"intlify","description":":globe_with_meridians: vue-i18n loader for custom blocks","archived":false,"fork":false,"pushed_at":"2025-02-27T22:01:42.000Z","size":1530,"stargazers_count":267,"open_issues_count":22,"forks_count":29,"subscribers_count":6,"default_branch":"v1.x","last_synced_at":"2025-04-12T10:57:55.999Z","etag":null,"topics":["custom-blocks","i18n","loader","single-file-component","vue","vue-i18n","vue-loader","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/intlify.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"kazupon","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"custom":null}},"created_at":"2017-03-29T16:53:26.000Z","updated_at":"2025-04-01T07:27:15.000Z","dependencies_parsed_at":"2024-05-07T19:25:14.196Z","dependency_job_id":"1119ec78-fdbf-4f56-8a1d-922d706dade3","html_url":"https://github.com/intlify/vue-i18n-loader","commit_stats":{"total_commits":132,"total_committers":14,"mean_commits":9.428571428571429,"dds":0.2954545454545454,"last_synced_commit":"ed4dc8c213c25ce23af06f7581461e5582dfe671"},"previous_names":["kazupon/vue-i18n-loader"],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intlify%2Fvue-i18n-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intlify%2Fvue-i18n-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intlify%2Fvue-i18n-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intlify%2Fvue-i18n-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/intlify","download_url":"https://codeload.github.com/intlify/vue-i18n-loader/tar.gz/refs/heads/v1.x","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254535829,"owners_count":22087399,"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":["custom-blocks","i18n","loader","single-file-component","vue","vue-i18n","vue-loader","webpack"],"created_at":"2024-11-17T21:40:26.683Z","updated_at":"2025-05-16T13:07:30.055Z","avatar_url":"https://github.com/intlify.png","language":"TypeScript","funding_links":["https://github.com/sponsors/kazupon"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg width=\"373px\" height=\"168px\" src=\"./assets/vue-i18n-loader.png\" alt=\"Vue I18n Loader logo\"\u003e\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003e@intlify/vue-i18n-loader\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/intlify/vue-i18n-loader/actions?query=workflow%3ATest\"\u003e\u003cimg src=\"https://github.com/intlify/vue-i18n-loader/workflows/Test/badge.svg\" alt=\"Build Status\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@intlify/vue-i18n-loader\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@intlify/vue-i18n-loader.svg\" alt=\"npm\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003ewebpack loader for Vue I18n\u003c/p\u003e\n\n\u003cbr/\u003e\n\n## :warning: Notice\n\nThis package is maintained for Vue I18n v8 (Vue 2).\n\nIf you want to use Vue I18n v9 (Vue 3) or later, See the [`@intlify/bundle-tools`](https://github.com/intlify/bundle-tools) repo.\n\n\n## :cd: Installation\n\n    $ npm i --save-dev @intlify/vue-i18n-loader\n\n## :rocket: Usage\n\nthe below example that`App.vue` have `i18n` custom block:\n\n### Basic\n\n```vue\n\u003ctemplate\u003e\n  \u003cp\u003e{{ $t('hello') }}\u003c/p\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  name: 'app',\n  // ...\n}\n\u003c/script\u003e\n\n\u003ci18n\u003e\n{\n  \"en\": {\n    \"hello\": \"hello world!\"\n  },\n  \"ja\": {\n    \"hello\": \"こんにちは、世界!\"\n  }\n}\n\u003c/i18n\u003e\n```\n\nThe locale messages defined at  `i18n` custom blocks are **json format default**.\n\n### Source importing\n\nyou also can:\n\n```vue\n\u003ci18n src=\"./myLang.json\"\u003e\u003c/i18n\u003e\n```\n\n```json5\n// ./myLnag.json\n{\n  \"en\": {\n    \"hello\": \"hello world!\"\n  },\n  \"ja\": {\n    \"hello\": \"こんにちは、世界!\"\n  }\n}\n```\n\n### Locale definition\n\nYou can define locale messages for each locale with `locale` attr in single-file components:\n\n```vue\n\u003ci18n locale=\"en\"\u003e\n{\n  \"hello\": \"hello world!\"\n}\n\u003c/i18n\u003e\n\n\u003ci18n locale=\"ja\"\u003e\n{\n  \"hello\": \"こんにちは、世界!\"\n}\n\u003c/i18n\u003e\n```\n\nThe above defines two locales, which are merged at target single-file components.\n\n\n### Locale Messages formatting\n\nBesides json format, You can be used by specifying the following format in the `lang` attribute:\n\n- yaml\n- json5\n\nexample yaml foramt:\n\n```vue\n\u003ci18n locale=\"en\" lang=\"yaml\"\u003e\n  hello: \"hello world!\"\n\u003c/i18n\u003e\n\n\u003ci18n locale=\"ja\" lang=\"yml\"\u003e\n  hello: \"こんにちは、世界！\"\n\u003c/i18n\u003e\n```\n\nexample json5 format:\n\n```vue\n\u003ci18n lang=\"json5\"\u003e\n{\n  \"en\": {\n    // comments\n    \"hello\": \"hello world!\"\n  }\n}\n\u003c/i18n\u003e\n```\n\n### JavaScript\n\n```javascript\nimport Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport App from './App.vue'\n\nVue.use(VueI18n)\n\nconst i18n = new VueI18n({\n  locale: 'en',\n  messages: {\n    en: {\n      // ...\n    },\n    ja: {\n      // ...\n    }\n  }\n})\nnew Vue({\n  i18n,\n  render: h =\u003e h(App)\n}).$mount('#app')\n```\n\n### Webpack Config\n\n`vue-loader` (v15 or later):\n\n```javascript\n// for vue.config.js (Vue CLI)\nmodule.exports = {\n  chainWebpack: config =\u003e {\n    config.module\n      .rule('i18n')\n      .resourceQuery(/blockType=i18n/)\n      .type('javascript/auto')\n      .use('i18n')\n      .loader('@intlify/vue-i18n-loader')\n  }\n}\n```\n\n`vue-loader` (v15 or later):\n\n```javascript\n// for webpack.config.js (Without Vue CLI)\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        resourceQuery: /blockType=i18n/,\n        type: 'javascript/auto',\n        loader: '@intlify/vue-i18n-loader',\n      },\n    ]\n  }\n}\n```\n\n`vue-loader` (~v14.x):\n\n```javascript\n// for webpack config file\nmodule.exports = {\n  module: {\n    rules: [{\n      test: /\\.vue$/,\n      loader: 'vue',\n      options: {\n        loaders: {\n          i18n: '@intlify/vue-i18n-loader'\n        }\n      }\n    }]\n  }\n}\n```\n\n## :scroll: Changelog\nDetails changes for each release are documented in the [CHANGELOG.md](https://github.com/intlify/vue-i18n-loader/blob/master/CHANGELOG.md).\n\n## :muscle: Contribution\nPlease make sure to read the [Contributing Guide](https://github.com/intlify/vue-i18n-loader/blob/master/.github/CONTRIBUTING.md) before making a pull request.\n\n## :copyright: License\n\n[MIT](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintlify%2Fvue-i18n-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fintlify%2Fvue-i18n-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintlify%2Fvue-i18n-loader/lists"}