[
  {
    "path": ".babelrc",
    "content": "{\n  \"presets\": [\"@vue/app\"],\n  \"plugins\": [\n    \"@babel/plugin-proposal-class-properties\",\n    \"@babel/plugin-syntax-flow\",\n    \"@babel/plugin-transform-flow-strip-types\",\n    \"babel-plugin-espower\"\n  ],\n  \"env\": {\n    \"test\": {\n      \"plugins\": [\"istanbul\"],\n      \"presets\": [\"power-assert\"]\n    }\n  },\n  \"ignore\": [\n    \"dist/*.js\"\n  ]\n}\n"
  },
  {
    "path": ".dependabot/config.yml",
    "content": "version: 1\nupdate_configs:\n  - package_manager: \"javascript\"\n    directory: \"/\"\n    update_schedule: \"weekly\""
  },
  {
    "path": ".editorconfig",
    "content": "root = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\nend_of_line = lf\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n"
  },
  {
    "path": ".eslintignore",
    "content": "config/*.js\n"
  },
  {
    "path": ".eslintrc.js",
    "content": "module.exports = {\n  root: true,\n  parserOptions: {\n    ecmaVersion: 2018,\n  },\n  plugins: ['flowtype', 'ie11', 'no-autofix'],\n  extends: [\n    'plugin:flowtype/recommended'\n  ],\n  rules: {\n    'ie11/no-collection-args': [ 'error' ],\n    'ie11/no-for-in-const': [ 'error' ],\n    'ie11/no-loop-func': [ 'warn' ],\n    'ie11/no-weak-collections': [ 'error' ],\n    'prefer-const': 'off',\n    'no-autofix/prefer-const': 'warn',\n    'object-curly-spacing': ['error', 'always'],\n    'no-multiple-empty-lines': ['error', { max: 2, maxBOF: 1 }]\n  }\n}\n"
  },
  {
    "path": ".flowconfig",
    "content": "[ignore]\n.*/node_modules/.*\n.*/docs/.*\n.*/test/.*\n.*/types/.*\n.*/config/.*\n.*/examples/.*\n\n[include]\n\n[libs]\ndecls\n\n[options]\nunsafe.enable_getters_and_setters=true\nsuppress_comment= \\\\(.\\\\|\\n\\\\)*\\\\$FlowFixMe\n"
  },
  {
    "path": ".github/FUNDING.yml",
    "content": "# These are supported funding model platforms\n\ngithub: kazupon\npatreon: # kazupon\nopen_collective: # Replace with a single Open Collective username\nko_fi: # Replace with a single Ko-fi username\ntidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel\nissuehunt: # kazupon\ncustom: # Replace with a single custom sponsorship URL\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/bug-report.yml",
    "content": "name: \"\\U0001F41E Bug report\"\ndescription: Report an issue\nlabels: ['Status: Review Needed']\nbody:\n  - type: markdown\n    attributes:\n      value: |\n        Thanks for taking the time to fill out this bug report!\n  - type: textarea\n    id: bug-description\n    attributes:\n      label: Reporting a bug?\n      description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks!\n      placeholder: Bug description\n    validations:\n      required: true\n  - type: textarea\n    id: expected-behavior\n    attributes:\n      label: Expected behavior\n      description: A clear and concise description of what you expected to happen.\n      placeholder: Expected behavior\n    validations:\n      required: true\n  - type: textarea\n    id: reproduction\n    attributes:\n      label: Reproduction\n      description: |\n        Please provide a link to a repo that can reproduce the problem you ran into. https://jsfiddle.net/kazupon/rn724baz/3/ A reproduction is required unless you are absolutely sure that the issue is obvious and the provided information is enough to understand the problem. If a report is vague (e.g. just a generic error message) and has no reproduction, it will receive a \"Status: Need More Info\" label. If no reproduction is provided after 5 days, it will be closed.\n      placeholder: Reproduction\n    validations:\n      required: true\n  - type: textarea\n    id: system-info\n    attributes:\n      label: System Info\n      description: Output of `npx envinfo --system --npmPackages '{vue*,@vue/*,vue-i18n*,@intlify/*,vite*,@vitejs/*}' --binaries --browsers`\n      render: shell\n      placeholder: System, Binaries, Browsers\n    validations:\n      required: true\n  - type: textarea\n    id: screenshot\n    attributes:\n      label: Screenshot\n      description: If applicable, add screenshots to help explain your problem\n      placeholder: screnshot\n  - type: textarea\n    id: additional-context\n    attributes:\n      label: Additional context\n      description: Add any other context about the problem here\n      placeholder: more context here\n  - type: checkboxes\n    id: checkboxes\n    attributes:\n      label: Validations\n      description: Before submitting the issue, please make sure you do the following\n      options:\n        - label: Read the [Contributing Guidelines](https://github.com/kazupon/vue-i18n/blob/v8.x/CONTRIBUTING.md)\n          required: true\n        - label: Read the [Documentation](https://kazupon.github.io/vue-i18n/)\n          required: true\n        - label: Check that there isn't [already an issue](https://github.com/kazupon/vue-i18n/issues) that reports the same bug to avoid creating a duplicate.\n          required: true\n        - label: Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/kazupon/vue-i18n/discussions)\n          required: true\n        - label: The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.\n          required: true\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/config.yml",
    "content": "blank_issues_enabled: false\ncontact_links:\n  - name: Discord Chat at Vue Land\n    url: https://chat.vuejs.org/\n    about: For simple beginner questions, you can get quick answers from Discord\n  - name: Questions & Discussions\n    url: https://github.com/kazupon/vue-i18n/discussions\n    about: Use GitHub discussions for message-board style questions and discussions.\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/feature_request.yml",
    "content": "name: \"\\U0001F680 New feature proposal\"\ndescription: Propose a new feature\nlabels: ['Status: Proposal']\nbody:\n  - type: markdown\n    attributes:\n      value: |\n        Thanks for your interest in the project and taking the time to fill out this feature report!\n  - type: textarea\n    id: feature-description\n    attributes:\n      label: Clear and concise description of the problem\n      description: If you intend to submit a PR for this issue, tell us in the description. Thanks!\n    validations:\n      required: true\n  - type: textarea\n    id: suggested-solution\n    attributes:\n      label: Suggested solution\n      description: 'In module [xy] we could provide following implementation...'\n    validations:\n      required: true\n  - type: textarea\n    id: alternative\n    attributes:\n      label: Alternative\n      description: Clear and concise description of any alternative solutions or features you've considered.\n  - type: textarea\n    id: additional-context\n    attributes:\n      label: Additional context\n      description: Any other context or screenshots about the feature request here.\n  - type: checkboxes\n    id: checkboxes\n    attributes:\n      label: Validations\n      description: Before submitting the issue, please make sure you do the following\n      options:\n        - label: Read the [Contributing Guidelines](https://github.com/kazupon/vue-i18n/blob/v8.x/CONTRIBUTING.md)\n          required: true\n        - label: Read the [Documentation](https://kazupon.github.io/vue-i18n/)\n          required: true\n        - label: Check that there isn't already an issue that request the same feature to avoid creating a duplicate.\n          required: true\n"
  },
  {
    "path": ".github/workflows/ci.yml",
    "content": "name: Test\non:\n  push:\n    branches-ignore:\n      - gh-pages\n      - releases/**\n  pull_request:\n    branches-ignore:\n      - gh-pages\n      - releases/**\n    types:\n      - opened\n      - synchronize\n      - reopened\nenv:\n  CI: true\n  TZ: Asia/Tokyo\n  CHROME_BIN: /usr/bin/google-chrome\n\njobs:\n  build:\n    name: \"Build on Node.js ${{ matrix.node }} OS: ${{matrix.os}}\"\n    runs-on: ${{ matrix.os }}\n    strategy:\n      matrix:\n        os: [ubuntu-latest]\n        node: [18]\n    steps:\n      - name: Checkout codes\n        uses: actions/checkout@v4\n\n      - name: Setup node\n        uses: actions/setup-node@v3\n        with:\n          node-version: ${{ matrix.node}}\n          cache: 'yarn'\n\n      - name: Install\n        run: yarn install --frozen-lockfile\n\n      - name: Build\n        run: yarn build\n\n      - name: Cache dist\n        uses: actions/cache@v3\n        with:\n          path: dist\n          key: ${{ matrix.os }}-node-v${{ matrix.node }}-${{ github.sha }}\n\n  lint:\n    name: \"Lint on Node.js ${{ matrix.node }} OS: ${{matrix.os}}\"\n    runs-on: ${{ matrix.os }}\n    strategy:\n      matrix:\n        os: [ubuntu-latest]\n        node: [18]\n    steps:\n      - name: Checkout codes\n        uses: actions/checkout@v3\n\n      - name: Setup node\n        uses: actions/setup-node@v3\n        with:\n          node-version: ${{ matrix.node }}\n          cache: 'yarn'\n\n      - name: Install\n        run: yarn install --frozen-lockfile\n\n      - name: Lint\n        run: yarn lint\n\n  test:\n    needs:\n      - build\n    name: \"Test on Node.js ${{ matrix.node }} OS: ${{matrix.os}}\"\n    runs-on: ${{ matrix.os }}\n    strategy:\n      matrix:\n        os: [ubuntu-latest]\n        node: [18]\n    steps:\n      - name: Setup google chrome\n        uses: browser-actions/setup-chrome@latest\n        with:\n          chrome-version: stable\n      - run: chrome --version\n\n      - name: Setup firefox\n        uses: browser-actions/setup-firefox@latest\n        with:\n          firefox-version: latest\n      - run: firefox --version\n\n      - name: Checkout codes\n        uses: actions/checkout@v3\n\n      - name: Setup node\n        uses: actions/setup-node@v3\n        with:\n          node-version: ${{ matrix.node }}\n          cache: 'yarn'\n\n      - name: Install\n        run: yarn install --frozen-lockfile\n\n      - name: Flow Types\n        run: yarn flow\n\n      - name: TS Types\n        run: yarn test:types\n\n      - name: Test Coverage\n        run: yarn test:cover\n\n      - name: Unit tests\n        run: yarn test:unit:ci\n\n      - name: Restore dist cache\n        uses: actions/cache@v3\n        with:\n          path: dist\n          key: ${{ matrix.os }}-node-v${{ matrix.node }}-${{ github.sha }}\n\n      - name: E2E Tests\n        run: xvfb-run --auto-servernum yarn test:e2e\n"
  },
  {
    "path": ".github/workflows/release.yml",
    "content": "name: Release\n\non:\n  pull_request:\n    types:\n      - closed\n\njobs:\n  release:\n    name: Release\n    if: github.event.pull_request.merged == true && contains(github.event.pull_request.labels.*.name, 'release')\n    runs-on: Ubuntu-latest\n    steps:\n      - uses: actions/checkout@v2\n      - uses: actions/setup-node@v1\n        with:\n          registry-url: \"https://registry.npmjs.org\"\n      - run: git switch master\n      - run: |\n          if [ -f \"yarn.lock\" ]; then\n            yarn install\n          else\n            npm install\n          fi\n      - run: npm run release:trigger\n        env:\n          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}\n          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}\n          SLACK_INCOMING_HOOK: ${{ secrets.SLACK_INCOMING_HOOK }}"
  },
  {
    "path": ".gitignore",
    "content": "lib\ncoverage\ndist/*.gz\ndocs/_book\ntest/e2e/report\ntest/e2e/screenshots\nnode_modules\nvuepress/.vuepress/dist\n.DS_Store\n.idea\n.vscode\n.env\n*.log\n*.swp\n*~\n"
  },
  {
    "path": ".mergify.yml",
    "content": "pull_request_rules:\n  - name: merge pull requests from dependabot if CI passes\n    conditions:\n    - author=dependabot[bot]\n    - status-success=ci/circleci\n    actions:\n      merge:\n        method: merge"
  },
  {
    "path": ".npmignore",
    "content": ".*\n*.log\n*.swp\n*.yml\ncoverage\ndocs/_book\nconfig\ndist/*.map\nlib\ntest\n"
  },
  {
    "path": "BACKERS.md",
    "content": "# Backers\n\nYou can join them in supporting vue-i18n & Intlify project development by [pledging on GitHub](https://github.com/sponsors/kazupon)! Backers in the same pledge level appear in the order of pledge date.\n\n<h2 align=\"center\">Platinum Sponsors</h2>\n\n<p align=\"center\">\n  <a href=\"https://zenarchitects.co.jp/\" target=\"_blank\">\n    <img\n      src=\"https://raw.githubusercontent.com/kazupon/vue-i18n/v8.x/vuepress/.vuepress/public/patrons/zenarchitects.png\"\n      width=\"600px\"\n    />\n  </a>\n</p>\n\n<h2 align=\"center\">Special Sponsors</h2>\n\n<p align=\"center\">\n  <a href=\"ttps://plaid.co.jp/\" target=\"_blank\">\n    <img\n      src=\"https://raw.githubusercontent.com/kazupon/vue-i18n/v8.x/vuepress/.vuepress/public/patrons/plaid.png\"\n      width=\"400px\"\n    />\n  </a>\n</p>\n\n<h2 align=\"center\">Gold Sponsors</h2>\n\n<p align=\"center\">\n  <a href=\"https://nuxtjs.org/\" target=\"_blank\">\n    <img\n      src=\"https://raw.githubusercontent.com/kazupon/vue-i18n/v8.x/vuepress/.vuepress/public/patrons/nuxt.png\"\n      width=\"400px\"\n    />\n  </a>\n</p>\n\n<p align=\"center\">\n  <a \n    href=\"https://localazy.com/blog/how-to-localize-vuejs-app-with-vue-i18n-and-localazy?utm_source=kazupon&utm_medium=banner&utm_campaign=sponsorships_kazupon&utm_content=logo\"\n    target=\"_blank\">\n    <img\n      src=\"https://raw.githubusercontent.com/kazupon/vue-i18n/v8.x/vuepress/.vuepress/public/patrons/localazy.svg\"\n      width=\"400px\"\n    />\n  </a>\n</p>\n\n<p align=\"center\">\n  <a \n    href=\"https://crowdin.com/teams/engineering?utm_source=vue-i18n.intlify.dev&utm_medium=referral\"\n    target=\"_blank\">\n    <img\n      src=\"https://raw.githubusercontent.com/kazupon/vue-i18n/v8.x/vuepress/.vuepress/public/patrons/crowdin.svg\"\n      width=\"400px\"\n    />\n  </a>\n</p>\n\n[It could be you!](https://www.patreon.com/bePatron?c=1597144&patAmt=500.0)\n\n<h2 align=\"center\">Sliver Sponsors</h2>\n\n[It could be you!](https://www.patreon.com/bePatron?c=1597144&patAmt=250.0)\n\n<h2 align=\"center\">Bronze Sponsors</h2>\n\n<p align=\"center\">\n  <a href=\"https://www.vuemastery.com/\" target=\"_blank\">\n    <img\n      src=\"https://raw.githubusercontent.com/kazupon/vue-i18n/v8.x/vuepress/.vuepress/public/patrons/vuemastery.png\"\n      width=\"200px\"\n    />\n  </a>\n</p>\n\n- [Illyism](https://github.com/Illyism)\n\n[It could be you!](https://www.patreon.com/bePatron?c=1597144&patAmt=100.0)\n\n<h2 align=\"center\">Awesome Supporters</h2>\n\n- [Shinya Katayama](https://github.com/ktsn)\n- [Jeffrey Rennie](https://github.com/surferjeff)\n\n[It could be you!](https://www.patreon.com/bePatron?c=1597144&patAmt=20.0)\n"
  },
  {
    "path": "CHANGELOG.md",
    "content": "## v8.28.2 (2022-10-31)\n\n#### :bug: Bug Fixes\n* [#1575](https://github.com/kazupon/vue-i18n/pull/1575) fix(datetime): fixing calender typo ([@MKhasib](https://github.com/MKhasib))\n\n#### Committers: 1\n- Majd Khasib ([@MKhasib](https://github.com/MKhasib))\n\n## v8.28.1 (2022-10-31)\n\n#### :zap: Improved Features\n* [#1572](https://github.com/kazupon/vue-i18n/pull/1572) fix(datetime): support all key format object (kazupon#1571) ([@majdkhasib](https://github.com/majdkhasib))\n\n#### Committers: 1\n- [@majdkhasib](https://github.com/majdkhasib)\n\n## v8.28.0 (2022-10-30)\n\n#### :star: New Features\n* [#1569](https://github.com/kazupon/vue-i18n/pull/1569) fix(datetime): $d supports key format object (#1502) ([@horitaka](https://github.com/horitaka))\n\n#### Committers: 1\n- [@horitaka](https://github.com/horitaka)\n\n## v8.27.2 (2022-06-20)\n\n#### :bug: Bug Fixes\n* [#1512](https://github.com/kazupon/vue-i18n/pull/1512) Allow modifiers names in pascalCase ([@nofacez](https://github.com/nofacez))\n\n#### :pencil: Documentation\n* [#1505](https://github.com/kazupon/vue-i18n/pull/1505) Update interpolation.md ([@victor1014](https://github.com/victor1014))\n\n#### Committers: 2\n- Mikhail ([@nofacez](https://github.com/nofacez))\n- Victor ([@victor1014](https://github.com/victor1014))\n\n## v8.27.1 (2022-03-29)\n\n#### :zap: Improved Features\n* [#1488](https://github.com/kazupon/vue-i18n/pull/1488) Allow colon in locale message keys used in linked locale messages ([@ax-jmckenzie](https://github.com/ax-jmckenzie))\n\n#### :pencil: Documentation\n* [#1462](https://github.com/kazupon/vue-i18n/pull/1462) Restrict version to 8 for installing npm package ([@arpi17](https://github.com/arpi17))\n\n#### Committers: 2\n- James McKenzie ([@ax-jmckenzie](https://github.com/ax-jmckenzie))\n- Árpád Illyés ([@arpi17](https://github.com/arpi17))\n\n## v8.27.0 (2022-01-21)\n\n#### :star: New Features\n* [#1441](https://github.com/kazupon/vue-i18n/pull/1441) feat: add a new option fallbackRootWithEmptyString ([@PeterAlfredLee](https://github.com/PeterAlfredLee))\n\n#### Committers: 1\n- Lee ([@PeterAlfredLee](https://github.com/PeterAlfredLee))\n\n## v8.26.8 (2021-12-28)\n\n#### :zap: Improved Features\n* [#1429](https://github.com/kazupon/vue-i18n/pull/1429) improvement: type definition order for vue-i18n-bridge integration ([@kazupon](https://github.com/kazupon))\n\n#### :pencil: Documentation\n* [#1416](https://github.com/kazupon/vue-i18n/pull/1416) Update links to i18n Ally in tooling docs ([@FloEdelmann](https://github.com/FloEdelmann))\n\n#### Committers: 2\n- Flo Edelmann ([@FloEdelmann](https://github.com/FloEdelmann))\n- kazuya kawaguchi ([@kazupon](https://github.com/kazupon))\n\n## v8.26.7 (2021-11-02)\n\n#### :bug: Bug Fixes\n* [#1411](https://github.com/kazupon/vue-i18n/pull/1411) fix: cannot work watchLocale on vue-i18n-bridge ([@kazupon](https://github.com/kazupon))\n\n#### Committers: 1\n- kazuya kawaguchi ([@kazupon](https://github.com/kazupon))\n\n## v8.26.6 (2021-11-02)\n\n#### :zap: Improved Features\n* [#1409](https://github.com/kazupon/vue-i18n/pull/1409) improvement: notify locale changing to composer ([@kazupon](https://github.com/kazupon))\n\n#### Committers: 1\n- kazuya kawaguchi ([@kazupon](https://github.com/kazupon))\n\n## v8.26.5 (2021-10-01)\n\n#### :zap: Improved Features\n* [#1396](https://github.com/kazupon/vue-i18n/pull/1396) Revert \"improvement:  $i18n property deinition for vue-i18n-bridge\" ([@kazupon](https://github.com/kazupon))\n\n#### Committers: 1\n- kazuya kawaguchi ([@kazupon](https://github.com/kazupon))\n\n## v8.26.4 (2021-10-01)\n\n#### :zap: Improved Features\n* [#1394](https://github.com/kazupon/vue-i18n/pull/1394) improvement:  $i18n property deinition for vue-i18n-bridge ([@kazupon](https://github.com/kazupon))\n\n#### Committers: 1\n- kazuya kawaguchi ([@kazupon](https://github.com/kazupon))\n\n## v8.26.3 (2021-09-30)\n\n#### :zap: Improved Features\n* [#1392](https://github.com/kazupon/vue-i18n/pull/1392) improvement: vue-i18n-loader bridge mode ([@kazupon](https://github.com/kazupon))\n\n#### Committers: 1\n- kazuya kawaguchi ([@kazupon](https://github.com/kazupon))\n\n## v8.26.2 (2021-09-28)\n\n#### :zap: Improved Features\n* [#1390](https://github.com/kazupon/vue-i18n/pull/1390) improvement: add flags for vue-i18n-bridge ([@kazupon](https://github.com/kazupon))\n\n#### Committers: 1\n- kazuya kawaguchi ([@kazupon](https://github.com/kazupon))\n\n## v8.26.1 (2021-09-23)\n\n#### :zap: Improved Features\n* [#1388](https://github.com/kazupon/vue-i18n/pull/1388) feat: add sync property ([@kazupon](https://github.com/kazupon))\n\n#### Committers: 1\n- kazuya kawaguchi ([@kazupon](https://github.com/kazupon))\n\n## v8.26.0 (2021-09-22)\n\n#### :star: New Features\n* [#1385](https://github.com/kazupon/vue-i18n/pull/1385) feat: support for vue-i18n-bridge ([@kazupon](https://github.com/kazupon))\n\n#### Committers: 1\n- kazuya kawaguchi ([@kazupon](https://github.com/kazupon))\n\n## v8.25.1 (2021-09-13)\n\n#### :bug: Bug Fixes\n* [#1381](https://github.com/kazupon/vue-i18n/pull/1381) fix: linked messages containing slash symbol ([@Lamberthassel](https://github.com/Lamberthassel))\n\n#### :lock: Security Fixes\n* [#1353](https://github.com/kazupon/vue-i18n/pull/1353) build(deps): [security] bump tar from 6.0.2 to 6.1.3 ([@dependabot-preview[bot]](https://github.com/apps/dependabot-preview))\n\n#### :pencil: Documentation\n* [#1323](https://github.com/kazupon/vue-i18n/pull/1323) Added version notice for custom pluralizations ([@ingria](https://github.com/ingria))\n\n#### Committers: 3\n- Igor Nabebin ([@Lamberthassel](https://github.com/Lamberthassel))\n- Ingria ([@ingria](https://github.com/ingria))\n- [@dependabot-preview[bot]](https://github.com/apps/dependabot-preview)\n\n## v8.25.0 (2021-07-16)\n\n#### :star: New Features\n* [#1271](https://github.com/kazupon/vue-i18n/pull/1271) feat: Added linked, locale, formatter, values, path to MessageContext ([@fabis94](https://github.com/fabis94))\n\n#### :bug: Bug Fixes\n* [#1321](https://github.com/kazupon/vue-i18n/pull/1321) fix broken mergeLocaleMessage ([@phonezawphyo](https://github.com/phonezawphyo))\n\n#### Committers: 3\n- [@dependabot-preview[bot]](https://github.com/apps/dependabot-preview)\n- [@fabis94](https://github.com/fabis94)\n- [@phonezawphyo](https://github.com/phonezawphyo)\n\n## v8.24.5 (2021-06-19)\n\n#### :bug: Bug Fixes\n* [#1278](https://github.com/kazupon/vue-i18n/pull/1278) fix: Ensure that the order at desroy is the same as before change to `Set` from `Array` ([@kazupon](https://github.com/kazupon))\n\n#### :zap: Improved Features\n* [#1194](https://github.com/kazupon/vue-i18n/pull/1194) fix: add locale arg type i18n.n method type signature ([@alireza4050](https://github.com/alireza4050))\n\n#### :pencil: Documentation\n* [#1273](https://github.com/kazupon/vue-i18n/pull/1273) docs(api:zh): update the Chinese docs of \"API\" ([@baboon-king](https://github.com/baboon-king))\n* [#1267](https://github.com/kazupon/vue-i18n/pull/1267) Documentation - Update @kazupon/vue-i18n-loader to @intlify/vue-i18n-loader ([@fbigand](https://github.com/fbigand))\n* [#1258](https://github.com/kazupon/vue-i18n/pull/1258) Grammar fix for Installing vue-i18n-loader ([@TerabyteTiger](https://github.com/TerabyteTiger))\n\n#### Committers: 5\n- Alireza Asgharizadeh ([@alireza4050](https://github.com/alireza4050))\n- BaboonKing ([@baboon-king](https://github.com/baboon-king))\n- Tyler V ([@TerabyteTiger](https://github.com/TerabyteTiger))\n- [@fbigand](https://github.com/fbigand)\n- kazuya kawaguchi ([@kazupon](https://github.com/kazupon))\n\n## v8.24.4 (2021-04-28)\n\n#### :bug: Bug Fixes\n* [#1192](https://github.com/kazupon/vue-i18n/pull/1192) Revert \"fix: i18n reference to root causes memory leak (#1044)\" ([@kazupon](https://github.com/kazupon))\n\n#### Committers: 2\n- Alexander Sokolov ([@Alex-Sokolov](https://github.com/Alex-Sokolov))\n- kazuya kawaguchi ([@kazupon](https://github.com/kazupon))\n\n## v8.24.3 (2021-04-09)\n\n#### :bug: Bug Fixes\n* [#1175](https://github.com/kazupon/vue-i18n/pull/1175) [perf] Use Set so lookup of _dataListeners can be O(1) ([@exoego](https://github.com/exoego))\n\n#### :chart_with_upwards_trend: Performance Fixes\n* [#1175](https://github.com/kazupon/vue-i18n/pull/1175) [perf] Use Set so lookup of _dataListeners can be O(1) ([@exoego](https://github.com/exoego))\n\n#### Committers: 1\n- TATSUNO Yasuhiro ([@exoego](https://github.com/exoego))\n\n## v8.24.2 (2021-03-23)\n\n#### :bug: Bug Fixes\n* [#1151](https://github.com/kazupon/vue-i18n/pull/1151) fix: i18n reference to root causes memory leak (#1044) ([@lzxb](https://github.com/lzxb))\n\n#### :pencil: Documentation\n* [#1152](https://github.com/kazupon/vue-i18n/pull/1152) $tc return type ([@Glandos](https://github.com/Glandos))\n\n#### Committers: 2\n- Glandos ([@Glandos](https://github.com/Glandos))\n- 狼族小狈 ([@lzxb](https://github.com/lzxb))\n\n## v8.24.1 (2021-03-11)\n\n#### :bug: Bug Fixes\n* [#1145](https://github.com/kazupon/vue-i18n/pull/1145) Allowing paths to be null for lookups. ([@martinheidegger](https://github.com/martinheidegger))\n\n#### Committers: 1\n- Martin Heidegger ([@martinheidegger](https://github.com/martinheidegger))\n\n## v8.24.0 (2021-03-08)\n\n#### :star: New Features\n* [#1139](https://github.com/kazupon/vue-i18n/pull/1139) experimental: add meta info for intlify tools ([@kazupon](https://github.com/kazupon))\n\n#### Committers: 1\n- kazuya kawaguchi ([@kazupon](https://github.com/kazupon))\n\n## v8.23.0 (2021-02-24)\n\n#### :zap: Improved Features\n* [#1118](https://github.com/kazupon/vue-i18n/pull/1118) Fix wrong LocaleMatcher type for TS 4.2 ('best-fit' to 'best fit'). ([@mpawelski](https://github.com/mpawelski))\n\n#### :pencil: Documentation\n* [#1124](https://github.com/kazupon/vue-i18n/pull/1124) Add documentation for directive `choice` argument ([@Gameghostify](https://github.com/Gameghostify))\n* [#1114](https://github.com/kazupon/vue-i18n/pull/1114) Update tooling.md ([@fanlinqiang](https://github.com/fanlinqiang))\n* [#1104](https://github.com/kazupon/vue-i18n/pull/1104) Documentation improvemation ([@lucasferreiralimax](https://github.com/lucasferreiralimax))\n\n#### Committers: 4\n- Lucas ([@lucasferreiralimax](https://github.com/lucasferreiralimax))\n- Mariusz Pawelski ([@mpawelski](https://github.com/mpawelski))\n- [@Gameghostify](https://github.com/Gameghostify)\n- [@fanlinqiang](https://github.com/fanlinqiang)\n\n\n## v8.22.4 (2021-01-16)\n\n#### :chart_with_upwards_trend: Performance Fixes\n* [#1101](https://github.com/kazupon/vue-i18n/pull/1101) Improve performance of mergeLocaleMessage (#1099) ([@cslee](https://github.com/cslee))\n\n#### Committers: 2\n- Eric Lee ([@cslee](https://github.com/cslee))\n- Lucas ([@lucasferreiralimax](https://github.com/lucasferreiralimax))\n\n\n## v8.22.3 (2021-01-08)\n\n#### :zap: Improved Features\n* [#1096](https://github.com/kazupon/vue-i18n/pull/1096) @types: Fixed too narrow option types in n() and d() methods ([@gehlert](https://github.com/gehlert))\n\n#### Committers: 3\n- MASONGZHI ([@masongzhi](https://github.com/masongzhi))\n- TATSUNO Yasuhiro ([@exoego](https://github.com/exoego))\n- [@gehlert](https://github.com/gehlert)\n\n\n## v8.22.2 (2020-11-18)\n\n#### :bug: Bug Fixes\n* [#1048](https://github.com/kazupon/vue-i18n/pull/1048) fix: number format keys missing compared the Intl.Number object ([@jevillard](https://github.com/jevillard))\n\n#### Committers: 2\n- Alexander Sokolov ([@Alex-Sokolov](https://github.com/Alex-Sokolov))\n- Jérémy Villard ([@jevillard](https://github.com/jevillard))\n\n\n## v8.22.1 (2020-10-19)\n\n#### :boom: Breaking Change\n* [#1020](https://github.com/kazupon/vue-i18n/pull/1020) escapeParameterHtml flag: Don't escape ampersand #1019 ([@gardarh](https://github.com/gardarh))\n\n#### Committers: 1\n- Gardar Hauksson ([@gardarh](https://github.com/gardarh))\n\n\n## v8.22.0 (2020-10-06)\n\n#### :star: New Features\n* [#1009](https://github.com/kazupon/vue-i18n/pull/1009) Add escapeParameterHtml parameter. #1002 ([@gardarh](https://github.com/gardarh))\n\n#### :bug: Bug Fixes\n* [#1003](https://github.com/kazupon/vue-i18n/pull/1003) Bugfix in index.js: wrong if condition in fetchChoice ([@cimchd](https://github.com/cimchd))\n\n#### Committers: 4\n- Andreas ([@devmount](https://github.com/devmount))\n- Gardar Hauksson ([@gardarh](https://github.com/gardarh))\n- Raffaele Pizzari ([@pixari](https://github.com/pixari))\n- [@cimchd](https://github.com/cimchd)\n\n\n## v8.21.1 (2020-09-11)\n\n#### :bug: Bug Fixes\n* [#995](https://github.com/kazupon/vue-i18n/pull/995) Update mixin.js ([@ferencbeutel4711](https://github.com/ferencbeutel4711))\n\n#### Committers: 1\n- Ferenc Beutel ([@ferencbeutel4711](https://github.com/ferencbeutel4711))\n\n\n## v8.21.0 (2020-08-13)\n\n#### :star: New Features\n* [#972](https://github.com/kazupon/vue-i18n/pull/972) feat: message function ([@kazupon](https://github.com/kazupon))\n\n#### :pencil: Documentation\n* [#961](https://github.com/kazupon/vue-i18n/pull/961) Update link to Formatter Interface ([@JohJohan](https://github.com/JohJohan))\n\n#### Committers: 3\n- Alexander Sokolov ([@Alex-Sokolov](https://github.com/Alex-Sokolov))\n- Johan ([@JohJohan](https://github.com/JohJohan))\n- kazuya kawaguchi ([@kazupon](https://github.com/kazupon))\n\n\n## v8.20.0 (2020-07-30)\n\n#### :star: New Features\n* [#959](https://github.com/kazupon/vue-i18n/pull/959) i18n-n component local components passing ([@kazupon](https://github.com/kazupon))\n* [#928](https://github.com/kazupon/vue-i18n/pull/928) :zap: improvement(interpolation): enable passage of local components to tag prop ([@vhoyer](https://github.com/vhoyer))\n\n#### Committers: 2\n- Vinícius Hoyer ([@vhoyer](https://github.com/vhoyer))\n- kazuya kawaguchi ([@kazupon](https://github.com/kazupon))\n\n\n## v8.19.0 (2020-07-25)\n\n#### :star: New Features\n* [#942](https://github.com/kazupon/vue-i18n/pull/942) Add vetur support for tags and attributes ([@phiter](https://github.com/phiter))\n\n#### :pencil: Documentation\n* [#925](https://github.com/kazupon/vue-i18n/pull/925) Added missing quote ([@fschlag](https://github.com/fschlag))\n* [#921](https://github.com/kazupon/vue-i18n/pull/921) Add lost pluralizationRules option to documentation ([@AleksandrSl](https://github.com/AleksandrSl))\n* [#920](https://github.com/kazupon/vue-i18n/pull/920) Make link to API and Guide top level ([@AleksandrSl](https://github.com/AleksandrSl))\n\n#### Committers: 3\n- Aleksandr ([@AleksandrSl](https://github.com/AleksandrSl))\n- Florian Schlag ([@fschlag](https://github.com/fschlag))\n- Phiter Fernandes ([@phiter](https://github.com/phiter))\n\n\n## v8.18.2 (2020-06-08)\n\n#### :zap: Improved Features\n* [#917](https://github.com/kazupon/vue-i18n/pull/917) fix: improve IVueI18n interface ([@kazupon](https://github.com/kazupon))\n\n#### :pencil: Documentation\n* [#902](https://github.com/kazupon/vue-i18n/pull/902) docs: [RU] Translation update ([@Alex-Sokolov](https://github.com/Alex-Sokolov))\n* [#901](https://github.com/kazupon/vue-i18n/pull/901) docs: (zh) inverse $d $n ([@stan-chen](https://github.com/stan-chen))\n\n#### Committers: 4\n- Alexander Sokolov ([@Alex-Sokolov](https://github.com/Alex-Sokolov))\n- Rafał Chłodnicki ([@rchl](https://github.com/rchl))\n- Stanley Chen ([@stan-chen](https://github.com/stan-chen))\n- kazuya kawaguchi ([@kazupon](https://github.com/kazupon))\n\n\n## v8.18.1 (2020-05-27)\n\n#### :bug: Bug Fixes\n* [#896](https://github.com/kazupon/vue-i18n/pull/896) Fix flow types and enable flow types testing on CI ([@rchl](https://github.com/rchl))\n\n#### Committers: 1\n- Rafał Chłodnicki ([@rchl](https://github.com/rchl))\n\n\n## v8.18.0 (2020-05-26)\n\n#### :star: New Features\n* [#892](https://github.com/kazupon/vue-i18n/pull/892) Add onComponentInstanceCreated constructor option ([@rchl](https://github.com/rchl))\n\n#### :zap: Improved Features\n* [#890](https://github.com/kazupon/vue-i18n/pull/890) chore: set up linting for typescript definitions ([@rchl](https://github.com/rchl))\n\n#### Committers: 1\n- Rafał Chłodnicki ([@rchl](https://github.com/rchl))\n\n\n## v8.17.7 (2020-05-19)\n\n#### :bug: Bug Fixes\n* [#882](https://github.com/kazupon/vue-i18n/pull/882) fix v-t pluralisation when choice is 0 ([@mikejacoutot](https://github.com/mikejacoutot))\n\n#### Committers: 1\n- [@mikejacoutot](https://github.com/mikejacoutot)\n\n\n## v8.17.6 (2020-05-15)\n\n#### :bug: Bug Fixes\n* [#880](https://github.com/kazupon/vue-i18n/pull/880) Don't delete _i18n in beforeDestroy ([@danimoh](https://github.com/danimoh))\n\n#### :zap: Improved Features\n* [#878](https://github.com/kazupon/vue-i18n/pull/878) Allow component interpolation without root element ([@danimoh](https://github.com/danimoh))\n\n#### :pencil: Documentation\n* [#875](https://github.com/kazupon/vue-i18n/pull/875) Add new 3rd party tool ([@danigayosog](https://github.com/danigayosog))\n* [#872](https://github.com/kazupon/vue-i18n/pull/872) docs: fixes ([@Alex-Sokolov](https://github.com/Alex-Sokolov))\n* [#871](https://github.com/kazupon/vue-i18n/pull/871) update pluralization.md ([@Timibadass](https://github.com/Timibadass))\n\n#### Committers: 4\n- Alexander Sokolov ([@Alex-Sokolov](https://github.com/Alex-Sokolov))\n- Daniel ([@danigayosog](https://github.com/danigayosog))\n- Timi Omoyeni ([@Timibadass](https://github.com/Timibadass))\n- [@danimoh](https://github.com/danimoh)\n\n\n## v8.17.5 (2020-05-10)\n\n#### :bug: Bug Fixes\n* [#869](https://github.com/kazupon/vue-i18n/pull/869) fix: not string method access error ([@kazupon](https://github.com/kazupon))\n\n#### :pencil: Documentation\n* [#867](https://github.com/kazupon/vue-i18n/pull/867) docs: [RU] Translation ([@Alex-Sokolov](https://github.com/Alex-Sokolov))\n* [#865](https://github.com/kazupon/vue-i18n/pull/865) improvement(docs): extend Hot reloading section ([@caugner](https://github.com/caugner))\n\n#### Committers: 3\n- Alexander Sokolov ([@Alex-Sokolov](https://github.com/Alex-Sokolov))\n- Claas Augner ([@caugner](https://github.com/caugner))\n- kazuya kawaguchi ([@kazupon](https://github.com/kazupon))\n\n\n## v8.17.4 (2020-04-26)\n\n#### :bug: Bug Fixes\n* [#859](https://github.com/kazupon/vue-i18n/pull/859) fix datetime format cache ([@kazupon](https://github.com/kazupon))\n* [#858](https://github.com/kazupon/vue-i18n/pull/858) fix datetime and number format fallbacking ([@kazupon](https://github.com/kazupon))\n* [#857](https://github.com/kazupon/vue-i18n/pull/857) fix: alternative array includes ([@kazupon](https://github.com/kazupon))\n\n#### Committers: 1\n- kazuya kawaguchi ([@kazupon](https://github.com/kazupon))\n\n\n## v8.17.3 (2020-04-19)\n\n#### :zap: Improved Features\n* [#846](https://github.com/kazupon/vue-i18n/pull/846) add key to postTranslation ([@dmitryuk](https://github.com/dmitryuk))\n\n#### :pencil: Documentation\n* [#847](https://github.com/kazupon/vue-i18n/pull/847) docs: Update /api/README.md ([@Alex-Sokolov](https://github.com/Alex-Sokolov))\n\n#### Committers: 2\n- Alexander Dmitryuk ([@dmitryuk](https://github.com/dmitryuk))\n- Alexander Sokolov ([@Alex-Sokolov](https://github.com/Alex-Sokolov))\n\n\n## v8.17.2 (2020-04-18)\n\n#### :zap: Improved Features\n* [#844](https://github.com/kazupon/vue-i18n/pull/844) Use plain object instead of Map, which is not supported in IE9/10 ([@exoego](https://github.com/exoego))\n\n#### Committers: 1\n- TATSUNO Yasuhiro ([@exoego](https://github.com/exoego))\n\n\n## v8.17.1 (2020-04-16)\n\n#### :bug: Bug Fixes\n* [#840](https://github.com/kazupon/vue-i18n/pull/840) fix: altnative endsWidth ([@kazupon](https://github.com/kazupon))\n\n#### :pencil: Documentation\n* [#837](https://github.com/kazupon/vue-i18n/pull/837) Fix typo ([@ninofiliu](https://github.com/ninofiliu))\n\n#### Committers: 2\n- Nino Filiu ([@ninofiliu](https://github.com/ninofiliu))\n- kazuya kawaguchi ([@kazupon](https://github.com/kazupon))\n\n\n## v8.17.0 (2020-04-11)\n\n#### :star: New Features\n* [#829](https://github.com/kazupon/vue-i18n/pull/829) #138 Fallback Locale as array for cascading fallbacks ([@mmokross](https://github.com/mmokross))\n\n#### :pencil: Documentation\n* [#834](https://github.com/kazupon/vue-i18n/pull/834) Add capitalize default modifier in doc ([@alexandreDavid](https://github.com/alexandreDavid))\n* [#832](https://github.com/kazupon/vue-i18n/pull/832) fix in examples of \"Custom pluralization\" ([@Perlover](https://github.com/Perlover))\n\n#### Committers: 4\n- Alexandre David ([@alexandreDavid](https://github.com/alexandreDavid))\n- Kobayashi Kazuhiro ([@kzhrk](https://github.com/kzhrk))\n- Michael Mokroß ([@mmokross](https://github.com/mmokross))\n- Perlover ([@Perlover](https://github.com/Perlover))\n\n\n## v8.16.0 (2020-03-27)\n\n#### :star: New Features\n* [#822](https://github.com/kazupon/vue-i18n/pull/822) post translation hooking feature ([@kazupon](https://github.com/kazupon))\n\n#### Committers: 1\n- kazuya kawaguchi ([@kazupon](https://github.com/kazupon))\n\n\n## v8.15.7 (2020-03-25)\n\n#### :bug: Bug Fixes\n* [#819](https://github.com/kazupon/vue-i18n/pull/819) Fixed bug when changing number format runtime ([@slischka](https://github.com/slischka))\n\n#### Committers: 1\n- Jiří Slischka ([@slischka](https://github.com/slischka))\n\n\n## v8.15.6 (2020-03-23)\n\n#### :bug: Bug Fixes\n* [#817](https://github.com/kazupon/vue-i18n/pull/817) Bugfix : 'setLocaleMessage' / 'mergeLocaleMessage' doesn't work if 'warnHtmlInMessage' is set to 'error'  ([@aym3nb](https://github.com/aym3nb))\n\n#### :pencil: Documentation\n* [#816](https://github.com/kazupon/vue-i18n/pull/816) Update fallback.md ([@scoutrul](https://github.com/scoutrul))\n\n#### Committers: 3\n- Anton ([@scoutrul](https://github.com/scoutrul))\n- Aymen Bareche ([@aym3nb](https://github.com/aym3nb))\n- TATSUNO Yasuhiro ([@exoego](https://github.com/exoego))\n\n\n## v8.15.5 (2020-03-07)\n\n#### :star: Features\n* [#787](https://github.com/kazupon/vue-i18n/pull/787) Add a 'capitalize' default modifier for linked message ([@charlesmass](https://github.com/charlesmass))\n\n#### :zap: Improvement Features\n* [#794](https://github.com/kazupon/vue-i18n/pull/794) Support returning 'string' type for customized interpolation ([@sihyeonn](https://github.com/sihyeonn))\n\n#### :pencil: Documentation\n* [#791](https://github.com/kazupon/vue-i18n/pull/791) Revise fallback.md ([@jlebar](https://github.com/jlebar))\n\n#### Committers: 4\n- Justin Lebar ([@jlebar](https://github.com/jlebar))\n- L M ([@charlesmass](https://github.com/charlesmass))\n- Sihyeon Jang ([@sihyeonn](https://github.com/sihyeonn))\n- kazuya kawaguchi ([@kazupon](https://github.com/kazupon))\n\n<a name=\"8.15.4\"></a>\n## [8.15.4](https://github.com/kazupon/vue-i18n/compare/v8.15.3...v8.15.4) (2020-02-25)\n\n\n### :bug: Bug Fixes\n\n* **index:** improve formatFallbackMessages code (#779) (#783) by [@masongzhi](https://github.com/masongzhi) ([53895b9](https://github.com/kazupon/vue-i18n/commit/53895b9)))\n\n### :up: Updates\n\n* some fixes ([8a9a950](https://github.com/kazupon/vue-i18n/commit/8a9a950))\n\n\n\n<a name=\"8.15.3\"></a>\n## [8.15.3](https://github.com/kazupon/vue-i18n/compare/v8.15.2...v8.15.3) (2019-12-18)\n\n\n### :zap: Improvements\n\n* **index:** fix mergeLocaleMessage. add changes notification on merging with an empty target object ([#752](https://github.com/kazupon/vue-i18n/issues/752)) by [@jekill](https://github.com/jekill) ([048eac5](https://github.com/kazupon/vue-i18n/commit/048eac5)), closes [#752](https://github.com/kazupon/vue-i18n/issues/752)\n\n\n\n<a name=\"8.15.2\"></a>\n## [8.15.2](https://github.com/kazupon/vue-i18n/compare/v8.15.1...v8.15.2) (2019-12-18)\n\n\n### :bug: Bug Fixes\n\n* **index:** Fix exception when using unit number formatting by [@simonjodet](https://github.com/simonjodet) ([194b801](https://github.com/kazupon/vue-i18n/commit/194b801)), closes [#750](https://github.com/kazupon/vue-i18n/issues/750) [#751](https://github.com/kazupon/vue-i18n/issues/751)\n\n\n\n<a name=\"8.15.1\"></a>\n## [8.15.1](https://github.com/kazupon/vue-i18n/compare/v8.15.0...v8.15.1) (2019-11-27)\n\n\n### :zap: Improvements\n\n* **mixin:** change to custom blocks parse error ([a9858be](https://github.com/kazupon/vue-i18n/commit/a9858be))\n\n\n\n<a name=\"8.15.0\"></a>\n# [8.15.0](https://github.com/kazupon/vue-i18n/compare/v8.14.1...v8.15.0) (2019-10-16)\n\n\n### :star: New Features\n\n* Add constructor option for custom modifiers ([#724](https://github.com/kazupon/vue-i18n/issues/724)) by [@epaezrubio](https://github.com/epaezrubio) ([3217212](https://github.com/kazupon/vue-i18n/commit/3217212)), closes [#724](https://github.com/kazupon/vue-i18n/issues/724)\n\n\n\n<a name=\"8.14.1\"></a>\n## [8.14.1](https://github.com/kazupon/vue-i18n/compare/v8.14.0...v8.14.1) (2019-09-12)\n\n\n### :bug: Bug Fixes\n\n* **path:** fix branket key error ([8d2aba7](https://github.com/kazupon/vue-i18n/commit/8d2aba7))\n* **component:** Fix interpolation component when there are empty text nodes ([547cdd1](https://github.com/kazupon/vue-i18n/commit/547cdd1)) by [@Demivan](https://github.com/Demivan)\n\n\n\n<a name=\"8.14.0\"></a>\n# [8.14.0](https://github.com/kazupon/vue-i18n/compare/v8.13.0...v8.14.0) (2019-08-12)\n\n\n### :star: New Features\n\n* fallback formatting ([#637](https://github.com/kazupon/vue-i18n/issues/637)) by [@sebwas](https://github.com/sebwas) ([bf9929c](https://github.com/kazupon/vue-i18n/commit/bf9929c)), closes [#637](https://github.com/kazupon/vue-i18n/issues/637)\n* support slots syntax for component interpolation ([#685](https://github.com/kazupon/vue-i18n/issues/685)) by [@aavondet](https://github.com/aavondet) ([71ca843](https://github.com/kazupon/vue-i18n/commit/71ca843)), closes [#685](https://github.com/kazupon/vue-i18n/issues/685)\n\n\n\n<a name=\"8.13.0\"></a>\n# [8.13.0](https://github.com/kazupon/vue-i18n/compare/v8.12.0...v8.13.0) (2019-08-09)\n\n\n### :star: New Features\n\n* datetime/number formats fallback warning filter ([46de19e](https://github.com/kazupon/vue-i18n/commit/46de19e)), closes [#558](https://github.com/kazupon/vue-i18n/issues/558)\n* fallback translation warning filter ([69fc798](https://github.com/kazupon/vue-i18n/commit/69fc798))\n* translation missing warning filter ([666dc9d](https://github.com/kazupon/vue-i18n/commit/666dc9d))\n\n\n\n<a name=\"8.12.0\"></a>\n# [8.12.0](https://github.com/kazupon/vue-i18n/compare/v8.11.2...v8.12.0) (2019-07-09)\n\n\n### :star: New Features\n\n* **mixin:** shared locale messages feature ([82543de](https://github.com/kazupon/vue-i18n/commit/82543de))\n\n\n### :zap: Improvements\n\n* **typing:** sharedMessages option type ([6967a15](https://github.com/kazupon/vue-i18n/commit/6967a15))\n\n\n\n<a name=\"8.11.2\"></a>\n## [8.11.2](https://github.com/kazupon/vue-i18n/compare/v8.11.1...v8.11.2) (2019-04-30)\n\n\n### :bug: Bug Fixes\n\n* bug(mixin): fix SSR memory leak by moving subscribeDataChanging calls into beforeMount ([#572](https://github.com/kazupon/vue-i18n/issues/572)) by [@Pindar](https://github.com/Pindar) ([32b5795](https://github.com/kazupon/vue-i18n/commit/32b5795)), closes [#572](https://github.com/kazupon/vue-i18n/issues/572)\n\n\n\n<a name=\"8.11.1\"></a>\n## [8.11.1](https://github.com/kazupon/vue-i18n/compare/v8.11.0...v8.11.1) (2019-04-26)\n\n\n### :bug: Bug Fixes\n\n* fix ES Modules distribution ([bb631a1](https://github.com/kazupon/vue-i18n/commit/bb631a1))\n\n\n\n<a name=\"8.11.0\"></a>\n# [8.11.0](https://github.com/kazupon/vue-i18n/compare/v8.10.0...v8.11.0) (2019-04-26)\n\n\n### :star: New Features\n\n* ES modules for browser ([#561](https://github.com/kazupon/vue-i18n/issues/561)) ([c9b9adf](https://github.com/kazupon/vue-i18n/commit/c9b9adf)), closes [#561](https://github.com/kazupon/vue-i18n/issues/561)\n* HTML locale message warning option ([#567](https://github.com/kazupon/vue-i18n/issues/567)) ([4aecf03](https://github.com/kazupon/vue-i18n/commit/4aecf03)), closes [#567](https://github.com/kazupon/vue-i18n/issues/567)\n\n\n\n<a name=\"8.10.0\"></a>\n# [8.10.0](https://github.com/kazupon/vue-i18n/compare/v8.9.0...v8.10.0) (2019-03-28)\n\n\n### :star: New Features\n\n* **number:** i18n-n functional component ([#541](https://github.com/kazupon/vue-i18n/issues/541)) by [@bponomarenko](https://github.com/bponomarenko) ([b33579d](https://github.com/kazupon/vue-i18n/commit/b33579d)), closes [#541](https://github.com/kazupon/vue-i18n/issues/541)\n* **path:** Keypath should parse if sub path contains spaces. ([#533](https://github.com/kazupon/vue-i18n/issues/533)) by [@exoego](https://github.com/exoego) ([640daaf](https://github.com/kazupon/vue-i18n/commit/640daaf)), closes [#533](https://github.com/kazupon/vue-i18n/issues/533)\n\n\n### :zap: Improvements\n\n* **number:** support data fall through in i18n-n ([#545](https://github.com/kazupon/vue-i18n/issues/545)) ([71cadbf](https://github.com/kazupon/vue-i18n/commit/71cadbf)), closes [#545](https://github.com/kazupon/vue-i18n/issues/545)\n\n\n### :pencil: docs\n\n* **vuepress:** translate documents for chinese ([#536](https://github.com/kazupon/vue-i18n/issues/536)) by [@xuhongbo](https://github.com/xuhongbo) ([ccf29f8](https://github.com/kazupon/vue-i18n/commit/ccf29f8)), closes [#536](https://github.com/kazupon/vue-i18n/issues/536) [#531](https://github.com/kazupon/vue-i18n/issues/531) [#1](https://github.com/kazupon/vue-i18n/issues/1) [#533](https://github.com/kazupon/vue-i18n/issues/533) [#540](https://github.com/kazupon/vue-i18n/issues/540) [#541](https://github.com/kazupon/vue-i18n/issues/541) [#1](https://github.com/kazupon/vue-i18n/issues/1) [#2](https://github.com/kazupon/vue-i18n/issues/2)\n\n\n<a name=\"8.9.0\"></a>\n# [8.9.0](https://github.com/kazupon/vue-i18n/compare/v8.8.2...v8.9.0) (2019-03-08)\n\n\n### :bug: Bug Fixes\n\n* **index:** Fix [#515](https://github.com/kazupon/vue-i18n/issues/515) empty string not returning true ([#525](https://github.com/kazupon/vue-i18n/issues/525)) by [@kimuraz](https://github.com/kimuraz) ([396c5ca](https://github.com/kazupon/vue-i18n/commit/396c5ca)), closes [#515](https://github.com/kazupon/vue-i18n/issues/515) [#525](https://github.com/kazupon/vue-i18n/issues/525) [#515](https://github.com/kazupon/vue-i18n/issues/515)\n\n\n### :star: New Features\n\n* **index:** add availableLocales (related issue [#193](https://github.com/kazupon/vue-i18n/issues/193), PR [#528](https://github.com/kazupon/vue-i18n/issues/528)) by [@exoego](https://github.com/exoego) ([8f75b1f](https://github.com/kazupon/vue-i18n/commit/8f75b1f)), closes [#193](https://github.com/kazupon/vue-i18n/issues/193) [#528](https://github.com/kazupon/vue-i18n/issues/528) [#193](https://github.com/kazupon/vue-i18n/issues/193) [#193](https://github.com/kazupon/vue-i18n/issues/193) [#193](https://github.com/kazupon/vue-i18n/issues/193) [#193](https://github.com/kazupon/vue-i18n/issues/193)\n\n\n### :zap: Improvements\n\n* **flowtype:** Fix missing type declarations in flow type ([#529](https://github.com/kazupon/vue-i18n/issues/529)) by [@exoego](https://github.com/exoego) ([4173764](https://github.com/kazupon/vue-i18n/commit/4173764)), closes [#529](https://github.com/kazupon/vue-i18n/issues/529)\n\n\n\n<a name=\"8.8.2\"></a>\n## [8.8.2](https://github.com/kazupon/vue-i18n/compare/v8.8.1...v8.8.2) (2019-02-17)\n\n\n### :bug: Bug Fixes\n\n* **mixin:** fix memory leak ([135058d](https://github.com/kazupon/vue-i18n/commit/135058d)), closes [#514](https://github.com/kazupon/vue-i18n/issues/514)\n\n\n\n<a name=\"8.8.1\"></a>\n## [8.8.1](https://github.com/kazupon/vue-i18n/compare/v8.8.0...v8.8.1) (2019-02-10)\n\n\n### :bug: Bug Fixes\n\n* **index:** fixed [#478](https://github.com/kazupon/vue-i18n/issues/478) ([#518](https://github.com/kazupon/vue-i18n/issues/518)) by [@stroncium](https://github.com/stroncium) ([469edd9](https://github.com/kazupon/vue-i18n/commit/469edd9)), closes [#478](https://github.com/kazupon/vue-i18n/issues/478) [#518](https://github.com/kazupon/vue-i18n/issues/518) [#478](https://github.com/kazupon/vue-i18n/issues/478)\n\n\n### :zap: Improvements\n\n* **flowtype:** update typings ([44e04e7](https://github.com/kazupon/vue-i18n/commit/44e04e7))\n* **typescript:** update typings ([dee35b9](https://github.com/kazupon/vue-i18n/commit/dee35b9))\n\n\n\n<a name=\"8.8.0\"></a>\n# [8.8.0](https://github.com/kazupon/vue-i18n/compare/v8.7.0...v8.8.0) (2019-01-29)\n\n\n### :bug: Bug Fixes\n\n* **index:** fix flat path based key issue ([bed9c39](https://github.com/kazupon/vue-i18n/commit/bed9c39)), closes [#349](https://github.com/kazupon/vue-i18n/issues/349)\n* **mixin:** fix beforeDestroy can not find this.$t ([#500](https://github.com/kazupon/vue-i18n/issues/500)) by [@masongzhi](https://github.com/masongzhi) ([311b8f3](https://github.com/kazupon/vue-i18n/commit/311b8f3)), closes [#500](https://github.com/kazupon/vue-i18n/issues/500)\n\n\n### :zap: Improvements\n\n* **directive:** Fix typo on warning message ([#509](https://github.com/kazupon/vue-i18n/issues/509)) by [@kimuraz](https://github.com/kimuraz) ([e879024](https://github.com/kazupon/vue-i18n/commit/e879024)), closes [#509](https://github.com/kazupon/vue-i18n/issues/509)\n* **index:** silence fallback warnings ([#510](https://github.com/kazupon/vue-i18n/issues/510)) by [@SzNagyMisu](https://github.com/SzNagyMisu) ([ddc0c79](https://github.com/kazupon/vue-i18n/commit/ddc0c79)), closes [#510](https://github.com/kazupon/vue-i18n/issues/510) [#139](https://github.com/kazupon/vue-i18n/issues/139)\n\n\n\n<a name=\"8.7.0\"></a>\n# [8.7.0](https://github.com/kazupon/vue-i18n/compare/v8.6.0...v8.7.0) (2019-01-02)\n\n\n### :zap: Improvements\n\n* **directive:** Preserve directive content ([#495](https://github.com/kazupon/vue-i18n/issues/495)) by [@bponomarenko](https://github.com/bponomarenko) ([c29edba](https://github.com/kazupon/vue-i18n/commit/c29edba)), closes [#495](https://github.com/kazupon/vue-i18n/issues/495) [#408](https://github.com/kazupon/vue-i18n/issues/408) [#408](https://github.com/kazupon/vue-i18n/issues/408)\n\n\n\n<a name=\"8.6.0\"></a>\n# [8.6.0](https://github.com/kazupon/vue-i18n/compare/v8.5.0...v8.6.0) (2018-12-25)\n\n\n### :bug: Bug Fixes\n\n* **pluralization:** inherit pluralization rules ⚠ ([#493](https://github.com/kazupon/vue-i18n/issues/493)) by [@Raiondesu](https://github.com/Raiondesu) ([7a23f32](https://github.com/kazupon/vue-i18n/commit/7a23f32)), closes [#493](https://github.com/kazupon/vue-i18n/issues/493)\n\n\n### :zap: Improvements\n\n* **format:** Add the path as argument to the custom formatter ([#489](https://github.com/kazupon/vue-i18n/issues/489)) by [@Raiondesu](https://github.com/Raiondesu) ([b9437ea](https://github.com/kazupon/vue-i18n/commit/b9437ea)), closes [#489](https://github.com/kazupon/vue-i18n/issues/489) [#484](https://github.com/kazupon/vue-i18n/issues/484) [#484](https://github.com/kazupon/vue-i18n/issues/484)\n\n\n\n<a name=\"8.5.0\"></a>\n# [8.5.0](https://github.com/kazupon/vue-i18n/compare/v8.4.0...v8.5.0) (2018-12-17)\n\n\n### :bug: Bug Fixes\n\n* **index:** evaluate availabilities lazily (fix [#477](https://github.com/kazupon/vue-i18n/issues/477)) ([#483](https://github.com/kazupon/vue-i18n/issues/483)) by [@gamtiq](https://github.com/gamtiq) ([b66f02e](https://github.com/kazupon/vue-i18n/commit/b66f02e)), closes [#477](https://github.com/kazupon/vue-i18n/issues/477) [#483](https://github.com/kazupon/vue-i18n/issues/483)\n\n\n### :zap: Improvements\n\n* **index:** Allow pluralization customization via constructor options (closes [#464](https://github.com/kazupon/vue-i18n/issues/464)) ([#482](https://github.com/kazupon/vue-i18n/issues/482)) by [@Raiondesu](https://github.com/Raiondesu) ([ef4b1a6](https://github.com/kazupon/vue-i18n/commit/ef4b1a6)), closes [#464](https://github.com/kazupon/vue-i18n/issues/464) [#482](https://github.com/kazupon/vue-i18n/issues/482) [#464](https://github.com/kazupon/vue-i18n/issues/464) [#464](https://github.com/kazupon/vue-i18n/issues/464) [#464](https://github.com/kazupon/vue-i18n/issues/464) [#464](https://github.com/kazupon/vue-i18n/issues/464) [#451](https://github.com/kazupon/vue-i18n/issues/451)\n* **index:** make silentTranslationWarn work for dates and numbers too ([#481](https://github.com/kazupon/vue-i18n/issues/481)) by [@Raiondesu](https://github.com/Raiondesu) ([402092b](https://github.com/kazupon/vue-i18n/commit/402092b)), closes [#481](https://github.com/kazupon/vue-i18n/issues/481)\n* **types:** typed autocomplete in date and number format options ([#485](https://github.com/kazupon/vue-i18n/issues/485)) by [@Raiondesu](https://github.com/Raiondesu) ([e2e5993](https://github.com/kazupon/vue-i18n/commit/e2e5993)), closes [#485](https://github.com/kazupon/vue-i18n/issues/485)\n\n\n\n<a name=\"8.4.0\"></a>\n# [8.4.0](https://github.com/kazupon/vue-i18n/compare/v8.3.2...v8.4.0) (2018-11-30)\n\n\n### :star: New Features\n\n* **index:** Add linked message formatting ([#467](https://github.com/kazupon/vue-i18n/issues/467)) by [@exoego](https://github.com/exoego) ([776b81b](https://github.com/kazupon/vue-i18n/commit/776b81b)), closes [#467](https://github.com/kazupon/vue-i18n/issues/467)\n\n\n\n<a name=\"8.3.2\"></a>\n## [8.3.2](https://github.com/kazupon/vue-i18n/compare/v8.3.1...v8.3.2) (2018-11-16)\n\n\n### :chart_with_upwards_trend: Performance Fixes\n\n* **index:** Optimize unnecessary capturing. ([#462](https://github.com/kazupon/vue-i18n/issues/462)) by [@exoego](https://github.com/exoego) ([116845e](https://github.com/kazupon/vue-i18n/commit/116845e)), closes [#462](https://github.com/kazupon/vue-i18n/issues/462)\n\n\n\n<a name=\"8.3.1\"></a>\n## [8.3.1](https://github.com/kazupon/vue-i18n/compare/v8.3.0...v8.3.1) (2018-11-08)\n\n\n### :bug: Bug Fixes\n\n* **directive:** fix cannnot update with v-t when had been changed locale message ([4895a2e](https://github.com/kazupon/vue-i18n/commit/4895a2e)), closes [#450](https://github.com/kazupon/vue-i18n/issues/450)\n* **index:** fix merge bug ([1798490](https://github.com/kazupon/vue-i18n/commit/1798490)), closes [#458](https://github.com/kazupon/vue-i18n/issues/458)\n* **missing:** fix vm argument passing ([dc48099](https://github.com/kazupon/vue-i18n/commit/dc48099)), closes [#453](https://github.com/kazupon/vue-i18n/issues/453)\n\n\n### :zap: Improvements\n\n* Optimize path.js and format.js ([#456](https://github.com/kazupon/vue-i18n/issues/456)) by [@exoego](https://github.com/exoego) ([639453c](https://github.com/kazupon/vue-i18n/commit/639453c)), closes [#456](https://github.com/kazupon/vue-i18n/issues/456)\n\n\n\n<a name=\"8.3.0\"></a>\n# [8.3.0](https://github.com/kazupon/vue-i18n/compare/v8.2.1...v8.3.0) (2018-10-29)\n\n\n### :zap: Improvements\n\n* **pluralization:** Extendable pluralization by [@Raiondesu](https://github.com/Raiondesu) ([bbab90b](https://github.com/kazupon/vue-i18n/commit/bbab90b))\n\n\n\n<a name=\"8.2.1\"></a>\n## [8.2.1](https://github.com/kazupon/vue-i18n/compare/v8.2.0...v8.2.1) (2018-10-15)\n\n\n### :bug: Bug Fixes\n\n* **extend:** fix TypeError: Cannot redefine property: $i18n ([#422](https://github.com/kazupon/vue-i18n/issues/422)) by [@HadiChen](https://github.com/HadiChen) ([cb19082](https://github.com/kazupon/vue-i18n/commit/cb19082)), closes [#422](https://github.com/kazupon/vue-i18n/issues/422)\n\n\n### :zap: Improvements\n\n* **index:** Suppress some warnings in production: smaller min.js and performance gain. ([#441](https://github.com/kazupon/vue-i18n/issues/441)) by @\texoego ([43931f5](https://github.com/kazupon/vue-i18n/commit/43931f5)), closes [#441](https://github.com/kazupon/vue-i18n/issues/441)\n\n\n\n<a name=\"8.2.0\"></a>\n# [8.2.0](https://github.com/kazupon/vue-i18n/compare/v8.1.1...v8.2.0) (2018-10-13)\n\n\n### :bug: Bug Fixes\n\n* **index:** Add warning for circular reference in linked message ([#438](https://github.com/kazupon/vue-i18n/issues/438)) by [@exoego](https://github.com/exoego) ([7583485](https://github.com/kazupon/vue-i18n/commit/7583485)), closes [#438](https://github.com/kazupon/vue-i18n/issues/438)\n\n\n### :zap: Improvements\n\n* **index:** Allow escaping link key like @:(foo.bar). ([#437](https://github.com/kazupon/vue-i18n/issues/437)) by [@exoego](https://github.com/exoego) ([acfc458](https://github.com/kazupon/vue-i18n/commit/acfc458)), closes [#437](https://github.com/kazupon/vue-i18n/issues/437)\n* **index:** Pre-defined named arguments for Pluraization ([#440](https://github.com/kazupon/vue-i18n/issues/440)) by [@exoego](https://github.com/exoego) ([e84f0fb](https://github.com/kazupon/vue-i18n/commit/e84f0fb)), closes [#440](https://github.com/kazupon/vue-i18n/issues/440)\n* **path:** Allow non-ascii chars including numbers. ([#436](https://github.com/kazupon/vue-i18n/issues/436)) by [@exoego](https://github.com/exoego) ([a556c58](https://github.com/kazupon/vue-i18n/commit/a556c58)), closes [#436](https://github.com/kazupon/vue-i18n/issues/436)\n\n\n\n<a name=\"8.1.1\"></a>\n## [8.1.1](https://github.com/kazupon/vue-i18n/compare/v8.1.0...v8.1.1) (2018-10-12)\n\n\n### :bug: Bug Fixes\n\n* **build:** fix rollup building issues ([1a1958a](https://github.com/kazupon/vue-i18n/commit/1a1958a))\n* **format:** Should warn as unknown if named format is not closed. ([#435](https://github.com/kazupon/vue-i18n/issues/435)) by [@exoego](https://github.com/exoego) ([d1f6ed0](https://github.com/kazupon/vue-i18n/commit/d1f6ed0)), closes [#435](https://github.com/kazupon/vue-i18n/issues/435)\n* **install:** fix cannot redfine error ([6d5ec61](https://github.com/kazupon/vue-i18n/commit/6d5ec61))\n\n\n### :zap: Improvements\n\n* **package.json:** tree shaking optimization ([38948c5](https://github.com/kazupon/vue-i18n/commit/38948c5))\n\n\n\n<a name=\"8.1.0\"></a>\n# [8.1.0](https://github.com/kazupon/vue-i18n/compare/v8.0.0...v8.1.0) (2018-09-03)\n\n\n### :bug: Bug Fixes\n\n* **install:** add support for Vue.extend vue-i18n instance ([#420](https://github.com/kazupon/vue-i18n/issues/420)) by [@jaredzhu1993](https://github.com/jaredzhu1993) ([a60ea8b](https://github.com/kazupon/vue-i18n/commit/a60ea8b)), closes [#420](https://github.com/kazupon/vue-i18n/issues/420)\n\n\n### :zap: Improvements\n\n* **warnings:** make warning messages clearer ([#396](https://github.com/kazupon/vue-i18n/issues/396)) by [@kimuraz](https://github.com/kimuraz) ([79eee1b](https://github.com/kazupon/vue-i18n/commit/79eee1b)), closes [#396](https://github.com/kazupon/vue-i18n/issues/396)\n\n\n\n<a name=\"8.0.0\"></a>\n# [8.0.0](https://github.com/kazupon/vue-i18n/compare/v7.8.1...v8.0.0) (2018-06-23)\n\n\n### :boom: Breaking changes\n\n* **extend:** fix this context binding ([aa0e831](https://github.com/kazupon/vue-i18n/commit/aa0e831)), closes [#306](https://github.com/kazupon/vue-i18n/issues/306) [#286](https://github.com/kazupon/vue-i18n/issues/286) [#259](https://github.com/kazupon/vue-i18n/issues/259), revert [#260](https://github.com/kazupon/vue-i18n/issues/260)\n\nNote that you need to guarantee this context equal to component instance in lifecycle methods (e.g. in `data` options, `const $t = this.$t.bind(this)`).\n\n```js\nexport default {\n  data () {\n    const $t = this.$t.bind(this)\n    return { msg: $t('msg') }\n  }\n}\n```\n\nsee the [API docs](https://kazupon.github.io/vue-i18n/api/)\n\n### :bug: Bug Fixes\n\n* bug(directive): fix guard checking at unbind ([c74888c](https://github.com/kazupon/vue-i18n/commit/c74888c)), closes [#340](https://github.com/kazupon/vue-i18n/issues/340)\n\n\n### NOTE\n\n* extend:\n\n\n\n<a name=\"7.8.1\"></a>\n## [7.8.1](https://github.com/kazupon/vue-i18n/compare/v7.8.0...v7.8.1) (2018-06-18)\n\n\n### :bug: Bug Fixes\n\n* **directive:** fix cannot unbind bug ([105888d](https://github.com/kazupon/vue-i18n/commit/105888d)), closes [#377](https://github.com/kazupon/vue-i18n/issues/377)\n\n\n\n<a name=\"7.8.0\"></a>\n# [7.8.0](https://github.com/kazupon/vue-i18n/compare/v7.7.0...v7.8.0) (2018-06-01)\n\n\n### :zap: Improvements\n\n* **typescript:** add type exportings ([a7cb8da](https://github.com/kazupon/vue-i18n/commit/a7cb8da))\n\n\n\n<a name=\"7.7.0\"></a>\n# [7.7.0](https://github.com/kazupon/vue-i18n/compare/v7.6.0...v7.7.0) (2018-05-20)\n\n\n### :zap: Improvements\n\n* **index:** resource reactivity ([887a137](https://github.com/kazupon/vue-i18n/commit/887a137)), closes [#253](https://github.com/kazupon/vue-i18n/issues/253)\n* **typescript:** Fix typings in components ([#344](https://github.com/kazupon/vue-i18n/issues/344)) by [@Demivan](https://github.com/Demivan) ([2402893](https://github.com/kazupon/vue-i18n/commit/2402893)), closes [#344](https://github.com/kazupon/vue-i18n/issues/344)\n\n\n\n<a name=\"7.6.0\"></a>\n# [7.6.0](https://github.com/kazupon/vue-i18n/compare/v7.5.0...v7.6.0) (2018-03-13)\n\n\n### :zap: Improvements\n\n* **index:** support retunable missing handler ([#256](https://github.com/kazupon/vue-i18n/issues/256)) by [@houd1ni](https://github.com/houd1ni) ([9fbe467](https://github.com/kazupon/vue-i18n/commit/9fbe467))\n* **typescript:** update TranslateResult type interface ([dffc678](https://github.com/kazupon/vue-i18n/commit/dffc678))\n\n\n\n<a name=\"7.5.0\"></a>\n# [7.5.0](https://github.com/kazupon/vue-i18n/compare/v7.4.2...v7.5.0) (2018-03-11)\n\n\n### :star: New Features\n\n* **directive:** Add pluralization feature to directive ([#304](https://github.com/kazupon/vue-i18n/issues/304)) by [@SirLamer](https://github.com/SirLamer) ([8378859](https://github.com/kazupon/vue-i18n/commit/8378859))\n\n\n### :zap: Improvements\n\n* **flow:** update TranslateResult type interface ([59f4658](https://github.com/kazupon/vue-i18n/commit/59f4658))\n* **index:** support object localization ([#311](https://github.com/kazupon/vue-i18n/issues/311)) by [@manniL](https://github.com/manniL) ([99e5006](https://github.com/kazupon/vue-i18n/commit/99e5006))\n* **missing:** Add interpolation values to missing handler ([#308](https://github.com/kazupon/vue-i18n/issues/308)) by [@sebwas](https://github.com/sebwas) ([b912d8a](https://github.com/kazupon/vue-i18n/commit/b912d8a))\n* **numberformat:** Explicit number format options ([#305](https://github.com/kazupon/vue-i18n/issues/305)) by [@bponomarenko](https://github.com/bponomarenko) ([aa07450](https://github.com/kazupon/vue-i18n/commit/aa07450))\n\n\n\n<a name=\"7.4.2\"></a>\n## [7.4.2](https://github.com/kazupon/vue-i18n/compare/v7.4.1...v7.4.2) (2018-02-01)\n\n\n### :zap: Improvements\n\n* **index:** Fixes global auto installation ([#291](https://github.com/kazupon/vue-i18n/issues/291)) by [@emileber](https://github.com/emileber) ([2f016ff](https://github.com/kazupon/vue-i18n/commit/2f016ff)), closes [#291](https://github.com/kazupon/vue-i18n/issues/291)\n\n\n\n<a name=\"7.4.1\"></a>\n## [7.4.1](https://github.com/kazupon/vue-i18n/compare/v7.4.0...v7.4.1) (2018-01-25)\n\n\n### :bug: Bug Fixes\n\n* fix cannot react ([2a8ea1c](https://github.com/kazupon/vue-i18n/commit/2a8ea1c)), closes [#261](https://github.com/kazupon/vue-i18n/issues/261)\n\n\n### :zap: Improvements\n\n* **formatter:** interpolate messages without values ([#282](https://github.com/kazupon/vue-i18n/issues/282)) by [@cb8](https://github.com/cb8) ([b792ce2](https://github.com/kazupon/vue-i18n/commit/b792ce2))\n\n\n\n<a name=\"7.4.0\"></a>\n# [7.4.0](https://github.com/kazupon/vue-i18n/compare/v7.3.4...v7.4.0) (2018-01-10)\n\n\n### :star: New Features\n\n* **typescript:** Allow module augmentation ([#273](https://github.com/kazupon/vue-i18n/issues/273)) by [@CKGrafico](https://github.com/CKGrafico) ([4371344](https://github.com/kazupon/vue-i18n/commit/4371344))\n\n\n\n<a name=\"7.3.4\"></a>\n## [7.3.4](https://github.com/kazupon/vue-i18n/compare/v7.3.3...v7.3.4) (2018-01-07)\n\n\n### :bug: Bug Fixes\n\n* **formatter:** Inherit formatter ([#269](https://github.com/kazupon/vue-i18n/issues/269)) by [@podkot](https://github.com/podkot) ([26a33ad](https://github.com/kazupon/vue-i18n/commit/26a33ad))\n\n\n\n<a name=\"7.3.3\"></a>\n## [7.3.3](https://github.com/kazupon/vue-i18n/compare/v7.3.2...v7.3.3) (2017-12-19)\n\n\n### :bug: Bug Fixes\n\n* **extend:** Fix this not found [#259](https://github.com/kazupon/vue-i18n/issues/259) ([#260](https://github.com/kazupon/vue-i18n/issues/260)) by [@lzxb](https://github.com/lzxb) ([c29007e](https://github.com/kazupon/vue-i18n/commit/c29007e)), closes [#259](https://github.com/kazupon/vue-i18n/issues/259) [#260](https://github.com/kazupon/vue-i18n/issues/260)\n* **types:** fix using old export ([#263](https://github.com/kazupon/vue-i18n/issues/263)) by [@jmigual](https://github.com/jmigual) ([b295fee](https://github.com/kazupon/vue-i18n/commit/b295fee)), closes [#263](https://github.com/kazupon/vue-i18n/issues/263)\n\n\n<a name=\"7.3.2\"></a>\n## [7.3.2](https://github.com/kazupon/vue-i18n/compare/v7.3.1...v7.3.2) (2017-10-19)\n\n\n### :zap: Improvements\n\n* **typescript:** fix import problem of vue2.5 because of the types update ([#238](https://github.com/kazupon/vue-i18n/issues/238)) by [@peterchealse](https://github.com/peterchealse) ([cb98347](https://github.com/kazupon/vue-i18n/commit/cb98347)), closes [#238](https://github.com/kazupon/vue-i18n/issues/238)\n\n\n\n<a name=\"7.3.1\"></a>\n## [7.3.1](https://github.com/kazupon/vue-i18n/compare/v7.3.0...v7.3.1) (2017-10-04)\n\n\n### :bug: Bug Fixes\n\n* **directive:** fix cannot locale reactivity ([e1fc12e](https://github.com/kazupon/vue-i18n/commit/e1fc12e)), closes [#227](https://github.com/kazupon/vue-i18n/issues/227)\n\n\n\n<a name=\"7.3.0\"></a>\n# [7.3.0](https://github.com/kazupon/vue-i18n/compare/v7.2.0...v7.3.0) (2017-09-22)\n\n\n### :star: New Features\n\n* **directives:** support v-t custom directive (welcome back!) ([af9a2e7](https://github.com/kazupon/vue-i18n/commit/af9a2e7))\n\n\n### :up: Updates\n\n* **typing:** fix flowtype ([fa06f44](https://github.com/kazupon/vue-i18n/commit/fa06f44))\n\n\n\n<a name=\"7.2.0\"></a>\n# [7.2.0](https://github.com/kazupon/vue-i18n/compare/v7.1.2...v7.2.0) (2017-08-28)\n\n\n### :star: New Features\n\n* **interpolation:** list formatting refactor and places/place feature ([#218](https://github.com/kazupon/vue-i18n/issues/218)) by [@myst729](https://github.com/myst729) ([0f0f3ff](https://github.com/kazupon/vue-i18n/commit/0f0f3ff))\n\n\n\n<a name=\"7.1.2\"></a>\n## [7.1.2](https://github.com/kazupon/vue-i18n/compare/v7.1.1...v7.1.2) (2017-08-25)\n\n\n### :zap: Improvements\n\n* **interpolation:** skip non-element VNode in interpolation ([#211](https://github.com/kazupon/vue-i18n/issues/211)) by [@myst729](https://github.com/myst729) ([6be1756](https://github.com/kazupon/vue-i18n/commit/6be1756))\n\n\n\n<a name=\"7.1.1\"></a>\n## [7.1.1](https://github.com/kazupon/vue-i18n/compare/v7.1.0...v7.1.1) (2017-08-03)\n\n\n### :bug: Bug Fixes\n\n* **mixin:** fix cannot setup VueI18n instance ([13585a4](https://github.com/kazupon/vue-i18n/commit/13585a4)), closes [#203](https://github.com/kazupon/vue-i18n/issues/203)\n\n\n\n<a name=\"7.1.0\"></a>\n# [7.1.0](https://github.com/kazupon/vue-i18n/compare/v7.0.5...v7.1.0) (2017-07-30)\n\n\n### :zap: Improvements\n\n* **custom-block:** support multiple custom blocks ([ab955a5](https://github.com/kazupon/vue-i18n/commit/ab955a5)), closes [#189](https://github.com/kazupon/vue-i18n/issues/189)\n\n\n\n<a name=\"7.0.5\"></a>\n## [7.0.5](https://github.com/kazupon/vue-i18n/compare/v7.0.4...v7.0.5) (2017-07-08)\n\n\n### :bug: Bug Fixes\n\n* **format:** fix cannot collectly parse percent ([fc71eda](https://github.com/kazupon/vue-i18n/commit/fc71eda)), closes [#191](https://github.com/kazupon/vue-i18n/issues/191)\n\n\n\n<a name=\"7.0.4\"></a>\n## [7.0.4](https://github.com/kazupon/vue-i18n/compare/v7.0.3...v7.0.4) (2017-07-01)\n\n\n### :bug: Bug Fixes\n\n* **link:** fix ie traverse custom Array.prototype method ([#188](https://github.com/kazupon/vue-i18n/issues/188)) by [@632781460](https://github.com/632781460) ([d3b308b](https://github.com/kazupon/vue-i18n/commit/d3b308b)), closes [#188](https://github.com/kazupon/vue-i18n/issues/188)\n\n\n### :chart_with_upwards_trend: Performance Fixes\n\n* fix blocking at beforeDestroy ([570b215](https://github.com/kazupon/vue-i18n/commit/570b215)), closes [#187](https://github.com/kazupon/vue-i18n/issues/187)\n\n\n\n<a name=\"7.0.3\"></a>\n## [7.0.3](https://github.com/kazupon/vue-i18n/compare/v7.0.2...v7.0.3) (2017-06-13)\n\n\n### :bug: Bug Fixes\n\n* **fallback:** fix cannot fallabck localization ([694e6f2](https://github.com/kazupon/vue-i18n/commit/694e6f2)), closes [#176](https://github.com/kazupon/vue-i18n/issues/176)\n* **fallback:** fix fallback locale issue ([d9ceddc](https://github.com/kazupon/vue-i18n/commit/d9ceddc)), closes [#174](https://github.com/kazupon/vue-i18n/issues/174)\n* **linked:** fix cannot fallback linked localization ([0c572f3](https://github.com/kazupon/vue-i18n/commit/0c572f3)), closes [#172](https://github.com/kazupon/vue-i18n/issues/172)\n\n\n\n<a name=\"7.0.2\"></a>\n## [7.0.2](https://github.com/kazupon/vue-i18n/compare/v7.0.1...v7.0.2) (2017-06-10)\n\n\n### :bug: Bug Fixes\n\n* **sfc:** fix cannot parse custom block locale messages ([32eb3a7](https://github.com/kazupon/vue-i18n/commit/32eb3a7)), closes [#173](https://github.com/kazupon/vue-i18n/issues/173)\n\n\n\n<a name=\"7.0.1\"></a>\n## [7.0.1](https://github.com/kazupon/vue-i18n/compare/v7.0.0...v7.0.1) (2017-06-04)\n\n\n### :bug: Bug Fixes\n\n* fix cannat single file component translation ([687d406](https://github.com/kazupon/vue-i18n/commit/687d406)), closes [#169](https://github.com/kazupon/vue-i18n/issues/169)\n* fix cannnot resolve linked localization with component interpolation ([c973619](https://github.com/kazupon/vue-i18n/commit/c973619)), closes [#171](https://github.com/kazupon/vue-i18n/issues/171)\n* fix datetime and number fallback localization ([be9e1bd](https://github.com/kazupon/vue-i18n/commit/be9e1bd)), closes [#168](https://github.com/kazupon/vue-i18n/issues/168)\n* fix linked translation with using hyphen or underscore keypath ([6e9f151](https://github.com/kazupon/vue-i18n/commit/6e9f151)), closes [#170](https://github.com/kazupon/vue-i18n/issues/170)\n\n\n<a name=\"7.0.0\"></a>\n# [7.0.0](https://github.com/kazupon/vue-i18n/compare/v7.0.0-rc.1...v7.0.0) (2017-05-29)\n\n:tada: :tada: :tada:\n\nSee the [docs](https://kazupon.github.io/vue-i18n/en/)\n\n\n### :star: New Features\n\n* **datetime localization:**\n    * [documentation](https://github.com/kazupon/vue-i18n/blob/dev/gitbook/en/datetime.md)\n    * [example](https://github.com/kazupon/vue-i18n/tree/dev/examples/datetime)\n* **number localization:**\n    * [documentation](https://github.com/kazupon/vue-i18n/blob/dev/gitbook/en/number.md)\n    * [example](https://github.com/kazupon/vue-i18n/tree/dev/examples/number)\n* **component interpolation:**\n    * [documentation](https://github.com/kazupon/vue-i18n/blob/dev/gitbook/en/interpolation.md)\n    * [example](https://github.com/kazupon/vue-i18n/tree/dev/examples/interpolation)\n* **typescript:**\n    * [type definitions](https://github.com/kazupon/vue-i18n/blob/dev/types/index.d.ts)\n\n\n### :chart_with_upwards_trend: Performance Fixes\n\n* fix translation performance issue ([6032a51](https://github.com/kazupon/vue-i18n/commit/6032a51))\n\n\n### :zap: Improvements\n\n* **path:** tweak for ssr\n\n\n### :boom: Breaking changes\n\n* **format:** re-impelement formatter\n* **formatter:** change method nam\n* **flowtype:** fix locale message related type changing and remove underscore type\n\n\n### :bug: Bug Fixes\n\n* **examples:** fix ssr demo ([059034f](https://github.com/kazupon/vue-i18n/commit/059034f))\n* **pluralization:** fix default choice ([240cfed](https://github.com/kazupon/vue-i18n/commit/240cfed))\n\n\n<a name=\"7.0.0-rc.1\"></a>\n# [7.0.0-rc.1](https://github.com/kazupon/vue-i18n/compare/v7.0.0-beta.4...v7.0.0-rc.1) (2017-05-26)\n\n\n### :chart_with_upwards_trend: Performance Fixes\n\n* fix translation performance issue ([6032a51](https://github.com/kazupon/vue-i18n/commit/6032a51)), closes [#165](https://github.com/kazupon/vue-i18n/issues/165)\n\n\n### :up: Updates\n\n* **flowtype:** remove unneccesary type ([eb60156](https://github.com/kazupon/vue-i18n/commit/eb60156))\n\n\n\n<a name=\"7.0.0-beta.4\"></a>\n# [7.0.0-beta.4](https://github.com/kazupon/vue-i18n/compare/v7.0.0-beta.3...v7.0.0-beta.4) (2017-05-23)\n\n\n### :bug: Bug Fixes\n\n* **pluralization:** fix default choice ([240cfed](https://github.com/kazupon/vue-i18n/commit/240cfed)), closes [#164](https://github.com/kazupon/vue-i18n/issues/164)\n\n\n\n<a name=\"7.0.0-beta.3\"></a>\n# [7.0.0-beta.3](https://github.com/kazupon/vue-i18n/compare/v7.0.0-beta.2...v7.0.0-beta.3) (2017-05-15)\n\n### :up: Updates\n\n* bring back from bug fix ([95be4ea](https://github.com/kazupon/vue-i18n/commit/95be4ea))\n\n\n<a name=\"7.0.0-beta.2\"></a>\n# [7.0.0-beta.2](https://github.com/kazupon/vue-i18n/compare/v7.0.0-beta.1...v7.0.0-beta.2) (2017-05-14)\n\n\n### :zap: Improvements\n\n* **path:** tweak for ssr ([eb21921](https://github.com/kazupon/vue-i18n/commit/eb21921))\n* **typescript:** change custom formatter method name ([c5f043f](https://github.com/kazupon/vue-i18n/commit/c5f043f))\n\n\n\n<a name=\"7.0.0-beta.1\"></a>\n# [7.0.0-beta.1](https://github.com/kazupon/vue-i18n/compare/v6.1.1...v7.0.0-beta.1) (2017-05-11)\n\n### :star: New Features\n\n* **datetime localization:** add datetime localization ([3282075](https://github.com/kazupon/vue-i18n/commit/3282075))\n    * [documentation](https://github.com/kazupon/vue-i18n/blob/dev/gitbook/en/datetime.md)\n    * [example](https://github.com/kazupon/vue-i18n/tree/dev/examples/datetime)\n* **number localization:** add number localization ([87ee7b3](https://github.com/kazupon/vue-i18n/commit/87ee7b3))\n    * [documentation](https://github.com/kazupon/vue-i18n/blob/dev/gitbook/en/number.md)\n    * [example](https://github.com/kazupon/vue-i18n/tree/dev/examples/number)\n* **component interpolation:** ([23f7d34](https://github.com/kazupon/vue-i18n/commit/23f7d34)), closes [#145](https://github.com/kazupon/vue-i18n/issues/145) [#144](https://github.com/kazupon/vue-i18n/issues/144) [#37](https://github.com/kazupon/vue-i18n/issues/37)\n    * [documentation](https://github.com/kazupon/vue-i18n/blob/dev/gitbook/en/interpolation.md)\n    * [example](https://github.com/kazupon/vue-i18n/tree/dev/examples/interpolation)\n* **typescript:** add TypeScript type definitions ([#161](https://github.com/kazupon/vue-i18n/issues/161)) by [@aicest](https://github.com/aicest) ([61cebca](https://github.com/kazupon/vue-i18n/commit/61cebca))\n    * [type definitions](https://github.com/kazupon/vue-i18n/blob/dev/types/index.d.ts)\n\n\n### :boom: Breaking changes\n\n* **format:** re-impelement formatter ([a8c046d](https://github.com/kazupon/vue-i18n/commit/a8c046d))\n* **formatter:** change method name ([6eed51c](https://github.com/kazupon/vue-i18n/commit/6eed51c))\n* **flowtype:** fix locale message related type changing ([c30d576](https://github.com/kazupon/vue-i18n/commit/c30d576))\n\n\n### :bug: Bug Fixes\n\n* **examples:** fix ssr demo ([059034f](https://github.com/kazupon/vue-i18n/commit/059034f)), closes [#151](https://github.com/kazupon/vue-i18n/issues/151)\n\n\n<a name=\"6.1.3\"></a>\n## [6.1.3](https://github.com/kazupon/vue-i18n/compare/v6.1.1...v6.1.3) (2017-05-15)\n\n\n### :bug: Bug Fixes\n\n* fix memory leaks ([95be4ea](https://github.com/kazupon/vue-i18n/commit/95be4ea)), closes [#162](https://github.com/kazupon/vue-i18n/issues/162)\n\n\n\n<a name=\"6.1.2\"></a>\n## [6.1.2](https://github.com/kazupon/vue-i18n/compare/v6.1.1...v6.1.2) (2017-05-15)\n\n\n<a name=\"6.1.1\"></a>\n## [6.1.1](https://github.com/kazupon/vue-i18n/compare/v6.1.0...v6.1.1) (2017-04-19)\n\n\n### :bug: Bug Fixes\n\n* **te:** Fix `te()` that always uses `this.locale`, even when `locale` supplied ([#147](https://github.com/kazupon/vue-i18n/issues/147)) by [@aicest](https://github.com/aicest) ([bf15eeb](https://github.com/kazupon/vue-i18n/commit/bf15eeb)), closes [#147](https://github.com/kazupon/vue-i18n/issues/147)\n\n\n\n<a name=\"6.1.0\"></a>\n# [6.1.0](https://github.com/kazupon/vue-i18n/compare/v6.0.0...v6.1.0) (2017-04-14)\n\n\n### :star: New Features\n\n* **api:** add 'mergeLocaleMessage' method ([ef21621](https://github.com/kazupon/vue-i18n/commit/ef21621)), closes [#131](https://github.com/kazupon/vue-i18n/issues/131)\n* **silent:** add silent translation missing option ([29b3a17](https://github.com/kazupon/vue-i18n/commit/29b3a17)), closes [#139](https://github.com/kazupon/vue-i18n/issues/139)\n\n\n### :zap: Improvements\n\n* change to method from computed property ([9135a59](https://github.com/kazupon/vue-i18n/commit/9135a59)), closes [#141](https://github.com/kazupon/vue-i18n/issues/141)\n\n\n\n<a name=\"6.0.0\"></a>\n# [6.0.0](https://github.com/kazupon/vue-i18n/compare/v6.0.0-beta.1...v6.0.0) (2017-04-05)\n\n:tada: :tada: :tada:\n\nSee the [docs](https://kazupon.github.io/vue-i18n/en/)\n\n### :zap: Improvements\n\n- Server-Side Rendering: [example](https://github.com/kazupon/vue-i18n/tree/dev/examples/ssr)\n- Custom formatter: [example](https://github.com/kazupon/vue-i18n/tree/dev/examples/formatting/custom)\n\n\n### :star: NEW Features\n\n- Single File Components: [example](https://github.com/kazupon/vue-i18n/tree/dev/examples/sfc)\n\n\n### :boom: Breaking changes\n\n- API\n- Dynamic locale <sup>DEPRECATED</sup>\n\n\n<a name=\"6.0.0-beta.1\"></a>\n# [6.0.0-beta.1](https://github.com/kazupon/vue-i18n/compare/v6.0.0-alpha.6...v6.0.0-beta.1) (2017-03-22)\n\n\n### :boom: Breaking changes\n\n* change `fallbackRoot` and `sync` option default `true` value ([0890b44](https://github.com/kazupon/vue-i18n/commit/0890b44))\n* remove messages settter, and add getLocaleMessage API ([0f0914d](https://github.com/kazupon/vue-i18n/commit/0f0914d))\n\n\n### :bug: Bug Fixes\n\n* **mixin:** fix computed props errors ([a6b7e37](https://github.com/kazupon/vue-i18n/commit/a6b7e37))\n\n\n### :up: Updates\n\n* **flowtype:** argument names ([cf14425](https://github.com/kazupon/vue-i18n/commit/cf14425))\n\n\n### :zap: Improvements\n\n* **fallbackLocale:** support reactivity ([ed758be](https://github.com/kazupon/vue-i18n/commit/ed758be))\n* **warn:** suppress warning messages for production ([6e417d2](https://github.com/kazupon/vue-i18n/commit/6e417d2))\n\n\n\n<a name=\"6.0.0-alpha.6\"></a>\n# [6.0.0-alpha.6](https://github.com/kazupon/vue-i18n/compare/v6.0.0-alpha.5...v6.0.0-alpha.6) (2017-03-16)\n\n\n### :star: New Features\n\n* add 'setLocaleMessage' API ([8b71eda](https://github.com/kazupon/vue-i18n/commit/8b71eda))\n\n\n\n<a name=\"6.0.0-alpha.5\"></a>\n# [6.0.0-alpha.5](https://github.com/kazupon/vue-i18n/compare/v6.0.0-alpha.3...v6.0.0-alpha.5) (2017-03-11)\n\n\n### :bug: Bug Fixes\n\n* **mixin:** fix cannot create VueI18n instance error for minify production ([7eeb29f](https://github.com/kazupon/vue-i18n/commit/7eeb29f))\n\n\n\n<a name=\"6.0.0-alpha.4\"></a>\n# [6.0.0-alpha.4](https://github.com/kazupon/vue-i18n/compare/v6.0.0-alpha.3...v6.0.0-alpha.4) (2017-03-11)\n\n\n\n<a name=\"6.0.0-alpha.3\"></a>\n# [6.0.0-alpha.3](https://github.com/kazupon/vue-i18n/compare/v6.0.0-alpha.2...v6.0.0-alpha.3) (2017-03-08)\n\n\n### :star: New Features\n\n* add `sync` option ([5c46c07](https://github.com/kazupon/vue-i18n/commit/5c46c07))\n\n\n### :zap: Improvements\n\n* **mixin:** add error throwings and a warning ([0e4ac39](https://github.com/kazupon/vue-i18n/commit/0e4ac39))\n\n\n\n<a name=\"6.0.0-alpha.2\"></a>\n# [6.0.0-alpha.2](https://github.com/kazupon/vue-i18n/compare/v6.0.0-alpha.1...v6.0.0-alpha.2) (2017-02-27)\n\n\n### :zap: Improvements\n\n* **mixin:** release i18n instance ([cc362a3](https://github.com/kazupon/vue-i18n/commit/cc362a3))\n* **vue:** support vue 2.2 ([5e7bf5e](https://github.com/kazupon/vue-i18n/commit/5e7bf5e))\n\n\n\n<a name=\"6.0.0-alpha.1\"></a>\n# [6.0.0-alpha.1](https://github.com/kazupon/vue-i18n/compare/v5.0.2...v6.0.0-alpha.1) (2017-02-23)\n\nThis is the first release of 6.0.\nIn this version, we are some big breaking changes.\n\n- Recommended for: experiments, prototypes, upgrading small, non-critical apps\n- **NOT** recommended for: production use, upgrading production apps\n\n:warning: Documentation still needs to be worked on. And also, we might change some APIs and features.\n\nIn the examples, please refer to this [examples](https://github.com/kazupon/vue-i18n/tree/dev/examples) directory.\n\n\n## Improvements\n- Server-Side Rendering: [example](https://github.com/kazupon/vue-i18n/tree/dev/examples/formatting/custom)\n- Custom formatter: [example](https://github.com/kazupon/vue-i18n/tree/dev/examples/ssr)\n\n## Features\n- Formatting <sup>support</sup>\n- Pluralization <sup>support</sup>\n- Locale and KeyPath Syntax <sup>support</sup>\n- Linked translation <sup>support</sup>\n- Fallback translation <sup>support</sup>\n- Component locale <sup>support</sup>\n- Dynamic locale <sup>DEPRECATED</sup>\n- Hot reload <sup>support</sup>\n\n## API\n\n### Global Config\n- Vue.config.lang <sup>DEPRECATED, use VueI18n constructor `locale` option, or VueI18n#locale</sup>\n- Vue.config.fallbackLang <sup>DEPRECATED, use VueI18n constructor `fallbackLocale` option, or VueI18n#fallbackLocale</sup>\n- Vue.config.missingHandler <sup>DEPRECATED, use VueI18n constructor `missing` option, or VueI18n#missing</sup>\n- Vue.config.i18nFormatter <sup>DEPRECATED, use VueI18n constructor `formatter` option, or VueI18n#formatter</sup>\n\n### Global Method\n- Vue.locale <sup>DEPRECATED, use VueI18n constructor `messages` option, or VueI18n#messages</sup>\n- Vue.t <sup>DEPRECATED, use VueI18n#t</sup>\n- Vue.tc <sup>DEPRECATED, use VueI18n#tc</sup>\n- Vue.te <sup>DEPRECATED, use VueI18n#te</sup>\n\n### Constructor Options\n- locales <sup>DEPRECATED, use `messages` of `i18n` option (e.g `{ i18n: { messaes: ... } }`)</sup>\n\n### Instance Properties\n- $lang <sup>DEPRECATED, use `locale` of Vue instance property `$i18n` (e.g `vm.$i18n.locale = 'en'`)\n\n### VueI18n class <sup>NEW</sup>\n- constructor options: See the [`I18nOptions` type](https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js#L7-L15) of flowtype.\n- methods / properties: See the [`I18n` interface definition](https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js#L17-L33) of flowtype.\n\n\n<a name=\"5.0.2\"></a>\n## [5.0.2](https://github.com/kazupon/vue-i18n/compare/v5.0.1...v5.0.2) (2017-02-18)\n\n\n### :zap: Improvements\n\n* **npm:** revert node >= 6.0 engine restriction ([#110](https://github.com/kazupon/vue-i18n/issues/110)) by [@syxolk](https://github.com/syxolk) ([92b1bd1](https://github.com/kazupon/vue-i18n/commit/92b1bd1)), closes [#109](https://github.com/kazupon/vue-i18n/issues/109)\n\n\n\n<a name=\"5.0.1\"></a>\n## [5.0.1](https://github.com/kazupon/vue-i18n/compare/v5.0.0...v5.0.1) (2017-02-16)\n\n\n### :zap: Improvements\n\n* **asset:** update locale reactivity setting ([b42fd9a](https://github.com/kazupon/vue-i18n/commit/b42fd9a))\n\n\n\n<a name=\"5.0.0\"></a>\n# [5.0.0](https://github.com/kazupon/vue-i18n/compare/v4.10.0...v5.0.0) (2017-02-04)\n\n\n### :boom: Breaking changes\n\n* drop vue 1.0 supporting ([4da26cf](https://github.com/kazupon/vue-i18n/commit/4da26cf)), closes [#105](https://github.com/kazupon/vue-i18n/issues/105)\n\n\n\n<a name=\"4.10.0\"></a>\n# [4.10.0](https://github.com/kazupon/vue-i18n/compare/v4.9.0...v4.10.0) (2017-01-01)\n\n\n### :star: New Features\n\n* `$lang` property for all component ([#99](https://github.com/kazupon/vue-i18n/issues/99)) by [@albert](https://github.com/albert)-zhang ([5ed69f8](https://github.com/kazupon/vue-i18n/commit/5ed69f8))\n\n\n### :up: Updates\n\n* **override:** change langVM keeping variable name ([3ec1bb2](https://github.com/kazupon/vue-i18n/commit/3ec1bb2))\n\n\n\n<a name=\"4.9.0\"></a>\n# [4.9.0](https://github.com/kazupon/vue-i18n/compare/v4.8.0...v4.9.0) (2016-12-17)\n\n\n### :bug: Bug Fixes\n\n* **path:** fix nested key translation ([e15ead4](https://github.com/kazupon/vue-i18n/commit/e15ead4)), closes [#97](https://github.com/kazupon/vue-i18n/issues/97)\n\n\n### :star: New Features\n\n* add globally locale checking ([4cac8b9](https://github.com/kazupon/vue-i18n/commit/4cac8b9))\n* locale checking ([#98](https://github.com/kazupon/vue-i18n/issues/98)) by [@long](https://github.com/long)-long-float ([0bc0a6b](https://github.com/kazupon/vue-i18n/commit/0bc0a6b))\n\n\n<a name=\"4.8.0\"></a>\n# [4.8.0](https://github.com/kazupon/vue-i18n/compare/v4.7.4...v4.8.0) (2016-12-08)\n\n\n### :zap: Improvements\n\n* **extend:** disable no translation warning when set missingHandler ([168a97c](https://github.com/kazupon/vue-i18n/commit/168a97c)), closes [#96](https://github.com/kazupon/vue-i18n/issues/96)\n\n\n\n<a name=\"4.7.4\"></a>\n## [4.7.4](https://github.com/kazupon/vue-i18n/compare/v4.7.3...v4.7.4) (2016-11-29)\n\n\n### :bug: Bug Fixes\n\n* **extend:** fix interpolate error [@tariq86](https://github.com/tariq86) ([5f24e17](https://github.com/kazupon/vue-i18n/commit/5f24e17))\n\n\n\n<a name=\"4.7.3\"></a>\n## [4.7.3](https://github.com/kazupon/vue-i18n/compare/v4.7.2...v4.7.3) (2016-11-24)\n\n\n### :bug: Bug Fixes\n\n* **extend:** fix array local ([35c268a](https://github.com/kazupon/vue-i18n/commit/35c268a)), closes [#91](https://github.com/kazupon/vue-i18n/issues/91) [#59](https://github.com/kazupon/vue-i18n/issues/59)\n\n\n\n<a name=\"4.7.2\"></a>\n## [4.7.2](https://github.com/kazupon/vue-i18n/compare/v4.7.1...v4.7.2) (2016-11-19)\n\n\n### :bug: Bug Fixes\n\n* **observer:** fix dep undefined error ([#88](https://github.com/kazupon/vue-i18n/issues/88)) by [@fandaa](https://github.com/fandaa) ([724974e](https://github.com/kazupon/vue-i18n/commit/724974e)), closes [#88](https://github.com/kazupon/vue-i18n/issues/88)\n\n\n### :zap: Improvements\n\n* **extend:** support translate empty string ([#86](https://github.com/kazupon/vue-i18n/issues/86)) by [@QingWei](https://github.com/QingWei)-Li ([8e6d154](https://github.com/kazupon/vue-i18n/commit/8e6d154))\n\n\n\n<a name=\"4.7.1\"></a>\n## [4.7.1](https://github.com/kazupon/vue-i18n/compare/v4.7.0...v4.7.1) (2016-10-29)\n\n\n### :bug: Bug Fixes\n\n* **interpolate:** named formatting: use name if value is missing ([#77](https://github.com/kazupon/vue-i18n/issues/77)) by [@SebastianS90](https://github.com/SebastianS90) ([a0cc343](https://github.com/kazupon/vue-i18n/commit/a0cc343))\n\n\n### :zap: Improvements\n\n* **named:** using default use nmae when value is missing ([c34e8f1](https://github.com/kazupon/vue-i18n/commit/c34e8f1))\n\n\n\n<a name=\"4.7.0\"></a>\n# [4.7.0](https://github.com/kazupon/vue-i18n/compare/v4.6.0...v4.7.0) (2016-10-28)\n\n\n### :star: New Features\n\n* hot reloading ([#71](https://github.com/kazupon/vue-i18n/issues/71)) by [@gglnx](https://github.com/gglnx) ([7bb94ac](https://github.com/kazupon/vue-i18n/commit/7bb94ac))\n\n\n### :zap: Improvements\n\n* **pluralization:** zero choice ([#70](https://github.com/kazupon/vue-i18n/issues/70)) by [@sebwas](https://github.com/sebwas) ([5f0004f](https://github.com/kazupon/vue-i18n/commit/5f0004f))\n\n\n\n<a name=\"4.6.0\"></a>\n# [4.6.0](https://github.com/kazupon/vue-i18n/compare/v4.5.0...v4.6.0) (2016-09-24)\n\n\n### :star: New Features\n\n* **config:** custom message formatter ([#57](https://github.com/kazupon/vue-i18n/issues/57)) by [@jvmccarthy](https://github.com/jvmccarthy) ([2748eb4](https://github.com/kazupon/vue-i18n/commit/2748eb4))\n\n\n\n<a name=\"4.5.0\"></a>\n# [4.5.0](https://github.com/kazupon/vue-i18n/compare/v4.4.1...v4.5.0) (2016-09-15)\n\n\n### :star: New Features\n\n* **config:** translation miss capturing configration ([aca0ed6](https://github.com/kazupon/vue-i18n/commit/aca0ed6)), closes [#54](https://github.com/kazupon/vue-i18n/issues/54)\n\n\n\n<a name=\"4.4.1\"></a>\n## [4.4.1](https://github.com/kazupon/vue-i18n/compare/v4.4.0...v4.4.1) (2016-09-10)\n\n\n### :zap: Improvements\n\n* **translate:** support hyphenated key ([#52](https://github.com/kazupon/vue-i18n/issues/52)) by [@tariq86](https://github.com/tariq86) ([a40acfd](https://github.com/kazupon/vue-i18n/commit/a40acfd))\n\n\n\n<a name=\"4.4.0\"></a>\n# [4.4.0](https://github.com/kazupon/vue-i18n/compare/v4.3.1...v4.4.0) (2016-08-29)\n\n\n### :star: New Features\n\n* add linked translations ([#50](https://github.com/kazupon/vue-i18n/issues/50)) by [@mmochetti](https://github.com/mmochetti) ([f7ae073](https://github.com/kazupon/vue-i18n/commit/f7ae073))\n\n\n\n<a name=\"4.3.1\"></a>\n## [4.3.1](https://github.com/kazupon/vue-i18n/compare/v4.3.0...v4.3.1) (2016-08-26)\n\n\n### :bug: Bug Fixes\n\n* **npm:** fix installing bug ([57e66aa](https://github.com/kazupon/vue-i18n/commit/57e66aa)), closes [#46](https://github.com/kazupon/vue-i18n/issues/46)\n\n\n\n<a name=\"4.3.0\"></a>\n# [4.3.0](https://github.com/kazupon/vue-i18n/compare/v4.2.3...v4.3.0) (2016-08-26)\n\n\n### :star: New Features\n\n* add pluralization ([#44](https://github.com/kazupon/vue-i18n/issues/44)) by [@mmochetti](https://github.com/mmochetti) ([b5b84d8](https://github.com/kazupon/vue-i18n/commit/b5b84d8))\n\n\n\n<a name=\"4.2.3\"></a>\n## [4.2.3](https://github.com/kazupon/vue-i18n/compare/v4.2.2...v4.2.3) (2016-08-23)\n\n\n### :chart_with_upwards_trend: Performance Fixes\n\n* improve re-rendering cost when change the lang ([0707338](https://github.com/kazupon/vue-i18n/commit/0707338))\n\n\n\n<a name=\"4.2.2\"></a>\n## [4.2.2](https://github.com/kazupon/vue-i18n/compare/v4.2.1...v4.2.2) (2016-08-15)\n\n\n### :bug: Bug Fixes\n\n* **path:** fix array path syntax error ([bc9dbee](https://github.com/kazupon/vue-i18n/commit/bc9dbee)), closes [#42](https://github.com/kazupon/vue-i18n/issues/42) [#43](https://github.com/kazupon/vue-i18n/issues/43)\n\n\n\n<a name=\"4.2.1\"></a>\n## [4.2.1](https://github.com/kazupon/vue-i18n/compare/v4.2.0...v4.2.1) (2016-08-13)\n\n\n### :zap: Improvements\n\n* **translate:** fallback translation warning ([5f6b271](https://github.com/kazupon/vue-i18n/commit/5f6b271))\n\n\n\n<a name=\"4.2.0\"></a>\n# [4.2.0](https://github.com/kazupon/vue-i18n/compare/v4.1.0...v4.2.0) (2016-08-12)\n\n\n### :chart_with_upwards_trend: Performance Fixes\n\n* **format:** use hasOwn function of Vue.util ([a8a19a0](https://github.com/kazupon/vue-i18n/commit/a8a19a0))\n\n\n### :star: New Features\n\n* **fallback:** add fallback translation feature ([1d1f0f2](https://github.com/kazupon/vue-i18n/commit/1d1f0f2)), closes [#36](https://github.com/kazupon/vue-i18n/issues/36)\n\n\n\n<a name=\"4.1.0\"></a>\n# [4.1.0](https://github.com/kazupon/vue-i18n/compare/v4.0.1...v4.1.0) (2016-07-25)\n\n\n### :bug: Bug Fixes\n\n* **util:** fixed isArray reference errors ([0c6f6a0](https://github.com/kazupon/vue-i18n/commit/0c6f6a0))\n\n\n### :star: New Features\n\n* support vue 2.0.0.beta later ([0e1d2f7](https://github.com/kazupon/vue-i18n/commit/0e1d2f7))\n\n\n\n<a name=\"4.0.1\"></a>\n## [4.0.1](https://github.com/kazupon/vue-i18n/compare/v4.0.0...v4.0.1) (2016-06-06)\n\n\n### :bug: Bug Fixes\n\n* **translate:** fix underscore named argument translate issue ([eeaf936](https://github.com/kazupon/vue-i18n/commit/eeaf936))\n\n\n\n<a name=\"4.0.0\"></a>\n# [4.0.0](https://github.com/kazupon/vue-i18n/compare/v3.1.1...v4.0.0) (2016-05-10)\n\n\n### :zap: Improvements\n\n* support vue 2.0-pre-alpha ([f6517bc](https://github.com/kazupon/vue-i18n/commit/f6517bc))\n\n\n\n<a name=\"3.1.1\"></a>\n## [3.1.1](https://github.com/kazupon/vue-i18n/compare/v3.1.0...v3.1.1) (2016-05-09)\n\n\n### :star: New Features\n\n* auto installation for standalone ([2b0dc09](https://github.com/kazupon/vue-i18n/commit/2b0dc09))\n\n\n\n<a name=\"3.1.0\"></a>\n# [3.1.0](https://github.com/kazupon/vue-i18n/compare/v3.0.0...v3.1.0) (2016-05-09)\n\n\n### :star: New Features\n\n* component locales ([12fe695](https://github.com/kazupon/vue-i18n/commit/12fe695)), closes [#29](https://github.com/kazupon/vue-i18n/issues/29)\n\n\n### :warning: Depcreted\n\n* **options:** remove Vue.use options ([d87b59b](https://github.com/kazupon/vue-i18n/commit/d87b59b))\n\n\n### :zap: Improvements\n\n* **keypath:** port the object path parser ([3ae04b7](https://github.com/kazupon/vue-i18n/commit/3ae04b7))\n* **translation:** fix hypenate included key translating ([d0a415f](https://github.com/kazupon/vue-i18n/commit/d0a415f)), closes [#24](https://github.com/kazupon/vue-i18n/issues/24)\n* **translation:** warning outputing when cannot translate with keypath ([b4c7c0e](https://github.com/kazupon/vue-i18n/commit/b4c7c0e)), closes [#22](https://github.com/kazupon/vue-i18n/issues/22)\n\n\n\n<a name=\"3.0.0\"></a>\n# [3.0.0](https://github.com/kazupon/vue-i18n/compare/v2.4.1...v3.0.0) (2016-04-18)\n\n\n### Features\n\n* **lang:** support lang reactive changing ([203ee85](https://github.com/kazupon/vue-i18n/commit/203ee85)), closes [#2](https://github.com/kazupon/vue-i18n/issues/2) [#15](https://github.com/kazupon/vue-i18n/issues/15)\n* **locale:** support dynamic local ([4d61e8d](https://github.com/kazupon/vue-i18n/commit/4d61e8d)), closes [#6](https://github.com/kazupon/vue-i18n/issues/6) [#21](https://github.com/kazupon/vue-i18n/issues/21)\n\n### DEPRECATED\n\n* **index:** plugin install `Vue.use` options (`options.locales`, `options.lang`). See [README](https://github.com/kazupon/vue-i18n/blob/dev/README.md)\n\n\n<a name=\"2.4.1\"></a>\n## [2.4.1](https://github.com/kazupon/vue-i18n/compare/v2.4.0...v2.4.1) (2016-02-29)\n\n### Features\n\n* **i18n:** support ruby on rails i18n interpolation format ([b6b2490](https://github.com/kazupon/vue-i18n/commit/b6b2490))\n\n\n\n<a name=\"2.4.0\"></a>\n# [2.4.0](https://github.com/kazupon/vue-i18n/compare/v2.3.3...v2.4.0) (2016-02-06)\n\n\n### Features\n\n* **i18n:** add Vue.t function ([68935e3](https://github.com/kazupon/vue-i18n/commit/68935e3)), closes [#17](https://github.com/kazupon/vue-i18n/issues/17)\n\n\n\n<a name=\"2.3.3\"></a>\n## [2.3.3](https://github.com/kazupon/vue-i18n/compare/v2.3.2...v2.3.3) (2015-12-09)\n\n\n### Bug Fixes\n\n* **npm:** npm install error ([e31e89e](https://github.com/kazupon/vue-i18n/commit/e31e89e))\n\n### Features\n\n* **bower:** good-bye bower :wink: ([d99eb15](https://github.com/kazupon/vue-i18n/commit/d99eb15))\n\n\n### BREAKING CHANGES\n\n* bower: not support `bower` package manager\n\nI think that bower is dead. :no_good:\n\n\n\n<a name=\"2.3.2\"></a>\n## [2.3.2](https://github.com/kazupon/vue-i18n/compare/v2.3.1...v2.3.2) (2015-12-09)\n\n\n### Features\n\n* **bundle:** more compact the vue-i18n distribution file ([2f32ecc](https://github.com/kazupon/vue-i18n/commit/2f32ecc))\n\n\n\n<a name=\"2.3.1\"></a>\n## [2.3.1](https://github.com/kazupon/vue-i18n/compare/v2.3.0...v2.3.1) (2015-12-01)\n\n### Reverts\n\n* **index:** automatically install for standalone ([25b8059](https://github.com/kazupon/vue-i18n/commit/25b8059))\n\n\n\n<a name=\"2.3.0\"></a>\n# [2.3.0](https://github.com/kazupon/vue-i18n/compare/v2.2.0...v2.3.0) (2015-11-26)\n\n\n### Bug Fixes\n\n* **index:** cannot work at Vue 1.0.10 later ([6fd543e](https://github.com/kazupon/vue-i18n/commit/6fd543e)), closes [#9](https://github.com/kazupon/vue-i18n/issues/9)\n\n### Features\n\n* **index:** support automatically install for standalone ([ada2673](https://github.com/kazupon/vue-i18n/commit/ada2673))\n\n\n\n# v2.2.0 / 2015-09-16\n\n* Re-implemetation with ES6 (babel)\n\n# v2.1.0 / 2015-07-03\n\n* Add global local language setting with `Vue.config.lang`\n\n# v2.0.0 / 2015-06-29\n\n* Support Vue.js 0.12\n* Remove the followings (Breaking Changes)\n    * `Vue.t` function\n    * `v-t` directive\n\n# v1.1.1 / 2015-04-21\n\n* Fix unit test error\n\n# v1.1.0 / 2015-01-10\n\n* Support template string in `$t` method\n* Support language changing in `$t` method\n\n# v1.0.0 / 2015-01-10\n\n* Add `$t` method\n\n# v0.11.0 / 2014-11-07\n\n* Bump to 0.11.0\n\n# v0.2.0 / 2014-10-08\n\n* Support Vue.js 0.11.0-rc\n\n# v0.1.2 / 2014-10-07\n\n* Support bower\n\n# v0.1.1 / 2014-10-06\n\n* Add `Vue.t` function\n\n# v0.1.0 / 2014-05-06\n\n* Release first\n\n# v0.0.0 / 2014-05-03\n\n* Initial project\n"
  },
  {
    "path": "CONTRIBUTING.md",
    "content": "# vue-i18n Contributing Guide\n\n- [Issue Reporting Guidelines](#issue-reporting-guidelines)\n- [Pull Request Guidelines](#pull-request-guidelines)\n- [Development Setup](#development-setup)\n\n## General Guidelines\n\nThanks for understanding that English is used as a shared language in this repository.\nMaintainers do not use machine translation to avoid miscommunication due to error in translation.\nIf description of issue / PR are written in non-English languages, those may be closed.\n\nIt is ofcourse fine to use non-English language, when you open a PR to translate documents and communicates with other users in same language.\n\n## Issue Reporting Guidelines\n\n- The issue list of this repo is **exclusively** for bug reports and feature requests. Non-conforming issues will be closed immediately.\n\n  - For simple beginner questions, you can get quick answers from [`#vue-i18n` channel of Discord](https://chat.vuejs.org/)\n\n  - For more complicated questions, you can use [the official forum](http://forum.vuejs.org/) or StackOverflow. Make sure to provide enough information when asking your questions - this makes it easier for others to help you!\n\n- Try to search for your issue, it may have already been answered or even fixed in the development branch.\n\n- Check if the issue is reproducible with the latest stable version of Vue. If you are using a pre-release, please indicate the specific version you are using.\n\n- It is **required** that you clearly describe the steps necessary to reproduce the issue you are running into. Issues with no clear repro steps will not be triaged. If an issue labeled \"need repro\" receives no further input from the issue author for more than 5 days, it will be closed.\n\n- It is recommended that you make a JSFiddle/JSBin/Codepen/CodeSandbox to demonstrate your issue. You could start based with [this template](http://jsfiddle.net/r8qnsfb1/) that already includes the latest version.\n\n- For bugs that involves build setups, you can create a reproduction repository with steps in the README.\n\n- If your issue is resolved but still open, don’t hesitate to close it. In case you found a solution by yourself, it could be helpful to explain how you fixed it.\n\n## Pull Request Guidelines\n\n- The `master` branch is basically just a snapshot of the latest stable release. All development should be done in dedicated branches. **Do not submit PRs against the `master` branch.**\n\n- Checkout a topic branch from the relevant branch, e.g. `v8.x`, and merge back against that branch.\n\n- Work in the `src` folder and **DO NOT** checkin `dist` in the commits.\n\n- It's OK to have multiple small commits as you work on the PR - we will let GitHub automatically squash it before merging.\n\n- Make sure `npm test` passes. (see [development setup](#development-setup))\n\n- If adding new feature:\n  - Add accompanying test case.\n  - Provide convincing reason to add this feature. Ideally you should open a suggestion issue first and have it greenlighted before working on it.\n\n- If fixing a bug:\n  - Provide detailed description of the bug in the PR. Live demo preferred.\n  - Add appropriate test coverage if applicable.\n\n### Work Step Example\n- Fork the repository from [kazupon/vue-i18n](https://github.com/kazupon/vue-i18n) !\n- Create your topic branch from `v8.x`: `git branch my-new-topic origin/v8.x`\n- Add codes and pass tests !\n- Commit your changes: `git commit -am 'Add some topic'`\n- Push to the branch: `git push origin my-new-topic`\n- Submit a pull request to `v8.x` branch of `kazupon/vue-i18n` repository !\n\n## Development Setup\n\nYou will need [Node.js](http://nodejs.org) and [Java Runtime Environment](http://www.oracle.com/technetwork/java/javase/downloads/index.html) (needed for running Selenium server during e2e tests).\n\nAfter cloning the repo, run:\n\n    $ npm install\n\n### Commonly used NPM scripts\n\n    # watch and serve with hot reload unit test at localhost:8080\n    $ npm run dev\n\n    # lint source codes\n    $ npm run lint\n\n    # run unit tests in browser (firefox/safari/chrome)\n    $ npm run test:unit\n\n    # build all dist files, including npm packages\n    $ npm run build\n\n    # run the full test suite, include linting / type checking\n    $ npm test\n\nThere are some other scripts available in the `scripts` section of the `package.json` file.\n\nThe default test script will do the following: lint with ESLint -> type check with Flow -> unit tests with coverage -> e2e tests. **Please make sure to have this pass successfully before submitting a PR.** Although the same tests will be run against your PR on the CI server, it is better to have it working locally beforehand.\n"
  },
  {
    "path": "LICENSE",
    "content": "The MIT License (MIT)\n\nCopyright (c) 2016 kazuya kawaguchi\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of\nthis software and associated documentation files (the \"Software\"), to deal in\nthe Software without restriction, including without limitation the rights to\nuse, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of\nthe Software, and to permit persons to whom the Software is furnished to do so,\nsubject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS\nFOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR\nCOPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER\nIN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN\nCONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "<p align=\"center\"><img width=\"128px\" height=\"112px\" src=\"./assets/vue-i18n-logo.png\" alt=\"Vue I18n logo\"></p>\n<h1 align=\"center\">vue-i18n</h1>\n<p align=\"center\">\n  <a href=\"https://github.com/kazupon/vue-i18n/actions/workflows/ci.yml\"><img src=\"https://github.com/kazupon/vue-i18n/actions/workflows/ci.yml/badge.svg\" alt=\"Test Status\"></a>\n  <a href=\"http://badge.fury.io/js/vue-i18n\"><img src=\"https://badge.fury.io/js/vue-i18n.svg\" alt=\"NPM version\"></a>\n  <a href=\"https://discord.gg/4yCnk2m\"><img src=\"https://img.shields.io/badge/Discord-join%20chat-738bd7.svg\" alt=\"vue-i18n channel on Discord\"></a>\n</p>\n\n<p align=\"center\">Internationalization plugin for Vue.js</p>\n\n<br/>\n\n> [!IMPORTANT]\n> Vue I18n v8 has reached EOL and is no longer actively maintained. Please upgrade to Vue I18n v9 or later. **The seucirty hotfix is only provided for Vue I18n v8.28 until end of 2024**. Thereafter, security fix is not provide for that version later. However, if it is absolutely necessary, please contact to contact@frapwings.jp\n\n<h3 align=\"center\">🏅 Platinum Sponsors</h3>\n\n<p align=\"center\">\n  <a href=\"https://zenarchitects.co.jp/\" target=\"_blank\">\n    <img\n      src=\"https://raw.githubusercontent.com/kazupon/vue-i18n/v8.x/vuepress/.vuepress/public/patrons/zenarchitects.png\"\n      width=\"400px\"\n    />\n  </a>\n</p>\n\n<h3 align=\"center\">✨ Special Sponsors</h3>\n\n<p align=\"center\">\n  <a\n    href=\"https://plaid.co.jp/\"\n    target=\"_blank\">\n    <img\n      src=\"https://raw.githubusercontent.com/kazupon/vue-i18n/v8.x/vuepress/.vuepress/public/patrons/plaid.svg\"\n      width=\"240px\"\n    />\n  </a>\n</p>\n\n<h3 align=\"center\">🥇 Gold Sponsors</h3>\n\n<p align=\"center\">\n  <a\n    href=\"https://nuxtlabs.com/\"\n    target=\"_blank\">\n    <img\n      src=\"https://raw.githubusercontent.com/kazupon/vue-i18n/v8.x/vuepress/.vuepress/public/patrons/nuxtlabs.svg\"\n      width=\"240px\"\n    />\n  </a>\n</p>\n\n<p align=\"center\">\n  <a\n    href=\"https://localazy.com/blog/how-to-localize-vuejs-app-with-vue-i18n-and-localazy?utm_source=kazupon&utm_medium=banner&utm_campaign=sponsorships_kazupon&utm_content=logo\"\n    target=\"_blank\">\n    <img\n      src=\"https://raw.githubusercontent.com/kazupon/vue-i18n/v8.x/vuepress/.vuepress/public/patrons/localazy.svg\"\n      width=\"240px\"\n    />\n  </a>\n</p>\n\n<p align=\"center\">\n  <a\n    href=\"https://crowdin.com/teams/engineering?utm_source=vue-i18n.intlify.dev&utm_medium=referral\"\n    target=\"_blank\">\n    <img\n      src=\"https://raw.githubusercontent.com/kazupon/vue-i18n/v8.x/vuepress/.vuepress/public/patrons/crowdin.svg\"\n      width=\"240px\"\n    />\n  </a>\n</p>\n\n<h3 align=\"center\">🥈 Silver Sponsors</h3>\n\n<h3 align=\"center\">🥉 Bronze Sponsors</h3>\n\n<p align=\"center\">\n  <a href=\"https://www.vuemastery.com/\" target=\"_blank\">\n    <img\n      src=\"https://raw.githubusercontent.com/kazupon/vue-i18n/v8.x/vuepress/.vuepress/public/patrons/vuemastery.png\"\n      width=\"144px\"\n    />\n  </a>\n</p>\n\n<p align=\"center\">\n  <a href=\"https://froggly.pl/\" target=\"_blank\">\n    <img\n      src=\"https://raw.githubusercontent.com/kazupon/vue-i18n/v8.x/vuepress/.vuepress/public/patrons/Froggly.svg\"\n      width=\"144px\"\n    />\n  </a>\n</p>\n\n\n<br/>\n\n## ⚠️  NOTICE\n\n**This repository is for Vue I18n v8.x and Vue 2**\n\n**If you want to know about how to usage for Vue I18n v9 on Vue 3, See the [this repository](https://github.com/intlify/vue-i18n-next))**\n\n## 🙋‍♂️ About support for v8\n\nWe will follow Vue v2 maintenance lifespan\n\n## 📔 Documentation\n\nAbout Vue I18n v8.x, See [here](http://kazupon.github.io/vue-i18n/)\n\nIf you want to read Vue I18n v9 docs, See [here](https://vue-i18n.intlify.dev/)\n\n## 📜 Changelog\n\nDetailed changes for each release are documented in the [CHANGELOG.md](https://github.com/kazupon/vue-i18n/blob/dev/CHANGELOG.md).\n\n\n## ❗ Issues\n\nPlease make sure to read the [Issue Reporting Checklist](https://github.com/kazupon/vue-i18n/blob/dev/CONTRIBUTING.md#issue-reporting-guidelines) before opening an issue. Issues not conforming to the guidelines may be closed immediately.\n\n\n## 💪 Contribution\n\nPlease make sure to read the [Contributing Guide](https://github.com/kazupon/vue-i18n/blob/dev/CONTRIBUTING.md) before making a pull request.\n\n\n## ©️ License\n\n[MIT](http://opensource.org/licenses/MIT)\n"
  },
  {
    "path": "SECURITY.md",
    "content": "# Security Policy\n\n## Supported Versions\n\n| Version | Supported          |\n| ------- | ------------------ |\n| 8.28.x   | :white_check_mark: |\n| < 8.28.0   | :x:                |\n\n## Reporting a Vulnerability\n\nTo report a vulnerability, please [privately report it via the Security tab](https://github.com/kazupon/vue-i18n/security/advisories/new) on the correct GitHub repository (see [documentation](https://docs.github.com/en/code-security/security-advisories/guidance-on-reporting-and-writing-information-about-vulnerabilities/privately-reporting-a-security-vulnerability#privately-reporting-a-security-vulnerability)). If that is impossible, feel free to send an email to contact@frapwings.jp instead.\n\nAll security vulnerabilities will be promptly verified and addressed.\n"
  },
  {
    "path": "assets/README.md",
    "content": "# vue-i18n-art\n\n> Vue I18n artworks\n\n<a rel=\"license\" href=\"http://creativecommons.org/licenses/by-nc-sa/4.0/\"><img alt=\"Creative Commons License\" style=\"border-width:0\" src=\"https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png\" /></a><br /><span xmlns:dct=\"http://purl.org/dc/terms/\" property=\"dct:title\">Vue I18n artworks</span> by <a xmlns:cc=\"http://creativecommons.org/ns#\" href=\"https://github.com/kazupon\" property=\"cc:attributionName\" rel=\"cc:attributionURL\">Kazuya Kawaguchi</a> is licensed under a <a rel=\"license\" href=\"http://creativecommons.org/licenses/by-nc-sa/4.0/\">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>, with the following extra conditions:\n\n- It is **OK** to use the Vue I18n logo in the following cases:\n  - in marketing materials for technical events, e.g. meetups, hackathons, conferences and workshops that are related to Vue I18n.\n  - in open source projects related to Vue I18n.\n  - in technical articles / videos / books / papers for educational purposes.\n  - to illustrate a commercial product's Vue I18n integration in its marketing copy.\n\n- It is **NOT OK** to use the Vue I18n logo in the following cases without prior written consent from the copyright owner:\n  - Using the Vue I18n logo in a commercial product for purposes other than illustrating its Vue I18n integration.\n  - Sell physical products that uses the Vue I18n logo or its variants, e.g. t-shirts.\n\nThe copyright owner reserves the right of final explanation for any use case not explicitly stated above.\n"
  },
  {
    "path": "config/.eslintrc.js",
    "content": "module.exports = {\n  globals: {\n    process: true\n  },\n  extends: 'vue',\n  rules: {\n    'no-multiple-empty-lines': [2, {max: 2}],\n    'no-console': 0\n  }\n}"
  },
  {
    "path": "config/banner.js",
    "content": "const pack = require('../package.json')\nconst version = process.env.VERSION || pack.version\n\nmodule.exports =\n  '/*!\\n' +\n  ` * ${pack.name} v${version} \\n` +\n  ` * (c) ${new Date().getFullYear()} ${pack.author.name}\\n` +\n  ` * Released under the ${pack.license} License.\\n` +\n  ' */'\n"
  },
  {
    "path": "config/build.js",
    "content": "'use strict'\nconst fs = require('fs')\nconst exist = fs.existsSync\nconst mkdir = fs.mkdirSync\nconst getAllEntries = require('./entry').getAllEntries\nconst build = require('./bundle')\n\nif (!exist('dist')) {\n  mkdir('dist')\n}\n\nlet entries = getAllEntries()\n\n// filter entries via command line arg\nif (process.argv[2]) {\n  const filters = process.argv[2].split(',')\n  entries = entries.filter(b => {\n    return filters.some(f => b.dest.indexOf(f) > -1)\n  })\n}\n\nbuild(entries)\n"
  },
  {
    "path": "config/bundle.js",
    "content": "const fs = require('fs')\nconst path = require('path')\nconst zlib = require('zlib')\nconst rollup = require('rollup')\nconst terser = require('terser')\n\nmodule.exports = build\n\nfunction build (entries) {\n  let built = 0\n  const total = entries.length\n  const next = () => {\n    buildEntry(entries[built]).then(() => {\n      built++\n      if (built < total) {\n        next()\n      }\n    }).catch(logError)\n  }\n  next()\n}\n\nfunction buildEntry (config) {\n  const output = config.output\n  const { file, banner } = output\n  const isProd = /min\\.js$/.test(file)\n  return rollup.rollup(config)\n    .then(bundle => bundle.generate(output))\n    .then(({ code }) => {\n      if (isProd) {\n        var minified = (banner ? banner + '\\n' : '') + terser.minify(code, {\n          toplevel: true,\n          output: {\n            ascii_only: true\n          },\n          compress: {\n            pure_funcs: ['makeMap']\n          }\n        }).code\n        return write(file, minified, true)\n      } else {\n        return write(file, code)\n      }\n    })\n}\n\nfunction write (dest, code, zip) {\n  return new Promise((resolve, reject) => {\n    function report (extra) {\n      console.log(blue(path.relative(process.cwd(), dest)) + ' ' + getSize(code) + (extra || ''))\n      resolve()\n    }\n\n    fs.writeFile(dest, code, err => {\n      if (err) { return reject(err) }\n      if (zip) {\n        zlib.gzip(code, (err, zipped) => {\n          if (err) { return reject(err) }\n          report(' (gzipped: ' + getSize(zipped) + ')')\n        })\n      } else {\n        report()\n      }\n    })\n  })\n}\n\nfunction getSize (code) {\n  return (code.length / 1024).toFixed(2) + 'kb'\n}\n\nfunction logError (e) {\n  console.log(e)\n}\n\nfunction blue (str) {\n  return '\\x1b[1m\\x1b[34m' + str + '\\x1b[39m\\x1b[22m'\n}\n"
  },
  {
    "path": "config/entry.js",
    "content": "const path = require('path')\nconst replace = require('rollup-plugin-replace')\nconst flow = require('rollup-plugin-flow-no-whitespace')\nconst buble = require('rollup-plugin-buble')\nconst node = require('rollup-plugin-node-resolve')\nconst cjs = require('rollup-plugin-commonjs')\nconst banner = require('./banner')\nconst pack = require('../package.json')\n\nfunction toUpper (_, c) {\n  return c ? c.toUpperCase() : ''\n}\n\nconst resolve = _path => path.resolve(__dirname, '../', _path)\nconst classifyRE = /(?:^|[-_\\/])(\\w)/g\nfunction classify (str) {\n  return str.replace(classifyRE, toUpper)\n}\nconst moduleName = classify(pack.name)\n\nconst entries = {\n  commonjs: {\n    entry: resolve('src/index.js'),\n    dest: resolve(`dist/${pack.name}.common.js`),\n    format: 'cjs',\n    banner\n  },\n  esm: {\n    entry: 'src/index.js',\n    dest: resolve(`dist/${pack.name}.esm.js`),\n    format: 'es',\n    banner\n  },\n  production: {\n    entry: 'src/index.js',\n    dest: resolve(`dist/${pack.name}.min.js`),\n    format: 'umd',\n    env: 'production',\n    moduleName,\n    banner\n  },\n  development: {\n    entry: 'src/index.js',\n    dest: resolve(`dist/${pack.name}.js`),\n    format: 'umd',\n    env: 'development',\n    moduleName,\n    banner\n  },\n  browser_development: {\n    entry: 'src/index.js',\n    dest: resolve(`dist/${pack.name}.esm.browser.js`),\n    format: 'es',\n    env: 'development',\n    moduleName,\n    transpile: false\n  },\n  browser_production: {\n    entry: 'src/index.js',\n    dest: resolve(`dist/${pack.name}.esm.browser.min.js`),\n    format: 'es',\n    env: 'production',\n    moduleName,\n    transpile: false\n  }\n}\n\nfunction genConfig (opts) {\n  const config = {\n    input: opts.entry,\n    output: {\n      file: opts.dest,\n      name: moduleName,\n      format: opts.format,\n      banner: opts.banner\n    },\n    plugins: [\n      flow(),\n      node(),\n      cjs()\n    ]\n  }\n\n  const replacePluginOptions = { '__VERSION__': pack.version }\n  if (opts.env) {\n    replacePluginOptions['process.env.NODE_ENV'] = JSON.stringify(opts.env)\n  }\n  config.plugins.push(replace(replacePluginOptions))\n\n  if (opts.transpile !== false) {\n    config.plugins.push(buble())\n  }\n\n  return config\n}\n\nexports.getEntry = name => genConfig(entries[name])\nexports.getAllEntries = () => Object.keys(entries).map(name => genConfig(entries[name]))\n"
  },
  {
    "path": "config/karma-intl-plugin.js",
    "content": "const path = require('path')\n\nconst init = function (files) {\n  files.unshift({\n    pattern: path.join(__dirname, '../node_modules/intl/dist/Intl.complete.js'),\n    included: true,\n    served: true,\n    watched: false\n  })\n}\n\ninit.$inject = ['config.files']\n\nmodule.exports = {\n  'framework:intl-shim': ['factory', init]\n}\n"
  },
  {
    "path": "config/karma.base.conf.js",
    "content": "const webpack = require('webpack')\nconst intlPlugin = require('./karma-intl-plugin')\n\nconst webpackConfig = {\n  module: {\n    rules: [{\n      test: /\\.js$/,\n      loader: 'babel-loader',\n      exclude: /node_modules/\n    }]\n  },\n  devtool: '#inline-source-map'\n}\n\nmodule.exports = {\n  frameworks: ['mocha', 'intl-shim'],\n  files: [\n    '../test/unit/index.js'\n  ],\n  preprocessors: {\n    '../test/unit/index.js': ['webpack', 'sourcemap']\n  },\n  webpack: Object.assign({\n    mode: 'development',\n  }, webpackConfig),\n  webpackMiddleware: {\n    noInfo: true\n  },\n  plugins: [\n    'karma-mocha',\n    'karma-mocha-reporter',\n    'karma-sourcemap-loader',\n    'karma-webpack',\n    intlPlugin,\n  ]\n}\n"
  },
  {
    "path": "config/karma.cover.conf.js",
    "content": "const base = require('./karma.base.conf')\n\nmodule.exports = config => {\n  const options = Object.assign(base, {\n    browsers: ['ChromeHeadless'],\n    reporters: ['mocha', 'coverage'],\n    coverageReporter: {\n      reporters: [\n        { type: 'lcov', dir: '../coverage', subdir: '.' },\n        { type: 'text-summary', dir: '../coverage', subdir: '.' }\n      ]\n    },\n    singleRun: true,\n    plugins: base.plugins.concat([\n      'karma-coverage',\n      'karma-chrome-launcher'\n    ])\n  })\n\n  config.set(options)\n}\n"
  },
  {
    "path": "config/karma.sauce.conf.js",
    "content": "const base = require('./karma.base.conf')\nconst pack = require('../package.json')\n\n/**\n * Having too many tests running concurrently on saucelabs\n * causes timeouts and errors, so we have to run them in\n * smaller batches.\n */\n\nconst batches = [\n  // the coolkids\n  {\n    sl_chrome: {\n      base: 'SauceLabs',\n      browserName: 'chrome',\n      platform: 'Windows 7'\n    },\n    sl_firefox: {\n      base: 'SauceLabs',\n      browserName: 'firefox'\n    },\n    sl_mac_safari: {\n      base: 'SauceLabs',\n      browserName: 'safari',\n      platform: 'OS X 10.10'\n    }\n  },\n  // ie family\n  {\n    sl_ie_9: {\n      base: 'SauceLabs',\n      browserName: 'internet explorer',\n      platform: 'Windows 7',\n      version: '9'\n    },\n    sl_ie_10: {\n      base: 'SauceLabs',\n      browserName: 'internet explorer',\n      platform: 'Windows 8',\n      version: '10'\n    },\n    sl_ie_11: {\n      base: 'SauceLabs',\n      browserName: 'internet explorer',\n      platform: 'Windows 8.1',\n      version: '11'\n    },\n    sl_edge: {\n      base: 'SauceLabs',\n      platform: 'Windows 10',\n      browserName: 'MicrosoftEdge'\n    }\n  },\n  // mobile\n  {\n    sl_ios_safari_8: {\n      base: 'SauceLabs',\n      browserName: 'iphone',\n      version: '8.4'\n    },\n    sl_ios_safari_9: {\n      base: 'SauceLabs',\n      browserName: 'iphone',\n      version: '9.3'\n    },\n    sl_android_4_4: {\n      base: 'SauceLabs',\n      browserName: 'android',\n      version: '4.4'\n    },\n    sl_android_5_1: {\n      base: 'SauceLabs',\n      browserName: 'android',\n      version: '5.1'\n    }\n  }\n]\n\nmodule.exports = config => {\n  const batch = batches[process.argv[5] || 0]\n\n  config.set(Object.assign(base, {\n    singleRun: true,\n    browsers: Object.keys(batch),\n    customLaunchers: batch,\n    reporters: process.env.CI\n      ? ['dots', 'saucelabs'] // avoid spamming CI output\n      : ['progress', 'saucelabs'],\n    sauceLabs: {\n      testName: `${pack.name} unit tests`,\n      recordScreenshots: false,\n      connectOptions: {\n        'no-ssl-bump-domains': 'all' // Ignore SSL error on Android emulator\n      },\n      build: process.env.CIRCLE_BUILD_NUM || process.env.SAUCE_BUILD_ID || Date.now()\n    },\n    captureTimeout: 300000,\n    browserNoActivityTimeout: 300000,\n    plugins: base.plugins.concat([\n      'karma-sauce-launcher'\n    ])\n  }))\n}\n"
  },
  {
    "path": "config/karma.unit.ci.conf.js",
    "content": "const base = require('./karma.base.conf')\n\nmodule.exports = config => {\n  config.set(Object.assign(base, {\n    browsers: ['ChromeHeadless', 'FirefoxHeadless'],\n    reporters: ['progress'],\n    singleRun: true,\n    plugins: base.plugins.concat([\n      'karma-chrome-launcher',\n      'karma-firefox-launcher',\n    ])\n  }))\n}\n"
  },
  {
    "path": "config/karma.unit.conf.js",
    "content": "const base = require('./karma.base.conf')\n\nmodule.exports = config => {\n  config.set(Object.assign(base, {\n    browsers: ['Chrome', 'Firefox', 'Safari'],\n    reporters: ['progress'],\n    singleRun: true,\n    plugins: base.plugins.concat([\n      'karma-chrome-launcher',\n      'karma-firefox-launcher',\n      'karma-safari-launcher'\n    ])\n  }))\n}\n"
  },
  {
    "path": "config/nightwatch.conf.js",
    "content": "// http://nightwatchjs.org/guide#settings-file\nmodule.exports = {\n  src_folders: ['test/e2e/test'],\n  output_folder: 'test/e2e/report',\n  custom_commands_path: ['node_modules/nightwatch-helpers/commands'],\n  custom_assertions_path: ['node_modules/nightwatch-helpers/assertions'],\n\n  selenium: {\n    start_process: true,\n    server_path: 'node_modules/selenium-server/lib/runner/selenium-server-standalone-3.141.59.jar',\n    host: '127.0.0.1',\n    port: 4444,\n    cli_args: {\n      'webdriver.chrome.driver': require('chromedriver').path\n    }\n  },\n\n  test_settings: {\n    default: {\n      selenium_port: 4444,\n      selenium_host: 'localhost',\n      silent: true,\n      screenshots: {\n        enabled: true,\n        on_failure: true,\n        on_error: false,\n        path: 'test/e2e/screenshots'\n      }\n    },\n\n    chrome: {\n      desiredCapabilities: {\n        browserName: 'chrome',\n        javascriptEnabled: true,\n        acceptSslCerts: true,\n        chromeOptions: {\n          // Issue https://github.com/nightwatchjs/nightwatch/issues/2149\n          w3c: false\n        }\n      }\n    },\n\n    firefox: {\n      desiredCapabilities: {\n        browserName: 'firefox',\n        javascriptEnabled: true,\n        acceptSslCerts: true\n      }\n    },\n\n    headless: {\n      desiredCapabilities: {\n        browserName: 'chrome',\n        chromeOptions : {\n          args : ['headless'],\n          w3c: false\n        },\n        javascriptEnabled: true,\n        acceptSslCerts: true\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "config/version.js",
    "content": "const fs = require('fs')\nconst pack = require('../package.json')\n\n// update installation.md\nconst installation = fs\n  .readFileSync('./vuepress/installation.md', 'utf-8')\n  .replace(\n    /https:\\/\\/unpkg\\.com\\/vue-i18n@[\\d.]+.[\\d]+\\/dist\\/vue-i18n\\.js/,\n    'https://unpkg.com/vue-i18n@' + pack.version + '/dist/vue-i18n.js'\n  )\nfs.writeFileSync('./vuepress/installation.md', installation)\n"
  },
  {
    "path": "config/webpack.dev.conf.js",
    "content": "const path = require('path')\nconst webpack = require('webpack')\n\nmodule.exports = {\n  entry: 'mocha-loader!./test/unit/index.js',\n  mode: 'development',\n  resolve: {\n    extensions: ['.js']\n  },\n  output: {\n    path: path.resolve(__dirname, '/test/unit'),\n    filename: 'tests.js',\n    publicPath: '/'\n  },\n  module: {\n    rules: [{\n      test: /\\.js$/,\n      exclude: /node_modules|vue\\/dist/,\n      loader: 'babel-loader'\n    }]\n  },\n  devtool: '#eval-source-map'\n}\n"
  },
  {
    "path": "decls/i18n.js",
    "content": "declare var Intl: any;\n\ndeclare type Path = string;\ndeclare type Locale = string;\ndeclare type MessageContext = {\n  list: (index: number) => mixed,\n  named: (key: string) => mixed,\n  linked: (key: string) => TranslateResult,\n  values: any,\n  path: string,\n  formatter: Formatter,\n  messages: LocaleMessages,\n  locale: Locale\n}\ndeclare type MessageFunction = (ctx: MessageContext) => string\ndeclare type FallbackLocale = string | string[] | false | { [locale: string]: string[] };\ndeclare type LocaleMessage = string | MessageFunction | LocaleMessageObject | LocaleMessageArray;\ndeclare type LocaleMessageObject = { [key: Path]: LocaleMessage };\ndeclare type LocaleMessageArray = Array<LocaleMessage>;\ndeclare type LocaleMessages = { [key: Locale]: LocaleMessageObject };\n\n// This options is the same as Intl.DateTimeFormat constructor options:\n// http://www.ecma-international.org/ecma-402/2.0/#sec-intl-datetimeformat-constructor\ndeclare type DateTimeFormatOptions = {\n  year?: 'numeric' | '2-digit',\n  month?: 'numeric' | '2-digit' | 'narrow' | 'short' | 'long',\n  day?: 'numeric' | '2-digit',\n  hour?: 'numeric' | '2-digit',\n  minute?: 'numeric' | '2-digit',\n  second?: 'numeric' | '2-digit',\n  weekday?: 'narrow' | 'short' | 'long',\n  hour12?: boolean,\n  era?: 'narrow' | 'short' | 'long',\n  timeZone?: string, // IANA time zone\n  timeZoneName?: 'short' | 'long',\n  localeMatcher?: 'lookup' | 'best fit',\n  formatMatcher?: 'basic' | 'best fit'\n};\ndeclare type DateTimeFormat = { [key: string]: DateTimeFormatOptions };\ndeclare type DateTimeFormats = { [key: Locale]: DateTimeFormat };\n\n// This options is the same as Intl.NumberFormat constructor options:\n// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat\ndeclare type NumberFormatOptions = {\n  style?: 'decimal' | 'currency' | 'percent',\n  currency?: string, // ISO 4217 currency codes\n  currencyDisplay?: 'symbol' | 'code' | 'name',\n  useGrouping?: boolean,\n  minimumIntegerDigits?: number,\n  minimumFractionDigits?: number,\n  maximumFractionDigits?: number,\n  minimumSignificantDigits?: number,\n  maximumSignificantDigits?: number,\n  localeMatcher?: 'lookup' | 'best fit',\n  formatMatcher?: 'basic' | 'best fit'\n};\ndeclare type NumberFormat = { [key: string]: NumberFormatOptions };\ndeclare type NumberFormats = { [key: Locale]: NumberFormat };\ndeclare type Modifiers = { [key: string]: (str: string) => string };\n\ndeclare type TranslateResult = string | LocaleMessages;\ndeclare type DateTimeFormatResult = string;\ndeclare type NumberFormatResult = string;\ndeclare type MissingHandler = (locale: Locale, key: Path, vm?: any) => string | void;\ndeclare type PostTranslationHandler = (str: string, key?: string) => string;\ndeclare type GetChoiceIndex = (choice: number, choicesLength: number) => number\ndeclare type ComponentInstanceCreatedListener = (newI18n: I18n, rootI18n: I18n) => void;\n\ndeclare type FormattedNumberPartType = 'currency' | 'decimal' | 'fraction' | 'group' | 'infinity' | 'integer' | 'literal' | 'minusSign' | 'nan' | 'plusSign' | 'percentSign';\ndeclare type FormattedNumberPart = {\n  type: FormattedNumberPartType,\n  value: string,\n};\n// This array is the same as Intl.NumberFormat.formatToParts() return value:\n// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/formatToParts#Return_value\ndeclare type NumberFormatToPartsResult = Array<FormattedNumberPart>;\n\ndeclare type WarnHtmlInMessageLevel = 'off' | 'warn' | 'error';\n\ndeclare type I18nOptions = {\n  locale?: Locale,\n  fallbackLocale?: FallbackLocale,\n  messages?: LocaleMessages,\n  dateTimeFormats?: DateTimeFormats,\n  datetimeFormats?: DateTimeFormats,\n  numberFormats?: NumberFormats,\n  formatter?: Formatter,\n  missing?: MissingHandler,\n  modifiers?: Modifiers,\n  root?: I18n, // for internal\n  fallbackRoot?: boolean,\n  fallbackRootWithEmptyString?: boolean,\n  formatFallbackMessages?: boolean,\n  sync?: boolean,\n  silentTranslationWarn?: boolean | RegExp,\n  silentFallbackWarn?: boolean | RegExp,\n  pluralizationRules?: PluralizationRules,\n  preserveDirectiveContent?: boolean,\n  warnHtmlInMessage?: WarnHtmlInMessageLevel,\n  sharedMessages?: LocaleMessage,\n  postTranslation?: PostTranslationHandler,\n  componentInstanceCreatedListener?: ComponentInstanceCreatedListener,\n  escapeParameterHtml?: boolean,\n  __VUE_I18N_BRIDGE__?: string,\n};\n\ndeclare type IntlAvailability = {\n  dateTimeFormat: boolean,\n  numberFormat: boolean\n};\n\ndeclare type PluralizationRules = {\n  [lang: string]: GetChoiceIndex,\n}\n\ndeclare interface I18n {\n  static install: () => void, // for Vue plugin interface\n  static version: string,\n  static availabilities: IntlAvailability,\n  get vm (): any, // for internal\n  get locale (): Locale,\n  set locale (locale: Locale): void,\n  get fallbackLocale (): FallbackLocale,\n  set fallbackLocale (locale: FallbackLocale): void,\n  get messages (): LocaleMessages,\n  get dateTimeFormats (): DateTimeFormats,\n  get numberFormats (): NumberFormats,\n  get availableLocales (): Locale[],\n  get missing (): ?MissingHandler,\n  set missing (handler: MissingHandler): void,\n  get formatter (): Formatter,\n  set formatter (formatter: Formatter): void,\n  get formatFallbackMessages (): boolean,\n  set formatFallbackMessages (fallback: boolean): void,\n  get silentTranslationWarn (): boolean | RegExp,\n  set silentTranslationWarn (silent: boolean | RegExp): void,\n  get silentFallbackWarn (): boolean | RegExp,\n  set silentFallbackWarn (slient: boolean | RegExp): void,\n  get pluralizationRules (): PluralizationRules,\n  set pluralizationRules (rules: PluralizationRules): void,\n  get preserveDirectiveContent (): boolean,\n  set preserveDirectiveContent (preserve: boolean): void,\n  get warnHtmlInMessage (): WarnHtmlInMessageLevel,\n  set warnHtmlInMessage (level: WarnHtmlInMessageLevel): void,\n  get postTranslation (): ?PostTranslationHandler,\n  set postTranslation (handler: PostTranslationHandler): void,\n\n  getLocaleMessage (locale: Locale): LocaleMessageObject,\n  setLocaleMessage (locale: Locale, message: LocaleMessageObject): void,\n  mergeLocaleMessage (locale: Locale, message: LocaleMessageObject): void,\n  t (key: Path, ...values: any): TranslateResult,\n  i (key: Path, locale: Locale, values: Object): TranslateResult,\n  tc (key: Path, choice?: number, ...values: any): TranslateResult,\n  te (key: Path, locale?: Locale): boolean,\n  getDateTimeFormat (locale: Locale): DateTimeFormat,\n  setDateTimeFormat (locale: Locale, format: DateTimeFormat): void,\n  mergeDateTimeFormat (locale: Locale, format: DateTimeFormat): void,\n  d (value: number | Date, ...args: any): DateTimeFormatResult,\n  getNumberFormat (locale: Locale): NumberFormat,\n  setNumberFormat (locale: Locale, format: NumberFormat): void,\n  mergeNumberFormat (locale: Locale, format: NumberFormat): void,\n  n (value: number, ...args: any): NumberFormatResult,\n  getChoiceIndex: GetChoiceIndex,\n  pluralizationRules: PluralizationRules,\n  preserveDirectiveContent: boolean\n};\n\ndeclare interface Formatter {\n  interpolate (message: string, values: any, path: string): (Array<any> | null)\n};\n"
  },
  {
    "path": "decls/module.js",
    "content": "declare type $npm$Vue$Dictionaly<T> = { [key: string]: T }\n\ndeclare type Util = {\n  extend: (to: Object, from: ?Object) => Object,\n  hasOwn: (obj: Object, key: string) => boolean,\n  isPlainObject: (obj: any) => boolean,\n  isObject: (obj: mixed) => boolean,\n}\n\ndeclare type Config = {\n  optionMergeStrategies: $npm$Vue$Dictionaly<Function>,\n  silent: boolean,\n  productionTip: boolean,\n  performance: boolean,\n  devtools: boolean,\n  errorHandler: ?(err: Error, vm: Vue, info: string) => void,\n  ignoredElements: Array<string>,\n  keyCodes: $npm$Vue$Dictionaly<number>,\n  isReservedTag: (x?: string) => boolean,\n  parsePlatformTagName: (x: string) => string,\n  isUnknownElement: (x?: string) => boolean,\n  getTagNamespace: (x?: string) => string | void,\n  mustUseProp: (tag: string, type: ?string, name: string) => boolean,\n}\n\ndeclare interface Vue {\n  static config: Config,\n  static util: Util,\n  static version: string,\n}\n"
  },
  {
    "path": "dist/README.md",
    "content": "## Explanation of Different Builds\n\n- UMD: `vue-i18n.js`\n- CommonJS: `vue-i18n.common.js`\n- ES Module for bundlers: `vue-i18n.esm.js`\n- ES Module for browsers: `vue-i18n.esm.browser.js`\n\n### Terms\n\n- **[UMD](https://github.com/umdjs/umd)**: UMD builds can be used directly in the browser via a `<script>` tag. The default file from Unpkg CDN at [https://unpkg.com/vue-i18n](https://unpkg.com/vue-i18n) is the UMD build (`vue-i18n.js`).\n\n- **[CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1)**: CommonJS builds are intended for use with older bundlers like [browserify](http://browserify.org/) or [webpack 1](https://webpack.github.io). The default file for these bundlers (`pkg.main`) is the Runtime only CommonJS build (`vue-i18n.common.js`).\n\n- **[ES Module](http://exploringjs.com/es6/ch_modules.html)**: starting in 8.11 VueI18n provides two ES Modules (ESM) builds:\n  - ESM for bundlers: intended for use with modern bundlers like [webpack 2](https://webpack.js.org) or [Rollup](https://rollupjs.org/). ESM format is designed to be statically analyzable so the bundlers can take advantage of that to perform \"tree-shaking\" and eliminate unused code from your final bundle. The default file for these bundlers (`pkg.module`) is the Runtime only ES Module build (`vue-i18n.esm.js`).\n  - ESM for browsers (8.11+ only, `vue-i18n.esm.browser.js`): intended for direct imports in modern browsers via `<script type=\"module\">`.\n"
  },
  {
    "path": "dist/vue-i18n.common.js",
    "content": "/*!\n * vue-i18n v8.24.4 \n * (c) 2021 kazuya kawaguchi\n * Released under the MIT License.\n */\n'use strict';\n\n/*  */\n\n/**\n * constants\n */\n\nvar numberFormatKeys = [\n  'compactDisplay',\n  'currency',\n  'currencyDisplay',\n  'currencySign',\n  'localeMatcher',\n  'notation',\n  'numberingSystem',\n  'signDisplay',\n  'style',\n  'unit',\n  'unitDisplay',\n  'useGrouping',\n  'minimumIntegerDigits',\n  'minimumFractionDigits',\n  'maximumFractionDigits',\n  'minimumSignificantDigits',\n  'maximumSignificantDigits'\n];\n\n/**\n * utilities\n */\n\nfunction warn (msg, err) {\n  if (typeof console !== 'undefined') {\n    console.warn('[vue-i18n] ' + msg);\n    /* istanbul ignore if */\n    if (err) {\n      console.warn(err.stack);\n    }\n  }\n}\n\nfunction error (msg, err) {\n  if (typeof console !== 'undefined') {\n    console.error('[vue-i18n] ' + msg);\n    /* istanbul ignore if */\n    if (err) {\n      console.error(err.stack);\n    }\n  }\n}\n\nvar isArray = Array.isArray;\n\nfunction isObject (obj) {\n  return obj !== null && typeof obj === 'object'\n}\n\nfunction isBoolean (val) {\n  return typeof val === 'boolean'\n}\n\nfunction isString (val) {\n  return typeof val === 'string'\n}\n\nvar toString = Object.prototype.toString;\nvar OBJECT_STRING = '[object Object]';\nfunction isPlainObject (obj) {\n  return toString.call(obj) === OBJECT_STRING\n}\n\nfunction isNull (val) {\n  return val === null || val === undefined\n}\n\nfunction isFunction (val) {\n  return typeof val === 'function'\n}\n\nfunction parseArgs () {\n  var args = [], len = arguments.length;\n  while ( len-- ) args[ len ] = arguments[ len ];\n\n  var locale = null;\n  var params = null;\n  if (args.length === 1) {\n    if (isObject(args[0]) || isArray(args[0])) {\n      params = args[0];\n    } else if (typeof args[0] === 'string') {\n      locale = args[0];\n    }\n  } else if (args.length === 2) {\n    if (typeof args[0] === 'string') {\n      locale = args[0];\n    }\n    /* istanbul ignore if */\n    if (isObject(args[1]) || isArray(args[1])) {\n      params = args[1];\n    }\n  }\n\n  return { locale: locale, params: params }\n}\n\nfunction looseClone (obj) {\n  return JSON.parse(JSON.stringify(obj))\n}\n\nfunction remove (arr, item) {\n  if (arr.delete(item)) {\n    return arr\n  }\n}\n\nfunction includes (arr, item) {\n  return !!~arr.indexOf(item)\n}\n\nvar hasOwnProperty = Object.prototype.hasOwnProperty;\nfunction hasOwn (obj, key) {\n  return hasOwnProperty.call(obj, key)\n}\n\nfunction merge (target) {\n  var arguments$1 = arguments;\n\n  var output = Object(target);\n  for (var i = 1; i < arguments.length; i++) {\n    var source = arguments$1[i];\n    if (source !== undefined && source !== null) {\n      var key = (void 0);\n      for (key in source) {\n        if (hasOwn(source, key)) {\n          if (isObject(source[key])) {\n            output[key] = merge(output[key], source[key]);\n          } else {\n            output[key] = source[key];\n          }\n        }\n      }\n    }\n  }\n  return output\n}\n\nfunction looseEqual (a, b) {\n  if (a === b) { return true }\n  var isObjectA = isObject(a);\n  var isObjectB = isObject(b);\n  if (isObjectA && isObjectB) {\n    try {\n      var isArrayA = isArray(a);\n      var isArrayB = isArray(b);\n      if (isArrayA && isArrayB) {\n        return a.length === b.length && a.every(function (e, i) {\n          return looseEqual(e, b[i])\n        })\n      } else if (!isArrayA && !isArrayB) {\n        var keysA = Object.keys(a);\n        var keysB = Object.keys(b);\n        return keysA.length === keysB.length && keysA.every(function (key) {\n          return looseEqual(a[key], b[key])\n        })\n      } else {\n        /* istanbul ignore next */\n        return false\n      }\n    } catch (e) {\n      /* istanbul ignore next */\n      return false\n    }\n  } else if (!isObjectA && !isObjectB) {\n    return String(a) === String(b)\n  } else {\n    return false\n  }\n}\n\n/**\n * Sanitizes html special characters from input strings. For mitigating risk of XSS attacks.\n * @param rawText The raw input from the user that should be escaped.\n */\nfunction escapeHtml(rawText) {\n  return rawText\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\"/g, '&quot;')\n    .replace(/'/g, '&apos;')\n}\n\n/**\n * Escapes html tags and special symbols from all provided params which were returned from parseArgs().params.\n * This method performs an in-place operation on the params object.\n *\n * @param {any} params Parameters as provided from `parseArgs().params`.\n *                     May be either an array of strings or a string->any map.\n *\n * @returns The manipulated `params` object.\n */\nfunction escapeParams(params) {\n  if(params != null) {\n    Object.keys(params).forEach(function (key) {\n      if(typeof(params[key]) == 'string') {\n        params[key] = escapeHtml(params[key]);\n      }\n    });\n  }\n  return params\n}\n\n/*  */\n\nfunction extend (Vue) {\n  if (!Vue.prototype.hasOwnProperty('$i18n')) {\n    // $FlowFixMe\n    Object.defineProperty(Vue.prototype, '$i18n', {\n      get: function get () { return this._i18n }\n    });\n  }\n\n  Vue.prototype.$t = function (key) {\n    var values = [], len = arguments.length - 1;\n    while ( len-- > 0 ) values[ len ] = arguments[ len + 1 ];\n\n    var i18n = this.$i18n;\n    return i18n._t.apply(i18n, [ key, i18n.locale, i18n._getMessages(), this ].concat( values ))\n  };\n\n  Vue.prototype.$tc = function (key, choice) {\n    var values = [], len = arguments.length - 2;\n    while ( len-- > 0 ) values[ len ] = arguments[ len + 2 ];\n\n    var i18n = this.$i18n;\n    return i18n._tc.apply(i18n, [ key, i18n.locale, i18n._getMessages(), this, choice ].concat( values ))\n  };\n\n  Vue.prototype.$te = function (key, locale) {\n    var i18n = this.$i18n;\n    return i18n._te(key, i18n.locale, i18n._getMessages(), locale)\n  };\n\n  Vue.prototype.$d = function (value) {\n    var ref;\n\n    var args = [], len = arguments.length - 1;\n    while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ];\n    return (ref = this.$i18n).d.apply(ref, [ value ].concat( args ))\n  };\n\n  Vue.prototype.$n = function (value) {\n    var ref;\n\n    var args = [], len = arguments.length - 1;\n    while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ];\n    return (ref = this.$i18n).n.apply(ref, [ value ].concat( args ))\n  };\n}\n\n/*  */\n\nvar mixin = {\n  beforeCreate: function beforeCreate () {\n    var options = this.$options;\n    options.i18n = options.i18n || (options.__i18n ? {} : null);\n\n    if (options.i18n) {\n      if (options.i18n instanceof VueI18n) {\n        // init locale messages via custom blocks\n        if (options.__i18n) {\n          try {\n            var localeMessages = options.i18n && options.i18n.messages ? options.i18n.messages : {};\n            options.__i18n.forEach(function (resource) {\n              localeMessages = merge(localeMessages, JSON.parse(resource));\n            });\n            Object.keys(localeMessages).forEach(function (locale) {\n              options.i18n.mergeLocaleMessage(locale, localeMessages[locale]);\n            });\n          } catch (e) {\n            if (process.env.NODE_ENV !== 'production') {\n              error(\"Cannot parse locale messages via custom blocks.\", e);\n            }\n          }\n        }\n        this._i18n = options.i18n;\n        this._i18nWatcher = this._i18n.watchI18nData();\n      } else if (isPlainObject(options.i18n)) {\n        var rootI18n = this.$root && this.$root.$i18n && this.$root.$i18n instanceof VueI18n\n          ? this.$root.$i18n\n          : null;\n        // component local i18n\n        if (rootI18n) {\n          options.i18n.root = this.$root;\n          options.i18n.formatter = rootI18n.formatter;\n          options.i18n.fallbackLocale = rootI18n.fallbackLocale;\n          options.i18n.formatFallbackMessages = rootI18n.formatFallbackMessages;\n          options.i18n.silentTranslationWarn = rootI18n.silentTranslationWarn;\n          options.i18n.silentFallbackWarn = rootI18n.silentFallbackWarn;\n          options.i18n.pluralizationRules = rootI18n.pluralizationRules;\n          options.i18n.preserveDirectiveContent = rootI18n.preserveDirectiveContent;\n        }\n\n        // init locale messages via custom blocks\n        if (options.__i18n) {\n          try {\n            var localeMessages$1 = options.i18n && options.i18n.messages ? options.i18n.messages : {};\n            options.__i18n.forEach(function (resource) {\n              localeMessages$1 = merge(localeMessages$1, JSON.parse(resource));\n            });\n            options.i18n.messages = localeMessages$1;\n          } catch (e) {\n            if (process.env.NODE_ENV !== 'production') {\n              warn(\"Cannot parse locale messages via custom blocks.\", e);\n            }\n          }\n        }\n\n        var ref = options.i18n;\n        var sharedMessages = ref.sharedMessages;\n        if (sharedMessages && isPlainObject(sharedMessages)) {\n          options.i18n.messages = merge(options.i18n.messages, sharedMessages);\n        }\n\n        this._i18n = new VueI18n(options.i18n);\n        this._i18nWatcher = this._i18n.watchI18nData();\n\n        if (options.i18n.sync === undefined || !!options.i18n.sync) {\n          this._localeWatcher = this.$i18n.watchLocale();\n        }\n\n        if (rootI18n) {\n          rootI18n.onComponentInstanceCreated(this._i18n);\n        }\n      } else {\n        if (process.env.NODE_ENV !== 'production') {\n          warn(\"Cannot be interpreted 'i18n' option.\");\n        }\n      }\n    } else if (this.$root && this.$root.$i18n && this.$root.$i18n instanceof VueI18n) {\n      // root i18n\n      this._i18n = this.$root.$i18n;\n    } else if (options.parent && options.parent.$i18n && options.parent.$i18n instanceof VueI18n) {\n      // parent i18n\n      this._i18n = options.parent.$i18n;\n    }\n  },\n\n  beforeMount: function beforeMount () {\n    var options = this.$options;\n    options.i18n = options.i18n || (options.__i18n ? {} : null);\n\n    if (options.i18n) {\n      if (options.i18n instanceof VueI18n) {\n        // init locale messages via custom blocks\n        this._i18n.subscribeDataChanging(this);\n        this._subscribing = true;\n      } else if (isPlainObject(options.i18n)) {\n        this._i18n.subscribeDataChanging(this);\n        this._subscribing = true;\n      } else {\n        if (process.env.NODE_ENV !== 'production') {\n          warn(\"Cannot be interpreted 'i18n' option.\");\n        }\n      }\n    } else if (this.$root && this.$root.$i18n && this.$root.$i18n instanceof VueI18n) {\n      this._i18n.subscribeDataChanging(this);\n      this._subscribing = true;\n    } else if (options.parent && options.parent.$i18n && options.parent.$i18n instanceof VueI18n) {\n      this._i18n.subscribeDataChanging(this);\n      this._subscribing = true;\n    }\n  },\n\n  mounted: function mounted () {\n    if (this !== this.$root && this.$options.__INTLIFY_META__ && this.$el) {\n      this.$el.setAttribute('data-intlify', this.$options.__INTLIFY_META__);\n    }\n  },\n\n  beforeDestroy: function beforeDestroy () {\n    if (!this._i18n) { return }\n\n    var self = this;\n    this.$nextTick(function () {\n      if (self._subscribing) {\n        self._i18n.unsubscribeDataChanging(self);\n        delete self._subscribing;\n      }\n\n      if (self._i18nWatcher) {\n        self._i18nWatcher();\n        self._i18n.destroyVM();\n        delete self._i18nWatcher;\n      }\n\n      if (self._localeWatcher) {\n        self._localeWatcher();\n        delete self._localeWatcher;\n      }\n    });\n  }\n};\n\n/*  */\n\nvar interpolationComponent = {\n  name: 'i18n',\n  functional: true,\n  props: {\n    tag: {\n      type: [String, Boolean, Object],\n      default: 'span'\n    },\n    path: {\n      type: String,\n      required: true\n    },\n    locale: {\n      type: String\n    },\n    places: {\n      type: [Array, Object]\n    }\n  },\n  render: function render (h, ref) {\n    var data = ref.data;\n    var parent = ref.parent;\n    var props = ref.props;\n    var slots = ref.slots;\n\n    var $i18n = parent.$i18n;\n    if (!$i18n) {\n      if (process.env.NODE_ENV !== 'production') {\n        warn('Cannot find VueI18n instance!');\n      }\n      return\n    }\n\n    var path = props.path;\n    var locale = props.locale;\n    var places = props.places;\n    var params = slots();\n    var children = $i18n.i(\n      path,\n      locale,\n      onlyHasDefaultPlace(params) || places\n        ? useLegacyPlaces(params.default, places)\n        : params\n    );\n\n    var tag = (!!props.tag && props.tag !== true) || props.tag === false ? props.tag : 'span';\n    return tag ? h(tag, data, children) : children\n  }\n};\n\nfunction onlyHasDefaultPlace (params) {\n  var prop;\n  for (prop in params) {\n    if (prop !== 'default') { return false }\n  }\n  return Boolean(prop)\n}\n\nfunction useLegacyPlaces (children, places) {\n  var params = places ? createParamsFromPlaces(places) : {};\n\n  if (!children) { return params }\n\n  // Filter empty text nodes\n  children = children.filter(function (child) {\n    return child.tag || child.text.trim() !== ''\n  });\n\n  var everyPlace = children.every(vnodeHasPlaceAttribute);\n  if (process.env.NODE_ENV !== 'production' && everyPlace) {\n    warn('`place` attribute is deprecated in next major version. Please switch to Vue slots.');\n  }\n\n  return children.reduce(\n    everyPlace ? assignChildPlace : assignChildIndex,\n    params\n  )\n}\n\nfunction createParamsFromPlaces (places) {\n  if (process.env.NODE_ENV !== 'production') {\n    warn('`places` prop is deprecated in next major version. Please switch to Vue slots.');\n  }\n\n  return Array.isArray(places)\n    ? places.reduce(assignChildIndex, {})\n    : Object.assign({}, places)\n}\n\nfunction assignChildPlace (params, child) {\n  if (child.data && child.data.attrs && child.data.attrs.place) {\n    params[child.data.attrs.place] = child;\n  }\n  return params\n}\n\nfunction assignChildIndex (params, child, index) {\n  params[index] = child;\n  return params\n}\n\nfunction vnodeHasPlaceAttribute (vnode) {\n  return Boolean(vnode.data && vnode.data.attrs && vnode.data.attrs.place)\n}\n\n/*  */\n\nvar numberComponent = {\n  name: 'i18n-n',\n  functional: true,\n  props: {\n    tag: {\n      type: [String, Boolean, Object],\n      default: 'span'\n    },\n    value: {\n      type: Number,\n      required: true\n    },\n    format: {\n      type: [String, Object]\n    },\n    locale: {\n      type: String\n    }\n  },\n  render: function render (h, ref) {\n    var props = ref.props;\n    var parent = ref.parent;\n    var data = ref.data;\n\n    var i18n = parent.$i18n;\n\n    if (!i18n) {\n      if (process.env.NODE_ENV !== 'production') {\n        warn('Cannot find VueI18n instance!');\n      }\n      return null\n    }\n\n    var key = null;\n    var options = null;\n\n    if (isString(props.format)) {\n      key = props.format;\n    } else if (isObject(props.format)) {\n      if (props.format.key) {\n        key = props.format.key;\n      }\n\n      // Filter out number format options only\n      options = Object.keys(props.format).reduce(function (acc, prop) {\n        var obj;\n\n        if (includes(numberFormatKeys, prop)) {\n          return Object.assign({}, acc, ( obj = {}, obj[prop] = props.format[prop], obj ))\n        }\n        return acc\n      }, null);\n    }\n\n    var locale = props.locale || i18n.locale;\n    var parts = i18n._ntp(props.value, locale, key, options);\n\n    var values = parts.map(function (part, index) {\n      var obj;\n\n      var slot = data.scopedSlots && data.scopedSlots[part.type];\n      return slot ? slot(( obj = {}, obj[part.type] = part.value, obj.index = index, obj.parts = parts, obj )) : part.value\n    });\n\n    var tag = (!!props.tag && props.tag !== true) || props.tag === false ? props.tag : 'span';\n    return tag\n      ? h(tag, {\n        attrs: data.attrs,\n        'class': data['class'],\n        staticClass: data.staticClass\n      }, values)\n      : values\n  }\n};\n\n/*  */\n\nfunction bind (el, binding, vnode) {\n  if (!assert(el, vnode)) { return }\n\n  t(el, binding, vnode);\n}\n\nfunction update (el, binding, vnode, oldVNode) {\n  if (!assert(el, vnode)) { return }\n\n  var i18n = vnode.context.$i18n;\n  if (localeEqual(el, vnode) &&\n    (looseEqual(binding.value, binding.oldValue) &&\n     looseEqual(el._localeMessage, i18n.getLocaleMessage(i18n.locale)))) { return }\n\n  t(el, binding, vnode);\n}\n\nfunction unbind (el, binding, vnode, oldVNode) {\n  var vm = vnode.context;\n  if (!vm) {\n    warn('Vue instance does not exists in VNode context');\n    return\n  }\n\n  var i18n = vnode.context.$i18n || {};\n  if (!binding.modifiers.preserve && !i18n.preserveDirectiveContent) {\n    el.textContent = '';\n  }\n  el._vt = undefined;\n  delete el['_vt'];\n  el._locale = undefined;\n  delete el['_locale'];\n  el._localeMessage = undefined;\n  delete el['_localeMessage'];\n}\n\nfunction assert (el, vnode) {\n  var vm = vnode.context;\n  if (!vm) {\n    warn('Vue instance does not exists in VNode context');\n    return false\n  }\n\n  if (!vm.$i18n) {\n    warn('VueI18n instance does not exists in Vue instance');\n    return false\n  }\n\n  return true\n}\n\nfunction localeEqual (el, vnode) {\n  var vm = vnode.context;\n  return el._locale === vm.$i18n.locale\n}\n\nfunction t (el, binding, vnode) {\n  var ref$1, ref$2;\n\n  var value = binding.value;\n\n  var ref = parseValue(value);\n  var path = ref.path;\n  var locale = ref.locale;\n  var args = ref.args;\n  var choice = ref.choice;\n  if (!path && !locale && !args) {\n    warn('value type not supported');\n    return\n  }\n\n  if (!path) {\n    warn('`path` is required in v-t directive');\n    return\n  }\n\n  var vm = vnode.context;\n  if (choice != null) {\n    el._vt = el.textContent = (ref$1 = vm.$i18n).tc.apply(ref$1, [ path, choice ].concat( makeParams(locale, args) ));\n  } else {\n    el._vt = el.textContent = (ref$2 = vm.$i18n).t.apply(ref$2, [ path ].concat( makeParams(locale, args) ));\n  }\n  el._locale = vm.$i18n.locale;\n  el._localeMessage = vm.$i18n.getLocaleMessage(vm.$i18n.locale);\n}\n\nfunction parseValue (value) {\n  var path;\n  var locale;\n  var args;\n  var choice;\n\n  if (isString(value)) {\n    path = value;\n  } else if (isPlainObject(value)) {\n    path = value.path;\n    locale = value.locale;\n    args = value.args;\n    choice = value.choice;\n  }\n\n  return { path: path, locale: locale, args: args, choice: choice }\n}\n\nfunction makeParams (locale, args) {\n  var params = [];\n\n  locale && params.push(locale);\n  if (args && (Array.isArray(args) || isPlainObject(args))) {\n    params.push(args);\n  }\n\n  return params\n}\n\nvar Vue;\n\nfunction install (_Vue) {\n  /* istanbul ignore if */\n  if (process.env.NODE_ENV !== 'production' && install.installed && _Vue === Vue) {\n    warn('already installed.');\n    return\n  }\n  install.installed = true;\n\n  Vue = _Vue;\n\n  var version = (Vue.version && Number(Vue.version.split('.')[0])) || -1;\n  /* istanbul ignore if */\n  if (process.env.NODE_ENV !== 'production' && version < 2) {\n    warn((\"vue-i18n (\" + (install.version) + \") need to use Vue 2.0 or later (Vue: \" + (Vue.version) + \").\"));\n    return\n  }\n\n  extend(Vue);\n  Vue.mixin(mixin);\n  Vue.directive('t', { bind: bind, update: update, unbind: unbind });\n  Vue.component(interpolationComponent.name, interpolationComponent);\n  Vue.component(numberComponent.name, numberComponent);\n\n  // use simple mergeStrategies to prevent i18n instance lose '__proto__'\n  var strats = Vue.config.optionMergeStrategies;\n  strats.i18n = function (parentVal, childVal) {\n    return childVal === undefined\n      ? parentVal\n      : childVal\n  };\n}\n\n/*  */\n\nvar BaseFormatter = function BaseFormatter () {\n  this._caches = Object.create(null);\n};\n\nBaseFormatter.prototype.interpolate = function interpolate (message, values) {\n  if (!values) {\n    return [message]\n  }\n  var tokens = this._caches[message];\n  if (!tokens) {\n    tokens = parse(message);\n    this._caches[message] = tokens;\n  }\n  return compile(tokens, values)\n};\n\n\n\nvar RE_TOKEN_LIST_VALUE = /^(?:\\d)+/;\nvar RE_TOKEN_NAMED_VALUE = /^(?:\\w)+/;\n\nfunction parse (format) {\n  var tokens = [];\n  var position = 0;\n\n  var text = '';\n  while (position < format.length) {\n    var char = format[position++];\n    if (char === '{') {\n      if (text) {\n        tokens.push({ type: 'text', value: text });\n      }\n\n      text = '';\n      var sub = '';\n      char = format[position++];\n      while (char !== undefined && char !== '}') {\n        sub += char;\n        char = format[position++];\n      }\n      var isClosed = char === '}';\n\n      var type = RE_TOKEN_LIST_VALUE.test(sub)\n        ? 'list'\n        : isClosed && RE_TOKEN_NAMED_VALUE.test(sub)\n          ? 'named'\n          : 'unknown';\n      tokens.push({ value: sub, type: type });\n    } else if (char === '%') {\n      // when found rails i18n syntax, skip text capture\n      if (format[(position)] !== '{') {\n        text += char;\n      }\n    } else {\n      text += char;\n    }\n  }\n\n  text && tokens.push({ type: 'text', value: text });\n\n  return tokens\n}\n\nfunction compile (tokens, values) {\n  var compiled = [];\n  var index = 0;\n\n  var mode = Array.isArray(values)\n    ? 'list'\n    : isObject(values)\n      ? 'named'\n      : 'unknown';\n  if (mode === 'unknown') { return compiled }\n\n  while (index < tokens.length) {\n    var token = tokens[index];\n    switch (token.type) {\n      case 'text':\n        compiled.push(token.value);\n        break\n      case 'list':\n        compiled.push(values[parseInt(token.value, 10)]);\n        break\n      case 'named':\n        if (mode === 'named') {\n          compiled.push((values)[token.value]);\n        } else {\n          if (process.env.NODE_ENV !== 'production') {\n            warn((\"Type of token '\" + (token.type) + \"' and format of value '\" + mode + \"' don't match!\"));\n          }\n        }\n        break\n      case 'unknown':\n        if (process.env.NODE_ENV !== 'production') {\n          warn(\"Detect 'unknown' type of token!\");\n        }\n        break\n    }\n    index++;\n  }\n\n  return compiled\n}\n\n/*  */\n\n/**\n *  Path parser\n *  - Inspired:\n *    Vue.js Path parser\n */\n\n// actions\nvar APPEND = 0;\nvar PUSH = 1;\nvar INC_SUB_PATH_DEPTH = 2;\nvar PUSH_SUB_PATH = 3;\n\n// states\nvar BEFORE_PATH = 0;\nvar IN_PATH = 1;\nvar BEFORE_IDENT = 2;\nvar IN_IDENT = 3;\nvar IN_SUB_PATH = 4;\nvar IN_SINGLE_QUOTE = 5;\nvar IN_DOUBLE_QUOTE = 6;\nvar AFTER_PATH = 7;\nvar ERROR = 8;\n\nvar pathStateMachine = [];\n\npathStateMachine[BEFORE_PATH] = {\n  'ws': [BEFORE_PATH],\n  'ident': [IN_IDENT, APPEND],\n  '[': [IN_SUB_PATH],\n  'eof': [AFTER_PATH]\n};\n\npathStateMachine[IN_PATH] = {\n  'ws': [IN_PATH],\n  '.': [BEFORE_IDENT],\n  '[': [IN_SUB_PATH],\n  'eof': [AFTER_PATH]\n};\n\npathStateMachine[BEFORE_IDENT] = {\n  'ws': [BEFORE_IDENT],\n  'ident': [IN_IDENT, APPEND],\n  '0': [IN_IDENT, APPEND],\n  'number': [IN_IDENT, APPEND]\n};\n\npathStateMachine[IN_IDENT] = {\n  'ident': [IN_IDENT, APPEND],\n  '0': [IN_IDENT, APPEND],\n  'number': [IN_IDENT, APPEND],\n  'ws': [IN_PATH, PUSH],\n  '.': [BEFORE_IDENT, PUSH],\n  '[': [IN_SUB_PATH, PUSH],\n  'eof': [AFTER_PATH, PUSH]\n};\n\npathStateMachine[IN_SUB_PATH] = {\n  \"'\": [IN_SINGLE_QUOTE, APPEND],\n  '\"': [IN_DOUBLE_QUOTE, APPEND],\n  '[': [IN_SUB_PATH, INC_SUB_PATH_DEPTH],\n  ']': [IN_PATH, PUSH_SUB_PATH],\n  'eof': ERROR,\n  'else': [IN_SUB_PATH, APPEND]\n};\n\npathStateMachine[IN_SINGLE_QUOTE] = {\n  \"'\": [IN_SUB_PATH, APPEND],\n  'eof': ERROR,\n  'else': [IN_SINGLE_QUOTE, APPEND]\n};\n\npathStateMachine[IN_DOUBLE_QUOTE] = {\n  '\"': [IN_SUB_PATH, APPEND],\n  'eof': ERROR,\n  'else': [IN_DOUBLE_QUOTE, APPEND]\n};\n\n/**\n * Check if an expression is a literal value.\n */\n\nvar literalValueRE = /^\\s?(?:true|false|-?[\\d.]+|'[^']*'|\"[^\"]*\")\\s?$/;\nfunction isLiteral (exp) {\n  return literalValueRE.test(exp)\n}\n\n/**\n * Strip quotes from a string\n */\n\nfunction stripQuotes (str) {\n  var a = str.charCodeAt(0);\n  var b = str.charCodeAt(str.length - 1);\n  return a === b && (a === 0x22 || a === 0x27)\n    ? str.slice(1, -1)\n    : str\n}\n\n/**\n * Determine the type of a character in a keypath.\n */\n\nfunction getPathCharType (ch) {\n  if (ch === undefined || ch === null) { return 'eof' }\n\n  var code = ch.charCodeAt(0);\n\n  switch (code) {\n    case 0x5B: // [\n    case 0x5D: // ]\n    case 0x2E: // .\n    case 0x22: // \"\n    case 0x27: // '\n      return ch\n\n    case 0x5F: // _\n    case 0x24: // $\n    case 0x2D: // -\n      return 'ident'\n\n    case 0x09: // Tab\n    case 0x0A: // Newline\n    case 0x0D: // Return\n    case 0xA0:  // No-break space\n    case 0xFEFF:  // Byte Order Mark\n    case 0x2028:  // Line Separator\n    case 0x2029:  // Paragraph Separator\n      return 'ws'\n  }\n\n  return 'ident'\n}\n\n/**\n * Format a subPath, return its plain form if it is\n * a literal string or number. Otherwise prepend the\n * dynamic indicator (*).\n */\n\nfunction formatSubPath (path) {\n  var trimmed = path.trim();\n  // invalid leading 0\n  if (path.charAt(0) === '0' && isNaN(path)) { return false }\n\n  return isLiteral(trimmed) ? stripQuotes(trimmed) : '*' + trimmed\n}\n\n/**\n * Parse a string path into an array of segments\n */\n\nfunction parse$1 (path) {\n  var keys = [];\n  var index = -1;\n  var mode = BEFORE_PATH;\n  var subPathDepth = 0;\n  var c;\n  var key;\n  var newChar;\n  var type;\n  var transition;\n  var action;\n  var typeMap;\n  var actions = [];\n\n  actions[PUSH] = function () {\n    if (key !== undefined) {\n      keys.push(key);\n      key = undefined;\n    }\n  };\n\n  actions[APPEND] = function () {\n    if (key === undefined) {\n      key = newChar;\n    } else {\n      key += newChar;\n    }\n  };\n\n  actions[INC_SUB_PATH_DEPTH] = function () {\n    actions[APPEND]();\n    subPathDepth++;\n  };\n\n  actions[PUSH_SUB_PATH] = function () {\n    if (subPathDepth > 0) {\n      subPathDepth--;\n      mode = IN_SUB_PATH;\n      actions[APPEND]();\n    } else {\n      subPathDepth = 0;\n      if (key === undefined) { return false }\n      key = formatSubPath(key);\n      if (key === false) {\n        return false\n      } else {\n        actions[PUSH]();\n      }\n    }\n  };\n\n  function maybeUnescapeQuote () {\n    var nextChar = path[index + 1];\n    if ((mode === IN_SINGLE_QUOTE && nextChar === \"'\") ||\n      (mode === IN_DOUBLE_QUOTE && nextChar === '\"')) {\n      index++;\n      newChar = '\\\\' + nextChar;\n      actions[APPEND]();\n      return true\n    }\n  }\n\n  while (mode !== null) {\n    index++;\n    c = path[index];\n\n    if (c === '\\\\' && maybeUnescapeQuote()) {\n      continue\n    }\n\n    type = getPathCharType(c);\n    typeMap = pathStateMachine[mode];\n    transition = typeMap[type] || typeMap['else'] || ERROR;\n\n    if (transition === ERROR) {\n      return // parse error\n    }\n\n    mode = transition[0];\n    action = actions[transition[1]];\n    if (action) {\n      newChar = transition[2];\n      newChar = newChar === undefined\n        ? c\n        : newChar;\n      if (action() === false) {\n        return\n      }\n    }\n\n    if (mode === AFTER_PATH) {\n      return keys\n    }\n  }\n}\n\n\n\n\n\nvar I18nPath = function I18nPath () {\n  this._cache = Object.create(null);\n};\n\n/**\n * External parse that check for a cache hit first\n */\nI18nPath.prototype.parsePath = function parsePath (path) {\n  var hit = this._cache[path];\n  if (!hit) {\n    hit = parse$1(path);\n    if (hit) {\n      this._cache[path] = hit;\n    }\n  }\n  return hit || []\n};\n\n/**\n * Get path value from path string\n */\nI18nPath.prototype.getPathValue = function getPathValue (obj, path) {\n  if (!isObject(obj)) { return null }\n\n  var paths = this.parsePath(path);\n  if (paths.length === 0) {\n    return null\n  } else {\n    var length = paths.length;\n    var last = obj;\n    var i = 0;\n    while (i < length) {\n      var value = last[paths[i]];\n      if (value === undefined || value === null) {\n        return null\n      }\n      last = value;\n      i++;\n    }\n\n    return last\n  }\n};\n\n/*  */\n\n\n\nvar htmlTagMatcher = /<\\/?[\\w\\s=\"/.':;#-\\/]+>/;\nvar linkKeyMatcher = /(?:@(?:\\.[a-z]+)?:(?:[\\w\\-_|.]+|\\([\\w\\-_|.]+\\)))/g;\nvar linkKeyPrefixMatcher = /^@(?:\\.([a-z]+))?:/;\nvar bracketsMatcher = /[()]/g;\nvar defaultModifiers = {\n  'upper': function (str) { return str.toLocaleUpperCase(); },\n  'lower': function (str) { return str.toLocaleLowerCase(); },\n  'capitalize': function (str) { return (\"\" + (str.charAt(0).toLocaleUpperCase()) + (str.substr(1))); }\n};\n\nvar defaultFormatter = new BaseFormatter();\n\nvar VueI18n = function VueI18n (options) {\n  var this$1 = this;\n  if ( options === void 0 ) options = {};\n\n  // Auto install if it is not done yet and `window` has `Vue`.\n  // To allow users to avoid auto-installation in some cases,\n  // this code should be placed here. See #290\n  /* istanbul ignore if */\n  if (!Vue && typeof window !== 'undefined' && window.Vue) {\n    install(window.Vue);\n  }\n\n  var locale = options.locale || 'en-US';\n  var fallbackLocale = options.fallbackLocale === false\n    ? false\n    : options.fallbackLocale || 'en-US';\n  var messages = options.messages || {};\n  var dateTimeFormats = options.dateTimeFormats || {};\n  var numberFormats = options.numberFormats || {};\n\n  this._vm = null;\n  this._formatter = options.formatter || defaultFormatter;\n  this._modifiers = options.modifiers || {};\n  this._missing = options.missing || null;\n  this._root = options.root || null;\n  this._sync = options.sync === undefined ? true : !!options.sync;\n  this._fallbackRoot = options.fallbackRoot === undefined\n    ? true\n    : !!options.fallbackRoot;\n  this._formatFallbackMessages = options.formatFallbackMessages === undefined\n    ? false\n    : !!options.formatFallbackMessages;\n  this._silentTranslationWarn = options.silentTranslationWarn === undefined\n    ? false\n    : options.silentTranslationWarn;\n  this._silentFallbackWarn = options.silentFallbackWarn === undefined\n    ? false\n    : !!options.silentFallbackWarn;\n  this._dateTimeFormatters = {};\n  this._numberFormatters = {};\n  this._path = new I18nPath();\n  this._dataListeners = new Set();\n  this._componentInstanceCreatedListener = options.componentInstanceCreatedListener || null;\n  this._preserveDirectiveContent = options.preserveDirectiveContent === undefined\n    ? false\n    : !!options.preserveDirectiveContent;\n  this.pluralizationRules = options.pluralizationRules || {};\n  this._warnHtmlInMessage = options.warnHtmlInMessage || 'off';\n  this._postTranslation = options.postTranslation || null;\n  this._escapeParameterHtml = options.escapeParameterHtml || false;\n\n  /**\n   * @param choice {number} a choice index given by the input to $tc: `$tc('path.to.rule', choiceIndex)`\n   * @param choicesLength {number} an overall amount of available choices\n   * @returns a final choice index\n  */\n  this.getChoiceIndex = function (choice, choicesLength) {\n    var thisPrototype = Object.getPrototypeOf(this$1);\n    if (thisPrototype && thisPrototype.getChoiceIndex) {\n      var prototypeGetChoiceIndex = (thisPrototype.getChoiceIndex);\n      return (prototypeGetChoiceIndex).call(this$1, choice, choicesLength)\n    }\n\n    // Default (old) getChoiceIndex implementation - english-compatible\n    var defaultImpl = function (_choice, _choicesLength) {\n      _choice = Math.abs(_choice);\n\n      if (_choicesLength === 2) {\n        return _choice\n          ? _choice > 1\n            ? 1\n            : 0\n          : 1\n      }\n\n      return _choice ? Math.min(_choice, 2) : 0\n    };\n\n    if (this$1.locale in this$1.pluralizationRules) {\n      return this$1.pluralizationRules[this$1.locale].apply(this$1, [choice, choicesLength])\n    } else {\n      return defaultImpl(choice, choicesLength)\n    }\n  };\n\n\n  this._exist = function (message, key) {\n    if (!message || !key) { return false }\n    if (!isNull(this$1._path.getPathValue(message, key))) { return true }\n    // fallback for flat key\n    if (message[key]) { return true }\n    return false\n  };\n\n  if (this._warnHtmlInMessage === 'warn' || this._warnHtmlInMessage === 'error') {\n    Object.keys(messages).forEach(function (locale) {\n      this$1._checkLocaleMessage(locale, this$1._warnHtmlInMessage, messages[locale]);\n    });\n  }\n\n  this._initVM({\n    locale: locale,\n    fallbackLocale: fallbackLocale,\n    messages: messages,\n    dateTimeFormats: dateTimeFormats,\n    numberFormats: numberFormats\n  });\n};\n\nvar prototypeAccessors = { vm: { configurable: true },messages: { configurable: true },dateTimeFormats: { configurable: true },numberFormats: { configurable: true },availableLocales: { configurable: true },locale: { configurable: true },fallbackLocale: { configurable: true },formatFallbackMessages: { configurable: true },missing: { configurable: true },formatter: { configurable: true },silentTranslationWarn: { configurable: true },silentFallbackWarn: { configurable: true },preserveDirectiveContent: { configurable: true },warnHtmlInMessage: { configurable: true },postTranslation: { configurable: true } };\n\nVueI18n.prototype._checkLocaleMessage = function _checkLocaleMessage (locale, level, message) {\n  var paths = [];\n\n  var fn = function (level, locale, message, paths) {\n    if (isPlainObject(message)) {\n      Object.keys(message).forEach(function (key) {\n        var val = message[key];\n        if (isPlainObject(val)) {\n          paths.push(key);\n          paths.push('.');\n          fn(level, locale, val, paths);\n          paths.pop();\n          paths.pop();\n        } else {\n          paths.push(key);\n          fn(level, locale, val, paths);\n          paths.pop();\n        }\n      });\n    } else if (isArray(message)) {\n      message.forEach(function (item, index) {\n        if (isPlainObject(item)) {\n          paths.push((\"[\" + index + \"]\"));\n          paths.push('.');\n          fn(level, locale, item, paths);\n          paths.pop();\n          paths.pop();\n        } else {\n          paths.push((\"[\" + index + \"]\"));\n          fn(level, locale, item, paths);\n          paths.pop();\n        }\n      });\n    } else if (isString(message)) {\n      var ret = htmlTagMatcher.test(message);\n      if (ret) {\n        var msg = \"Detected HTML in message '\" + message + \"' of keypath '\" + (paths.join('')) + \"' at '\" + locale + \"'. Consider component interpolation with '<i18n>' to avoid XSS. See https://bit.ly/2ZqJzkp\";\n        if (level === 'warn') {\n          warn(msg);\n        } else if (level === 'error') {\n          error(msg);\n        }\n      }\n    }\n  };\n\n  fn(level, locale, message, paths);\n};\n\nVueI18n.prototype._initVM = function _initVM (data) {\n  var silent = Vue.config.silent;\n  Vue.config.silent = true;\n  this._vm = new Vue({ data: data });\n  Vue.config.silent = silent;\n};\n\nVueI18n.prototype.destroyVM = function destroyVM () {\n  this._vm.$destroy();\n};\n\nVueI18n.prototype.subscribeDataChanging = function subscribeDataChanging (vm) {\n  this._dataListeners.add(vm);\n};\n\nVueI18n.prototype.unsubscribeDataChanging = function unsubscribeDataChanging (vm) {\n  remove(this._dataListeners, vm);\n};\n\nVueI18n.prototype.watchI18nData = function watchI18nData () {\n  var self = this;\n  return this._vm.$watch('$data', function () {\n    self._dataListeners.forEach(function (e) {\n      Vue.nextTick(function () {\n        e && e.$forceUpdate();\n      });\n    });\n  }, { deep: true })\n};\n\nVueI18n.prototype.watchLocale = function watchLocale () {\n  /* istanbul ignore if */\n  if (!this._sync || !this._root) { return null }\n  var target = this._vm;\n  return this._root.$i18n.vm.$watch('locale', function (val) {\n    target.$set(target, 'locale', val);\n    target.$forceUpdate();\n  }, { immediate: true })\n};\n\nVueI18n.prototype.onComponentInstanceCreated = function onComponentInstanceCreated (newI18n) {\n  if (this._componentInstanceCreatedListener) {\n    this._componentInstanceCreatedListener(newI18n, this);\n  }\n};\n\nprototypeAccessors.vm.get = function () { return this._vm };\n\nprototypeAccessors.messages.get = function () { return looseClone(this._getMessages()) };\nprototypeAccessors.dateTimeFormats.get = function () { return looseClone(this._getDateTimeFormats()) };\nprototypeAccessors.numberFormats.get = function () { return looseClone(this._getNumberFormats()) };\nprototypeAccessors.availableLocales.get = function () { return Object.keys(this.messages).sort() };\n\nprototypeAccessors.locale.get = function () { return this._vm.locale };\nprototypeAccessors.locale.set = function (locale) {\n  this._vm.$set(this._vm, 'locale', locale);\n};\n\nprototypeAccessors.fallbackLocale.get = function () { return this._vm.fallbackLocale };\nprototypeAccessors.fallbackLocale.set = function (locale) {\n  this._localeChainCache = {};\n  this._vm.$set(this._vm, 'fallbackLocale', locale);\n};\n\nprototypeAccessors.formatFallbackMessages.get = function () { return this._formatFallbackMessages };\nprototypeAccessors.formatFallbackMessages.set = function (fallback) { this._formatFallbackMessages = fallback; };\n\nprototypeAccessors.missing.get = function () { return this._missing };\nprototypeAccessors.missing.set = function (handler) { this._missing = handler; };\n\nprototypeAccessors.formatter.get = function () { return this._formatter };\nprototypeAccessors.formatter.set = function (formatter) { this._formatter = formatter; };\n\nprototypeAccessors.silentTranslationWarn.get = function () { return this._silentTranslationWarn };\nprototypeAccessors.silentTranslationWarn.set = function (silent) { this._silentTranslationWarn = silent; };\n\nprototypeAccessors.silentFallbackWarn.get = function () { return this._silentFallbackWarn };\nprototypeAccessors.silentFallbackWarn.set = function (silent) { this._silentFallbackWarn = silent; };\n\nprototypeAccessors.preserveDirectiveContent.get = function () { return this._preserveDirectiveContent };\nprototypeAccessors.preserveDirectiveContent.set = function (preserve) { this._preserveDirectiveContent = preserve; };\n\nprototypeAccessors.warnHtmlInMessage.get = function () { return this._warnHtmlInMessage };\nprototypeAccessors.warnHtmlInMessage.set = function (level) {\n    var this$1 = this;\n\n  var orgLevel = this._warnHtmlInMessage;\n  this._warnHtmlInMessage = level;\n  if (orgLevel !== level && (level === 'warn' || level === 'error')) {\n    var messages = this._getMessages();\n    Object.keys(messages).forEach(function (locale) {\n      this$1._checkLocaleMessage(locale, this$1._warnHtmlInMessage, messages[locale]);\n    });\n  }\n};\n\nprototypeAccessors.postTranslation.get = function () { return this._postTranslation };\nprototypeAccessors.postTranslation.set = function (handler) { this._postTranslation = handler; };\n\nVueI18n.prototype._getMessages = function _getMessages () { return this._vm.messages };\nVueI18n.prototype._getDateTimeFormats = function _getDateTimeFormats () { return this._vm.dateTimeFormats };\nVueI18n.prototype._getNumberFormats = function _getNumberFormats () { return this._vm.numberFormats };\n\nVueI18n.prototype._warnDefault = function _warnDefault (locale, key, result, vm, values, interpolateMode) {\n  if (!isNull(result)) { return result }\n  if (this._missing) {\n    var missingRet = this._missing.apply(null, [locale, key, vm, values]);\n    if (isString(missingRet)) {\n      return missingRet\n    }\n  } else {\n    if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key)) {\n      warn(\n        \"Cannot translate the value of keypath '\" + key + \"'. \" +\n        'Use the value of keypath as default.'\n      );\n    }\n  }\n\n  if (this._formatFallbackMessages) {\n    var parsedArgs = parseArgs.apply(void 0, values);\n    return this._render(key, interpolateMode, parsedArgs.params, key)\n  } else {\n    return key\n  }\n};\n\nVueI18n.prototype._isFallbackRoot = function _isFallbackRoot (val) {\n  return !val && !isNull(this._root) && this._fallbackRoot\n};\n\nVueI18n.prototype._isSilentFallbackWarn = function _isSilentFallbackWarn (key) {\n  return this._silentFallbackWarn instanceof RegExp\n    ? this._silentFallbackWarn.test(key)\n    : this._silentFallbackWarn\n};\n\nVueI18n.prototype._isSilentFallback = function _isSilentFallback (locale, key) {\n  return this._isSilentFallbackWarn(key) && (this._isFallbackRoot() || locale !== this.fallbackLocale)\n};\n\nVueI18n.prototype._isSilentTranslationWarn = function _isSilentTranslationWarn (key) {\n  return this._silentTranslationWarn instanceof RegExp\n    ? this._silentTranslationWarn.test(key)\n    : this._silentTranslationWarn\n};\n\nVueI18n.prototype._interpolate = function _interpolate (\n  locale,\n  message,\n  key,\n  host,\n  interpolateMode,\n  values,\n  visitedLinkStack\n) {\n  if (!message) { return null }\n\n  var pathRet = this._path.getPathValue(message, key);\n  if (isArray(pathRet) || isPlainObject(pathRet)) { return pathRet }\n\n  var ret;\n  if (isNull(pathRet)) {\n    /* istanbul ignore else */\n    if (isPlainObject(message)) {\n      ret = message[key];\n      if (!(isString(ret) || isFunction(ret))) {\n        if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallback(locale, key)) {\n          warn((\"Value of key '\" + key + \"' is not a string or function !\"));\n        }\n        return null\n      }\n    } else {\n      return null\n    }\n  } else {\n    /* istanbul ignore else */\n    if (isString(pathRet) || isFunction(pathRet)) {\n      ret = pathRet;\n    } else {\n      if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallback(locale, key)) {\n        warn((\"Value of key '\" + key + \"' is not a string or function!\"));\n      }\n      return null\n    }\n  }\n\n  // Check for the existence of links within the translated string\n  if (isString(ret) && (ret.indexOf('@:') >= 0 || ret.indexOf('@.') >= 0)) {\n    ret = this._link(locale, message, ret, host, 'raw', values, visitedLinkStack);\n  }\n\n  return this._render(ret, interpolateMode, values, key)\n};\n\nVueI18n.prototype._link = function _link (\n  locale,\n  message,\n  str,\n  host,\n  interpolateMode,\n  values,\n  visitedLinkStack\n) {\n  var ret = str;\n\n  // Match all the links within the local\n  // We are going to replace each of\n  // them with its translation\n  var matches = ret.match(linkKeyMatcher);\n    \n  // eslint-disable-next-line no-autofix/prefer-const\n  for (var idx in matches) {\n    // ie compatible: filter custom array\n    // prototype method\n    if (!matches.hasOwnProperty(idx)) {\n      continue\n    }\n    var link = matches[idx];\n    var linkKeyPrefixMatches = link.match(linkKeyPrefixMatcher);\n    var linkPrefix = linkKeyPrefixMatches[0];\n      var formatterName = linkKeyPrefixMatches[1];\n\n    // Remove the leading @:, @.case: and the brackets\n    var linkPlaceholder = link.replace(linkPrefix, '').replace(bracketsMatcher, '');\n\n    if (includes(visitedLinkStack, linkPlaceholder)) {\n      if (process.env.NODE_ENV !== 'production') {\n        warn((\"Circular reference found. \\\"\" + link + \"\\\" is already visited in the chain of \" + (visitedLinkStack.reverse().join(' <- '))));\n      }\n      return ret\n    }\n    visitedLinkStack.push(linkPlaceholder);\n\n    // Translate the link\n    var translated = this._interpolate(\n      locale, message, linkPlaceholder, host,\n      interpolateMode === 'raw' ? 'string' : interpolateMode,\n      interpolateMode === 'raw' ? undefined : values,\n      visitedLinkStack\n    );\n\n    if (this._isFallbackRoot(translated)) {\n      if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(linkPlaceholder)) {\n        warn((\"Fall back to translate the link placeholder '\" + linkPlaceholder + \"' with root locale.\"));\n      }\n      /* istanbul ignore if */\n      if (!this._root) { throw Error('unexpected error') }\n      var root = this._root.$i18n;\n      translated = root._translate(\n        root._getMessages(), root.locale, root.fallbackLocale,\n        linkPlaceholder, host, interpolateMode, values\n      );\n    }\n    translated = this._warnDefault(\n      locale, linkPlaceholder, translated, host,\n      isArray(values) ? values : [values],\n      interpolateMode\n    );\n\n    if (this._modifiers.hasOwnProperty(formatterName)) {\n      translated = this._modifiers[formatterName](translated);\n    } else if (defaultModifiers.hasOwnProperty(formatterName)) {\n      translated = defaultModifiers[formatterName](translated);\n    }\n\n    visitedLinkStack.pop();\n\n    // Replace the link with the translated\n    ret = !translated ? ret : ret.replace(link, translated);\n  }\n\n  return ret\n};\n\nVueI18n.prototype._createMessageContext = function _createMessageContext (values, formatter, path, interpolateMode) {\n    var this$1 = this;\n\n  var _list = isArray(values) ? values : [];\n  var _named = isObject(values) ? values : {};\n  var list = function (index) { return _list[index]; };\n  var named = function (key) { return _named[key]; };\n  var messages = this._getMessages();\n  var locale = this.locale;\n\n  return {\n    list: list,\n    named: named,\n    values: values,\n    formatter: formatter,\n    path: path,\n    messages: messages,\n    locale: locale,\n    linked: function (linkedKey) { return this$1._interpolate(locale, messages[locale] || {}, linkedKey, null, interpolateMode, undefined, [linkedKey]); }\n  }\n};\n\nVueI18n.prototype._render = function _render (message, interpolateMode, values, path) {\n  if (isFunction(message)) {\n    return message(\n      this._createMessageContext(values, this._formatter || defaultFormatter, path, interpolateMode)\n    )\n  }\n\n  var ret = this._formatter.interpolate(message, values, path);\n\n  // If the custom formatter refuses to work - apply the default one\n  if (!ret) {\n    ret = defaultFormatter.interpolate(message, values, path);\n  }\n\n  // if interpolateMode is **not** 'string' ('row'),\n  // return the compiled data (e.g. ['foo', VNode, 'bar']) with formatter\n  return interpolateMode === 'string' && !isString(ret) ? ret.join('') : ret\n};\n\nVueI18n.prototype._appendItemToChain = function _appendItemToChain (chain, item, blocks) {\n  var follow = false;\n  if (!includes(chain, item)) {\n    follow = true;\n    if (item) {\n      follow = item[item.length - 1] !== '!';\n      item = item.replace(/!/g, '');\n      chain.push(item);\n      if (blocks && blocks[item]) {\n        follow = blocks[item];\n      }\n    }\n  }\n  return follow\n};\n\nVueI18n.prototype._appendLocaleToChain = function _appendLocaleToChain (chain, locale, blocks) {\n  var follow;\n  var tokens = locale.split('-');\n  do {\n    var item = tokens.join('-');\n    follow = this._appendItemToChain(chain, item, blocks);\n    tokens.splice(-1, 1);\n  } while (tokens.length && (follow === true))\n  return follow\n};\n\nVueI18n.prototype._appendBlockToChain = function _appendBlockToChain (chain, block, blocks) {\n  var follow = true;\n  for (var i = 0; (i < block.length) && (isBoolean(follow)); i++) {\n    var locale = block[i];\n    if (isString(locale)) {\n      follow = this._appendLocaleToChain(chain, locale, blocks);\n    }\n  }\n  return follow\n};\n\nVueI18n.prototype._getLocaleChain = function _getLocaleChain (start, fallbackLocale) {\n  if (start === '') { return [] }\n\n  if (!this._localeChainCache) {\n    this._localeChainCache = {};\n  }\n\n  var chain = this._localeChainCache[start];\n  if (!chain) {\n    if (!fallbackLocale) {\n      fallbackLocale = this.fallbackLocale;\n    }\n    chain = [];\n\n    // first block defined by start\n    var block = [start];\n\n    // while any intervening block found\n    while (isArray(block)) {\n      block = this._appendBlockToChain(\n        chain,\n        block,\n        fallbackLocale\n      );\n    }\n\n    // last block defined by default\n    var defaults;\n    if (isArray(fallbackLocale)) {\n      defaults = fallbackLocale;\n    } else if (isObject(fallbackLocale)) {\n      /* $FlowFixMe */\n      if (fallbackLocale['default']) {\n        defaults = fallbackLocale['default'];\n      } else {\n        defaults = null;\n      }\n    } else {\n      defaults = fallbackLocale;\n    }\n\n    // convert defaults to array\n    if (isString(defaults)) {\n      block = [defaults];\n    } else {\n      block = defaults;\n    }\n    if (block) {\n      this._appendBlockToChain(\n        chain,\n        block,\n        null\n      );\n    }\n    this._localeChainCache[start] = chain;\n  }\n  return chain\n};\n\nVueI18n.prototype._translate = function _translate (\n  messages,\n  locale,\n  fallback,\n  key,\n  host,\n  interpolateMode,\n  args\n) {\n  var chain = this._getLocaleChain(locale, fallback);\n  var res;\n  for (var i = 0; i < chain.length; i++) {\n    var step = chain[i];\n    res =\n      this._interpolate(step, messages[step], key, host, interpolateMode, args, [key]);\n    if (!isNull(res)) {\n      if (step !== locale && process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n        warn((\"Fall back to translate the keypath '\" + key + \"' with '\" + step + \"' locale.\"));\n      }\n      return res\n    }\n  }\n  return null\n};\n\nVueI18n.prototype._t = function _t (key, _locale, messages, host) {\n    var ref;\n\n    var values = [], len = arguments.length - 4;\n    while ( len-- > 0 ) values[ len ] = arguments[ len + 4 ];\n  if (!key) { return '' }\n\n  var parsedArgs = parseArgs.apply(void 0, values);\n  if(this._escapeParameterHtml) {\n    parsedArgs.params = escapeParams(parsedArgs.params);\n  }\n\n  var locale = parsedArgs.locale || _locale;\n\n  var ret = this._translate(\n    messages, locale, this.fallbackLocale, key,\n    host, 'string', parsedArgs.params\n  );\n  if (this._isFallbackRoot(ret)) {\n    if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n      warn((\"Fall back to translate the keypath '\" + key + \"' with root locale.\"));\n    }\n    /* istanbul ignore if */\n    if (!this._root) { throw Error('unexpected error') }\n    return (ref = this._root).$t.apply(ref, [ key ].concat( values ))\n  } else {\n    ret = this._warnDefault(locale, key, ret, host, values, 'string');\n    if (this._postTranslation && ret !== null && ret !== undefined) {\n      ret = this._postTranslation(ret, key);\n    }\n    return ret\n  }\n};\n\nVueI18n.prototype.t = function t (key) {\n    var ref;\n\n    var values = [], len = arguments.length - 1;\n    while ( len-- > 0 ) values[ len ] = arguments[ len + 1 ];\n  return (ref = this)._t.apply(ref, [ key, this.locale, this._getMessages(), null ].concat( values ))\n};\n\nVueI18n.prototype._i = function _i (key, locale, messages, host, values) {\n  var ret =\n    this._translate(messages, locale, this.fallbackLocale, key, host, 'raw', values);\n  if (this._isFallbackRoot(ret)) {\n    if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key)) {\n      warn((\"Fall back to interpolate the keypath '\" + key + \"' with root locale.\"));\n    }\n    if (!this._root) { throw Error('unexpected error') }\n    return this._root.$i18n.i(key, locale, values)\n  } else {\n    return this._warnDefault(locale, key, ret, host, [values], 'raw')\n  }\n};\n\nVueI18n.prototype.i = function i (key, locale, values) {\n  /* istanbul ignore if */\n  if (!key) { return '' }\n\n  if (!isString(locale)) {\n    locale = this.locale;\n  }\n\n  return this._i(key, locale, this._getMessages(), null, values)\n};\n\nVueI18n.prototype._tc = function _tc (\n  key,\n  _locale,\n  messages,\n  host,\n  choice\n) {\n    var ref;\n\n    var values = [], len = arguments.length - 5;\n    while ( len-- > 0 ) values[ len ] = arguments[ len + 5 ];\n  if (!key) { return '' }\n  if (choice === undefined) {\n    choice = 1;\n  }\n\n  var predefined = { 'count': choice, 'n': choice };\n  var parsedArgs = parseArgs.apply(void 0, values);\n  parsedArgs.params = Object.assign(predefined, parsedArgs.params);\n  values = parsedArgs.locale === null ? [parsedArgs.params] : [parsedArgs.locale, parsedArgs.params];\n  return this.fetchChoice((ref = this)._t.apply(ref, [ key, _locale, messages, host ].concat( values )), choice)\n};\n\nVueI18n.prototype.fetchChoice = function fetchChoice (message, choice) {\n  /* istanbul ignore if */\n  if (!message || !isString(message)) { return null }\n  var choices = message.split('|');\n\n  choice = this.getChoiceIndex(choice, choices.length);\n  if (!choices[choice]) { return message }\n  return choices[choice].trim()\n};\n\nVueI18n.prototype.tc = function tc (key, choice) {\n    var ref;\n\n    var values = [], len = arguments.length - 2;\n    while ( len-- > 0 ) values[ len ] = arguments[ len + 2 ];\n  return (ref = this)._tc.apply(ref, [ key, this.locale, this._getMessages(), null, choice ].concat( values ))\n};\n\nVueI18n.prototype._te = function _te (key, locale, messages) {\n    var args = [], len = arguments.length - 3;\n    while ( len-- > 0 ) args[ len ] = arguments[ len + 3 ];\n\n  var _locale = parseArgs.apply(void 0, args).locale || locale;\n  return this._exist(messages[_locale], key)\n};\n\nVueI18n.prototype.te = function te (key, locale) {\n  return this._te(key, this.locale, this._getMessages(), locale)\n};\n\nVueI18n.prototype.getLocaleMessage = function getLocaleMessage (locale) {\n  return looseClone(this._vm.messages[locale] || {})\n};\n\nVueI18n.prototype.setLocaleMessage = function setLocaleMessage (locale, message) {\n  if (this._warnHtmlInMessage === 'warn' || this._warnHtmlInMessage === 'error') {\n    this._checkLocaleMessage(locale, this._warnHtmlInMessage, message);\n  }\n  this._vm.$set(this._vm.messages, locale, message);\n};\n\nVueI18n.prototype.mergeLocaleMessage = function mergeLocaleMessage (locale, message) {\n  if (this._warnHtmlInMessage === 'warn' || this._warnHtmlInMessage === 'error') {\n    this._checkLocaleMessage(locale, this._warnHtmlInMessage, message);\n  }\n  this._vm.$set(this._vm.messages, locale, merge(\n    typeof this._vm.messages[locale] !== 'undefined' && Object.keys(this._vm.messages[locale]).length\n      ? this._vm.messages[locale]\n      : {},\n    message\n  ));\n};\n\nVueI18n.prototype.getDateTimeFormat = function getDateTimeFormat (locale) {\n  return looseClone(this._vm.dateTimeFormats[locale] || {})\n};\n\nVueI18n.prototype.setDateTimeFormat = function setDateTimeFormat (locale, format) {\n  this._vm.$set(this._vm.dateTimeFormats, locale, format);\n  this._clearDateTimeFormat(locale, format);\n};\n\nVueI18n.prototype.mergeDateTimeFormat = function mergeDateTimeFormat (locale, format) {\n  this._vm.$set(this._vm.dateTimeFormats, locale, merge(this._vm.dateTimeFormats[locale] || {}, format));\n  this._clearDateTimeFormat(locale, format);\n};\n\nVueI18n.prototype._clearDateTimeFormat = function _clearDateTimeFormat (locale, format) {\n  // eslint-disable-next-line no-autofix/prefer-const\n  for (var key in format) {\n    var id = locale + \"__\" + key;\n\n    if (!this._dateTimeFormatters.hasOwnProperty(id)) {\n      continue\n    }\n\n    delete this._dateTimeFormatters[id];\n  }\n};\n\nVueI18n.prototype._localizeDateTime = function _localizeDateTime (\n  value,\n  locale,\n  fallback,\n  dateTimeFormats,\n  key\n) {\n  var _locale = locale;\n  var formats = dateTimeFormats[_locale];\n\n  var chain = this._getLocaleChain(locale, fallback);\n  for (var i = 0; i < chain.length; i++) {\n    var current = _locale;\n    var step = chain[i];\n    formats = dateTimeFormats[step];\n    _locale = step;\n    // fallback locale\n    if (isNull(formats) || isNull(formats[key])) {\n      if (step !== locale && process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n        warn((\"Fall back to '\" + step + \"' datetime formats from '\" + current + \"' datetime formats.\"));\n      }\n    } else {\n      break\n    }\n  }\n\n  if (isNull(formats) || isNull(formats[key])) {\n    return null\n  } else {\n    var format = formats[key];\n    var id = _locale + \"__\" + key;\n    var formatter = this._dateTimeFormatters[id];\n    if (!formatter) {\n      formatter = this._dateTimeFormatters[id] = new Intl.DateTimeFormat(_locale, format);\n    }\n    return formatter.format(value)\n  }\n};\n\nVueI18n.prototype._d = function _d (value, locale, key) {\n  /* istanbul ignore if */\n  if (process.env.NODE_ENV !== 'production' && !VueI18n.availabilities.dateTimeFormat) {\n    warn('Cannot format a Date value due to not supported Intl.DateTimeFormat.');\n    return ''\n  }\n\n  if (!key) {\n    return new Intl.DateTimeFormat(locale).format(value)\n  }\n\n  var ret =\n    this._localizeDateTime(value, locale, this.fallbackLocale, this._getDateTimeFormats(), key);\n  if (this._isFallbackRoot(ret)) {\n    if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n      warn((\"Fall back to datetime localization of root: key '\" + key + \"'.\"));\n    }\n    /* istanbul ignore if */\n    if (!this._root) { throw Error('unexpected error') }\n    return this._root.$i18n.d(value, key, locale)\n  } else {\n    return ret || ''\n  }\n};\n\nVueI18n.prototype.d = function d (value) {\n    var args = [], len = arguments.length - 1;\n    while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ];\n\n  var locale = this.locale;\n  var key = null;\n\n  if (args.length === 1) {\n    if (isString(args[0])) {\n      key = args[0];\n    } else if (isObject(args[0])) {\n      if (args[0].locale) {\n        locale = args[0].locale;\n      }\n      if (args[0].key) {\n        key = args[0].key;\n      }\n    }\n  } else if (args.length === 2) {\n    if (isString(args[0])) {\n      key = args[0];\n    }\n    if (isString(args[1])) {\n      locale = args[1];\n    }\n  }\n\n  return this._d(value, locale, key)\n};\n\nVueI18n.prototype.getNumberFormat = function getNumberFormat (locale) {\n  return looseClone(this._vm.numberFormats[locale] || {})\n};\n\nVueI18n.prototype.setNumberFormat = function setNumberFormat (locale, format) {\n  this._vm.$set(this._vm.numberFormats, locale, format);\n  this._clearNumberFormat(locale, format);\n};\n\nVueI18n.prototype.mergeNumberFormat = function mergeNumberFormat (locale, format) {\n  this._vm.$set(this._vm.numberFormats, locale, merge(this._vm.numberFormats[locale] || {}, format));\n  this._clearNumberFormat(locale, format);\n};\n\nVueI18n.prototype._clearNumberFormat = function _clearNumberFormat (locale, format) {\n  // eslint-disable-next-line no-autofix/prefer-const\n  for (var key in format) {\n    var id = locale + \"__\" + key;\n\n    if (!this._numberFormatters.hasOwnProperty(id)) {\n      continue\n    }\n\n    delete this._numberFormatters[id];\n  }\n};\n\nVueI18n.prototype._getNumberFormatter = function _getNumberFormatter (\n  value,\n  locale,\n  fallback,\n  numberFormats,\n  key,\n  options\n) {\n  var _locale = locale;\n  var formats = numberFormats[_locale];\n\n  var chain = this._getLocaleChain(locale, fallback);\n  for (var i = 0; i < chain.length; i++) {\n    var current = _locale;\n    var step = chain[i];\n    formats = numberFormats[step];\n    _locale = step;\n    // fallback locale\n    if (isNull(formats) || isNull(formats[key])) {\n      if (step !== locale && process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n        warn((\"Fall back to '\" + step + \"' number formats from '\" + current + \"' number formats.\"));\n      }\n    } else {\n      break\n    }\n  }\n\n  if (isNull(formats) || isNull(formats[key])) {\n    return null\n  } else {\n    var format = formats[key];\n\n    var formatter;\n    if (options) {\n      // If options specified - create one time number formatter\n      formatter = new Intl.NumberFormat(_locale, Object.assign({}, format, options));\n    } else {\n      var id = _locale + \"__\" + key;\n      formatter = this._numberFormatters[id];\n      if (!formatter) {\n        formatter = this._numberFormatters[id] = new Intl.NumberFormat(_locale, format);\n      }\n    }\n    return formatter\n  }\n};\n\nVueI18n.prototype._n = function _n (value, locale, key, options) {\n  /* istanbul ignore if */\n  if (!VueI18n.availabilities.numberFormat) {\n    if (process.env.NODE_ENV !== 'production') {\n      warn('Cannot format a Number value due to not supported Intl.NumberFormat.');\n    }\n    return ''\n  }\n\n  if (!key) {\n    var nf = !options ? new Intl.NumberFormat(locale) : new Intl.NumberFormat(locale, options);\n    return nf.format(value)\n  }\n\n  var formatter = this._getNumberFormatter(value, locale, this.fallbackLocale, this._getNumberFormats(), key, options);\n  var ret = formatter && formatter.format(value);\n  if (this._isFallbackRoot(ret)) {\n    if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n      warn((\"Fall back to number localization of root: key '\" + key + \"'.\"));\n    }\n    /* istanbul ignore if */\n    if (!this._root) { throw Error('unexpected error') }\n    return this._root.$i18n.n(value, Object.assign({}, { key: key, locale: locale }, options))\n  } else {\n    return ret || ''\n  }\n};\n\nVueI18n.prototype.n = function n (value) {\n    var args = [], len = arguments.length - 1;\n    while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ];\n\n  var locale = this.locale;\n  var key = null;\n  var options = null;\n\n  if (args.length === 1) {\n    if (isString(args[0])) {\n      key = args[0];\n    } else if (isObject(args[0])) {\n      if (args[0].locale) {\n        locale = args[0].locale;\n      }\n      if (args[0].key) {\n        key = args[0].key;\n      }\n\n      // Filter out number format options only\n      options = Object.keys(args[0]).reduce(function (acc, key) {\n          var obj;\n\n        if (includes(numberFormatKeys, key)) {\n          return Object.assign({}, acc, ( obj = {}, obj[key] = args[0][key], obj ))\n        }\n        return acc\n      }, null);\n    }\n  } else if (args.length === 2) {\n    if (isString(args[0])) {\n      key = args[0];\n    }\n    if (isString(args[1])) {\n      locale = args[1];\n    }\n  }\n\n  return this._n(value, locale, key, options)\n};\n\nVueI18n.prototype._ntp = function _ntp (value, locale, key, options) {\n  /* istanbul ignore if */\n  if (!VueI18n.availabilities.numberFormat) {\n    if (process.env.NODE_ENV !== 'production') {\n      warn('Cannot format to parts a Number value due to not supported Intl.NumberFormat.');\n    }\n    return []\n  }\n\n  if (!key) {\n    var nf = !options ? new Intl.NumberFormat(locale) : new Intl.NumberFormat(locale, options);\n    return nf.formatToParts(value)\n  }\n\n  var formatter = this._getNumberFormatter(value, locale, this.fallbackLocale, this._getNumberFormats(), key, options);\n  var ret = formatter && formatter.formatToParts(value);\n  if (this._isFallbackRoot(ret)) {\n    if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key)) {\n      warn((\"Fall back to format number to parts of root: key '\" + key + \"' .\"));\n    }\n    /* istanbul ignore if */\n    if (!this._root) { throw Error('unexpected error') }\n    return this._root.$i18n._ntp(value, locale, key, options)\n  } else {\n    return ret || []\n  }\n};\n\nObject.defineProperties( VueI18n.prototype, prototypeAccessors );\n\nvar availabilities;\n// $FlowFixMe\nObject.defineProperty(VueI18n, 'availabilities', {\n  get: function get () {\n    if (!availabilities) {\n      var intlDefined = typeof Intl !== 'undefined';\n      availabilities = {\n        dateTimeFormat: intlDefined && typeof Intl.DateTimeFormat !== 'undefined',\n        numberFormat: intlDefined && typeof Intl.NumberFormat !== 'undefined'\n      };\n    }\n\n    return availabilities\n  }\n});\n\nVueI18n.install = install;\nVueI18n.version = '8.24.4';\n\nmodule.exports = VueI18n;\n"
  },
  {
    "path": "dist/vue-i18n.esm.browser.js",
    "content": "/*  */\n\n/**\n * constants\n */\n\nconst numberFormatKeys = [\n  'compactDisplay',\n  'currency',\n  'currencyDisplay',\n  'currencySign',\n  'localeMatcher',\n  'notation',\n  'numberingSystem',\n  'signDisplay',\n  'style',\n  'unit',\n  'unitDisplay',\n  'useGrouping',\n  'minimumIntegerDigits',\n  'minimumFractionDigits',\n  'maximumFractionDigits',\n  'minimumSignificantDigits',\n  'maximumSignificantDigits'\n];\n\n/**\n * utilities\n */\n\nfunction warn (msg, err) {\n  if (typeof console !== 'undefined') {\n    console.warn('[vue-i18n] ' + msg);\n    /* istanbul ignore if */\n    if (err) {\n      console.warn(err.stack);\n    }\n  }\n}\n\nfunction error (msg, err) {\n  if (typeof console !== 'undefined') {\n    console.error('[vue-i18n] ' + msg);\n    /* istanbul ignore if */\n    if (err) {\n      console.error(err.stack);\n    }\n  }\n}\n\nconst isArray = Array.isArray;\n\nfunction isObject (obj) {\n  return obj !== null && typeof obj === 'object'\n}\n\nfunction isBoolean (val) {\n  return typeof val === 'boolean'\n}\n\nfunction isString (val) {\n  return typeof val === 'string'\n}\n\nconst toString = Object.prototype.toString;\nconst OBJECT_STRING = '[object Object]';\nfunction isPlainObject (obj) {\n  return toString.call(obj) === OBJECT_STRING\n}\n\nfunction isNull (val) {\n  return val === null || val === undefined\n}\n\nfunction isFunction (val) {\n  return typeof val === 'function'\n}\n\nfunction parseArgs (...args) {\n  let locale = null;\n  let params = null;\n  if (args.length === 1) {\n    if (isObject(args[0]) || isArray(args[0])) {\n      params = args[0];\n    } else if (typeof args[0] === 'string') {\n      locale = args[0];\n    }\n  } else if (args.length === 2) {\n    if (typeof args[0] === 'string') {\n      locale = args[0];\n    }\n    /* istanbul ignore if */\n    if (isObject(args[1]) || isArray(args[1])) {\n      params = args[1];\n    }\n  }\n\n  return { locale, params }\n}\n\nfunction looseClone (obj) {\n  return JSON.parse(JSON.stringify(obj))\n}\n\nfunction remove (arr, item) {\n  if (arr.delete(item)) {\n    return arr\n  }\n}\n\nfunction includes (arr, item) {\n  return !!~arr.indexOf(item)\n}\n\nconst hasOwnProperty = Object.prototype.hasOwnProperty;\nfunction hasOwn (obj, key) {\n  return hasOwnProperty.call(obj, key)\n}\n\nfunction merge (target) {\n  const output = Object(target);\n  for (let i = 1; i < arguments.length; i++) {\n    const source = arguments[i];\n    if (source !== undefined && source !== null) {\n      let key;\n      for (key in source) {\n        if (hasOwn(source, key)) {\n          if (isObject(source[key])) {\n            output[key] = merge(output[key], source[key]);\n          } else {\n            output[key] = source[key];\n          }\n        }\n      }\n    }\n  }\n  return output\n}\n\nfunction looseEqual (a, b) {\n  if (a === b) { return true }\n  const isObjectA = isObject(a);\n  const isObjectB = isObject(b);\n  if (isObjectA && isObjectB) {\n    try {\n      const isArrayA = isArray(a);\n      const isArrayB = isArray(b);\n      if (isArrayA && isArrayB) {\n        return a.length === b.length && a.every((e, i) => {\n          return looseEqual(e, b[i])\n        })\n      } else if (!isArrayA && !isArrayB) {\n        const keysA = Object.keys(a);\n        const keysB = Object.keys(b);\n        return keysA.length === keysB.length && keysA.every((key) => {\n          return looseEqual(a[key], b[key])\n        })\n      } else {\n        /* istanbul ignore next */\n        return false\n      }\n    } catch (e) {\n      /* istanbul ignore next */\n      return false\n    }\n  } else if (!isObjectA && !isObjectB) {\n    return String(a) === String(b)\n  } else {\n    return false\n  }\n}\n\n/**\n * Sanitizes html special characters from input strings. For mitigating risk of XSS attacks.\n * @param rawText The raw input from the user that should be escaped.\n */\nfunction escapeHtml(rawText) {\n  return rawText\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\"/g, '&quot;')\n    .replace(/'/g, '&apos;')\n}\n\n/**\n * Escapes html tags and special symbols from all provided params which were returned from parseArgs().params.\n * This method performs an in-place operation on the params object.\n *\n * @param {any} params Parameters as provided from `parseArgs().params`.\n *                     May be either an array of strings or a string->any map.\n *\n * @returns The manipulated `params` object.\n */\nfunction escapeParams(params) {\n  if(params != null) {\n    Object.keys(params).forEach(key => {\n      if(typeof(params[key]) == 'string') {\n        params[key] = escapeHtml(params[key]);\n      }\n    });\n  }\n  return params\n}\n\n/*  */\n\nfunction extend (Vue) {\n  if (!Vue.prototype.hasOwnProperty('$i18n')) {\n    // $FlowFixMe\n    Object.defineProperty(Vue.prototype, '$i18n', {\n      get () { return this._i18n }\n    });\n  }\n\n  Vue.prototype.$t = function (key, ...values) {\n    const i18n = this.$i18n;\n    return i18n._t(key, i18n.locale, i18n._getMessages(), this, ...values)\n  };\n\n  Vue.prototype.$tc = function (key, choice, ...values) {\n    const i18n = this.$i18n;\n    return i18n._tc(key, i18n.locale, i18n._getMessages(), this, choice, ...values)\n  };\n\n  Vue.prototype.$te = function (key, locale) {\n    const i18n = this.$i18n;\n    return i18n._te(key, i18n.locale, i18n._getMessages(), locale)\n  };\n\n  Vue.prototype.$d = function (value, ...args) {\n    return this.$i18n.d(value, ...args)\n  };\n\n  Vue.prototype.$n = function (value, ...args) {\n    return this.$i18n.n(value, ...args)\n  };\n}\n\n/*  */\n\nvar mixin = {\n  beforeCreate () {\n    const options = this.$options;\n    options.i18n = options.i18n || (options.__i18n ? {} : null);\n\n    if (options.i18n) {\n      if (options.i18n instanceof VueI18n) {\n        // init locale messages via custom blocks\n        if (options.__i18n) {\n          try {\n            let localeMessages = options.i18n && options.i18n.messages ? options.i18n.messages : {};\n            options.__i18n.forEach(resource => {\n              localeMessages = merge(localeMessages, JSON.parse(resource));\n            });\n            Object.keys(localeMessages).forEach((locale) => {\n              options.i18n.mergeLocaleMessage(locale, localeMessages[locale]);\n            });\n          } catch (e) {\n            {\n              error(`Cannot parse locale messages via custom blocks.`, e);\n            }\n          }\n        }\n        this._i18n = options.i18n;\n        this._i18nWatcher = this._i18n.watchI18nData();\n      } else if (isPlainObject(options.i18n)) {\n        const rootI18n = this.$root && this.$root.$i18n && this.$root.$i18n instanceof VueI18n\n          ? this.$root.$i18n\n          : null;\n        // component local i18n\n        if (rootI18n) {\n          options.i18n.root = this.$root;\n          options.i18n.formatter = rootI18n.formatter;\n          options.i18n.fallbackLocale = rootI18n.fallbackLocale;\n          options.i18n.formatFallbackMessages = rootI18n.formatFallbackMessages;\n          options.i18n.silentTranslationWarn = rootI18n.silentTranslationWarn;\n          options.i18n.silentFallbackWarn = rootI18n.silentFallbackWarn;\n          options.i18n.pluralizationRules = rootI18n.pluralizationRules;\n          options.i18n.preserveDirectiveContent = rootI18n.preserveDirectiveContent;\n        }\n\n        // init locale messages via custom blocks\n        if (options.__i18n) {\n          try {\n            let localeMessages = options.i18n && options.i18n.messages ? options.i18n.messages : {};\n            options.__i18n.forEach(resource => {\n              localeMessages = merge(localeMessages, JSON.parse(resource));\n            });\n            options.i18n.messages = localeMessages;\n          } catch (e) {\n            {\n              warn(`Cannot parse locale messages via custom blocks.`, e);\n            }\n          }\n        }\n\n        const { sharedMessages } = options.i18n;\n        if (sharedMessages && isPlainObject(sharedMessages)) {\n          options.i18n.messages = merge(options.i18n.messages, sharedMessages);\n        }\n\n        this._i18n = new VueI18n(options.i18n);\n        this._i18nWatcher = this._i18n.watchI18nData();\n\n        if (options.i18n.sync === undefined || !!options.i18n.sync) {\n          this._localeWatcher = this.$i18n.watchLocale();\n        }\n\n        if (rootI18n) {\n          rootI18n.onComponentInstanceCreated(this._i18n);\n        }\n      } else {\n        {\n          warn(`Cannot be interpreted 'i18n' option.`);\n        }\n      }\n    } else if (this.$root && this.$root.$i18n && this.$root.$i18n instanceof VueI18n) {\n      // root i18n\n      this._i18n = this.$root.$i18n;\n    } else if (options.parent && options.parent.$i18n && options.parent.$i18n instanceof VueI18n) {\n      // parent i18n\n      this._i18n = options.parent.$i18n;\n    }\n  },\n\n  beforeMount () {\n    const options = this.$options;\n    options.i18n = options.i18n || (options.__i18n ? {} : null);\n\n    if (options.i18n) {\n      if (options.i18n instanceof VueI18n) {\n        // init locale messages via custom blocks\n        this._i18n.subscribeDataChanging(this);\n        this._subscribing = true;\n      } else if (isPlainObject(options.i18n)) {\n        this._i18n.subscribeDataChanging(this);\n        this._subscribing = true;\n      } else {\n        {\n          warn(`Cannot be interpreted 'i18n' option.`);\n        }\n      }\n    } else if (this.$root && this.$root.$i18n && this.$root.$i18n instanceof VueI18n) {\n      this._i18n.subscribeDataChanging(this);\n      this._subscribing = true;\n    } else if (options.parent && options.parent.$i18n && options.parent.$i18n instanceof VueI18n) {\n      this._i18n.subscribeDataChanging(this);\n      this._subscribing = true;\n    }\n  },\n\n  mounted () {\n    if (this !== this.$root && this.$options.__INTLIFY_META__ && this.$el) {\n      this.$el.setAttribute('data-intlify', this.$options.__INTLIFY_META__);\n    }\n  },\n\n  beforeDestroy () {\n    if (!this._i18n) { return }\n\n    const self = this;\n    this.$nextTick(() => {\n      if (self._subscribing) {\n        self._i18n.unsubscribeDataChanging(self);\n        delete self._subscribing;\n      }\n\n      if (self._i18nWatcher) {\n        self._i18nWatcher();\n        self._i18n.destroyVM();\n        delete self._i18nWatcher;\n      }\n\n      if (self._localeWatcher) {\n        self._localeWatcher();\n        delete self._localeWatcher;\n      }\n    });\n  }\n};\n\n/*  */\n\nvar interpolationComponent = {\n  name: 'i18n',\n  functional: true,\n  props: {\n    tag: {\n      type: [String, Boolean, Object],\n      default: 'span'\n    },\n    path: {\n      type: String,\n      required: true\n    },\n    locale: {\n      type: String\n    },\n    places: {\n      type: [Array, Object]\n    }\n  },\n  render (h, { data, parent, props, slots }) {\n    const { $i18n } = parent;\n    if (!$i18n) {\n      {\n        warn('Cannot find VueI18n instance!');\n      }\n      return\n    }\n\n    const { path, locale, places } = props;\n    const params = slots();\n    const children = $i18n.i(\n      path,\n      locale,\n      onlyHasDefaultPlace(params) || places\n        ? useLegacyPlaces(params.default, places)\n        : params\n    );\n\n    const tag = (!!props.tag && props.tag !== true) || props.tag === false ? props.tag : 'span';\n    return tag ? h(tag, data, children) : children\n  }\n};\n\nfunction onlyHasDefaultPlace (params) {\n  let prop;\n  for (prop in params) {\n    if (prop !== 'default') { return false }\n  }\n  return Boolean(prop)\n}\n\nfunction useLegacyPlaces (children, places) {\n  const params = places ? createParamsFromPlaces(places) : {};\n\n  if (!children) { return params }\n\n  // Filter empty text nodes\n  children = children.filter(child => {\n    return child.tag || child.text.trim() !== ''\n  });\n\n  const everyPlace = children.every(vnodeHasPlaceAttribute);\n  if (everyPlace) {\n    warn('`place` attribute is deprecated in next major version. Please switch to Vue slots.');\n  }\n\n  return children.reduce(\n    everyPlace ? assignChildPlace : assignChildIndex,\n    params\n  )\n}\n\nfunction createParamsFromPlaces (places) {\n  {\n    warn('`places` prop is deprecated in next major version. Please switch to Vue slots.');\n  }\n\n  return Array.isArray(places)\n    ? places.reduce(assignChildIndex, {})\n    : Object.assign({}, places)\n}\n\nfunction assignChildPlace (params, child) {\n  if (child.data && child.data.attrs && child.data.attrs.place) {\n    params[child.data.attrs.place] = child;\n  }\n  return params\n}\n\nfunction assignChildIndex (params, child, index) {\n  params[index] = child;\n  return params\n}\n\nfunction vnodeHasPlaceAttribute (vnode) {\n  return Boolean(vnode.data && vnode.data.attrs && vnode.data.attrs.place)\n}\n\n/*  */\n\nvar numberComponent = {\n  name: 'i18n-n',\n  functional: true,\n  props: {\n    tag: {\n      type: [String, Boolean, Object],\n      default: 'span'\n    },\n    value: {\n      type: Number,\n      required: true\n    },\n    format: {\n      type: [String, Object]\n    },\n    locale: {\n      type: String\n    }\n  },\n  render (h, { props, parent, data }) {\n    const i18n = parent.$i18n;\n\n    if (!i18n) {\n      {\n        warn('Cannot find VueI18n instance!');\n      }\n      return null\n    }\n\n    let key = null;\n    let options = null;\n\n    if (isString(props.format)) {\n      key = props.format;\n    } else if (isObject(props.format)) {\n      if (props.format.key) {\n        key = props.format.key;\n      }\n\n      // Filter out number format options only\n      options = Object.keys(props.format).reduce((acc, prop) => {\n        if (includes(numberFormatKeys, prop)) {\n          return Object.assign({}, acc, { [prop]: props.format[prop] })\n        }\n        return acc\n      }, null);\n    }\n\n    const locale = props.locale || i18n.locale;\n    const parts = i18n._ntp(props.value, locale, key, options);\n\n    const values = parts.map((part, index) => {\n      const slot = data.scopedSlots && data.scopedSlots[part.type];\n      return slot ? slot({ [part.type]: part.value, index, parts }) : part.value\n    });\n\n    const tag = (!!props.tag && props.tag !== true) || props.tag === false ? props.tag : 'span';\n    return tag\n      ? h(tag, {\n        attrs: data.attrs,\n        'class': data['class'],\n        staticClass: data.staticClass\n      }, values)\n      : values\n  }\n};\n\n/*  */\n\nfunction bind (el, binding, vnode) {\n  if (!assert(el, vnode)) { return }\n\n  t(el, binding, vnode);\n}\n\nfunction update (el, binding, vnode, oldVNode) {\n  if (!assert(el, vnode)) { return }\n\n  const i18n = vnode.context.$i18n;\n  if (localeEqual(el, vnode) &&\n    (looseEqual(binding.value, binding.oldValue) &&\n     looseEqual(el._localeMessage, i18n.getLocaleMessage(i18n.locale)))) { return }\n\n  t(el, binding, vnode);\n}\n\nfunction unbind (el, binding, vnode, oldVNode) {\n  const vm = vnode.context;\n  if (!vm) {\n    warn('Vue instance does not exists in VNode context');\n    return\n  }\n\n  const i18n = vnode.context.$i18n || {};\n  if (!binding.modifiers.preserve && !i18n.preserveDirectiveContent) {\n    el.textContent = '';\n  }\n  el._vt = undefined;\n  delete el['_vt'];\n  el._locale = undefined;\n  delete el['_locale'];\n  el._localeMessage = undefined;\n  delete el['_localeMessage'];\n}\n\nfunction assert (el, vnode) {\n  const vm = vnode.context;\n  if (!vm) {\n    warn('Vue instance does not exists in VNode context');\n    return false\n  }\n\n  if (!vm.$i18n) {\n    warn('VueI18n instance does not exists in Vue instance');\n    return false\n  }\n\n  return true\n}\n\nfunction localeEqual (el, vnode) {\n  const vm = vnode.context;\n  return el._locale === vm.$i18n.locale\n}\n\nfunction t (el, binding, vnode) {\n  const value = binding.value;\n\n  const { path, locale, args, choice } = parseValue(value);\n  if (!path && !locale && !args) {\n    warn('value type not supported');\n    return\n  }\n\n  if (!path) {\n    warn('`path` is required in v-t directive');\n    return\n  }\n\n  const vm = vnode.context;\n  if (choice != null) {\n    el._vt = el.textContent = vm.$i18n.tc(path, choice, ...makeParams(locale, args));\n  } else {\n    el._vt = el.textContent = vm.$i18n.t(path, ...makeParams(locale, args));\n  }\n  el._locale = vm.$i18n.locale;\n  el._localeMessage = vm.$i18n.getLocaleMessage(vm.$i18n.locale);\n}\n\nfunction parseValue (value) {\n  let path;\n  let locale;\n  let args;\n  let choice;\n\n  if (isString(value)) {\n    path = value;\n  } else if (isPlainObject(value)) {\n    path = value.path;\n    locale = value.locale;\n    args = value.args;\n    choice = value.choice;\n  }\n\n  return { path, locale, args, choice }\n}\n\nfunction makeParams (locale, args) {\n  const params = [];\n\n  locale && params.push(locale);\n  if (args && (Array.isArray(args) || isPlainObject(args))) {\n    params.push(args);\n  }\n\n  return params\n}\n\nlet Vue;\n\nfunction install (_Vue) {\n  /* istanbul ignore if */\n  if (install.installed && _Vue === Vue) {\n    warn('already installed.');\n    return\n  }\n  install.installed = true;\n\n  Vue = _Vue;\n\n  const version = (Vue.version && Number(Vue.version.split('.')[0])) || -1;\n  /* istanbul ignore if */\n  if (version < 2) {\n    warn(`vue-i18n (${install.version}) need to use Vue 2.0 or later (Vue: ${Vue.version}).`);\n    return\n  }\n\n  extend(Vue);\n  Vue.mixin(mixin);\n  Vue.directive('t', { bind, update, unbind });\n  Vue.component(interpolationComponent.name, interpolationComponent);\n  Vue.component(numberComponent.name, numberComponent);\n\n  // use simple mergeStrategies to prevent i18n instance lose '__proto__'\n  const strats = Vue.config.optionMergeStrategies;\n  strats.i18n = function (parentVal, childVal) {\n    return childVal === undefined\n      ? parentVal\n      : childVal\n  };\n}\n\n/*  */\n\nclass BaseFormatter {\n  \n\n  constructor () {\n    this._caches = Object.create(null);\n  }\n\n  interpolate (message, values) {\n    if (!values) {\n      return [message]\n    }\n    let tokens = this._caches[message];\n    if (!tokens) {\n      tokens = parse(message);\n      this._caches[message] = tokens;\n    }\n    return compile(tokens, values)\n  }\n}\n\n\n\nconst RE_TOKEN_LIST_VALUE = /^(?:\\d)+/;\nconst RE_TOKEN_NAMED_VALUE = /^(?:\\w)+/;\n\nfunction parse (format) {\n  const tokens = [];\n  let position = 0;\n\n  let text = '';\n  while (position < format.length) {\n    let char = format[position++];\n    if (char === '{') {\n      if (text) {\n        tokens.push({ type: 'text', value: text });\n      }\n\n      text = '';\n      let sub = '';\n      char = format[position++];\n      while (char !== undefined && char !== '}') {\n        sub += char;\n        char = format[position++];\n      }\n      const isClosed = char === '}';\n\n      const type = RE_TOKEN_LIST_VALUE.test(sub)\n        ? 'list'\n        : isClosed && RE_TOKEN_NAMED_VALUE.test(sub)\n          ? 'named'\n          : 'unknown';\n      tokens.push({ value: sub, type });\n    } else if (char === '%') {\n      // when found rails i18n syntax, skip text capture\n      if (format[(position)] !== '{') {\n        text += char;\n      }\n    } else {\n      text += char;\n    }\n  }\n\n  text && tokens.push({ type: 'text', value: text });\n\n  return tokens\n}\n\nfunction compile (tokens, values) {\n  const compiled = [];\n  let index = 0;\n\n  const mode = Array.isArray(values)\n    ? 'list'\n    : isObject(values)\n      ? 'named'\n      : 'unknown';\n  if (mode === 'unknown') { return compiled }\n\n  while (index < tokens.length) {\n    const token = tokens[index];\n    switch (token.type) {\n      case 'text':\n        compiled.push(token.value);\n        break\n      case 'list':\n        compiled.push(values[parseInt(token.value, 10)]);\n        break\n      case 'named':\n        if (mode === 'named') {\n          compiled.push((values)[token.value]);\n        } else {\n          {\n            warn(`Type of token '${token.type}' and format of value '${mode}' don't match!`);\n          }\n        }\n        break\n      case 'unknown':\n        {\n          warn(`Detect 'unknown' type of token!`);\n        }\n        break\n    }\n    index++;\n  }\n\n  return compiled\n}\n\n/*  */\n\n/**\n *  Path parser\n *  - Inspired:\n *    Vue.js Path parser\n */\n\n// actions\nconst APPEND = 0;\nconst PUSH = 1;\nconst INC_SUB_PATH_DEPTH = 2;\nconst PUSH_SUB_PATH = 3;\n\n// states\nconst BEFORE_PATH = 0;\nconst IN_PATH = 1;\nconst BEFORE_IDENT = 2;\nconst IN_IDENT = 3;\nconst IN_SUB_PATH = 4;\nconst IN_SINGLE_QUOTE = 5;\nconst IN_DOUBLE_QUOTE = 6;\nconst AFTER_PATH = 7;\nconst ERROR = 8;\n\nconst pathStateMachine = [];\n\npathStateMachine[BEFORE_PATH] = {\n  'ws': [BEFORE_PATH],\n  'ident': [IN_IDENT, APPEND],\n  '[': [IN_SUB_PATH],\n  'eof': [AFTER_PATH]\n};\n\npathStateMachine[IN_PATH] = {\n  'ws': [IN_PATH],\n  '.': [BEFORE_IDENT],\n  '[': [IN_SUB_PATH],\n  'eof': [AFTER_PATH]\n};\n\npathStateMachine[BEFORE_IDENT] = {\n  'ws': [BEFORE_IDENT],\n  'ident': [IN_IDENT, APPEND],\n  '0': [IN_IDENT, APPEND],\n  'number': [IN_IDENT, APPEND]\n};\n\npathStateMachine[IN_IDENT] = {\n  'ident': [IN_IDENT, APPEND],\n  '0': [IN_IDENT, APPEND],\n  'number': [IN_IDENT, APPEND],\n  'ws': [IN_PATH, PUSH],\n  '.': [BEFORE_IDENT, PUSH],\n  '[': [IN_SUB_PATH, PUSH],\n  'eof': [AFTER_PATH, PUSH]\n};\n\npathStateMachine[IN_SUB_PATH] = {\n  \"'\": [IN_SINGLE_QUOTE, APPEND],\n  '\"': [IN_DOUBLE_QUOTE, APPEND],\n  '[': [IN_SUB_PATH, INC_SUB_PATH_DEPTH],\n  ']': [IN_PATH, PUSH_SUB_PATH],\n  'eof': ERROR,\n  'else': [IN_SUB_PATH, APPEND]\n};\n\npathStateMachine[IN_SINGLE_QUOTE] = {\n  \"'\": [IN_SUB_PATH, APPEND],\n  'eof': ERROR,\n  'else': [IN_SINGLE_QUOTE, APPEND]\n};\n\npathStateMachine[IN_DOUBLE_QUOTE] = {\n  '\"': [IN_SUB_PATH, APPEND],\n  'eof': ERROR,\n  'else': [IN_DOUBLE_QUOTE, APPEND]\n};\n\n/**\n * Check if an expression is a literal value.\n */\n\nconst literalValueRE = /^\\s?(?:true|false|-?[\\d.]+|'[^']*'|\"[^\"]*\")\\s?$/;\nfunction isLiteral (exp) {\n  return literalValueRE.test(exp)\n}\n\n/**\n * Strip quotes from a string\n */\n\nfunction stripQuotes (str) {\n  const a = str.charCodeAt(0);\n  const b = str.charCodeAt(str.length - 1);\n  return a === b && (a === 0x22 || a === 0x27)\n    ? str.slice(1, -1)\n    : str\n}\n\n/**\n * Determine the type of a character in a keypath.\n */\n\nfunction getPathCharType (ch) {\n  if (ch === undefined || ch === null) { return 'eof' }\n\n  const code = ch.charCodeAt(0);\n\n  switch (code) {\n    case 0x5B: // [\n    case 0x5D: // ]\n    case 0x2E: // .\n    case 0x22: // \"\n    case 0x27: // '\n      return ch\n\n    case 0x5F: // _\n    case 0x24: // $\n    case 0x2D: // -\n      return 'ident'\n\n    case 0x09: // Tab\n    case 0x0A: // Newline\n    case 0x0D: // Return\n    case 0xA0:  // No-break space\n    case 0xFEFF:  // Byte Order Mark\n    case 0x2028:  // Line Separator\n    case 0x2029:  // Paragraph Separator\n      return 'ws'\n  }\n\n  return 'ident'\n}\n\n/**\n * Format a subPath, return its plain form if it is\n * a literal string or number. Otherwise prepend the\n * dynamic indicator (*).\n */\n\nfunction formatSubPath (path) {\n  const trimmed = path.trim();\n  // invalid leading 0\n  if (path.charAt(0) === '0' && isNaN(path)) { return false }\n\n  return isLiteral(trimmed) ? stripQuotes(trimmed) : '*' + trimmed\n}\n\n/**\n * Parse a string path into an array of segments\n */\n\nfunction parse$1 (path) {\n  const keys = [];\n  let index = -1;\n  let mode = BEFORE_PATH;\n  let subPathDepth = 0;\n  let c;\n  let key;\n  let newChar;\n  let type;\n  let transition;\n  let action;\n  let typeMap;\n  const actions = [];\n\n  actions[PUSH] = function () {\n    if (key !== undefined) {\n      keys.push(key);\n      key = undefined;\n    }\n  };\n\n  actions[APPEND] = function () {\n    if (key === undefined) {\n      key = newChar;\n    } else {\n      key += newChar;\n    }\n  };\n\n  actions[INC_SUB_PATH_DEPTH] = function () {\n    actions[APPEND]();\n    subPathDepth++;\n  };\n\n  actions[PUSH_SUB_PATH] = function () {\n    if (subPathDepth > 0) {\n      subPathDepth--;\n      mode = IN_SUB_PATH;\n      actions[APPEND]();\n    } else {\n      subPathDepth = 0;\n      if (key === undefined) { return false }\n      key = formatSubPath(key);\n      if (key === false) {\n        return false\n      } else {\n        actions[PUSH]();\n      }\n    }\n  };\n\n  function maybeUnescapeQuote () {\n    const nextChar = path[index + 1];\n    if ((mode === IN_SINGLE_QUOTE && nextChar === \"'\") ||\n      (mode === IN_DOUBLE_QUOTE && nextChar === '\"')) {\n      index++;\n      newChar = '\\\\' + nextChar;\n      actions[APPEND]();\n      return true\n    }\n  }\n\n  while (mode !== null) {\n    index++;\n    c = path[index];\n\n    if (c === '\\\\' && maybeUnescapeQuote()) {\n      continue\n    }\n\n    type = getPathCharType(c);\n    typeMap = pathStateMachine[mode];\n    transition = typeMap[type] || typeMap['else'] || ERROR;\n\n    if (transition === ERROR) {\n      return // parse error\n    }\n\n    mode = transition[0];\n    action = actions[transition[1]];\n    if (action) {\n      newChar = transition[2];\n      newChar = newChar === undefined\n        ? c\n        : newChar;\n      if (action() === false) {\n        return\n      }\n    }\n\n    if (mode === AFTER_PATH) {\n      return keys\n    }\n  }\n}\n\n\n\n\n\nclass I18nPath {\n  \n\n  constructor () {\n    this._cache = Object.create(null);\n  }\n\n  /**\n   * External parse that check for a cache hit first\n   */\n  parsePath (path) {\n    let hit = this._cache[path];\n    if (!hit) {\n      hit = parse$1(path);\n      if (hit) {\n        this._cache[path] = hit;\n      }\n    }\n    return hit || []\n  }\n\n  /**\n   * Get path value from path string\n   */\n  getPathValue (obj, path) {\n    if (!isObject(obj)) { return null }\n\n    const paths = this.parsePath(path);\n    if (paths.length === 0) {\n      return null\n    } else {\n      const length = paths.length;\n      let last = obj;\n      let i = 0;\n      while (i < length) {\n        const value = last[paths[i]];\n        if (value === undefined || value === null) {\n          return null\n        }\n        last = value;\n        i++;\n      }\n\n      return last\n    }\n  }\n}\n\n/*  */\n\n\n\nconst htmlTagMatcher = /<\\/?[\\w\\s=\"/.':;#-\\/]+>/;\nconst linkKeyMatcher = /(?:@(?:\\.[a-z]+)?:(?:[\\w\\-_|.]+|\\([\\w\\-_|.]+\\)))/g;\nconst linkKeyPrefixMatcher = /^@(?:\\.([a-z]+))?:/;\nconst bracketsMatcher = /[()]/g;\nconst defaultModifiers = {\n  'upper': str => str.toLocaleUpperCase(),\n  'lower': str => str.toLocaleLowerCase(),\n  'capitalize': str => `${str.charAt(0).toLocaleUpperCase()}${str.substr(1)}`\n};\n\nconst defaultFormatter = new BaseFormatter();\n\nclass VueI18n {\n  \n  \n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n\n  constructor (options = {}) {\n    // Auto install if it is not done yet and `window` has `Vue`.\n    // To allow users to avoid auto-installation in some cases,\n    // this code should be placed here. See #290\n    /* istanbul ignore if */\n    if (!Vue && typeof window !== 'undefined' && window.Vue) {\n      install(window.Vue);\n    }\n\n    const locale = options.locale || 'en-US';\n    const fallbackLocale = options.fallbackLocale === false\n      ? false\n      : options.fallbackLocale || 'en-US';\n    const messages = options.messages || {};\n    const dateTimeFormats = options.dateTimeFormats || {};\n    const numberFormats = options.numberFormats || {};\n\n    this._vm = null;\n    this._formatter = options.formatter || defaultFormatter;\n    this._modifiers = options.modifiers || {};\n    this._missing = options.missing || null;\n    this._root = options.root || null;\n    this._sync = options.sync === undefined ? true : !!options.sync;\n    this._fallbackRoot = options.fallbackRoot === undefined\n      ? true\n      : !!options.fallbackRoot;\n    this._formatFallbackMessages = options.formatFallbackMessages === undefined\n      ? false\n      : !!options.formatFallbackMessages;\n    this._silentTranslationWarn = options.silentTranslationWarn === undefined\n      ? false\n      : options.silentTranslationWarn;\n    this._silentFallbackWarn = options.silentFallbackWarn === undefined\n      ? false\n      : !!options.silentFallbackWarn;\n    this._dateTimeFormatters = {};\n    this._numberFormatters = {};\n    this._path = new I18nPath();\n    this._dataListeners = new Set();\n    this._componentInstanceCreatedListener = options.componentInstanceCreatedListener || null;\n    this._preserveDirectiveContent = options.preserveDirectiveContent === undefined\n      ? false\n      : !!options.preserveDirectiveContent;\n    this.pluralizationRules = options.pluralizationRules || {};\n    this._warnHtmlInMessage = options.warnHtmlInMessage || 'off';\n    this._postTranslation = options.postTranslation || null;\n    this._escapeParameterHtml = options.escapeParameterHtml || false;\n\n    /**\n     * @param choice {number} a choice index given by the input to $tc: `$tc('path.to.rule', choiceIndex)`\n     * @param choicesLength {number} an overall amount of available choices\n     * @returns a final choice index\n    */\n    this.getChoiceIndex = (choice, choicesLength) => {\n      const thisPrototype = Object.getPrototypeOf(this);\n      if (thisPrototype && thisPrototype.getChoiceIndex) {\n        const prototypeGetChoiceIndex = (thisPrototype.getChoiceIndex);\n        return (prototypeGetChoiceIndex).call(this, choice, choicesLength)\n      }\n\n      // Default (old) getChoiceIndex implementation - english-compatible\n      const defaultImpl = (_choice, _choicesLength) => {\n        _choice = Math.abs(_choice);\n\n        if (_choicesLength === 2) {\n          return _choice\n            ? _choice > 1\n              ? 1\n              : 0\n            : 1\n        }\n\n        return _choice ? Math.min(_choice, 2) : 0\n      };\n\n      if (this.locale in this.pluralizationRules) {\n        return this.pluralizationRules[this.locale].apply(this, [choice, choicesLength])\n      } else {\n        return defaultImpl(choice, choicesLength)\n      }\n    };\n\n\n    this._exist = (message, key) => {\n      if (!message || !key) { return false }\n      if (!isNull(this._path.getPathValue(message, key))) { return true }\n      // fallback for flat key\n      if (message[key]) { return true }\n      return false\n    };\n\n    if (this._warnHtmlInMessage === 'warn' || this._warnHtmlInMessage === 'error') {\n      Object.keys(messages).forEach(locale => {\n        this._checkLocaleMessage(locale, this._warnHtmlInMessage, messages[locale]);\n      });\n    }\n\n    this._initVM({\n      locale,\n      fallbackLocale,\n      messages,\n      dateTimeFormats,\n      numberFormats\n    });\n  }\n\n  _checkLocaleMessage (locale, level, message) {\n    const paths = [];\n\n    const fn = (level, locale, message, paths) => {\n      if (isPlainObject(message)) {\n        Object.keys(message).forEach(key => {\n          const val = message[key];\n          if (isPlainObject(val)) {\n            paths.push(key);\n            paths.push('.');\n            fn(level, locale, val, paths);\n            paths.pop();\n            paths.pop();\n          } else {\n            paths.push(key);\n            fn(level, locale, val, paths);\n            paths.pop();\n          }\n        });\n      } else if (isArray(message)) {\n        message.forEach((item, index) => {\n          if (isPlainObject(item)) {\n            paths.push(`[${index}]`);\n            paths.push('.');\n            fn(level, locale, item, paths);\n            paths.pop();\n            paths.pop();\n          } else {\n            paths.push(`[${index}]`);\n            fn(level, locale, item, paths);\n            paths.pop();\n          }\n        });\n      } else if (isString(message)) {\n        const ret = htmlTagMatcher.test(message);\n        if (ret) {\n          const msg = `Detected HTML in message '${message}' of keypath '${paths.join('')}' at '${locale}'. Consider component interpolation with '<i18n>' to avoid XSS. See https://bit.ly/2ZqJzkp`;\n          if (level === 'warn') {\n            warn(msg);\n          } else if (level === 'error') {\n            error(msg);\n          }\n        }\n      }\n    };\n\n    fn(level, locale, message, paths);\n  }\n\n  _initVM (data) {\n    const silent = Vue.config.silent;\n    Vue.config.silent = true;\n    this._vm = new Vue({ data });\n    Vue.config.silent = silent;\n  }\n\n  destroyVM () {\n    this._vm.$destroy();\n  }\n\n  subscribeDataChanging (vm) {\n    this._dataListeners.add(vm);\n  }\n\n  unsubscribeDataChanging (vm) {\n    remove(this._dataListeners, vm);\n  }\n\n  watchI18nData () {\n    const self = this;\n    return this._vm.$watch('$data', () => {\n      self._dataListeners.forEach(e => {\n        Vue.nextTick(() => {\n          e && e.$forceUpdate();\n        });\n      });\n    }, { deep: true })\n  }\n\n  watchLocale () {\n    /* istanbul ignore if */\n    if (!this._sync || !this._root) { return null }\n    const target = this._vm;\n    return this._root.$i18n.vm.$watch('locale', (val) => {\n      target.$set(target, 'locale', val);\n      target.$forceUpdate();\n    }, { immediate: true })\n  }\n\n  onComponentInstanceCreated (newI18n) {\n    if (this._componentInstanceCreatedListener) {\n      this._componentInstanceCreatedListener(newI18n, this);\n    }\n  }\n\n  get vm () { return this._vm }\n\n  get messages () { return looseClone(this._getMessages()) }\n  get dateTimeFormats () { return looseClone(this._getDateTimeFormats()) }\n  get numberFormats () { return looseClone(this._getNumberFormats()) }\n  get availableLocales () { return Object.keys(this.messages).sort() }\n\n  get locale () { return this._vm.locale }\n  set locale (locale) {\n    this._vm.$set(this._vm, 'locale', locale);\n  }\n\n  get fallbackLocale () { return this._vm.fallbackLocale }\n  set fallbackLocale (locale) {\n    this._localeChainCache = {};\n    this._vm.$set(this._vm, 'fallbackLocale', locale);\n  }\n\n  get formatFallbackMessages () { return this._formatFallbackMessages }\n  set formatFallbackMessages (fallback) { this._formatFallbackMessages = fallback; }\n\n  get missing () { return this._missing }\n  set missing (handler) { this._missing = handler; }\n\n  get formatter () { return this._formatter }\n  set formatter (formatter) { this._formatter = formatter; }\n\n  get silentTranslationWarn () { return this._silentTranslationWarn }\n  set silentTranslationWarn (silent) { this._silentTranslationWarn = silent; }\n\n  get silentFallbackWarn () { return this._silentFallbackWarn }\n  set silentFallbackWarn (silent) { this._silentFallbackWarn = silent; }\n\n  get preserveDirectiveContent () { return this._preserveDirectiveContent }\n  set preserveDirectiveContent (preserve) { this._preserveDirectiveContent = preserve; }\n\n  get warnHtmlInMessage () { return this._warnHtmlInMessage }\n  set warnHtmlInMessage (level) {\n    const orgLevel = this._warnHtmlInMessage;\n    this._warnHtmlInMessage = level;\n    if (orgLevel !== level && (level === 'warn' || level === 'error')) {\n      const messages = this._getMessages();\n      Object.keys(messages).forEach(locale => {\n        this._checkLocaleMessage(locale, this._warnHtmlInMessage, messages[locale]);\n      });\n    }\n  }\n\n  get postTranslation () { return this._postTranslation }\n  set postTranslation (handler) { this._postTranslation = handler; }\n\n  _getMessages () { return this._vm.messages }\n  _getDateTimeFormats () { return this._vm.dateTimeFormats }\n  _getNumberFormats () { return this._vm.numberFormats }\n\n  _warnDefault (locale, key, result, vm, values, interpolateMode) {\n    if (!isNull(result)) { return result }\n    if (this._missing) {\n      const missingRet = this._missing.apply(null, [locale, key, vm, values]);\n      if (isString(missingRet)) {\n        return missingRet\n      }\n    } else {\n      if (!this._isSilentTranslationWarn(key)) {\n        warn(\n          `Cannot translate the value of keypath '${key}'. ` +\n          'Use the value of keypath as default.'\n        );\n      }\n    }\n\n    if (this._formatFallbackMessages) {\n      const parsedArgs = parseArgs(...values);\n      return this._render(key, interpolateMode, parsedArgs.params, key)\n    } else {\n      return key\n    }\n  }\n\n  _isFallbackRoot (val) {\n    return !val && !isNull(this._root) && this._fallbackRoot\n  }\n\n  _isSilentFallbackWarn (key) {\n    return this._silentFallbackWarn instanceof RegExp\n      ? this._silentFallbackWarn.test(key)\n      : this._silentFallbackWarn\n  }\n\n  _isSilentFallback (locale, key) {\n    return this._isSilentFallbackWarn(key) && (this._isFallbackRoot() || locale !== this.fallbackLocale)\n  }\n\n  _isSilentTranslationWarn (key) {\n    return this._silentTranslationWarn instanceof RegExp\n      ? this._silentTranslationWarn.test(key)\n      : this._silentTranslationWarn\n  }\n\n  _interpolate (\n    locale,\n    message,\n    key,\n    host,\n    interpolateMode,\n    values,\n    visitedLinkStack\n  ) {\n    if (!message) { return null }\n\n    const pathRet = this._path.getPathValue(message, key);\n    if (isArray(pathRet) || isPlainObject(pathRet)) { return pathRet }\n\n    let ret;\n    if (isNull(pathRet)) {\n      /* istanbul ignore else */\n      if (isPlainObject(message)) {\n        ret = message[key];\n        if (!(isString(ret) || isFunction(ret))) {\n          if (!this._isSilentTranslationWarn(key) && !this._isSilentFallback(locale, key)) {\n            warn(`Value of key '${key}' is not a string or function !`);\n          }\n          return null\n        }\n      } else {\n        return null\n      }\n    } else {\n      /* istanbul ignore else */\n      if (isString(pathRet) || isFunction(pathRet)) {\n        ret = pathRet;\n      } else {\n        if (!this._isSilentTranslationWarn(key) && !this._isSilentFallback(locale, key)) {\n          warn(`Value of key '${key}' is not a string or function!`);\n        }\n        return null\n      }\n    }\n\n    // Check for the existence of links within the translated string\n    if (isString(ret) && (ret.indexOf('@:') >= 0 || ret.indexOf('@.') >= 0)) {\n      ret = this._link(locale, message, ret, host, 'raw', values, visitedLinkStack);\n    }\n\n    return this._render(ret, interpolateMode, values, key)\n  }\n\n  _link (\n    locale,\n    message,\n    str,\n    host,\n    interpolateMode,\n    values,\n    visitedLinkStack\n  ) {\n    let ret = str;\n\n    // Match all the links within the local\n    // We are going to replace each of\n    // them with its translation\n    const matches = ret.match(linkKeyMatcher);\n    \n    // eslint-disable-next-line no-autofix/prefer-const\n    for (let idx in matches) {\n      // ie compatible: filter custom array\n      // prototype method\n      if (!matches.hasOwnProperty(idx)) {\n        continue\n      }\n      const link = matches[idx];\n      const linkKeyPrefixMatches = link.match(linkKeyPrefixMatcher);\n      const [linkPrefix, formatterName] = linkKeyPrefixMatches;\n\n      // Remove the leading @:, @.case: and the brackets\n      const linkPlaceholder = link.replace(linkPrefix, '').replace(bracketsMatcher, '');\n\n      if (includes(visitedLinkStack, linkPlaceholder)) {\n        {\n          warn(`Circular reference found. \"${link}\" is already visited in the chain of ${visitedLinkStack.reverse().join(' <- ')}`);\n        }\n        return ret\n      }\n      visitedLinkStack.push(linkPlaceholder);\n\n      // Translate the link\n      let translated = this._interpolate(\n        locale, message, linkPlaceholder, host,\n        interpolateMode === 'raw' ? 'string' : interpolateMode,\n        interpolateMode === 'raw' ? undefined : values,\n        visitedLinkStack\n      );\n\n      if (this._isFallbackRoot(translated)) {\n        if (!this._isSilentTranslationWarn(linkPlaceholder)) {\n          warn(`Fall back to translate the link placeholder '${linkPlaceholder}' with root locale.`);\n        }\n        /* istanbul ignore if */\n        if (!this._root) { throw Error('unexpected error') }\n        const root = this._root.$i18n;\n        translated = root._translate(\n          root._getMessages(), root.locale, root.fallbackLocale,\n          linkPlaceholder, host, interpolateMode, values\n        );\n      }\n      translated = this._warnDefault(\n        locale, linkPlaceholder, translated, host,\n        isArray(values) ? values : [values],\n        interpolateMode\n      );\n\n      if (this._modifiers.hasOwnProperty(formatterName)) {\n        translated = this._modifiers[formatterName](translated);\n      } else if (defaultModifiers.hasOwnProperty(formatterName)) {\n        translated = defaultModifiers[formatterName](translated);\n      }\n\n      visitedLinkStack.pop();\n\n      // Replace the link with the translated\n      ret = !translated ? ret : ret.replace(link, translated);\n    }\n\n    return ret\n  }\n\n  _createMessageContext (values, formatter, path, interpolateMode) {\n    const _list = isArray(values) ? values : [];\n    const _named = isObject(values) ? values : {};\n    const list = (index) => _list[index];\n    const named = (key) => _named[key];\n    const messages = this._getMessages();\n    const locale = this.locale;\n\n    return {\n      list,\n      named,\n      values,\n      formatter,\n      path,\n      messages,\n      locale,\n      linked: (linkedKey) => this._interpolate(locale, messages[locale] || {}, linkedKey, null, interpolateMode, undefined, [linkedKey])\n    }\n  }\n\n  _render (message, interpolateMode, values, path) {\n    if (isFunction(message)) {\n      return message(\n        this._createMessageContext(values, this._formatter || defaultFormatter, path, interpolateMode)\n      )\n    }\n\n    let ret = this._formatter.interpolate(message, values, path);\n\n    // If the custom formatter refuses to work - apply the default one\n    if (!ret) {\n      ret = defaultFormatter.interpolate(message, values, path);\n    }\n\n    // if interpolateMode is **not** 'string' ('row'),\n    // return the compiled data (e.g. ['foo', VNode, 'bar']) with formatter\n    return interpolateMode === 'string' && !isString(ret) ? ret.join('') : ret\n  }\n\n  _appendItemToChain (chain, item, blocks) {\n    let follow = false;\n    if (!includes(chain, item)) {\n      follow = true;\n      if (item) {\n        follow = item[item.length - 1] !== '!';\n        item = item.replace(/!/g, '');\n        chain.push(item);\n        if (blocks && blocks[item]) {\n          follow = blocks[item];\n        }\n      }\n    }\n    return follow\n  }\n\n  _appendLocaleToChain (chain, locale, blocks) {\n    let follow;\n    const tokens = locale.split('-');\n    do {\n      const item = tokens.join('-');\n      follow = this._appendItemToChain(chain, item, blocks);\n      tokens.splice(-1, 1);\n    } while (tokens.length && (follow === true))\n    return follow\n  }\n\n  _appendBlockToChain (chain, block, blocks) {\n    let follow = true;\n    for (let i = 0; (i < block.length) && (isBoolean(follow)); i++) {\n      const locale = block[i];\n      if (isString(locale)) {\n        follow = this._appendLocaleToChain(chain, locale, blocks);\n      }\n    }\n    return follow\n  }\n\n  _getLocaleChain (start, fallbackLocale) {\n    if (start === '') { return [] }\n\n    if (!this._localeChainCache) {\n      this._localeChainCache = {};\n    }\n\n    let chain = this._localeChainCache[start];\n    if (!chain) {\n      if (!fallbackLocale) {\n        fallbackLocale = this.fallbackLocale;\n      }\n      chain = [];\n\n      // first block defined by start\n      let block = [start];\n\n      // while any intervening block found\n      while (isArray(block)) {\n        block = this._appendBlockToChain(\n          chain,\n          block,\n          fallbackLocale\n        );\n      }\n\n      // last block defined by default\n      let defaults;\n      if (isArray(fallbackLocale)) {\n        defaults = fallbackLocale;\n      } else if (isObject(fallbackLocale)) {\n        /* $FlowFixMe */\n        if (fallbackLocale['default']) {\n          defaults = fallbackLocale['default'];\n        } else {\n          defaults = null;\n        }\n      } else {\n        defaults = fallbackLocale;\n      }\n\n      // convert defaults to array\n      if (isString(defaults)) {\n        block = [defaults];\n      } else {\n        block = defaults;\n      }\n      if (block) {\n        this._appendBlockToChain(\n          chain,\n          block,\n          null\n        );\n      }\n      this._localeChainCache[start] = chain;\n    }\n    return chain\n  }\n\n  _translate (\n    messages,\n    locale,\n    fallback,\n    key,\n    host,\n    interpolateMode,\n    args\n  ) {\n    const chain = this._getLocaleChain(locale, fallback);\n    let res;\n    for (let i = 0; i < chain.length; i++) {\n      const step = chain[i];\n      res =\n        this._interpolate(step, messages[step], key, host, interpolateMode, args, [key]);\n      if (!isNull(res)) {\n        if (step !== locale && \"development\" !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n          warn((\"Fall back to translate the keypath '\" + key + \"' with '\" + step + \"' locale.\"));\n        }\n        return res\n      }\n    }\n    return null\n  }\n\n  _t (key, _locale, messages, host, ...values) {\n    if (!key) { return '' }\n\n    const parsedArgs = parseArgs(...values);\n    if(this._escapeParameterHtml) {\n      parsedArgs.params = escapeParams(parsedArgs.params);\n    }\n\n    const locale = parsedArgs.locale || _locale;\n\n    let ret = this._translate(\n      messages, locale, this.fallbackLocale, key,\n      host, 'string', parsedArgs.params\n    );\n    if (this._isFallbackRoot(ret)) {\n      if (!this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n        warn(`Fall back to translate the keypath '${key}' with root locale.`);\n      }\n      /* istanbul ignore if */\n      if (!this._root) { throw Error('unexpected error') }\n      return this._root.$t(key, ...values)\n    } else {\n      ret = this._warnDefault(locale, key, ret, host, values, 'string');\n      if (this._postTranslation && ret !== null && ret !== undefined) {\n        ret = this._postTranslation(ret, key);\n      }\n      return ret\n    }\n  }\n\n  t (key, ...values) {\n    return this._t(key, this.locale, this._getMessages(), null, ...values)\n  }\n\n  _i (key, locale, messages, host, values) {\n    const ret =\n      this._translate(messages, locale, this.fallbackLocale, key, host, 'raw', values);\n    if (this._isFallbackRoot(ret)) {\n      if (!this._isSilentTranslationWarn(key)) {\n        warn(`Fall back to interpolate the keypath '${key}' with root locale.`);\n      }\n      if (!this._root) { throw Error('unexpected error') }\n      return this._root.$i18n.i(key, locale, values)\n    } else {\n      return this._warnDefault(locale, key, ret, host, [values], 'raw')\n    }\n  }\n\n  i (key, locale, values) {\n    /* istanbul ignore if */\n    if (!key) { return '' }\n\n    if (!isString(locale)) {\n      locale = this.locale;\n    }\n\n    return this._i(key, locale, this._getMessages(), null, values)\n  }\n\n  _tc (\n    key,\n    _locale,\n    messages,\n    host,\n    choice,\n    ...values\n  ) {\n    if (!key) { return '' }\n    if (choice === undefined) {\n      choice = 1;\n    }\n\n    const predefined = { 'count': choice, 'n': choice };\n    const parsedArgs = parseArgs(...values);\n    parsedArgs.params = Object.assign(predefined, parsedArgs.params);\n    values = parsedArgs.locale === null ? [parsedArgs.params] : [parsedArgs.locale, parsedArgs.params];\n    return this.fetchChoice(this._t(key, _locale, messages, host, ...values), choice)\n  }\n\n  fetchChoice (message, choice) {\n    /* istanbul ignore if */\n    if (!message || !isString(message)) { return null }\n    const choices = message.split('|');\n\n    choice = this.getChoiceIndex(choice, choices.length);\n    if (!choices[choice]) { return message }\n    return choices[choice].trim()\n  }\n\n  tc (key, choice, ...values) {\n    return this._tc(key, this.locale, this._getMessages(), null, choice, ...values)\n  }\n\n  _te (key, locale, messages, ...args) {\n    const _locale = parseArgs(...args).locale || locale;\n    return this._exist(messages[_locale], key)\n  }\n\n  te (key, locale) {\n    return this._te(key, this.locale, this._getMessages(), locale)\n  }\n\n  getLocaleMessage (locale) {\n    return looseClone(this._vm.messages[locale] || {})\n  }\n\n  setLocaleMessage (locale, message) {\n    if (this._warnHtmlInMessage === 'warn' || this._warnHtmlInMessage === 'error') {\n      this._checkLocaleMessage(locale, this._warnHtmlInMessage, message);\n    }\n    this._vm.$set(this._vm.messages, locale, message);\n  }\n\n  mergeLocaleMessage (locale, message) {\n    if (this._warnHtmlInMessage === 'warn' || this._warnHtmlInMessage === 'error') {\n      this._checkLocaleMessage(locale, this._warnHtmlInMessage, message);\n    }\n    this._vm.$set(this._vm.messages, locale, merge(\n      typeof this._vm.messages[locale] !== 'undefined' && Object.keys(this._vm.messages[locale]).length\n        ? this._vm.messages[locale]\n        : {},\n      message\n    ));\n  }\n\n  getDateTimeFormat (locale) {\n    return looseClone(this._vm.dateTimeFormats[locale] || {})\n  }\n\n  setDateTimeFormat (locale, format) {\n    this._vm.$set(this._vm.dateTimeFormats, locale, format);\n    this._clearDateTimeFormat(locale, format);\n  }\n\n  mergeDateTimeFormat (locale, format) {\n    this._vm.$set(this._vm.dateTimeFormats, locale, merge(this._vm.dateTimeFormats[locale] || {}, format));\n    this._clearDateTimeFormat(locale, format);\n  }\n\n  _clearDateTimeFormat (locale, format) {\n    // eslint-disable-next-line no-autofix/prefer-const\n    for (let key in format) {\n      const id = `${locale}__${key}`;\n\n      if (!this._dateTimeFormatters.hasOwnProperty(id)) {\n        continue\n      }\n\n      delete this._dateTimeFormatters[id];\n    }\n  }\n\n  _localizeDateTime (\n    value,\n    locale,\n    fallback,\n    dateTimeFormats,\n    key\n  ) {\n    let _locale = locale;\n    let formats = dateTimeFormats[_locale];\n\n    const chain = this._getLocaleChain(locale, fallback);\n    for (let i = 0; i < chain.length; i++) {\n      const current = _locale;\n      const step = chain[i];\n      formats = dateTimeFormats[step];\n      _locale = step;\n      // fallback locale\n      if (isNull(formats) || isNull(formats[key])) {\n        if (step !== locale && \"development\" !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n          warn(`Fall back to '${step}' datetime formats from '${current}' datetime formats.`);\n        }\n      } else {\n        break\n      }\n    }\n\n    if (isNull(formats) || isNull(formats[key])) {\n      return null\n    } else {\n      const format = formats[key];\n      const id = `${_locale}__${key}`;\n      let formatter = this._dateTimeFormatters[id];\n      if (!formatter) {\n        formatter = this._dateTimeFormatters[id] = new Intl.DateTimeFormat(_locale, format);\n      }\n      return formatter.format(value)\n    }\n  }\n\n  _d (value, locale, key) {\n    /* istanbul ignore if */\n    if (!VueI18n.availabilities.dateTimeFormat) {\n      warn('Cannot format a Date value due to not supported Intl.DateTimeFormat.');\n      return ''\n    }\n\n    if (!key) {\n      return new Intl.DateTimeFormat(locale).format(value)\n    }\n\n    const ret =\n      this._localizeDateTime(value, locale, this.fallbackLocale, this._getDateTimeFormats(), key);\n    if (this._isFallbackRoot(ret)) {\n      if (!this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n        warn(`Fall back to datetime localization of root: key '${key}'.`);\n      }\n      /* istanbul ignore if */\n      if (!this._root) { throw Error('unexpected error') }\n      return this._root.$i18n.d(value, key, locale)\n    } else {\n      return ret || ''\n    }\n  }\n\n  d (value, ...args) {\n    let locale = this.locale;\n    let key = null;\n\n    if (args.length === 1) {\n      if (isString(args[0])) {\n        key = args[0];\n      } else if (isObject(args[0])) {\n        if (args[0].locale) {\n          locale = args[0].locale;\n        }\n        if (args[0].key) {\n          key = args[0].key;\n        }\n      }\n    } else if (args.length === 2) {\n      if (isString(args[0])) {\n        key = args[0];\n      }\n      if (isString(args[1])) {\n        locale = args[1];\n      }\n    }\n\n    return this._d(value, locale, key)\n  }\n\n  getNumberFormat (locale) {\n    return looseClone(this._vm.numberFormats[locale] || {})\n  }\n\n  setNumberFormat (locale, format) {\n    this._vm.$set(this._vm.numberFormats, locale, format);\n    this._clearNumberFormat(locale, format);\n  }\n\n  mergeNumberFormat (locale, format) {\n    this._vm.$set(this._vm.numberFormats, locale, merge(this._vm.numberFormats[locale] || {}, format));\n    this._clearNumberFormat(locale, format);\n  }\n\n  _clearNumberFormat (locale, format) {\n    // eslint-disable-next-line no-autofix/prefer-const\n    for (let key in format) {\n      const id = `${locale}__${key}`;\n\n      if (!this._numberFormatters.hasOwnProperty(id)) {\n        continue\n      }\n\n      delete this._numberFormatters[id];\n    }\n  }\n\n  _getNumberFormatter (\n    value,\n    locale,\n    fallback,\n    numberFormats,\n    key,\n    options\n  ) {\n    let _locale = locale;\n    let formats = numberFormats[_locale];\n\n    const chain = this._getLocaleChain(locale, fallback);\n    for (let i = 0; i < chain.length; i++) {\n      const current = _locale;\n      const step = chain[i];\n      formats = numberFormats[step];\n      _locale = step;\n      // fallback locale\n      if (isNull(formats) || isNull(formats[key])) {\n        if (step !== locale && \"development\" !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n          warn(`Fall back to '${step}' number formats from '${current}' number formats.`);\n        }\n      } else {\n        break\n      }\n    }\n\n    if (isNull(formats) || isNull(formats[key])) {\n      return null\n    } else {\n      const format = formats[key];\n\n      let formatter;\n      if (options) {\n        // If options specified - create one time number formatter\n        formatter = new Intl.NumberFormat(_locale, Object.assign({}, format, options));\n      } else {\n        const id = `${_locale}__${key}`;\n        formatter = this._numberFormatters[id];\n        if (!formatter) {\n          formatter = this._numberFormatters[id] = new Intl.NumberFormat(_locale, format);\n        }\n      }\n      return formatter\n    }\n  }\n\n  _n (value, locale, key, options) {\n    /* istanbul ignore if */\n    if (!VueI18n.availabilities.numberFormat) {\n      {\n        warn('Cannot format a Number value due to not supported Intl.NumberFormat.');\n      }\n      return ''\n    }\n\n    if (!key) {\n      const nf = !options ? new Intl.NumberFormat(locale) : new Intl.NumberFormat(locale, options);\n      return nf.format(value)\n    }\n\n    const formatter = this._getNumberFormatter(value, locale, this.fallbackLocale, this._getNumberFormats(), key, options);\n    const ret = formatter && formatter.format(value);\n    if (this._isFallbackRoot(ret)) {\n      if (!this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n        warn(`Fall back to number localization of root: key '${key}'.`);\n      }\n      /* istanbul ignore if */\n      if (!this._root) { throw Error('unexpected error') }\n      return this._root.$i18n.n(value, Object.assign({}, { key, locale }, options))\n    } else {\n      return ret || ''\n    }\n  }\n\n  n (value, ...args) {\n    let locale = this.locale;\n    let key = null;\n    let options = null;\n\n    if (args.length === 1) {\n      if (isString(args[0])) {\n        key = args[0];\n      } else if (isObject(args[0])) {\n        if (args[0].locale) {\n          locale = args[0].locale;\n        }\n        if (args[0].key) {\n          key = args[0].key;\n        }\n\n        // Filter out number format options only\n        options = Object.keys(args[0]).reduce((acc, key) => {\n          if (includes(numberFormatKeys, key)) {\n            return Object.assign({}, acc, { [key]: args[0][key] })\n          }\n          return acc\n        }, null);\n      }\n    } else if (args.length === 2) {\n      if (isString(args[0])) {\n        key = args[0];\n      }\n      if (isString(args[1])) {\n        locale = args[1];\n      }\n    }\n\n    return this._n(value, locale, key, options)\n  }\n\n  _ntp (value, locale, key, options) {\n    /* istanbul ignore if */\n    if (!VueI18n.availabilities.numberFormat) {\n      {\n        warn('Cannot format to parts a Number value due to not supported Intl.NumberFormat.');\n      }\n      return []\n    }\n\n    if (!key) {\n      const nf = !options ? new Intl.NumberFormat(locale) : new Intl.NumberFormat(locale, options);\n      return nf.formatToParts(value)\n    }\n\n    const formatter = this._getNumberFormatter(value, locale, this.fallbackLocale, this._getNumberFormats(), key, options);\n    const ret = formatter && formatter.formatToParts(value);\n    if (this._isFallbackRoot(ret)) {\n      if (!this._isSilentTranslationWarn(key)) {\n        warn(`Fall back to format number to parts of root: key '${key}' .`);\n      }\n      /* istanbul ignore if */\n      if (!this._root) { throw Error('unexpected error') }\n      return this._root.$i18n._ntp(value, locale, key, options)\n    } else {\n      return ret || []\n    }\n  }\n}\n\nlet availabilities;\n// $FlowFixMe\nObject.defineProperty(VueI18n, 'availabilities', {\n  get () {\n    if (!availabilities) {\n      const intlDefined = typeof Intl !== 'undefined';\n      availabilities = {\n        dateTimeFormat: intlDefined && typeof Intl.DateTimeFormat !== 'undefined',\n        numberFormat: intlDefined && typeof Intl.NumberFormat !== 'undefined'\n      };\n    }\n\n    return availabilities\n  }\n});\n\nVueI18n.install = install;\nVueI18n.version = '8.24.4';\n\nexport default VueI18n;\n"
  },
  {
    "path": "dist/vue-i18n.esm.js",
    "content": "/*!\n * vue-i18n v8.24.4 \n * (c) 2021 kazuya kawaguchi\n * Released under the MIT License.\n */\n/*  */\n\n/**\n * constants\n */\n\nvar numberFormatKeys = [\n  'compactDisplay',\n  'currency',\n  'currencyDisplay',\n  'currencySign',\n  'localeMatcher',\n  'notation',\n  'numberingSystem',\n  'signDisplay',\n  'style',\n  'unit',\n  'unitDisplay',\n  'useGrouping',\n  'minimumIntegerDigits',\n  'minimumFractionDigits',\n  'maximumFractionDigits',\n  'minimumSignificantDigits',\n  'maximumSignificantDigits'\n];\n\n/**\n * utilities\n */\n\nfunction warn (msg, err) {\n  if (typeof console !== 'undefined') {\n    console.warn('[vue-i18n] ' + msg);\n    /* istanbul ignore if */\n    if (err) {\n      console.warn(err.stack);\n    }\n  }\n}\n\nfunction error (msg, err) {\n  if (typeof console !== 'undefined') {\n    console.error('[vue-i18n] ' + msg);\n    /* istanbul ignore if */\n    if (err) {\n      console.error(err.stack);\n    }\n  }\n}\n\nvar isArray = Array.isArray;\n\nfunction isObject (obj) {\n  return obj !== null && typeof obj === 'object'\n}\n\nfunction isBoolean (val) {\n  return typeof val === 'boolean'\n}\n\nfunction isString (val) {\n  return typeof val === 'string'\n}\n\nvar toString = Object.prototype.toString;\nvar OBJECT_STRING = '[object Object]';\nfunction isPlainObject (obj) {\n  return toString.call(obj) === OBJECT_STRING\n}\n\nfunction isNull (val) {\n  return val === null || val === undefined\n}\n\nfunction isFunction (val) {\n  return typeof val === 'function'\n}\n\nfunction parseArgs () {\n  var args = [], len = arguments.length;\n  while ( len-- ) args[ len ] = arguments[ len ];\n\n  var locale = null;\n  var params = null;\n  if (args.length === 1) {\n    if (isObject(args[0]) || isArray(args[0])) {\n      params = args[0];\n    } else if (typeof args[0] === 'string') {\n      locale = args[0];\n    }\n  } else if (args.length === 2) {\n    if (typeof args[0] === 'string') {\n      locale = args[0];\n    }\n    /* istanbul ignore if */\n    if (isObject(args[1]) || isArray(args[1])) {\n      params = args[1];\n    }\n  }\n\n  return { locale: locale, params: params }\n}\n\nfunction looseClone (obj) {\n  return JSON.parse(JSON.stringify(obj))\n}\n\nfunction remove (arr, item) {\n  if (arr.delete(item)) {\n    return arr\n  }\n}\n\nfunction includes (arr, item) {\n  return !!~arr.indexOf(item)\n}\n\nvar hasOwnProperty = Object.prototype.hasOwnProperty;\nfunction hasOwn (obj, key) {\n  return hasOwnProperty.call(obj, key)\n}\n\nfunction merge (target) {\n  var arguments$1 = arguments;\n\n  var output = Object(target);\n  for (var i = 1; i < arguments.length; i++) {\n    var source = arguments$1[i];\n    if (source !== undefined && source !== null) {\n      var key = (void 0);\n      for (key in source) {\n        if (hasOwn(source, key)) {\n          if (isObject(source[key])) {\n            output[key] = merge(output[key], source[key]);\n          } else {\n            output[key] = source[key];\n          }\n        }\n      }\n    }\n  }\n  return output\n}\n\nfunction looseEqual (a, b) {\n  if (a === b) { return true }\n  var isObjectA = isObject(a);\n  var isObjectB = isObject(b);\n  if (isObjectA && isObjectB) {\n    try {\n      var isArrayA = isArray(a);\n      var isArrayB = isArray(b);\n      if (isArrayA && isArrayB) {\n        return a.length === b.length && a.every(function (e, i) {\n          return looseEqual(e, b[i])\n        })\n      } else if (!isArrayA && !isArrayB) {\n        var keysA = Object.keys(a);\n        var keysB = Object.keys(b);\n        return keysA.length === keysB.length && keysA.every(function (key) {\n          return looseEqual(a[key], b[key])\n        })\n      } else {\n        /* istanbul ignore next */\n        return false\n      }\n    } catch (e) {\n      /* istanbul ignore next */\n      return false\n    }\n  } else if (!isObjectA && !isObjectB) {\n    return String(a) === String(b)\n  } else {\n    return false\n  }\n}\n\n/**\n * Sanitizes html special characters from input strings. For mitigating risk of XSS attacks.\n * @param rawText The raw input from the user that should be escaped.\n */\nfunction escapeHtml(rawText) {\n  return rawText\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\"/g, '&quot;')\n    .replace(/'/g, '&apos;')\n}\n\n/**\n * Escapes html tags and special symbols from all provided params which were returned from parseArgs().params.\n * This method performs an in-place operation on the params object.\n *\n * @param {any} params Parameters as provided from `parseArgs().params`.\n *                     May be either an array of strings or a string->any map.\n *\n * @returns The manipulated `params` object.\n */\nfunction escapeParams(params) {\n  if(params != null) {\n    Object.keys(params).forEach(function (key) {\n      if(typeof(params[key]) == 'string') {\n        params[key] = escapeHtml(params[key]);\n      }\n    });\n  }\n  return params\n}\n\n/*  */\n\nfunction extend (Vue) {\n  if (!Vue.prototype.hasOwnProperty('$i18n')) {\n    // $FlowFixMe\n    Object.defineProperty(Vue.prototype, '$i18n', {\n      get: function get () { return this._i18n }\n    });\n  }\n\n  Vue.prototype.$t = function (key) {\n    var values = [], len = arguments.length - 1;\n    while ( len-- > 0 ) values[ len ] = arguments[ len + 1 ];\n\n    var i18n = this.$i18n;\n    return i18n._t.apply(i18n, [ key, i18n.locale, i18n._getMessages(), this ].concat( values ))\n  };\n\n  Vue.prototype.$tc = function (key, choice) {\n    var values = [], len = arguments.length - 2;\n    while ( len-- > 0 ) values[ len ] = arguments[ len + 2 ];\n\n    var i18n = this.$i18n;\n    return i18n._tc.apply(i18n, [ key, i18n.locale, i18n._getMessages(), this, choice ].concat( values ))\n  };\n\n  Vue.prototype.$te = function (key, locale) {\n    var i18n = this.$i18n;\n    return i18n._te(key, i18n.locale, i18n._getMessages(), locale)\n  };\n\n  Vue.prototype.$d = function (value) {\n    var ref;\n\n    var args = [], len = arguments.length - 1;\n    while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ];\n    return (ref = this.$i18n).d.apply(ref, [ value ].concat( args ))\n  };\n\n  Vue.prototype.$n = function (value) {\n    var ref;\n\n    var args = [], len = arguments.length - 1;\n    while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ];\n    return (ref = this.$i18n).n.apply(ref, [ value ].concat( args ))\n  };\n}\n\n/*  */\n\nvar mixin = {\n  beforeCreate: function beforeCreate () {\n    var options = this.$options;\n    options.i18n = options.i18n || (options.__i18n ? {} : null);\n\n    if (options.i18n) {\n      if (options.i18n instanceof VueI18n) {\n        // init locale messages via custom blocks\n        if (options.__i18n) {\n          try {\n            var localeMessages = options.i18n && options.i18n.messages ? options.i18n.messages : {};\n            options.__i18n.forEach(function (resource) {\n              localeMessages = merge(localeMessages, JSON.parse(resource));\n            });\n            Object.keys(localeMessages).forEach(function (locale) {\n              options.i18n.mergeLocaleMessage(locale, localeMessages[locale]);\n            });\n          } catch (e) {\n            if (process.env.NODE_ENV !== 'production') {\n              error(\"Cannot parse locale messages via custom blocks.\", e);\n            }\n          }\n        }\n        this._i18n = options.i18n;\n        this._i18nWatcher = this._i18n.watchI18nData();\n      } else if (isPlainObject(options.i18n)) {\n        var rootI18n = this.$root && this.$root.$i18n && this.$root.$i18n instanceof VueI18n\n          ? this.$root.$i18n\n          : null;\n        // component local i18n\n        if (rootI18n) {\n          options.i18n.root = this.$root;\n          options.i18n.formatter = rootI18n.formatter;\n          options.i18n.fallbackLocale = rootI18n.fallbackLocale;\n          options.i18n.formatFallbackMessages = rootI18n.formatFallbackMessages;\n          options.i18n.silentTranslationWarn = rootI18n.silentTranslationWarn;\n          options.i18n.silentFallbackWarn = rootI18n.silentFallbackWarn;\n          options.i18n.pluralizationRules = rootI18n.pluralizationRules;\n          options.i18n.preserveDirectiveContent = rootI18n.preserveDirectiveContent;\n        }\n\n        // init locale messages via custom blocks\n        if (options.__i18n) {\n          try {\n            var localeMessages$1 = options.i18n && options.i18n.messages ? options.i18n.messages : {};\n            options.__i18n.forEach(function (resource) {\n              localeMessages$1 = merge(localeMessages$1, JSON.parse(resource));\n            });\n            options.i18n.messages = localeMessages$1;\n          } catch (e) {\n            if (process.env.NODE_ENV !== 'production') {\n              warn(\"Cannot parse locale messages via custom blocks.\", e);\n            }\n          }\n        }\n\n        var ref = options.i18n;\n        var sharedMessages = ref.sharedMessages;\n        if (sharedMessages && isPlainObject(sharedMessages)) {\n          options.i18n.messages = merge(options.i18n.messages, sharedMessages);\n        }\n\n        this._i18n = new VueI18n(options.i18n);\n        this._i18nWatcher = this._i18n.watchI18nData();\n\n        if (options.i18n.sync === undefined || !!options.i18n.sync) {\n          this._localeWatcher = this.$i18n.watchLocale();\n        }\n\n        if (rootI18n) {\n          rootI18n.onComponentInstanceCreated(this._i18n);\n        }\n      } else {\n        if (process.env.NODE_ENV !== 'production') {\n          warn(\"Cannot be interpreted 'i18n' option.\");\n        }\n      }\n    } else if (this.$root && this.$root.$i18n && this.$root.$i18n instanceof VueI18n) {\n      // root i18n\n      this._i18n = this.$root.$i18n;\n    } else if (options.parent && options.parent.$i18n && options.parent.$i18n instanceof VueI18n) {\n      // parent i18n\n      this._i18n = options.parent.$i18n;\n    }\n  },\n\n  beforeMount: function beforeMount () {\n    var options = this.$options;\n    options.i18n = options.i18n || (options.__i18n ? {} : null);\n\n    if (options.i18n) {\n      if (options.i18n instanceof VueI18n) {\n        // init locale messages via custom blocks\n        this._i18n.subscribeDataChanging(this);\n        this._subscribing = true;\n      } else if (isPlainObject(options.i18n)) {\n        this._i18n.subscribeDataChanging(this);\n        this._subscribing = true;\n      } else {\n        if (process.env.NODE_ENV !== 'production') {\n          warn(\"Cannot be interpreted 'i18n' option.\");\n        }\n      }\n    } else if (this.$root && this.$root.$i18n && this.$root.$i18n instanceof VueI18n) {\n      this._i18n.subscribeDataChanging(this);\n      this._subscribing = true;\n    } else if (options.parent && options.parent.$i18n && options.parent.$i18n instanceof VueI18n) {\n      this._i18n.subscribeDataChanging(this);\n      this._subscribing = true;\n    }\n  },\n\n  mounted: function mounted () {\n    if (this !== this.$root && this.$options.__INTLIFY_META__ && this.$el) {\n      this.$el.setAttribute('data-intlify', this.$options.__INTLIFY_META__);\n    }\n  },\n\n  beforeDestroy: function beforeDestroy () {\n    if (!this._i18n) { return }\n\n    var self = this;\n    this.$nextTick(function () {\n      if (self._subscribing) {\n        self._i18n.unsubscribeDataChanging(self);\n        delete self._subscribing;\n      }\n\n      if (self._i18nWatcher) {\n        self._i18nWatcher();\n        self._i18n.destroyVM();\n        delete self._i18nWatcher;\n      }\n\n      if (self._localeWatcher) {\n        self._localeWatcher();\n        delete self._localeWatcher;\n      }\n    });\n  }\n};\n\n/*  */\n\nvar interpolationComponent = {\n  name: 'i18n',\n  functional: true,\n  props: {\n    tag: {\n      type: [String, Boolean, Object],\n      default: 'span'\n    },\n    path: {\n      type: String,\n      required: true\n    },\n    locale: {\n      type: String\n    },\n    places: {\n      type: [Array, Object]\n    }\n  },\n  render: function render (h, ref) {\n    var data = ref.data;\n    var parent = ref.parent;\n    var props = ref.props;\n    var slots = ref.slots;\n\n    var $i18n = parent.$i18n;\n    if (!$i18n) {\n      if (process.env.NODE_ENV !== 'production') {\n        warn('Cannot find VueI18n instance!');\n      }\n      return\n    }\n\n    var path = props.path;\n    var locale = props.locale;\n    var places = props.places;\n    var params = slots();\n    var children = $i18n.i(\n      path,\n      locale,\n      onlyHasDefaultPlace(params) || places\n        ? useLegacyPlaces(params.default, places)\n        : params\n    );\n\n    var tag = (!!props.tag && props.tag !== true) || props.tag === false ? props.tag : 'span';\n    return tag ? h(tag, data, children) : children\n  }\n};\n\nfunction onlyHasDefaultPlace (params) {\n  var prop;\n  for (prop in params) {\n    if (prop !== 'default') { return false }\n  }\n  return Boolean(prop)\n}\n\nfunction useLegacyPlaces (children, places) {\n  var params = places ? createParamsFromPlaces(places) : {};\n\n  if (!children) { return params }\n\n  // Filter empty text nodes\n  children = children.filter(function (child) {\n    return child.tag || child.text.trim() !== ''\n  });\n\n  var everyPlace = children.every(vnodeHasPlaceAttribute);\n  if (process.env.NODE_ENV !== 'production' && everyPlace) {\n    warn('`place` attribute is deprecated in next major version. Please switch to Vue slots.');\n  }\n\n  return children.reduce(\n    everyPlace ? assignChildPlace : assignChildIndex,\n    params\n  )\n}\n\nfunction createParamsFromPlaces (places) {\n  if (process.env.NODE_ENV !== 'production') {\n    warn('`places` prop is deprecated in next major version. Please switch to Vue slots.');\n  }\n\n  return Array.isArray(places)\n    ? places.reduce(assignChildIndex, {})\n    : Object.assign({}, places)\n}\n\nfunction assignChildPlace (params, child) {\n  if (child.data && child.data.attrs && child.data.attrs.place) {\n    params[child.data.attrs.place] = child;\n  }\n  return params\n}\n\nfunction assignChildIndex (params, child, index) {\n  params[index] = child;\n  return params\n}\n\nfunction vnodeHasPlaceAttribute (vnode) {\n  return Boolean(vnode.data && vnode.data.attrs && vnode.data.attrs.place)\n}\n\n/*  */\n\nvar numberComponent = {\n  name: 'i18n-n',\n  functional: true,\n  props: {\n    tag: {\n      type: [String, Boolean, Object],\n      default: 'span'\n    },\n    value: {\n      type: Number,\n      required: true\n    },\n    format: {\n      type: [String, Object]\n    },\n    locale: {\n      type: String\n    }\n  },\n  render: function render (h, ref) {\n    var props = ref.props;\n    var parent = ref.parent;\n    var data = ref.data;\n\n    var i18n = parent.$i18n;\n\n    if (!i18n) {\n      if (process.env.NODE_ENV !== 'production') {\n        warn('Cannot find VueI18n instance!');\n      }\n      return null\n    }\n\n    var key = null;\n    var options = null;\n\n    if (isString(props.format)) {\n      key = props.format;\n    } else if (isObject(props.format)) {\n      if (props.format.key) {\n        key = props.format.key;\n      }\n\n      // Filter out number format options only\n      options = Object.keys(props.format).reduce(function (acc, prop) {\n        var obj;\n\n        if (includes(numberFormatKeys, prop)) {\n          return Object.assign({}, acc, ( obj = {}, obj[prop] = props.format[prop], obj ))\n        }\n        return acc\n      }, null);\n    }\n\n    var locale = props.locale || i18n.locale;\n    var parts = i18n._ntp(props.value, locale, key, options);\n\n    var values = parts.map(function (part, index) {\n      var obj;\n\n      var slot = data.scopedSlots && data.scopedSlots[part.type];\n      return slot ? slot(( obj = {}, obj[part.type] = part.value, obj.index = index, obj.parts = parts, obj )) : part.value\n    });\n\n    var tag = (!!props.tag && props.tag !== true) || props.tag === false ? props.tag : 'span';\n    return tag\n      ? h(tag, {\n        attrs: data.attrs,\n        'class': data['class'],\n        staticClass: data.staticClass\n      }, values)\n      : values\n  }\n};\n\n/*  */\n\nfunction bind (el, binding, vnode) {\n  if (!assert(el, vnode)) { return }\n\n  t(el, binding, vnode);\n}\n\nfunction update (el, binding, vnode, oldVNode) {\n  if (!assert(el, vnode)) { return }\n\n  var i18n = vnode.context.$i18n;\n  if (localeEqual(el, vnode) &&\n    (looseEqual(binding.value, binding.oldValue) &&\n     looseEqual(el._localeMessage, i18n.getLocaleMessage(i18n.locale)))) { return }\n\n  t(el, binding, vnode);\n}\n\nfunction unbind (el, binding, vnode, oldVNode) {\n  var vm = vnode.context;\n  if (!vm) {\n    warn('Vue instance does not exists in VNode context');\n    return\n  }\n\n  var i18n = vnode.context.$i18n || {};\n  if (!binding.modifiers.preserve && !i18n.preserveDirectiveContent) {\n    el.textContent = '';\n  }\n  el._vt = undefined;\n  delete el['_vt'];\n  el._locale = undefined;\n  delete el['_locale'];\n  el._localeMessage = undefined;\n  delete el['_localeMessage'];\n}\n\nfunction assert (el, vnode) {\n  var vm = vnode.context;\n  if (!vm) {\n    warn('Vue instance does not exists in VNode context');\n    return false\n  }\n\n  if (!vm.$i18n) {\n    warn('VueI18n instance does not exists in Vue instance');\n    return false\n  }\n\n  return true\n}\n\nfunction localeEqual (el, vnode) {\n  var vm = vnode.context;\n  return el._locale === vm.$i18n.locale\n}\n\nfunction t (el, binding, vnode) {\n  var ref$1, ref$2;\n\n  var value = binding.value;\n\n  var ref = parseValue(value);\n  var path = ref.path;\n  var locale = ref.locale;\n  var args = ref.args;\n  var choice = ref.choice;\n  if (!path && !locale && !args) {\n    warn('value type not supported');\n    return\n  }\n\n  if (!path) {\n    warn('`path` is required in v-t directive');\n    return\n  }\n\n  var vm = vnode.context;\n  if (choice != null) {\n    el._vt = el.textContent = (ref$1 = vm.$i18n).tc.apply(ref$1, [ path, choice ].concat( makeParams(locale, args) ));\n  } else {\n    el._vt = el.textContent = (ref$2 = vm.$i18n).t.apply(ref$2, [ path ].concat( makeParams(locale, args) ));\n  }\n  el._locale = vm.$i18n.locale;\n  el._localeMessage = vm.$i18n.getLocaleMessage(vm.$i18n.locale);\n}\n\nfunction parseValue (value) {\n  var path;\n  var locale;\n  var args;\n  var choice;\n\n  if (isString(value)) {\n    path = value;\n  } else if (isPlainObject(value)) {\n    path = value.path;\n    locale = value.locale;\n    args = value.args;\n    choice = value.choice;\n  }\n\n  return { path: path, locale: locale, args: args, choice: choice }\n}\n\nfunction makeParams (locale, args) {\n  var params = [];\n\n  locale && params.push(locale);\n  if (args && (Array.isArray(args) || isPlainObject(args))) {\n    params.push(args);\n  }\n\n  return params\n}\n\nvar Vue;\n\nfunction install (_Vue) {\n  /* istanbul ignore if */\n  if (process.env.NODE_ENV !== 'production' && install.installed && _Vue === Vue) {\n    warn('already installed.');\n    return\n  }\n  install.installed = true;\n\n  Vue = _Vue;\n\n  var version = (Vue.version && Number(Vue.version.split('.')[0])) || -1;\n  /* istanbul ignore if */\n  if (process.env.NODE_ENV !== 'production' && version < 2) {\n    warn((\"vue-i18n (\" + (install.version) + \") need to use Vue 2.0 or later (Vue: \" + (Vue.version) + \").\"));\n    return\n  }\n\n  extend(Vue);\n  Vue.mixin(mixin);\n  Vue.directive('t', { bind: bind, update: update, unbind: unbind });\n  Vue.component(interpolationComponent.name, interpolationComponent);\n  Vue.component(numberComponent.name, numberComponent);\n\n  // use simple mergeStrategies to prevent i18n instance lose '__proto__'\n  var strats = Vue.config.optionMergeStrategies;\n  strats.i18n = function (parentVal, childVal) {\n    return childVal === undefined\n      ? parentVal\n      : childVal\n  };\n}\n\n/*  */\n\nvar BaseFormatter = function BaseFormatter () {\n  this._caches = Object.create(null);\n};\n\nBaseFormatter.prototype.interpolate = function interpolate (message, values) {\n  if (!values) {\n    return [message]\n  }\n  var tokens = this._caches[message];\n  if (!tokens) {\n    tokens = parse(message);\n    this._caches[message] = tokens;\n  }\n  return compile(tokens, values)\n};\n\n\n\nvar RE_TOKEN_LIST_VALUE = /^(?:\\d)+/;\nvar RE_TOKEN_NAMED_VALUE = /^(?:\\w)+/;\n\nfunction parse (format) {\n  var tokens = [];\n  var position = 0;\n\n  var text = '';\n  while (position < format.length) {\n    var char = format[position++];\n    if (char === '{') {\n      if (text) {\n        tokens.push({ type: 'text', value: text });\n      }\n\n      text = '';\n      var sub = '';\n      char = format[position++];\n      while (char !== undefined && char !== '}') {\n        sub += char;\n        char = format[position++];\n      }\n      var isClosed = char === '}';\n\n      var type = RE_TOKEN_LIST_VALUE.test(sub)\n        ? 'list'\n        : isClosed && RE_TOKEN_NAMED_VALUE.test(sub)\n          ? 'named'\n          : 'unknown';\n      tokens.push({ value: sub, type: type });\n    } else if (char === '%') {\n      // when found rails i18n syntax, skip text capture\n      if (format[(position)] !== '{') {\n        text += char;\n      }\n    } else {\n      text += char;\n    }\n  }\n\n  text && tokens.push({ type: 'text', value: text });\n\n  return tokens\n}\n\nfunction compile (tokens, values) {\n  var compiled = [];\n  var index = 0;\n\n  var mode = Array.isArray(values)\n    ? 'list'\n    : isObject(values)\n      ? 'named'\n      : 'unknown';\n  if (mode === 'unknown') { return compiled }\n\n  while (index < tokens.length) {\n    var token = tokens[index];\n    switch (token.type) {\n      case 'text':\n        compiled.push(token.value);\n        break\n      case 'list':\n        compiled.push(values[parseInt(token.value, 10)]);\n        break\n      case 'named':\n        if (mode === 'named') {\n          compiled.push((values)[token.value]);\n        } else {\n          if (process.env.NODE_ENV !== 'production') {\n            warn((\"Type of token '\" + (token.type) + \"' and format of value '\" + mode + \"' don't match!\"));\n          }\n        }\n        break\n      case 'unknown':\n        if (process.env.NODE_ENV !== 'production') {\n          warn(\"Detect 'unknown' type of token!\");\n        }\n        break\n    }\n    index++;\n  }\n\n  return compiled\n}\n\n/*  */\n\n/**\n *  Path parser\n *  - Inspired:\n *    Vue.js Path parser\n */\n\n// actions\nvar APPEND = 0;\nvar PUSH = 1;\nvar INC_SUB_PATH_DEPTH = 2;\nvar PUSH_SUB_PATH = 3;\n\n// states\nvar BEFORE_PATH = 0;\nvar IN_PATH = 1;\nvar BEFORE_IDENT = 2;\nvar IN_IDENT = 3;\nvar IN_SUB_PATH = 4;\nvar IN_SINGLE_QUOTE = 5;\nvar IN_DOUBLE_QUOTE = 6;\nvar AFTER_PATH = 7;\nvar ERROR = 8;\n\nvar pathStateMachine = [];\n\npathStateMachine[BEFORE_PATH] = {\n  'ws': [BEFORE_PATH],\n  'ident': [IN_IDENT, APPEND],\n  '[': [IN_SUB_PATH],\n  'eof': [AFTER_PATH]\n};\n\npathStateMachine[IN_PATH] = {\n  'ws': [IN_PATH],\n  '.': [BEFORE_IDENT],\n  '[': [IN_SUB_PATH],\n  'eof': [AFTER_PATH]\n};\n\npathStateMachine[BEFORE_IDENT] = {\n  'ws': [BEFORE_IDENT],\n  'ident': [IN_IDENT, APPEND],\n  '0': [IN_IDENT, APPEND],\n  'number': [IN_IDENT, APPEND]\n};\n\npathStateMachine[IN_IDENT] = {\n  'ident': [IN_IDENT, APPEND],\n  '0': [IN_IDENT, APPEND],\n  'number': [IN_IDENT, APPEND],\n  'ws': [IN_PATH, PUSH],\n  '.': [BEFORE_IDENT, PUSH],\n  '[': [IN_SUB_PATH, PUSH],\n  'eof': [AFTER_PATH, PUSH]\n};\n\npathStateMachine[IN_SUB_PATH] = {\n  \"'\": [IN_SINGLE_QUOTE, APPEND],\n  '\"': [IN_DOUBLE_QUOTE, APPEND],\n  '[': [IN_SUB_PATH, INC_SUB_PATH_DEPTH],\n  ']': [IN_PATH, PUSH_SUB_PATH],\n  'eof': ERROR,\n  'else': [IN_SUB_PATH, APPEND]\n};\n\npathStateMachine[IN_SINGLE_QUOTE] = {\n  \"'\": [IN_SUB_PATH, APPEND],\n  'eof': ERROR,\n  'else': [IN_SINGLE_QUOTE, APPEND]\n};\n\npathStateMachine[IN_DOUBLE_QUOTE] = {\n  '\"': [IN_SUB_PATH, APPEND],\n  'eof': ERROR,\n  'else': [IN_DOUBLE_QUOTE, APPEND]\n};\n\n/**\n * Check if an expression is a literal value.\n */\n\nvar literalValueRE = /^\\s?(?:true|false|-?[\\d.]+|'[^']*'|\"[^\"]*\")\\s?$/;\nfunction isLiteral (exp) {\n  return literalValueRE.test(exp)\n}\n\n/**\n * Strip quotes from a string\n */\n\nfunction stripQuotes (str) {\n  var a = str.charCodeAt(0);\n  var b = str.charCodeAt(str.length - 1);\n  return a === b && (a === 0x22 || a === 0x27)\n    ? str.slice(1, -1)\n    : str\n}\n\n/**\n * Determine the type of a character in a keypath.\n */\n\nfunction getPathCharType (ch) {\n  if (ch === undefined || ch === null) { return 'eof' }\n\n  var code = ch.charCodeAt(0);\n\n  switch (code) {\n    case 0x5B: // [\n    case 0x5D: // ]\n    case 0x2E: // .\n    case 0x22: // \"\n    case 0x27: // '\n      return ch\n\n    case 0x5F: // _\n    case 0x24: // $\n    case 0x2D: // -\n      return 'ident'\n\n    case 0x09: // Tab\n    case 0x0A: // Newline\n    case 0x0D: // Return\n    case 0xA0:  // No-break space\n    case 0xFEFF:  // Byte Order Mark\n    case 0x2028:  // Line Separator\n    case 0x2029:  // Paragraph Separator\n      return 'ws'\n  }\n\n  return 'ident'\n}\n\n/**\n * Format a subPath, return its plain form if it is\n * a literal string or number. Otherwise prepend the\n * dynamic indicator (*).\n */\n\nfunction formatSubPath (path) {\n  var trimmed = path.trim();\n  // invalid leading 0\n  if (path.charAt(0) === '0' && isNaN(path)) { return false }\n\n  return isLiteral(trimmed) ? stripQuotes(trimmed) : '*' + trimmed\n}\n\n/**\n * Parse a string path into an array of segments\n */\n\nfunction parse$1 (path) {\n  var keys = [];\n  var index = -1;\n  var mode = BEFORE_PATH;\n  var subPathDepth = 0;\n  var c;\n  var key;\n  var newChar;\n  var type;\n  var transition;\n  var action;\n  var typeMap;\n  var actions = [];\n\n  actions[PUSH] = function () {\n    if (key !== undefined) {\n      keys.push(key);\n      key = undefined;\n    }\n  };\n\n  actions[APPEND] = function () {\n    if (key === undefined) {\n      key = newChar;\n    } else {\n      key += newChar;\n    }\n  };\n\n  actions[INC_SUB_PATH_DEPTH] = function () {\n    actions[APPEND]();\n    subPathDepth++;\n  };\n\n  actions[PUSH_SUB_PATH] = function () {\n    if (subPathDepth > 0) {\n      subPathDepth--;\n      mode = IN_SUB_PATH;\n      actions[APPEND]();\n    } else {\n      subPathDepth = 0;\n      if (key === undefined) { return false }\n      key = formatSubPath(key);\n      if (key === false) {\n        return false\n      } else {\n        actions[PUSH]();\n      }\n    }\n  };\n\n  function maybeUnescapeQuote () {\n    var nextChar = path[index + 1];\n    if ((mode === IN_SINGLE_QUOTE && nextChar === \"'\") ||\n      (mode === IN_DOUBLE_QUOTE && nextChar === '\"')) {\n      index++;\n      newChar = '\\\\' + nextChar;\n      actions[APPEND]();\n      return true\n    }\n  }\n\n  while (mode !== null) {\n    index++;\n    c = path[index];\n\n    if (c === '\\\\' && maybeUnescapeQuote()) {\n      continue\n    }\n\n    type = getPathCharType(c);\n    typeMap = pathStateMachine[mode];\n    transition = typeMap[type] || typeMap['else'] || ERROR;\n\n    if (transition === ERROR) {\n      return // parse error\n    }\n\n    mode = transition[0];\n    action = actions[transition[1]];\n    if (action) {\n      newChar = transition[2];\n      newChar = newChar === undefined\n        ? c\n        : newChar;\n      if (action() === false) {\n        return\n      }\n    }\n\n    if (mode === AFTER_PATH) {\n      return keys\n    }\n  }\n}\n\n\n\n\n\nvar I18nPath = function I18nPath () {\n  this._cache = Object.create(null);\n};\n\n/**\n * External parse that check for a cache hit first\n */\nI18nPath.prototype.parsePath = function parsePath (path) {\n  var hit = this._cache[path];\n  if (!hit) {\n    hit = parse$1(path);\n    if (hit) {\n      this._cache[path] = hit;\n    }\n  }\n  return hit || []\n};\n\n/**\n * Get path value from path string\n */\nI18nPath.prototype.getPathValue = function getPathValue (obj, path) {\n  if (!isObject(obj)) { return null }\n\n  var paths = this.parsePath(path);\n  if (paths.length === 0) {\n    return null\n  } else {\n    var length = paths.length;\n    var last = obj;\n    var i = 0;\n    while (i < length) {\n      var value = last[paths[i]];\n      if (value === undefined || value === null) {\n        return null\n      }\n      last = value;\n      i++;\n    }\n\n    return last\n  }\n};\n\n/*  */\n\n\n\nvar htmlTagMatcher = /<\\/?[\\w\\s=\"/.':;#-\\/]+>/;\nvar linkKeyMatcher = /(?:@(?:\\.[a-z]+)?:(?:[\\w\\-_|.]+|\\([\\w\\-_|.]+\\)))/g;\nvar linkKeyPrefixMatcher = /^@(?:\\.([a-z]+))?:/;\nvar bracketsMatcher = /[()]/g;\nvar defaultModifiers = {\n  'upper': function (str) { return str.toLocaleUpperCase(); },\n  'lower': function (str) { return str.toLocaleLowerCase(); },\n  'capitalize': function (str) { return (\"\" + (str.charAt(0).toLocaleUpperCase()) + (str.substr(1))); }\n};\n\nvar defaultFormatter = new BaseFormatter();\n\nvar VueI18n = function VueI18n (options) {\n  var this$1 = this;\n  if ( options === void 0 ) options = {};\n\n  // Auto install if it is not done yet and `window` has `Vue`.\n  // To allow users to avoid auto-installation in some cases,\n  // this code should be placed here. See #290\n  /* istanbul ignore if */\n  if (!Vue && typeof window !== 'undefined' && window.Vue) {\n    install(window.Vue);\n  }\n\n  var locale = options.locale || 'en-US';\n  var fallbackLocale = options.fallbackLocale === false\n    ? false\n    : options.fallbackLocale || 'en-US';\n  var messages = options.messages || {};\n  var dateTimeFormats = options.dateTimeFormats || {};\n  var numberFormats = options.numberFormats || {};\n\n  this._vm = null;\n  this._formatter = options.formatter || defaultFormatter;\n  this._modifiers = options.modifiers || {};\n  this._missing = options.missing || null;\n  this._root = options.root || null;\n  this._sync = options.sync === undefined ? true : !!options.sync;\n  this._fallbackRoot = options.fallbackRoot === undefined\n    ? true\n    : !!options.fallbackRoot;\n  this._formatFallbackMessages = options.formatFallbackMessages === undefined\n    ? false\n    : !!options.formatFallbackMessages;\n  this._silentTranslationWarn = options.silentTranslationWarn === undefined\n    ? false\n    : options.silentTranslationWarn;\n  this._silentFallbackWarn = options.silentFallbackWarn === undefined\n    ? false\n    : !!options.silentFallbackWarn;\n  this._dateTimeFormatters = {};\n  this._numberFormatters = {};\n  this._path = new I18nPath();\n  this._dataListeners = new Set();\n  this._componentInstanceCreatedListener = options.componentInstanceCreatedListener || null;\n  this._preserveDirectiveContent = options.preserveDirectiveContent === undefined\n    ? false\n    : !!options.preserveDirectiveContent;\n  this.pluralizationRules = options.pluralizationRules || {};\n  this._warnHtmlInMessage = options.warnHtmlInMessage || 'off';\n  this._postTranslation = options.postTranslation || null;\n  this._escapeParameterHtml = options.escapeParameterHtml || false;\n\n  /**\n   * @param choice {number} a choice index given by the input to $tc: `$tc('path.to.rule', choiceIndex)`\n   * @param choicesLength {number} an overall amount of available choices\n   * @returns a final choice index\n  */\n  this.getChoiceIndex = function (choice, choicesLength) {\n    var thisPrototype = Object.getPrototypeOf(this$1);\n    if (thisPrototype && thisPrototype.getChoiceIndex) {\n      var prototypeGetChoiceIndex = (thisPrototype.getChoiceIndex);\n      return (prototypeGetChoiceIndex).call(this$1, choice, choicesLength)\n    }\n\n    // Default (old) getChoiceIndex implementation - english-compatible\n    var defaultImpl = function (_choice, _choicesLength) {\n      _choice = Math.abs(_choice);\n\n      if (_choicesLength === 2) {\n        return _choice\n          ? _choice > 1\n            ? 1\n            : 0\n          : 1\n      }\n\n      return _choice ? Math.min(_choice, 2) : 0\n    };\n\n    if (this$1.locale in this$1.pluralizationRules) {\n      return this$1.pluralizationRules[this$1.locale].apply(this$1, [choice, choicesLength])\n    } else {\n      return defaultImpl(choice, choicesLength)\n    }\n  };\n\n\n  this._exist = function (message, key) {\n    if (!message || !key) { return false }\n    if (!isNull(this$1._path.getPathValue(message, key))) { return true }\n    // fallback for flat key\n    if (message[key]) { return true }\n    return false\n  };\n\n  if (this._warnHtmlInMessage === 'warn' || this._warnHtmlInMessage === 'error') {\n    Object.keys(messages).forEach(function (locale) {\n      this$1._checkLocaleMessage(locale, this$1._warnHtmlInMessage, messages[locale]);\n    });\n  }\n\n  this._initVM({\n    locale: locale,\n    fallbackLocale: fallbackLocale,\n    messages: messages,\n    dateTimeFormats: dateTimeFormats,\n    numberFormats: numberFormats\n  });\n};\n\nvar prototypeAccessors = { vm: { configurable: true },messages: { configurable: true },dateTimeFormats: { configurable: true },numberFormats: { configurable: true },availableLocales: { configurable: true },locale: { configurable: true },fallbackLocale: { configurable: true },formatFallbackMessages: { configurable: true },missing: { configurable: true },formatter: { configurable: true },silentTranslationWarn: { configurable: true },silentFallbackWarn: { configurable: true },preserveDirectiveContent: { configurable: true },warnHtmlInMessage: { configurable: true },postTranslation: { configurable: true } };\n\nVueI18n.prototype._checkLocaleMessage = function _checkLocaleMessage (locale, level, message) {\n  var paths = [];\n\n  var fn = function (level, locale, message, paths) {\n    if (isPlainObject(message)) {\n      Object.keys(message).forEach(function (key) {\n        var val = message[key];\n        if (isPlainObject(val)) {\n          paths.push(key);\n          paths.push('.');\n          fn(level, locale, val, paths);\n          paths.pop();\n          paths.pop();\n        } else {\n          paths.push(key);\n          fn(level, locale, val, paths);\n          paths.pop();\n        }\n      });\n    } else if (isArray(message)) {\n      message.forEach(function (item, index) {\n        if (isPlainObject(item)) {\n          paths.push((\"[\" + index + \"]\"));\n          paths.push('.');\n          fn(level, locale, item, paths);\n          paths.pop();\n          paths.pop();\n        } else {\n          paths.push((\"[\" + index + \"]\"));\n          fn(level, locale, item, paths);\n          paths.pop();\n        }\n      });\n    } else if (isString(message)) {\n      var ret = htmlTagMatcher.test(message);\n      if (ret) {\n        var msg = \"Detected HTML in message '\" + message + \"' of keypath '\" + (paths.join('')) + \"' at '\" + locale + \"'. Consider component interpolation with '<i18n>' to avoid XSS. See https://bit.ly/2ZqJzkp\";\n        if (level === 'warn') {\n          warn(msg);\n        } else if (level === 'error') {\n          error(msg);\n        }\n      }\n    }\n  };\n\n  fn(level, locale, message, paths);\n};\n\nVueI18n.prototype._initVM = function _initVM (data) {\n  var silent = Vue.config.silent;\n  Vue.config.silent = true;\n  this._vm = new Vue({ data: data });\n  Vue.config.silent = silent;\n};\n\nVueI18n.prototype.destroyVM = function destroyVM () {\n  this._vm.$destroy();\n};\n\nVueI18n.prototype.subscribeDataChanging = function subscribeDataChanging (vm) {\n  this._dataListeners.add(vm);\n};\n\nVueI18n.prototype.unsubscribeDataChanging = function unsubscribeDataChanging (vm) {\n  remove(this._dataListeners, vm);\n};\n\nVueI18n.prototype.watchI18nData = function watchI18nData () {\n  var self = this;\n  return this._vm.$watch('$data', function () {\n    self._dataListeners.forEach(function (e) {\n      Vue.nextTick(function () {\n        e && e.$forceUpdate();\n      });\n    });\n  }, { deep: true })\n};\n\nVueI18n.prototype.watchLocale = function watchLocale () {\n  /* istanbul ignore if */\n  if (!this._sync || !this._root) { return null }\n  var target = this._vm;\n  return this._root.$i18n.vm.$watch('locale', function (val) {\n    target.$set(target, 'locale', val);\n    target.$forceUpdate();\n  }, { immediate: true })\n};\n\nVueI18n.prototype.onComponentInstanceCreated = function onComponentInstanceCreated (newI18n) {\n  if (this._componentInstanceCreatedListener) {\n    this._componentInstanceCreatedListener(newI18n, this);\n  }\n};\n\nprototypeAccessors.vm.get = function () { return this._vm };\n\nprototypeAccessors.messages.get = function () { return looseClone(this._getMessages()) };\nprototypeAccessors.dateTimeFormats.get = function () { return looseClone(this._getDateTimeFormats()) };\nprototypeAccessors.numberFormats.get = function () { return looseClone(this._getNumberFormats()) };\nprototypeAccessors.availableLocales.get = function () { return Object.keys(this.messages).sort() };\n\nprototypeAccessors.locale.get = function () { return this._vm.locale };\nprototypeAccessors.locale.set = function (locale) {\n  this._vm.$set(this._vm, 'locale', locale);\n};\n\nprototypeAccessors.fallbackLocale.get = function () { return this._vm.fallbackLocale };\nprototypeAccessors.fallbackLocale.set = function (locale) {\n  this._localeChainCache = {};\n  this._vm.$set(this._vm, 'fallbackLocale', locale);\n};\n\nprototypeAccessors.formatFallbackMessages.get = function () { return this._formatFallbackMessages };\nprototypeAccessors.formatFallbackMessages.set = function (fallback) { this._formatFallbackMessages = fallback; };\n\nprototypeAccessors.missing.get = function () { return this._missing };\nprototypeAccessors.missing.set = function (handler) { this._missing = handler; };\n\nprototypeAccessors.formatter.get = function () { return this._formatter };\nprototypeAccessors.formatter.set = function (formatter) { this._formatter = formatter; };\n\nprototypeAccessors.silentTranslationWarn.get = function () { return this._silentTranslationWarn };\nprototypeAccessors.silentTranslationWarn.set = function (silent) { this._silentTranslationWarn = silent; };\n\nprototypeAccessors.silentFallbackWarn.get = function () { return this._silentFallbackWarn };\nprototypeAccessors.silentFallbackWarn.set = function (silent) { this._silentFallbackWarn = silent; };\n\nprototypeAccessors.preserveDirectiveContent.get = function () { return this._preserveDirectiveContent };\nprototypeAccessors.preserveDirectiveContent.set = function (preserve) { this._preserveDirectiveContent = preserve; };\n\nprototypeAccessors.warnHtmlInMessage.get = function () { return this._warnHtmlInMessage };\nprototypeAccessors.warnHtmlInMessage.set = function (level) {\n    var this$1 = this;\n\n  var orgLevel = this._warnHtmlInMessage;\n  this._warnHtmlInMessage = level;\n  if (orgLevel !== level && (level === 'warn' || level === 'error')) {\n    var messages = this._getMessages();\n    Object.keys(messages).forEach(function (locale) {\n      this$1._checkLocaleMessage(locale, this$1._warnHtmlInMessage, messages[locale]);\n    });\n  }\n};\n\nprototypeAccessors.postTranslation.get = function () { return this._postTranslation };\nprototypeAccessors.postTranslation.set = function (handler) { this._postTranslation = handler; };\n\nVueI18n.prototype._getMessages = function _getMessages () { return this._vm.messages };\nVueI18n.prototype._getDateTimeFormats = function _getDateTimeFormats () { return this._vm.dateTimeFormats };\nVueI18n.prototype._getNumberFormats = function _getNumberFormats () { return this._vm.numberFormats };\n\nVueI18n.prototype._warnDefault = function _warnDefault (locale, key, result, vm, values, interpolateMode) {\n  if (!isNull(result)) { return result }\n  if (this._missing) {\n    var missingRet = this._missing.apply(null, [locale, key, vm, values]);\n    if (isString(missingRet)) {\n      return missingRet\n    }\n  } else {\n    if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key)) {\n      warn(\n        \"Cannot translate the value of keypath '\" + key + \"'. \" +\n        'Use the value of keypath as default.'\n      );\n    }\n  }\n\n  if (this._formatFallbackMessages) {\n    var parsedArgs = parseArgs.apply(void 0, values);\n    return this._render(key, interpolateMode, parsedArgs.params, key)\n  } else {\n    return key\n  }\n};\n\nVueI18n.prototype._isFallbackRoot = function _isFallbackRoot (val) {\n  return !val && !isNull(this._root) && this._fallbackRoot\n};\n\nVueI18n.prototype._isSilentFallbackWarn = function _isSilentFallbackWarn (key) {\n  return this._silentFallbackWarn instanceof RegExp\n    ? this._silentFallbackWarn.test(key)\n    : this._silentFallbackWarn\n};\n\nVueI18n.prototype._isSilentFallback = function _isSilentFallback (locale, key) {\n  return this._isSilentFallbackWarn(key) && (this._isFallbackRoot() || locale !== this.fallbackLocale)\n};\n\nVueI18n.prototype._isSilentTranslationWarn = function _isSilentTranslationWarn (key) {\n  return this._silentTranslationWarn instanceof RegExp\n    ? this._silentTranslationWarn.test(key)\n    : this._silentTranslationWarn\n};\n\nVueI18n.prototype._interpolate = function _interpolate (\n  locale,\n  message,\n  key,\n  host,\n  interpolateMode,\n  values,\n  visitedLinkStack\n) {\n  if (!message) { return null }\n\n  var pathRet = this._path.getPathValue(message, key);\n  if (isArray(pathRet) || isPlainObject(pathRet)) { return pathRet }\n\n  var ret;\n  if (isNull(pathRet)) {\n    /* istanbul ignore else */\n    if (isPlainObject(message)) {\n      ret = message[key];\n      if (!(isString(ret) || isFunction(ret))) {\n        if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallback(locale, key)) {\n          warn((\"Value of key '\" + key + \"' is not a string or function !\"));\n        }\n        return null\n      }\n    } else {\n      return null\n    }\n  } else {\n    /* istanbul ignore else */\n    if (isString(pathRet) || isFunction(pathRet)) {\n      ret = pathRet;\n    } else {\n      if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallback(locale, key)) {\n        warn((\"Value of key '\" + key + \"' is not a string or function!\"));\n      }\n      return null\n    }\n  }\n\n  // Check for the existence of links within the translated string\n  if (isString(ret) && (ret.indexOf('@:') >= 0 || ret.indexOf('@.') >= 0)) {\n    ret = this._link(locale, message, ret, host, 'raw', values, visitedLinkStack);\n  }\n\n  return this._render(ret, interpolateMode, values, key)\n};\n\nVueI18n.prototype._link = function _link (\n  locale,\n  message,\n  str,\n  host,\n  interpolateMode,\n  values,\n  visitedLinkStack\n) {\n  var ret = str;\n\n  // Match all the links within the local\n  // We are going to replace each of\n  // them with its translation\n  var matches = ret.match(linkKeyMatcher);\n    \n  // eslint-disable-next-line no-autofix/prefer-const\n  for (var idx in matches) {\n    // ie compatible: filter custom array\n    // prototype method\n    if (!matches.hasOwnProperty(idx)) {\n      continue\n    }\n    var link = matches[idx];\n    var linkKeyPrefixMatches = link.match(linkKeyPrefixMatcher);\n    var linkPrefix = linkKeyPrefixMatches[0];\n      var formatterName = linkKeyPrefixMatches[1];\n\n    // Remove the leading @:, @.case: and the brackets\n    var linkPlaceholder = link.replace(linkPrefix, '').replace(bracketsMatcher, '');\n\n    if (includes(visitedLinkStack, linkPlaceholder)) {\n      if (process.env.NODE_ENV !== 'production') {\n        warn((\"Circular reference found. \\\"\" + link + \"\\\" is already visited in the chain of \" + (visitedLinkStack.reverse().join(' <- '))));\n      }\n      return ret\n    }\n    visitedLinkStack.push(linkPlaceholder);\n\n    // Translate the link\n    var translated = this._interpolate(\n      locale, message, linkPlaceholder, host,\n      interpolateMode === 'raw' ? 'string' : interpolateMode,\n      interpolateMode === 'raw' ? undefined : values,\n      visitedLinkStack\n    );\n\n    if (this._isFallbackRoot(translated)) {\n      if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(linkPlaceholder)) {\n        warn((\"Fall back to translate the link placeholder '\" + linkPlaceholder + \"' with root locale.\"));\n      }\n      /* istanbul ignore if */\n      if (!this._root) { throw Error('unexpected error') }\n      var root = this._root.$i18n;\n      translated = root._translate(\n        root._getMessages(), root.locale, root.fallbackLocale,\n        linkPlaceholder, host, interpolateMode, values\n      );\n    }\n    translated = this._warnDefault(\n      locale, linkPlaceholder, translated, host,\n      isArray(values) ? values : [values],\n      interpolateMode\n    );\n\n    if (this._modifiers.hasOwnProperty(formatterName)) {\n      translated = this._modifiers[formatterName](translated);\n    } else if (defaultModifiers.hasOwnProperty(formatterName)) {\n      translated = defaultModifiers[formatterName](translated);\n    }\n\n    visitedLinkStack.pop();\n\n    // Replace the link with the translated\n    ret = !translated ? ret : ret.replace(link, translated);\n  }\n\n  return ret\n};\n\nVueI18n.prototype._createMessageContext = function _createMessageContext (values, formatter, path, interpolateMode) {\n    var this$1 = this;\n\n  var _list = isArray(values) ? values : [];\n  var _named = isObject(values) ? values : {};\n  var list = function (index) { return _list[index]; };\n  var named = function (key) { return _named[key]; };\n  var messages = this._getMessages();\n  var locale = this.locale;\n\n  return {\n    list: list,\n    named: named,\n    values: values,\n    formatter: formatter,\n    path: path,\n    messages: messages,\n    locale: locale,\n    linked: function (linkedKey) { return this$1._interpolate(locale, messages[locale] || {}, linkedKey, null, interpolateMode, undefined, [linkedKey]); }\n  }\n};\n\nVueI18n.prototype._render = function _render (message, interpolateMode, values, path) {\n  if (isFunction(message)) {\n    return message(\n      this._createMessageContext(values, this._formatter || defaultFormatter, path, interpolateMode)\n    )\n  }\n\n  var ret = this._formatter.interpolate(message, values, path);\n\n  // If the custom formatter refuses to work - apply the default one\n  if (!ret) {\n    ret = defaultFormatter.interpolate(message, values, path);\n  }\n\n  // if interpolateMode is **not** 'string' ('row'),\n  // return the compiled data (e.g. ['foo', VNode, 'bar']) with formatter\n  return interpolateMode === 'string' && !isString(ret) ? ret.join('') : ret\n};\n\nVueI18n.prototype._appendItemToChain = function _appendItemToChain (chain, item, blocks) {\n  var follow = false;\n  if (!includes(chain, item)) {\n    follow = true;\n    if (item) {\n      follow = item[item.length - 1] !== '!';\n      item = item.replace(/!/g, '');\n      chain.push(item);\n      if (blocks && blocks[item]) {\n        follow = blocks[item];\n      }\n    }\n  }\n  return follow\n};\n\nVueI18n.prototype._appendLocaleToChain = function _appendLocaleToChain (chain, locale, blocks) {\n  var follow;\n  var tokens = locale.split('-');\n  do {\n    var item = tokens.join('-');\n    follow = this._appendItemToChain(chain, item, blocks);\n    tokens.splice(-1, 1);\n  } while (tokens.length && (follow === true))\n  return follow\n};\n\nVueI18n.prototype._appendBlockToChain = function _appendBlockToChain (chain, block, blocks) {\n  var follow = true;\n  for (var i = 0; (i < block.length) && (isBoolean(follow)); i++) {\n    var locale = block[i];\n    if (isString(locale)) {\n      follow = this._appendLocaleToChain(chain, locale, blocks);\n    }\n  }\n  return follow\n};\n\nVueI18n.prototype._getLocaleChain = function _getLocaleChain (start, fallbackLocale) {\n  if (start === '') { return [] }\n\n  if (!this._localeChainCache) {\n    this._localeChainCache = {};\n  }\n\n  var chain = this._localeChainCache[start];\n  if (!chain) {\n    if (!fallbackLocale) {\n      fallbackLocale = this.fallbackLocale;\n    }\n    chain = [];\n\n    // first block defined by start\n    var block = [start];\n\n    // while any intervening block found\n    while (isArray(block)) {\n      block = this._appendBlockToChain(\n        chain,\n        block,\n        fallbackLocale\n      );\n    }\n\n    // last block defined by default\n    var defaults;\n    if (isArray(fallbackLocale)) {\n      defaults = fallbackLocale;\n    } else if (isObject(fallbackLocale)) {\n      /* $FlowFixMe */\n      if (fallbackLocale['default']) {\n        defaults = fallbackLocale['default'];\n      } else {\n        defaults = null;\n      }\n    } else {\n      defaults = fallbackLocale;\n    }\n\n    // convert defaults to array\n    if (isString(defaults)) {\n      block = [defaults];\n    } else {\n      block = defaults;\n    }\n    if (block) {\n      this._appendBlockToChain(\n        chain,\n        block,\n        null\n      );\n    }\n    this._localeChainCache[start] = chain;\n  }\n  return chain\n};\n\nVueI18n.prototype._translate = function _translate (\n  messages,\n  locale,\n  fallback,\n  key,\n  host,\n  interpolateMode,\n  args\n) {\n  var chain = this._getLocaleChain(locale, fallback);\n  var res;\n  for (var i = 0; i < chain.length; i++) {\n    var step = chain[i];\n    res =\n      this._interpolate(step, messages[step], key, host, interpolateMode, args, [key]);\n    if (!isNull(res)) {\n      if (step !== locale && process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n        warn((\"Fall back to translate the keypath '\" + key + \"' with '\" + step + \"' locale.\"));\n      }\n      return res\n    }\n  }\n  return null\n};\n\nVueI18n.prototype._t = function _t (key, _locale, messages, host) {\n    var ref;\n\n    var values = [], len = arguments.length - 4;\n    while ( len-- > 0 ) values[ len ] = arguments[ len + 4 ];\n  if (!key) { return '' }\n\n  var parsedArgs = parseArgs.apply(void 0, values);\n  if(this._escapeParameterHtml) {\n    parsedArgs.params = escapeParams(parsedArgs.params);\n  }\n\n  var locale = parsedArgs.locale || _locale;\n\n  var ret = this._translate(\n    messages, locale, this.fallbackLocale, key,\n    host, 'string', parsedArgs.params\n  );\n  if (this._isFallbackRoot(ret)) {\n    if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n      warn((\"Fall back to translate the keypath '\" + key + \"' with root locale.\"));\n    }\n    /* istanbul ignore if */\n    if (!this._root) { throw Error('unexpected error') }\n    return (ref = this._root).$t.apply(ref, [ key ].concat( values ))\n  } else {\n    ret = this._warnDefault(locale, key, ret, host, values, 'string');\n    if (this._postTranslation && ret !== null && ret !== undefined) {\n      ret = this._postTranslation(ret, key);\n    }\n    return ret\n  }\n};\n\nVueI18n.prototype.t = function t (key) {\n    var ref;\n\n    var values = [], len = arguments.length - 1;\n    while ( len-- > 0 ) values[ len ] = arguments[ len + 1 ];\n  return (ref = this)._t.apply(ref, [ key, this.locale, this._getMessages(), null ].concat( values ))\n};\n\nVueI18n.prototype._i = function _i (key, locale, messages, host, values) {\n  var ret =\n    this._translate(messages, locale, this.fallbackLocale, key, host, 'raw', values);\n  if (this._isFallbackRoot(ret)) {\n    if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key)) {\n      warn((\"Fall back to interpolate the keypath '\" + key + \"' with root locale.\"));\n    }\n    if (!this._root) { throw Error('unexpected error') }\n    return this._root.$i18n.i(key, locale, values)\n  } else {\n    return this._warnDefault(locale, key, ret, host, [values], 'raw')\n  }\n};\n\nVueI18n.prototype.i = function i (key, locale, values) {\n  /* istanbul ignore if */\n  if (!key) { return '' }\n\n  if (!isString(locale)) {\n    locale = this.locale;\n  }\n\n  return this._i(key, locale, this._getMessages(), null, values)\n};\n\nVueI18n.prototype._tc = function _tc (\n  key,\n  _locale,\n  messages,\n  host,\n  choice\n) {\n    var ref;\n\n    var values = [], len = arguments.length - 5;\n    while ( len-- > 0 ) values[ len ] = arguments[ len + 5 ];\n  if (!key) { return '' }\n  if (choice === undefined) {\n    choice = 1;\n  }\n\n  var predefined = { 'count': choice, 'n': choice };\n  var parsedArgs = parseArgs.apply(void 0, values);\n  parsedArgs.params = Object.assign(predefined, parsedArgs.params);\n  values = parsedArgs.locale === null ? [parsedArgs.params] : [parsedArgs.locale, parsedArgs.params];\n  return this.fetchChoice((ref = this)._t.apply(ref, [ key, _locale, messages, host ].concat( values )), choice)\n};\n\nVueI18n.prototype.fetchChoice = function fetchChoice (message, choice) {\n  /* istanbul ignore if */\n  if (!message || !isString(message)) { return null }\n  var choices = message.split('|');\n\n  choice = this.getChoiceIndex(choice, choices.length);\n  if (!choices[choice]) { return message }\n  return choices[choice].trim()\n};\n\nVueI18n.prototype.tc = function tc (key, choice) {\n    var ref;\n\n    var values = [], len = arguments.length - 2;\n    while ( len-- > 0 ) values[ len ] = arguments[ len + 2 ];\n  return (ref = this)._tc.apply(ref, [ key, this.locale, this._getMessages(), null, choice ].concat( values ))\n};\n\nVueI18n.prototype._te = function _te (key, locale, messages) {\n    var args = [], len = arguments.length - 3;\n    while ( len-- > 0 ) args[ len ] = arguments[ len + 3 ];\n\n  var _locale = parseArgs.apply(void 0, args).locale || locale;\n  return this._exist(messages[_locale], key)\n};\n\nVueI18n.prototype.te = function te (key, locale) {\n  return this._te(key, this.locale, this._getMessages(), locale)\n};\n\nVueI18n.prototype.getLocaleMessage = function getLocaleMessage (locale) {\n  return looseClone(this._vm.messages[locale] || {})\n};\n\nVueI18n.prototype.setLocaleMessage = function setLocaleMessage (locale, message) {\n  if (this._warnHtmlInMessage === 'warn' || this._warnHtmlInMessage === 'error') {\n    this._checkLocaleMessage(locale, this._warnHtmlInMessage, message);\n  }\n  this._vm.$set(this._vm.messages, locale, message);\n};\n\nVueI18n.prototype.mergeLocaleMessage = function mergeLocaleMessage (locale, message) {\n  if (this._warnHtmlInMessage === 'warn' || this._warnHtmlInMessage === 'error') {\n    this._checkLocaleMessage(locale, this._warnHtmlInMessage, message);\n  }\n  this._vm.$set(this._vm.messages, locale, merge(\n    typeof this._vm.messages[locale] !== 'undefined' && Object.keys(this._vm.messages[locale]).length\n      ? this._vm.messages[locale]\n      : {},\n    message\n  ));\n};\n\nVueI18n.prototype.getDateTimeFormat = function getDateTimeFormat (locale) {\n  return looseClone(this._vm.dateTimeFormats[locale] || {})\n};\n\nVueI18n.prototype.setDateTimeFormat = function setDateTimeFormat (locale, format) {\n  this._vm.$set(this._vm.dateTimeFormats, locale, format);\n  this._clearDateTimeFormat(locale, format);\n};\n\nVueI18n.prototype.mergeDateTimeFormat = function mergeDateTimeFormat (locale, format) {\n  this._vm.$set(this._vm.dateTimeFormats, locale, merge(this._vm.dateTimeFormats[locale] || {}, format));\n  this._clearDateTimeFormat(locale, format);\n};\n\nVueI18n.prototype._clearDateTimeFormat = function _clearDateTimeFormat (locale, format) {\n  // eslint-disable-next-line no-autofix/prefer-const\n  for (var key in format) {\n    var id = locale + \"__\" + key;\n\n    if (!this._dateTimeFormatters.hasOwnProperty(id)) {\n      continue\n    }\n\n    delete this._dateTimeFormatters[id];\n  }\n};\n\nVueI18n.prototype._localizeDateTime = function _localizeDateTime (\n  value,\n  locale,\n  fallback,\n  dateTimeFormats,\n  key\n) {\n  var _locale = locale;\n  var formats = dateTimeFormats[_locale];\n\n  var chain = this._getLocaleChain(locale, fallback);\n  for (var i = 0; i < chain.length; i++) {\n    var current = _locale;\n    var step = chain[i];\n    formats = dateTimeFormats[step];\n    _locale = step;\n    // fallback locale\n    if (isNull(formats) || isNull(formats[key])) {\n      if (step !== locale && process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n        warn((\"Fall back to '\" + step + \"' datetime formats from '\" + current + \"' datetime formats.\"));\n      }\n    } else {\n      break\n    }\n  }\n\n  if (isNull(formats) || isNull(formats[key])) {\n    return null\n  } else {\n    var format = formats[key];\n    var id = _locale + \"__\" + key;\n    var formatter = this._dateTimeFormatters[id];\n    if (!formatter) {\n      formatter = this._dateTimeFormatters[id] = new Intl.DateTimeFormat(_locale, format);\n    }\n    return formatter.format(value)\n  }\n};\n\nVueI18n.prototype._d = function _d (value, locale, key) {\n  /* istanbul ignore if */\n  if (process.env.NODE_ENV !== 'production' && !VueI18n.availabilities.dateTimeFormat) {\n    warn('Cannot format a Date value due to not supported Intl.DateTimeFormat.');\n    return ''\n  }\n\n  if (!key) {\n    return new Intl.DateTimeFormat(locale).format(value)\n  }\n\n  var ret =\n    this._localizeDateTime(value, locale, this.fallbackLocale, this._getDateTimeFormats(), key);\n  if (this._isFallbackRoot(ret)) {\n    if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n      warn((\"Fall back to datetime localization of root: key '\" + key + \"'.\"));\n    }\n    /* istanbul ignore if */\n    if (!this._root) { throw Error('unexpected error') }\n    return this._root.$i18n.d(value, key, locale)\n  } else {\n    return ret || ''\n  }\n};\n\nVueI18n.prototype.d = function d (value) {\n    var args = [], len = arguments.length - 1;\n    while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ];\n\n  var locale = this.locale;\n  var key = null;\n\n  if (args.length === 1) {\n    if (isString(args[0])) {\n      key = args[0];\n    } else if (isObject(args[0])) {\n      if (args[0].locale) {\n        locale = args[0].locale;\n      }\n      if (args[0].key) {\n        key = args[0].key;\n      }\n    }\n  } else if (args.length === 2) {\n    if (isString(args[0])) {\n      key = args[0];\n    }\n    if (isString(args[1])) {\n      locale = args[1];\n    }\n  }\n\n  return this._d(value, locale, key)\n};\n\nVueI18n.prototype.getNumberFormat = function getNumberFormat (locale) {\n  return looseClone(this._vm.numberFormats[locale] || {})\n};\n\nVueI18n.prototype.setNumberFormat = function setNumberFormat (locale, format) {\n  this._vm.$set(this._vm.numberFormats, locale, format);\n  this._clearNumberFormat(locale, format);\n};\n\nVueI18n.prototype.mergeNumberFormat = function mergeNumberFormat (locale, format) {\n  this._vm.$set(this._vm.numberFormats, locale, merge(this._vm.numberFormats[locale] || {}, format));\n  this._clearNumberFormat(locale, format);\n};\n\nVueI18n.prototype._clearNumberFormat = function _clearNumberFormat (locale, format) {\n  // eslint-disable-next-line no-autofix/prefer-const\n  for (var key in format) {\n    var id = locale + \"__\" + key;\n\n    if (!this._numberFormatters.hasOwnProperty(id)) {\n      continue\n    }\n\n    delete this._numberFormatters[id];\n  }\n};\n\nVueI18n.prototype._getNumberFormatter = function _getNumberFormatter (\n  value,\n  locale,\n  fallback,\n  numberFormats,\n  key,\n  options\n) {\n  var _locale = locale;\n  var formats = numberFormats[_locale];\n\n  var chain = this._getLocaleChain(locale, fallback);\n  for (var i = 0; i < chain.length; i++) {\n    var current = _locale;\n    var step = chain[i];\n    formats = numberFormats[step];\n    _locale = step;\n    // fallback locale\n    if (isNull(formats) || isNull(formats[key])) {\n      if (step !== locale && process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n        warn((\"Fall back to '\" + step + \"' number formats from '\" + current + \"' number formats.\"));\n      }\n    } else {\n      break\n    }\n  }\n\n  if (isNull(formats) || isNull(formats[key])) {\n    return null\n  } else {\n    var format = formats[key];\n\n    var formatter;\n    if (options) {\n      // If options specified - create one time number formatter\n      formatter = new Intl.NumberFormat(_locale, Object.assign({}, format, options));\n    } else {\n      var id = _locale + \"__\" + key;\n      formatter = this._numberFormatters[id];\n      if (!formatter) {\n        formatter = this._numberFormatters[id] = new Intl.NumberFormat(_locale, format);\n      }\n    }\n    return formatter\n  }\n};\n\nVueI18n.prototype._n = function _n (value, locale, key, options) {\n  /* istanbul ignore if */\n  if (!VueI18n.availabilities.numberFormat) {\n    if (process.env.NODE_ENV !== 'production') {\n      warn('Cannot format a Number value due to not supported Intl.NumberFormat.');\n    }\n    return ''\n  }\n\n  if (!key) {\n    var nf = !options ? new Intl.NumberFormat(locale) : new Intl.NumberFormat(locale, options);\n    return nf.format(value)\n  }\n\n  var formatter = this._getNumberFormatter(value, locale, this.fallbackLocale, this._getNumberFormats(), key, options);\n  var ret = formatter && formatter.format(value);\n  if (this._isFallbackRoot(ret)) {\n    if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n      warn((\"Fall back to number localization of root: key '\" + key + \"'.\"));\n    }\n    /* istanbul ignore if */\n    if (!this._root) { throw Error('unexpected error') }\n    return this._root.$i18n.n(value, Object.assign({}, { key: key, locale: locale }, options))\n  } else {\n    return ret || ''\n  }\n};\n\nVueI18n.prototype.n = function n (value) {\n    var args = [], len = arguments.length - 1;\n    while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ];\n\n  var locale = this.locale;\n  var key = null;\n  var options = null;\n\n  if (args.length === 1) {\n    if (isString(args[0])) {\n      key = args[0];\n    } else if (isObject(args[0])) {\n      if (args[0].locale) {\n        locale = args[0].locale;\n      }\n      if (args[0].key) {\n        key = args[0].key;\n      }\n\n      // Filter out number format options only\n      options = Object.keys(args[0]).reduce(function (acc, key) {\n          var obj;\n\n        if (includes(numberFormatKeys, key)) {\n          return Object.assign({}, acc, ( obj = {}, obj[key] = args[0][key], obj ))\n        }\n        return acc\n      }, null);\n    }\n  } else if (args.length === 2) {\n    if (isString(args[0])) {\n      key = args[0];\n    }\n    if (isString(args[1])) {\n      locale = args[1];\n    }\n  }\n\n  return this._n(value, locale, key, options)\n};\n\nVueI18n.prototype._ntp = function _ntp (value, locale, key, options) {\n  /* istanbul ignore if */\n  if (!VueI18n.availabilities.numberFormat) {\n    if (process.env.NODE_ENV !== 'production') {\n      warn('Cannot format to parts a Number value due to not supported Intl.NumberFormat.');\n    }\n    return []\n  }\n\n  if (!key) {\n    var nf = !options ? new Intl.NumberFormat(locale) : new Intl.NumberFormat(locale, options);\n    return nf.formatToParts(value)\n  }\n\n  var formatter = this._getNumberFormatter(value, locale, this.fallbackLocale, this._getNumberFormats(), key, options);\n  var ret = formatter && formatter.formatToParts(value);\n  if (this._isFallbackRoot(ret)) {\n    if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key)) {\n      warn((\"Fall back to format number to parts of root: key '\" + key + \"' .\"));\n    }\n    /* istanbul ignore if */\n    if (!this._root) { throw Error('unexpected error') }\n    return this._root.$i18n._ntp(value, locale, key, options)\n  } else {\n    return ret || []\n  }\n};\n\nObject.defineProperties( VueI18n.prototype, prototypeAccessors );\n\nvar availabilities;\n// $FlowFixMe\nObject.defineProperty(VueI18n, 'availabilities', {\n  get: function get () {\n    if (!availabilities) {\n      var intlDefined = typeof Intl !== 'undefined';\n      availabilities = {\n        dateTimeFormat: intlDefined && typeof Intl.DateTimeFormat !== 'undefined',\n        numberFormat: intlDefined && typeof Intl.NumberFormat !== 'undefined'\n      };\n    }\n\n    return availabilities\n  }\n});\n\nVueI18n.install = install;\nVueI18n.version = '8.24.4';\n\nexport default VueI18n;\n"
  },
  {
    "path": "dist/vue-i18n.js",
    "content": "/*!\n * vue-i18n v8.24.4 \n * (c) 2021 kazuya kawaguchi\n * Released under the MIT License.\n */\n(function (global, factory) {\n  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :\n  typeof define === 'function' && define.amd ? define(factory) :\n  (global.VueI18n = factory());\n}(this, (function () { 'use strict';\n\n  /*  */\n\n  /**\n   * constants\n   */\n\n  var numberFormatKeys = [\n    'compactDisplay',\n    'currency',\n    'currencyDisplay',\n    'currencySign',\n    'localeMatcher',\n    'notation',\n    'numberingSystem',\n    'signDisplay',\n    'style',\n    'unit',\n    'unitDisplay',\n    'useGrouping',\n    'minimumIntegerDigits',\n    'minimumFractionDigits',\n    'maximumFractionDigits',\n    'minimumSignificantDigits',\n    'maximumSignificantDigits'\n  ];\n\n  /**\n   * utilities\n   */\n\n  function warn (msg, err) {\n    if (typeof console !== 'undefined') {\n      console.warn('[vue-i18n] ' + msg);\n      /* istanbul ignore if */\n      if (err) {\n        console.warn(err.stack);\n      }\n    }\n  }\n\n  function error (msg, err) {\n    if (typeof console !== 'undefined') {\n      console.error('[vue-i18n] ' + msg);\n      /* istanbul ignore if */\n      if (err) {\n        console.error(err.stack);\n      }\n    }\n  }\n\n  var isArray = Array.isArray;\n\n  function isObject (obj) {\n    return obj !== null && typeof obj === 'object'\n  }\n\n  function isBoolean (val) {\n    return typeof val === 'boolean'\n  }\n\n  function isString (val) {\n    return typeof val === 'string'\n  }\n\n  var toString = Object.prototype.toString;\n  var OBJECT_STRING = '[object Object]';\n  function isPlainObject (obj) {\n    return toString.call(obj) === OBJECT_STRING\n  }\n\n  function isNull (val) {\n    return val === null || val === undefined\n  }\n\n  function isFunction (val) {\n    return typeof val === 'function'\n  }\n\n  function parseArgs () {\n    var args = [], len = arguments.length;\n    while ( len-- ) args[ len ] = arguments[ len ];\n\n    var locale = null;\n    var params = null;\n    if (args.length === 1) {\n      if (isObject(args[0]) || isArray(args[0])) {\n        params = args[0];\n      } else if (typeof args[0] === 'string') {\n        locale = args[0];\n      }\n    } else if (args.length === 2) {\n      if (typeof args[0] === 'string') {\n        locale = args[0];\n      }\n      /* istanbul ignore if */\n      if (isObject(args[1]) || isArray(args[1])) {\n        params = args[1];\n      }\n    }\n\n    return { locale: locale, params: params }\n  }\n\n  function looseClone (obj) {\n    return JSON.parse(JSON.stringify(obj))\n  }\n\n  function remove (arr, item) {\n    if (arr.delete(item)) {\n      return arr\n    }\n  }\n\n  function includes (arr, item) {\n    return !!~arr.indexOf(item)\n  }\n\n  var hasOwnProperty = Object.prototype.hasOwnProperty;\n  function hasOwn (obj, key) {\n    return hasOwnProperty.call(obj, key)\n  }\n\n  function merge (target) {\n    var arguments$1 = arguments;\n\n    var output = Object(target);\n    for (var i = 1; i < arguments.length; i++) {\n      var source = arguments$1[i];\n      if (source !== undefined && source !== null) {\n        var key = (void 0);\n        for (key in source) {\n          if (hasOwn(source, key)) {\n            if (isObject(source[key])) {\n              output[key] = merge(output[key], source[key]);\n            } else {\n              output[key] = source[key];\n            }\n          }\n        }\n      }\n    }\n    return output\n  }\n\n  function looseEqual (a, b) {\n    if (a === b) { return true }\n    var isObjectA = isObject(a);\n    var isObjectB = isObject(b);\n    if (isObjectA && isObjectB) {\n      try {\n        var isArrayA = isArray(a);\n        var isArrayB = isArray(b);\n        if (isArrayA && isArrayB) {\n          return a.length === b.length && a.every(function (e, i) {\n            return looseEqual(e, b[i])\n          })\n        } else if (!isArrayA && !isArrayB) {\n          var keysA = Object.keys(a);\n          var keysB = Object.keys(b);\n          return keysA.length === keysB.length && keysA.every(function (key) {\n            return looseEqual(a[key], b[key])\n          })\n        } else {\n          /* istanbul ignore next */\n          return false\n        }\n      } catch (e) {\n        /* istanbul ignore next */\n        return false\n      }\n    } else if (!isObjectA && !isObjectB) {\n      return String(a) === String(b)\n    } else {\n      return false\n    }\n  }\n\n  /**\n   * Sanitizes html special characters from input strings. For mitigating risk of XSS attacks.\n   * @param rawText The raw input from the user that should be escaped.\n   */\n  function escapeHtml(rawText) {\n    return rawText\n      .replace(/</g, '&lt;')\n      .replace(/>/g, '&gt;')\n      .replace(/\"/g, '&quot;')\n      .replace(/'/g, '&apos;')\n  }\n\n  /**\n   * Escapes html tags and special symbols from all provided params which were returned from parseArgs().params.\n   * This method performs an in-place operation on the params object.\n   *\n   * @param {any} params Parameters as provided from `parseArgs().params`.\n   *                     May be either an array of strings or a string->any map.\n   *\n   * @returns The manipulated `params` object.\n   */\n  function escapeParams(params) {\n    if(params != null) {\n      Object.keys(params).forEach(function (key) {\n        if(typeof(params[key]) == 'string') {\n          params[key] = escapeHtml(params[key]);\n        }\n      });\n    }\n    return params\n  }\n\n  /*  */\n\n  function extend (Vue) {\n    if (!Vue.prototype.hasOwnProperty('$i18n')) {\n      // $FlowFixMe\n      Object.defineProperty(Vue.prototype, '$i18n', {\n        get: function get () { return this._i18n }\n      });\n    }\n\n    Vue.prototype.$t = function (key) {\n      var values = [], len = arguments.length - 1;\n      while ( len-- > 0 ) values[ len ] = arguments[ len + 1 ];\n\n      var i18n = this.$i18n;\n      return i18n._t.apply(i18n, [ key, i18n.locale, i18n._getMessages(), this ].concat( values ))\n    };\n\n    Vue.prototype.$tc = function (key, choice) {\n      var values = [], len = arguments.length - 2;\n      while ( len-- > 0 ) values[ len ] = arguments[ len + 2 ];\n\n      var i18n = this.$i18n;\n      return i18n._tc.apply(i18n, [ key, i18n.locale, i18n._getMessages(), this, choice ].concat( values ))\n    };\n\n    Vue.prototype.$te = function (key, locale) {\n      var i18n = this.$i18n;\n      return i18n._te(key, i18n.locale, i18n._getMessages(), locale)\n    };\n\n    Vue.prototype.$d = function (value) {\n      var ref;\n\n      var args = [], len = arguments.length - 1;\n      while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ];\n      return (ref = this.$i18n).d.apply(ref, [ value ].concat( args ))\n    };\n\n    Vue.prototype.$n = function (value) {\n      var ref;\n\n      var args = [], len = arguments.length - 1;\n      while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ];\n      return (ref = this.$i18n).n.apply(ref, [ value ].concat( args ))\n    };\n  }\n\n  /*  */\n\n  var mixin = {\n    beforeCreate: function beforeCreate () {\n      var options = this.$options;\n      options.i18n = options.i18n || (options.__i18n ? {} : null);\n\n      if (options.i18n) {\n        if (options.i18n instanceof VueI18n) {\n          // init locale messages via custom blocks\n          if (options.__i18n) {\n            try {\n              var localeMessages = options.i18n && options.i18n.messages ? options.i18n.messages : {};\n              options.__i18n.forEach(function (resource) {\n                localeMessages = merge(localeMessages, JSON.parse(resource));\n              });\n              Object.keys(localeMessages).forEach(function (locale) {\n                options.i18n.mergeLocaleMessage(locale, localeMessages[locale]);\n              });\n            } catch (e) {\n              {\n                error(\"Cannot parse locale messages via custom blocks.\", e);\n              }\n            }\n          }\n          this._i18n = options.i18n;\n          this._i18nWatcher = this._i18n.watchI18nData();\n        } else if (isPlainObject(options.i18n)) {\n          var rootI18n = this.$root && this.$root.$i18n && this.$root.$i18n instanceof VueI18n\n            ? this.$root.$i18n\n            : null;\n          // component local i18n\n          if (rootI18n) {\n            options.i18n.root = this.$root;\n            options.i18n.formatter = rootI18n.formatter;\n            options.i18n.fallbackLocale = rootI18n.fallbackLocale;\n            options.i18n.formatFallbackMessages = rootI18n.formatFallbackMessages;\n            options.i18n.silentTranslationWarn = rootI18n.silentTranslationWarn;\n            options.i18n.silentFallbackWarn = rootI18n.silentFallbackWarn;\n            options.i18n.pluralizationRules = rootI18n.pluralizationRules;\n            options.i18n.preserveDirectiveContent = rootI18n.preserveDirectiveContent;\n          }\n\n          // init locale messages via custom blocks\n          if (options.__i18n) {\n            try {\n              var localeMessages$1 = options.i18n && options.i18n.messages ? options.i18n.messages : {};\n              options.__i18n.forEach(function (resource) {\n                localeMessages$1 = merge(localeMessages$1, JSON.parse(resource));\n              });\n              options.i18n.messages = localeMessages$1;\n            } catch (e) {\n              {\n                warn(\"Cannot parse locale messages via custom blocks.\", e);\n              }\n            }\n          }\n\n          var ref = options.i18n;\n          var sharedMessages = ref.sharedMessages;\n          if (sharedMessages && isPlainObject(sharedMessages)) {\n            options.i18n.messages = merge(options.i18n.messages, sharedMessages);\n          }\n\n          this._i18n = new VueI18n(options.i18n);\n          this._i18nWatcher = this._i18n.watchI18nData();\n\n          if (options.i18n.sync === undefined || !!options.i18n.sync) {\n            this._localeWatcher = this.$i18n.watchLocale();\n          }\n\n          if (rootI18n) {\n            rootI18n.onComponentInstanceCreated(this._i18n);\n          }\n        } else {\n          {\n            warn(\"Cannot be interpreted 'i18n' option.\");\n          }\n        }\n      } else if (this.$root && this.$root.$i18n && this.$root.$i18n instanceof VueI18n) {\n        // root i18n\n        this._i18n = this.$root.$i18n;\n      } else if (options.parent && options.parent.$i18n && options.parent.$i18n instanceof VueI18n) {\n        // parent i18n\n        this._i18n = options.parent.$i18n;\n      }\n    },\n\n    beforeMount: function beforeMount () {\n      var options = this.$options;\n      options.i18n = options.i18n || (options.__i18n ? {} : null);\n\n      if (options.i18n) {\n        if (options.i18n instanceof VueI18n) {\n          // init locale messages via custom blocks\n          this._i18n.subscribeDataChanging(this);\n          this._subscribing = true;\n        } else if (isPlainObject(options.i18n)) {\n          this._i18n.subscribeDataChanging(this);\n          this._subscribing = true;\n        } else {\n          {\n            warn(\"Cannot be interpreted 'i18n' option.\");\n          }\n        }\n      } else if (this.$root && this.$root.$i18n && this.$root.$i18n instanceof VueI18n) {\n        this._i18n.subscribeDataChanging(this);\n        this._subscribing = true;\n      } else if (options.parent && options.parent.$i18n && options.parent.$i18n instanceof VueI18n) {\n        this._i18n.subscribeDataChanging(this);\n        this._subscribing = true;\n      }\n    },\n\n    mounted: function mounted () {\n      if (this !== this.$root && this.$options.__INTLIFY_META__ && this.$el) {\n        this.$el.setAttribute('data-intlify', this.$options.__INTLIFY_META__);\n      }\n    },\n\n    beforeDestroy: function beforeDestroy () {\n      if (!this._i18n) { return }\n\n      var self = this;\n      this.$nextTick(function () {\n        if (self._subscribing) {\n          self._i18n.unsubscribeDataChanging(self);\n          delete self._subscribing;\n        }\n\n        if (self._i18nWatcher) {\n          self._i18nWatcher();\n          self._i18n.destroyVM();\n          delete self._i18nWatcher;\n        }\n\n        if (self._localeWatcher) {\n          self._localeWatcher();\n          delete self._localeWatcher;\n        }\n      });\n    }\n  };\n\n  /*  */\n\n  var interpolationComponent = {\n    name: 'i18n',\n    functional: true,\n    props: {\n      tag: {\n        type: [String, Boolean, Object],\n        default: 'span'\n      },\n      path: {\n        type: String,\n        required: true\n      },\n      locale: {\n        type: String\n      },\n      places: {\n        type: [Array, Object]\n      }\n    },\n    render: function render (h, ref) {\n      var data = ref.data;\n      var parent = ref.parent;\n      var props = ref.props;\n      var slots = ref.slots;\n\n      var $i18n = parent.$i18n;\n      if (!$i18n) {\n        {\n          warn('Cannot find VueI18n instance!');\n        }\n        return\n      }\n\n      var path = props.path;\n      var locale = props.locale;\n      var places = props.places;\n      var params = slots();\n      var children = $i18n.i(\n        path,\n        locale,\n        onlyHasDefaultPlace(params) || places\n          ? useLegacyPlaces(params.default, places)\n          : params\n      );\n\n      var tag = (!!props.tag && props.tag !== true) || props.tag === false ? props.tag : 'span';\n      return tag ? h(tag, data, children) : children\n    }\n  };\n\n  function onlyHasDefaultPlace (params) {\n    var prop;\n    for (prop in params) {\n      if (prop !== 'default') { return false }\n    }\n    return Boolean(prop)\n  }\n\n  function useLegacyPlaces (children, places) {\n    var params = places ? createParamsFromPlaces(places) : {};\n\n    if (!children) { return params }\n\n    // Filter empty text nodes\n    children = children.filter(function (child) {\n      return child.tag || child.text.trim() !== ''\n    });\n\n    var everyPlace = children.every(vnodeHasPlaceAttribute);\n    if (everyPlace) {\n      warn('`place` attribute is deprecated in next major version. Please switch to Vue slots.');\n    }\n\n    return children.reduce(\n      everyPlace ? assignChildPlace : assignChildIndex,\n      params\n    )\n  }\n\n  function createParamsFromPlaces (places) {\n    {\n      warn('`places` prop is deprecated in next major version. Please switch to Vue slots.');\n    }\n\n    return Array.isArray(places)\n      ? places.reduce(assignChildIndex, {})\n      : Object.assign({}, places)\n  }\n\n  function assignChildPlace (params, child) {\n    if (child.data && child.data.attrs && child.data.attrs.place) {\n      params[child.data.attrs.place] = child;\n    }\n    return params\n  }\n\n  function assignChildIndex (params, child, index) {\n    params[index] = child;\n    return params\n  }\n\n  function vnodeHasPlaceAttribute (vnode) {\n    return Boolean(vnode.data && vnode.data.attrs && vnode.data.attrs.place)\n  }\n\n  /*  */\n\n  var numberComponent = {\n    name: 'i18n-n',\n    functional: true,\n    props: {\n      tag: {\n        type: [String, Boolean, Object],\n        default: 'span'\n      },\n      value: {\n        type: Number,\n        required: true\n      },\n      format: {\n        type: [String, Object]\n      },\n      locale: {\n        type: String\n      }\n    },\n    render: function render (h, ref) {\n      var props = ref.props;\n      var parent = ref.parent;\n      var data = ref.data;\n\n      var i18n = parent.$i18n;\n\n      if (!i18n) {\n        {\n          warn('Cannot find VueI18n instance!');\n        }\n        return null\n      }\n\n      var key = null;\n      var options = null;\n\n      if (isString(props.format)) {\n        key = props.format;\n      } else if (isObject(props.format)) {\n        if (props.format.key) {\n          key = props.format.key;\n        }\n\n        // Filter out number format options only\n        options = Object.keys(props.format).reduce(function (acc, prop) {\n          var obj;\n\n          if (includes(numberFormatKeys, prop)) {\n            return Object.assign({}, acc, ( obj = {}, obj[prop] = props.format[prop], obj ))\n          }\n          return acc\n        }, null);\n      }\n\n      var locale = props.locale || i18n.locale;\n      var parts = i18n._ntp(props.value, locale, key, options);\n\n      var values = parts.map(function (part, index) {\n        var obj;\n\n        var slot = data.scopedSlots && data.scopedSlots[part.type];\n        return slot ? slot(( obj = {}, obj[part.type] = part.value, obj.index = index, obj.parts = parts, obj )) : part.value\n      });\n\n      var tag = (!!props.tag && props.tag !== true) || props.tag === false ? props.tag : 'span';\n      return tag\n        ? h(tag, {\n          attrs: data.attrs,\n          'class': data['class'],\n          staticClass: data.staticClass\n        }, values)\n        : values\n    }\n  };\n\n  /*  */\n\n  function bind (el, binding, vnode) {\n    if (!assert(el, vnode)) { return }\n\n    t(el, binding, vnode);\n  }\n\n  function update (el, binding, vnode, oldVNode) {\n    if (!assert(el, vnode)) { return }\n\n    var i18n = vnode.context.$i18n;\n    if (localeEqual(el, vnode) &&\n      (looseEqual(binding.value, binding.oldValue) &&\n       looseEqual(el._localeMessage, i18n.getLocaleMessage(i18n.locale)))) { return }\n\n    t(el, binding, vnode);\n  }\n\n  function unbind (el, binding, vnode, oldVNode) {\n    var vm = vnode.context;\n    if (!vm) {\n      warn('Vue instance does not exists in VNode context');\n      return\n    }\n\n    var i18n = vnode.context.$i18n || {};\n    if (!binding.modifiers.preserve && !i18n.preserveDirectiveContent) {\n      el.textContent = '';\n    }\n    el._vt = undefined;\n    delete el['_vt'];\n    el._locale = undefined;\n    delete el['_locale'];\n    el._localeMessage = undefined;\n    delete el['_localeMessage'];\n  }\n\n  function assert (el, vnode) {\n    var vm = vnode.context;\n    if (!vm) {\n      warn('Vue instance does not exists in VNode context');\n      return false\n    }\n\n    if (!vm.$i18n) {\n      warn('VueI18n instance does not exists in Vue instance');\n      return false\n    }\n\n    return true\n  }\n\n  function localeEqual (el, vnode) {\n    var vm = vnode.context;\n    return el._locale === vm.$i18n.locale\n  }\n\n  function t (el, binding, vnode) {\n    var ref$1, ref$2;\n\n    var value = binding.value;\n\n    var ref = parseValue(value);\n    var path = ref.path;\n    var locale = ref.locale;\n    var args = ref.args;\n    var choice = ref.choice;\n    if (!path && !locale && !args) {\n      warn('value type not supported');\n      return\n    }\n\n    if (!path) {\n      warn('`path` is required in v-t directive');\n      return\n    }\n\n    var vm = vnode.context;\n    if (choice != null) {\n      el._vt = el.textContent = (ref$1 = vm.$i18n).tc.apply(ref$1, [ path, choice ].concat( makeParams(locale, args) ));\n    } else {\n      el._vt = el.textContent = (ref$2 = vm.$i18n).t.apply(ref$2, [ path ].concat( makeParams(locale, args) ));\n    }\n    el._locale = vm.$i18n.locale;\n    el._localeMessage = vm.$i18n.getLocaleMessage(vm.$i18n.locale);\n  }\n\n  function parseValue (value) {\n    var path;\n    var locale;\n    var args;\n    var choice;\n\n    if (isString(value)) {\n      path = value;\n    } else if (isPlainObject(value)) {\n      path = value.path;\n      locale = value.locale;\n      args = value.args;\n      choice = value.choice;\n    }\n\n    return { path: path, locale: locale, args: args, choice: choice }\n  }\n\n  function makeParams (locale, args) {\n    var params = [];\n\n    locale && params.push(locale);\n    if (args && (Array.isArray(args) || isPlainObject(args))) {\n      params.push(args);\n    }\n\n    return params\n  }\n\n  var Vue;\n\n  function install (_Vue) {\n    /* istanbul ignore if */\n    if (install.installed && _Vue === Vue) {\n      warn('already installed.');\n      return\n    }\n    install.installed = true;\n\n    Vue = _Vue;\n\n    var version = (Vue.version && Number(Vue.version.split('.')[0])) || -1;\n    /* istanbul ignore if */\n    if (version < 2) {\n      warn((\"vue-i18n (\" + (install.version) + \") need to use Vue 2.0 or later (Vue: \" + (Vue.version) + \").\"));\n      return\n    }\n\n    extend(Vue);\n    Vue.mixin(mixin);\n    Vue.directive('t', { bind: bind, update: update, unbind: unbind });\n    Vue.component(interpolationComponent.name, interpolationComponent);\n    Vue.component(numberComponent.name, numberComponent);\n\n    // use simple mergeStrategies to prevent i18n instance lose '__proto__'\n    var strats = Vue.config.optionMergeStrategies;\n    strats.i18n = function (parentVal, childVal) {\n      return childVal === undefined\n        ? parentVal\n        : childVal\n    };\n  }\n\n  /*  */\n\n  var BaseFormatter = function BaseFormatter () {\n    this._caches = Object.create(null);\n  };\n\n  BaseFormatter.prototype.interpolate = function interpolate (message, values) {\n    if (!values) {\n      return [message]\n    }\n    var tokens = this._caches[message];\n    if (!tokens) {\n      tokens = parse(message);\n      this._caches[message] = tokens;\n    }\n    return compile(tokens, values)\n  };\n\n\n\n  var RE_TOKEN_LIST_VALUE = /^(?:\\d)+/;\n  var RE_TOKEN_NAMED_VALUE = /^(?:\\w)+/;\n\n  function parse (format) {\n    var tokens = [];\n    var position = 0;\n\n    var text = '';\n    while (position < format.length) {\n      var char = format[position++];\n      if (char === '{') {\n        if (text) {\n          tokens.push({ type: 'text', value: text });\n        }\n\n        text = '';\n        var sub = '';\n        char = format[position++];\n        while (char !== undefined && char !== '}') {\n          sub += char;\n          char = format[position++];\n        }\n        var isClosed = char === '}';\n\n        var type = RE_TOKEN_LIST_VALUE.test(sub)\n          ? 'list'\n          : isClosed && RE_TOKEN_NAMED_VALUE.test(sub)\n            ? 'named'\n            : 'unknown';\n        tokens.push({ value: sub, type: type });\n      } else if (char === '%') {\n        // when found rails i18n syntax, skip text capture\n        if (format[(position)] !== '{') {\n          text += char;\n        }\n      } else {\n        text += char;\n      }\n    }\n\n    text && tokens.push({ type: 'text', value: text });\n\n    return tokens\n  }\n\n  function compile (tokens, values) {\n    var compiled = [];\n    var index = 0;\n\n    var mode = Array.isArray(values)\n      ? 'list'\n      : isObject(values)\n        ? 'named'\n        : 'unknown';\n    if (mode === 'unknown') { return compiled }\n\n    while (index < tokens.length) {\n      var token = tokens[index];\n      switch (token.type) {\n        case 'text':\n          compiled.push(token.value);\n          break\n        case 'list':\n          compiled.push(values[parseInt(token.value, 10)]);\n          break\n        case 'named':\n          if (mode === 'named') {\n            compiled.push((values)[token.value]);\n          } else {\n            {\n              warn((\"Type of token '\" + (token.type) + \"' and format of value '\" + mode + \"' don't match!\"));\n            }\n          }\n          break\n        case 'unknown':\n          {\n            warn(\"Detect 'unknown' type of token!\");\n          }\n          break\n      }\n      index++;\n    }\n\n    return compiled\n  }\n\n  /*  */\n\n  /**\n   *  Path parser\n   *  - Inspired:\n   *    Vue.js Path parser\n   */\n\n  // actions\n  var APPEND = 0;\n  var PUSH = 1;\n  var INC_SUB_PATH_DEPTH = 2;\n  var PUSH_SUB_PATH = 3;\n\n  // states\n  var BEFORE_PATH = 0;\n  var IN_PATH = 1;\n  var BEFORE_IDENT = 2;\n  var IN_IDENT = 3;\n  var IN_SUB_PATH = 4;\n  var IN_SINGLE_QUOTE = 5;\n  var IN_DOUBLE_QUOTE = 6;\n  var AFTER_PATH = 7;\n  var ERROR = 8;\n\n  var pathStateMachine = [];\n\n  pathStateMachine[BEFORE_PATH] = {\n    'ws': [BEFORE_PATH],\n    'ident': [IN_IDENT, APPEND],\n    '[': [IN_SUB_PATH],\n    'eof': [AFTER_PATH]\n  };\n\n  pathStateMachine[IN_PATH] = {\n    'ws': [IN_PATH],\n    '.': [BEFORE_IDENT],\n    '[': [IN_SUB_PATH],\n    'eof': [AFTER_PATH]\n  };\n\n  pathStateMachine[BEFORE_IDENT] = {\n    'ws': [BEFORE_IDENT],\n    'ident': [IN_IDENT, APPEND],\n    '0': [IN_IDENT, APPEND],\n    'number': [IN_IDENT, APPEND]\n  };\n\n  pathStateMachine[IN_IDENT] = {\n    'ident': [IN_IDENT, APPEND],\n    '0': [IN_IDENT, APPEND],\n    'number': [IN_IDENT, APPEND],\n    'ws': [IN_PATH, PUSH],\n    '.': [BEFORE_IDENT, PUSH],\n    '[': [IN_SUB_PATH, PUSH],\n    'eof': [AFTER_PATH, PUSH]\n  };\n\n  pathStateMachine[IN_SUB_PATH] = {\n    \"'\": [IN_SINGLE_QUOTE, APPEND],\n    '\"': [IN_DOUBLE_QUOTE, APPEND],\n    '[': [IN_SUB_PATH, INC_SUB_PATH_DEPTH],\n    ']': [IN_PATH, PUSH_SUB_PATH],\n    'eof': ERROR,\n    'else': [IN_SUB_PATH, APPEND]\n  };\n\n  pathStateMachine[IN_SINGLE_QUOTE] = {\n    \"'\": [IN_SUB_PATH, APPEND],\n    'eof': ERROR,\n    'else': [IN_SINGLE_QUOTE, APPEND]\n  };\n\n  pathStateMachine[IN_DOUBLE_QUOTE] = {\n    '\"': [IN_SUB_PATH, APPEND],\n    'eof': ERROR,\n    'else': [IN_DOUBLE_QUOTE, APPEND]\n  };\n\n  /**\n   * Check if an expression is a literal value.\n   */\n\n  var literalValueRE = /^\\s?(?:true|false|-?[\\d.]+|'[^']*'|\"[^\"]*\")\\s?$/;\n  function isLiteral (exp) {\n    return literalValueRE.test(exp)\n  }\n\n  /**\n   * Strip quotes from a string\n   */\n\n  function stripQuotes (str) {\n    var a = str.charCodeAt(0);\n    var b = str.charCodeAt(str.length - 1);\n    return a === b && (a === 0x22 || a === 0x27)\n      ? str.slice(1, -1)\n      : str\n  }\n\n  /**\n   * Determine the type of a character in a keypath.\n   */\n\n  function getPathCharType (ch) {\n    if (ch === undefined || ch === null) { return 'eof' }\n\n    var code = ch.charCodeAt(0);\n\n    switch (code) {\n      case 0x5B: // [\n      case 0x5D: // ]\n      case 0x2E: // .\n      case 0x22: // \"\n      case 0x27: // '\n        return ch\n\n      case 0x5F: // _\n      case 0x24: // $\n      case 0x2D: // -\n        return 'ident'\n\n      case 0x09: // Tab\n      case 0x0A: // Newline\n      case 0x0D: // Return\n      case 0xA0:  // No-break space\n      case 0xFEFF:  // Byte Order Mark\n      case 0x2028:  // Line Separator\n      case 0x2029:  // Paragraph Separator\n        return 'ws'\n    }\n\n    return 'ident'\n  }\n\n  /**\n   * Format a subPath, return its plain form if it is\n   * a literal string or number. Otherwise prepend the\n   * dynamic indicator (*).\n   */\n\n  function formatSubPath (path) {\n    var trimmed = path.trim();\n    // invalid leading 0\n    if (path.charAt(0) === '0' && isNaN(path)) { return false }\n\n    return isLiteral(trimmed) ? stripQuotes(trimmed) : '*' + trimmed\n  }\n\n  /**\n   * Parse a string path into an array of segments\n   */\n\n  function parse$1 (path) {\n    var keys = [];\n    var index = -1;\n    var mode = BEFORE_PATH;\n    var subPathDepth = 0;\n    var c;\n    var key;\n    var newChar;\n    var type;\n    var transition;\n    var action;\n    var typeMap;\n    var actions = [];\n\n    actions[PUSH] = function () {\n      if (key !== undefined) {\n        keys.push(key);\n        key = undefined;\n      }\n    };\n\n    actions[APPEND] = function () {\n      if (key === undefined) {\n        key = newChar;\n      } else {\n        key += newChar;\n      }\n    };\n\n    actions[INC_SUB_PATH_DEPTH] = function () {\n      actions[APPEND]();\n      subPathDepth++;\n    };\n\n    actions[PUSH_SUB_PATH] = function () {\n      if (subPathDepth > 0) {\n        subPathDepth--;\n        mode = IN_SUB_PATH;\n        actions[APPEND]();\n      } else {\n        subPathDepth = 0;\n        if (key === undefined) { return false }\n        key = formatSubPath(key);\n        if (key === false) {\n          return false\n        } else {\n          actions[PUSH]();\n        }\n      }\n    };\n\n    function maybeUnescapeQuote () {\n      var nextChar = path[index + 1];\n      if ((mode === IN_SINGLE_QUOTE && nextChar === \"'\") ||\n        (mode === IN_DOUBLE_QUOTE && nextChar === '\"')) {\n        index++;\n        newChar = '\\\\' + nextChar;\n        actions[APPEND]();\n        return true\n      }\n    }\n\n    while (mode !== null) {\n      index++;\n      c = path[index];\n\n      if (c === '\\\\' && maybeUnescapeQuote()) {\n        continue\n      }\n\n      type = getPathCharType(c);\n      typeMap = pathStateMachine[mode];\n      transition = typeMap[type] || typeMap['else'] || ERROR;\n\n      if (transition === ERROR) {\n        return // parse error\n      }\n\n      mode = transition[0];\n      action = actions[transition[1]];\n      if (action) {\n        newChar = transition[2];\n        newChar = newChar === undefined\n          ? c\n          : newChar;\n        if (action() === false) {\n          return\n        }\n      }\n\n      if (mode === AFTER_PATH) {\n        return keys\n      }\n    }\n  }\n\n\n\n\n\n  var I18nPath = function I18nPath () {\n    this._cache = Object.create(null);\n  };\n\n  /**\n   * External parse that check for a cache hit first\n   */\n  I18nPath.prototype.parsePath = function parsePath (path) {\n    var hit = this._cache[path];\n    if (!hit) {\n      hit = parse$1(path);\n      if (hit) {\n        this._cache[path] = hit;\n      }\n    }\n    return hit || []\n  };\n\n  /**\n   * Get path value from path string\n   */\n  I18nPath.prototype.getPathValue = function getPathValue (obj, path) {\n    if (!isObject(obj)) { return null }\n\n    var paths = this.parsePath(path);\n    if (paths.length === 0) {\n      return null\n    } else {\n      var length = paths.length;\n      var last = obj;\n      var i = 0;\n      while (i < length) {\n        var value = last[paths[i]];\n        if (value === undefined || value === null) {\n          return null\n        }\n        last = value;\n        i++;\n      }\n\n      return last\n    }\n  };\n\n  /*  */\n\n\n\n  var htmlTagMatcher = /<\\/?[\\w\\s=\"/.':;#-\\/]+>/;\n  var linkKeyMatcher = /(?:@(?:\\.[a-z]+)?:(?:[\\w\\-_|.]+|\\([\\w\\-_|.]+\\)))/g;\n  var linkKeyPrefixMatcher = /^@(?:\\.([a-z]+))?:/;\n  var bracketsMatcher = /[()]/g;\n  var defaultModifiers = {\n    'upper': function (str) { return str.toLocaleUpperCase(); },\n    'lower': function (str) { return str.toLocaleLowerCase(); },\n    'capitalize': function (str) { return (\"\" + (str.charAt(0).toLocaleUpperCase()) + (str.substr(1))); }\n  };\n\n  var defaultFormatter = new BaseFormatter();\n\n  var VueI18n = function VueI18n (options) {\n    var this$1 = this;\n    if ( options === void 0 ) options = {};\n\n    // Auto install if it is not done yet and `window` has `Vue`.\n    // To allow users to avoid auto-installation in some cases,\n    // this code should be placed here. See #290\n    /* istanbul ignore if */\n    if (!Vue && typeof window !== 'undefined' && window.Vue) {\n      install(window.Vue);\n    }\n\n    var locale = options.locale || 'en-US';\n    var fallbackLocale = options.fallbackLocale === false\n      ? false\n      : options.fallbackLocale || 'en-US';\n    var messages = options.messages || {};\n    var dateTimeFormats = options.dateTimeFormats || {};\n    var numberFormats = options.numberFormats || {};\n\n    this._vm = null;\n    this._formatter = options.formatter || defaultFormatter;\n    this._modifiers = options.modifiers || {};\n    this._missing = options.missing || null;\n    this._root = options.root || null;\n    this._sync = options.sync === undefined ? true : !!options.sync;\n    this._fallbackRoot = options.fallbackRoot === undefined\n      ? true\n      : !!options.fallbackRoot;\n    this._formatFallbackMessages = options.formatFallbackMessages === undefined\n      ? false\n      : !!options.formatFallbackMessages;\n    this._silentTranslationWarn = options.silentTranslationWarn === undefined\n      ? false\n      : options.silentTranslationWarn;\n    this._silentFallbackWarn = options.silentFallbackWarn === undefined\n      ? false\n      : !!options.silentFallbackWarn;\n    this._dateTimeFormatters = {};\n    this._numberFormatters = {};\n    this._path = new I18nPath();\n    this._dataListeners = new Set();\n    this._componentInstanceCreatedListener = options.componentInstanceCreatedListener || null;\n    this._preserveDirectiveContent = options.preserveDirectiveContent === undefined\n      ? false\n      : !!options.preserveDirectiveContent;\n    this.pluralizationRules = options.pluralizationRules || {};\n    this._warnHtmlInMessage = options.warnHtmlInMessage || 'off';\n    this._postTranslation = options.postTranslation || null;\n    this._escapeParameterHtml = options.escapeParameterHtml || false;\n\n    /**\n     * @param choice {number} a choice index given by the input to $tc: `$tc('path.to.rule', choiceIndex)`\n     * @param choicesLength {number} an overall amount of available choices\n     * @returns a final choice index\n    */\n    this.getChoiceIndex = function (choice, choicesLength) {\n      var thisPrototype = Object.getPrototypeOf(this$1);\n      if (thisPrototype && thisPrototype.getChoiceIndex) {\n        var prototypeGetChoiceIndex = (thisPrototype.getChoiceIndex);\n        return (prototypeGetChoiceIndex).call(this$1, choice, choicesLength)\n      }\n\n      // Default (old) getChoiceIndex implementation - english-compatible\n      var defaultImpl = function (_choice, _choicesLength) {\n        _choice = Math.abs(_choice);\n\n        if (_choicesLength === 2) {\n          return _choice\n            ? _choice > 1\n              ? 1\n              : 0\n            : 1\n        }\n\n        return _choice ? Math.min(_choice, 2) : 0\n      };\n\n      if (this$1.locale in this$1.pluralizationRules) {\n        return this$1.pluralizationRules[this$1.locale].apply(this$1, [choice, choicesLength])\n      } else {\n        return defaultImpl(choice, choicesLength)\n      }\n    };\n\n\n    this._exist = function (message, key) {\n      if (!message || !key) { return false }\n      if (!isNull(this$1._path.getPathValue(message, key))) { return true }\n      // fallback for flat key\n      if (message[key]) { return true }\n      return false\n    };\n\n    if (this._warnHtmlInMessage === 'warn' || this._warnHtmlInMessage === 'error') {\n      Object.keys(messages).forEach(function (locale) {\n        this$1._checkLocaleMessage(locale, this$1._warnHtmlInMessage, messages[locale]);\n      });\n    }\n\n    this._initVM({\n      locale: locale,\n      fallbackLocale: fallbackLocale,\n      messages: messages,\n      dateTimeFormats: dateTimeFormats,\n      numberFormats: numberFormats\n    });\n  };\n\n  var prototypeAccessors = { vm: { configurable: true },messages: { configurable: true },dateTimeFormats: { configurable: true },numberFormats: { configurable: true },availableLocales: { configurable: true },locale: { configurable: true },fallbackLocale: { configurable: true },formatFallbackMessages: { configurable: true },missing: { configurable: true },formatter: { configurable: true },silentTranslationWarn: { configurable: true },silentFallbackWarn: { configurable: true },preserveDirectiveContent: { configurable: true },warnHtmlInMessage: { configurable: true },postTranslation: { configurable: true } };\n\n  VueI18n.prototype._checkLocaleMessage = function _checkLocaleMessage (locale, level, message) {\n    var paths = [];\n\n    var fn = function (level, locale, message, paths) {\n      if (isPlainObject(message)) {\n        Object.keys(message).forEach(function (key) {\n          var val = message[key];\n          if (isPlainObject(val)) {\n            paths.push(key);\n            paths.push('.');\n            fn(level, locale, val, paths);\n            paths.pop();\n            paths.pop();\n          } else {\n            paths.push(key);\n            fn(level, locale, val, paths);\n            paths.pop();\n          }\n        });\n      } else if (isArray(message)) {\n        message.forEach(function (item, index) {\n          if (isPlainObject(item)) {\n            paths.push((\"[\" + index + \"]\"));\n            paths.push('.');\n            fn(level, locale, item, paths);\n            paths.pop();\n            paths.pop();\n          } else {\n            paths.push((\"[\" + index + \"]\"));\n            fn(level, locale, item, paths);\n            paths.pop();\n          }\n        });\n      } else if (isString(message)) {\n        var ret = htmlTagMatcher.test(message);\n        if (ret) {\n          var msg = \"Detected HTML in message '\" + message + \"' of keypath '\" + (paths.join('')) + \"' at '\" + locale + \"'. Consider component interpolation with '<i18n>' to avoid XSS. See https://bit.ly/2ZqJzkp\";\n          if (level === 'warn') {\n            warn(msg);\n          } else if (level === 'error') {\n            error(msg);\n          }\n        }\n      }\n    };\n\n    fn(level, locale, message, paths);\n  };\n\n  VueI18n.prototype._initVM = function _initVM (data) {\n    var silent = Vue.config.silent;\n    Vue.config.silent = true;\n    this._vm = new Vue({ data: data });\n    Vue.config.silent = silent;\n  };\n\n  VueI18n.prototype.destroyVM = function destroyVM () {\n    this._vm.$destroy();\n  };\n\n  VueI18n.prototype.subscribeDataChanging = function subscribeDataChanging (vm) {\n    this._dataListeners.add(vm);\n  };\n\n  VueI18n.prototype.unsubscribeDataChanging = function unsubscribeDataChanging (vm) {\n    remove(this._dataListeners, vm);\n  };\n\n  VueI18n.prototype.watchI18nData = function watchI18nData () {\n    var self = this;\n    return this._vm.$watch('$data', function () {\n      self._dataListeners.forEach(function (e) {\n        Vue.nextTick(function () {\n          e && e.$forceUpdate();\n        });\n      });\n    }, { deep: true })\n  };\n\n  VueI18n.prototype.watchLocale = function watchLocale () {\n    /* istanbul ignore if */\n    if (!this._sync || !this._root) { return null }\n    var target = this._vm;\n    return this._root.$i18n.vm.$watch('locale', function (val) {\n      target.$set(target, 'locale', val);\n      target.$forceUpdate();\n    }, { immediate: true })\n  };\n\n  VueI18n.prototype.onComponentInstanceCreated = function onComponentInstanceCreated (newI18n) {\n    if (this._componentInstanceCreatedListener) {\n      this._componentInstanceCreatedListener(newI18n, this);\n    }\n  };\n\n  prototypeAccessors.vm.get = function () { return this._vm };\n\n  prototypeAccessors.messages.get = function () { return looseClone(this._getMessages()) };\n  prototypeAccessors.dateTimeFormats.get = function () { return looseClone(this._getDateTimeFormats()) };\n  prototypeAccessors.numberFormats.get = function () { return looseClone(this._getNumberFormats()) };\n  prototypeAccessors.availableLocales.get = function () { return Object.keys(this.messages).sort() };\n\n  prototypeAccessors.locale.get = function () { return this._vm.locale };\n  prototypeAccessors.locale.set = function (locale) {\n    this._vm.$set(this._vm, 'locale', locale);\n  };\n\n  prototypeAccessors.fallbackLocale.get = function () { return this._vm.fallbackLocale };\n  prototypeAccessors.fallbackLocale.set = function (locale) {\n    this._localeChainCache = {};\n    this._vm.$set(this._vm, 'fallbackLocale', locale);\n  };\n\n  prototypeAccessors.formatFallbackMessages.get = function () { return this._formatFallbackMessages };\n  prototypeAccessors.formatFallbackMessages.set = function (fallback) { this._formatFallbackMessages = fallback; };\n\n  prototypeAccessors.missing.get = function () { return this._missing };\n  prototypeAccessors.missing.set = function (handler) { this._missing = handler; };\n\n  prototypeAccessors.formatter.get = function () { return this._formatter };\n  prototypeAccessors.formatter.set = function (formatter) { this._formatter = formatter; };\n\n  prototypeAccessors.silentTranslationWarn.get = function () { return this._silentTranslationWarn };\n  prototypeAccessors.silentTranslationWarn.set = function (silent) { this._silentTranslationWarn = silent; };\n\n  prototypeAccessors.silentFallbackWarn.get = function () { return this._silentFallbackWarn };\n  prototypeAccessors.silentFallbackWarn.set = function (silent) { this._silentFallbackWarn = silent; };\n\n  prototypeAccessors.preserveDirectiveContent.get = function () { return this._preserveDirectiveContent };\n  prototypeAccessors.preserveDirectiveContent.set = function (preserve) { this._preserveDirectiveContent = preserve; };\n\n  prototypeAccessors.warnHtmlInMessage.get = function () { return this._warnHtmlInMessage };\n  prototypeAccessors.warnHtmlInMessage.set = function (level) {\n      var this$1 = this;\n\n    var orgLevel = this._warnHtmlInMessage;\n    this._warnHtmlInMessage = level;\n    if (orgLevel !== level && (level === 'warn' || level === 'error')) {\n      var messages = this._getMessages();\n      Object.keys(messages).forEach(function (locale) {\n        this$1._checkLocaleMessage(locale, this$1._warnHtmlInMessage, messages[locale]);\n      });\n    }\n  };\n\n  prototypeAccessors.postTranslation.get = function () { return this._postTranslation };\n  prototypeAccessors.postTranslation.set = function (handler) { this._postTranslation = handler; };\n\n  VueI18n.prototype._getMessages = function _getMessages () { return this._vm.messages };\n  VueI18n.prototype._getDateTimeFormats = function _getDateTimeFormats () { return this._vm.dateTimeFormats };\n  VueI18n.prototype._getNumberFormats = function _getNumberFormats () { return this._vm.numberFormats };\n\n  VueI18n.prototype._warnDefault = function _warnDefault (locale, key, result, vm, values, interpolateMode) {\n    if (!isNull(result)) { return result }\n    if (this._missing) {\n      var missingRet = this._missing.apply(null, [locale, key, vm, values]);\n      if (isString(missingRet)) {\n        return missingRet\n      }\n    } else {\n      if (!this._isSilentTranslationWarn(key)) {\n        warn(\n          \"Cannot translate the value of keypath '\" + key + \"'. \" +\n          'Use the value of keypath as default.'\n        );\n      }\n    }\n\n    if (this._formatFallbackMessages) {\n      var parsedArgs = parseArgs.apply(void 0, values);\n      return this._render(key, interpolateMode, parsedArgs.params, key)\n    } else {\n      return key\n    }\n  };\n\n  VueI18n.prototype._isFallbackRoot = function _isFallbackRoot (val) {\n    return !val && !isNull(this._root) && this._fallbackRoot\n  };\n\n  VueI18n.prototype._isSilentFallbackWarn = function _isSilentFallbackWarn (key) {\n    return this._silentFallbackWarn instanceof RegExp\n      ? this._silentFallbackWarn.test(key)\n      : this._silentFallbackWarn\n  };\n\n  VueI18n.prototype._isSilentFallback = function _isSilentFallback (locale, key) {\n    return this._isSilentFallbackWarn(key) && (this._isFallbackRoot() || locale !== this.fallbackLocale)\n  };\n\n  VueI18n.prototype._isSilentTranslationWarn = function _isSilentTranslationWarn (key) {\n    return this._silentTranslationWarn instanceof RegExp\n      ? this._silentTranslationWarn.test(key)\n      : this._silentTranslationWarn\n  };\n\n  VueI18n.prototype._interpolate = function _interpolate (\n    locale,\n    message,\n    key,\n    host,\n    interpolateMode,\n    values,\n    visitedLinkStack\n  ) {\n    if (!message) { return null }\n\n    var pathRet = this._path.getPathValue(message, key);\n    if (isArray(pathRet) || isPlainObject(pathRet)) { return pathRet }\n\n    var ret;\n    if (isNull(pathRet)) {\n      /* istanbul ignore else */\n      if (isPlainObject(message)) {\n        ret = message[key];\n        if (!(isString(ret) || isFunction(ret))) {\n          if (!this._isSilentTranslationWarn(key) && !this._isSilentFallback(locale, key)) {\n            warn((\"Value of key '\" + key + \"' is not a string or function !\"));\n          }\n          return null\n        }\n      } else {\n        return null\n      }\n    } else {\n      /* istanbul ignore else */\n      if (isString(pathRet) || isFunction(pathRet)) {\n        ret = pathRet;\n      } else {\n        if (!this._isSilentTranslationWarn(key) && !this._isSilentFallback(locale, key)) {\n          warn((\"Value of key '\" + key + \"' is not a string or function!\"));\n        }\n        return null\n      }\n    }\n\n    // Check for the existence of links within the translated string\n    if (isString(ret) && (ret.indexOf('@:') >= 0 || ret.indexOf('@.') >= 0)) {\n      ret = this._link(locale, message, ret, host, 'raw', values, visitedLinkStack);\n    }\n\n    return this._render(ret, interpolateMode, values, key)\n  };\n\n  VueI18n.prototype._link = function _link (\n    locale,\n    message,\n    str,\n    host,\n    interpolateMode,\n    values,\n    visitedLinkStack\n  ) {\n    var ret = str;\n\n    // Match all the links within the local\n    // We are going to replace each of\n    // them with its translation\n    var matches = ret.match(linkKeyMatcher);\n      \n    // eslint-disable-next-line no-autofix/prefer-const\n    for (var idx in matches) {\n      // ie compatible: filter custom array\n      // prototype method\n      if (!matches.hasOwnProperty(idx)) {\n        continue\n      }\n      var link = matches[idx];\n      var linkKeyPrefixMatches = link.match(linkKeyPrefixMatcher);\n      var linkPrefix = linkKeyPrefixMatches[0];\n        var formatterName = linkKeyPrefixMatches[1];\n\n      // Remove the leading @:, @.case: and the brackets\n      var linkPlaceholder = link.replace(linkPrefix, '').replace(bracketsMatcher, '');\n\n      if (includes(visitedLinkStack, linkPlaceholder)) {\n        {\n          warn((\"Circular reference found. \\\"\" + link + \"\\\" is already visited in the chain of \" + (visitedLinkStack.reverse().join(' <- '))));\n        }\n        return ret\n      }\n      visitedLinkStack.push(linkPlaceholder);\n\n      // Translate the link\n      var translated = this._interpolate(\n        locale, message, linkPlaceholder, host,\n        interpolateMode === 'raw' ? 'string' : interpolateMode,\n        interpolateMode === 'raw' ? undefined : values,\n        visitedLinkStack\n      );\n\n      if (this._isFallbackRoot(translated)) {\n        if (!this._isSilentTranslationWarn(linkPlaceholder)) {\n          warn((\"Fall back to translate the link placeholder '\" + linkPlaceholder + \"' with root locale.\"));\n        }\n        /* istanbul ignore if */\n        if (!this._root) { throw Error('unexpected error') }\n        var root = this._root.$i18n;\n        translated = root._translate(\n          root._getMessages(), root.locale, root.fallbackLocale,\n          linkPlaceholder, host, interpolateMode, values\n        );\n      }\n      translated = this._warnDefault(\n        locale, linkPlaceholder, translated, host,\n        isArray(values) ? values : [values],\n        interpolateMode\n      );\n\n      if (this._modifiers.hasOwnProperty(formatterName)) {\n        translated = this._modifiers[formatterName](translated);\n      } else if (defaultModifiers.hasOwnProperty(formatterName)) {\n        translated = defaultModifiers[formatterName](translated);\n      }\n\n      visitedLinkStack.pop();\n\n      // Replace the link with the translated\n      ret = !translated ? ret : ret.replace(link, translated);\n    }\n\n    return ret\n  };\n\n  VueI18n.prototype._createMessageContext = function _createMessageContext (values, formatter, path, interpolateMode) {\n      var this$1 = this;\n\n    var _list = isArray(values) ? values : [];\n    var _named = isObject(values) ? values : {};\n    var list = function (index) { return _list[index]; };\n    var named = function (key) { return _named[key]; };\n    var messages = this._getMessages();\n    var locale = this.locale;\n\n    return {\n      list: list,\n      named: named,\n      values: values,\n      formatter: formatter,\n      path: path,\n      messages: messages,\n      locale: locale,\n      linked: function (linkedKey) { return this$1._interpolate(locale, messages[locale] || {}, linkedKey, null, interpolateMode, undefined, [linkedKey]); }\n    }\n  };\n\n  VueI18n.prototype._render = function _render (message, interpolateMode, values, path) {\n    if (isFunction(message)) {\n      return message(\n        this._createMessageContext(values, this._formatter || defaultFormatter, path, interpolateMode)\n      )\n    }\n\n    var ret = this._formatter.interpolate(message, values, path);\n\n    // If the custom formatter refuses to work - apply the default one\n    if (!ret) {\n      ret = defaultFormatter.interpolate(message, values, path);\n    }\n\n    // if interpolateMode is **not** 'string' ('row'),\n    // return the compiled data (e.g. ['foo', VNode, 'bar']) with formatter\n    return interpolateMode === 'string' && !isString(ret) ? ret.join('') : ret\n  };\n\n  VueI18n.prototype._appendItemToChain = function _appendItemToChain (chain, item, blocks) {\n    var follow = false;\n    if (!includes(chain, item)) {\n      follow = true;\n      if (item) {\n        follow = item[item.length - 1] !== '!';\n        item = item.replace(/!/g, '');\n        chain.push(item);\n        if (blocks && blocks[item]) {\n          follow = blocks[item];\n        }\n      }\n    }\n    return follow\n  };\n\n  VueI18n.prototype._appendLocaleToChain = function _appendLocaleToChain (chain, locale, blocks) {\n    var follow;\n    var tokens = locale.split('-');\n    do {\n      var item = tokens.join('-');\n      follow = this._appendItemToChain(chain, item, blocks);\n      tokens.splice(-1, 1);\n    } while (tokens.length && (follow === true))\n    return follow\n  };\n\n  VueI18n.prototype._appendBlockToChain = function _appendBlockToChain (chain, block, blocks) {\n    var follow = true;\n    for (var i = 0; (i < block.length) && (isBoolean(follow)); i++) {\n      var locale = block[i];\n      if (isString(locale)) {\n        follow = this._appendLocaleToChain(chain, locale, blocks);\n      }\n    }\n    return follow\n  };\n\n  VueI18n.prototype._getLocaleChain = function _getLocaleChain (start, fallbackLocale) {\n    if (start === '') { return [] }\n\n    if (!this._localeChainCache) {\n      this._localeChainCache = {};\n    }\n\n    var chain = this._localeChainCache[start];\n    if (!chain) {\n      if (!fallbackLocale) {\n        fallbackLocale = this.fallbackLocale;\n      }\n      chain = [];\n\n      // first block defined by start\n      var block = [start];\n\n      // while any intervening block found\n      while (isArray(block)) {\n        block = this._appendBlockToChain(\n          chain,\n          block,\n          fallbackLocale\n        );\n      }\n\n      // last block defined by default\n      var defaults;\n      if (isArray(fallbackLocale)) {\n        defaults = fallbackLocale;\n      } else if (isObject(fallbackLocale)) {\n        /* $FlowFixMe */\n        if (fallbackLocale['default']) {\n          defaults = fallbackLocale['default'];\n        } else {\n          defaults = null;\n        }\n      } else {\n        defaults = fallbackLocale;\n      }\n\n      // convert defaults to array\n      if (isString(defaults)) {\n        block = [defaults];\n      } else {\n        block = defaults;\n      }\n      if (block) {\n        this._appendBlockToChain(\n          chain,\n          block,\n          null\n        );\n      }\n      this._localeChainCache[start] = chain;\n    }\n    return chain\n  };\n\n  VueI18n.prototype._translate = function _translate (\n    messages,\n    locale,\n    fallback,\n    key,\n    host,\n    interpolateMode,\n    args\n  ) {\n    var chain = this._getLocaleChain(locale, fallback);\n    var res;\n    for (var i = 0; i < chain.length; i++) {\n      var step = chain[i];\n      res =\n        this._interpolate(step, messages[step], key, host, interpolateMode, args, [key]);\n      if (!isNull(res)) {\n        if (step !== locale && \"development\" !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n          warn((\"Fall back to translate the keypath '\" + key + \"' with '\" + step + \"' locale.\"));\n        }\n        return res\n      }\n    }\n    return null\n  };\n\n  VueI18n.prototype._t = function _t (key, _locale, messages, host) {\n      var ref;\n\n      var values = [], len = arguments.length - 4;\n      while ( len-- > 0 ) values[ len ] = arguments[ len + 4 ];\n    if (!key) { return '' }\n\n    var parsedArgs = parseArgs.apply(void 0, values);\n    if(this._escapeParameterHtml) {\n      parsedArgs.params = escapeParams(parsedArgs.params);\n    }\n\n    var locale = parsedArgs.locale || _locale;\n\n    var ret = this._translate(\n      messages, locale, this.fallbackLocale, key,\n      host, 'string', parsedArgs.params\n    );\n    if (this._isFallbackRoot(ret)) {\n      if (!this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n        warn((\"Fall back to translate the keypath '\" + key + \"' with root locale.\"));\n      }\n      /* istanbul ignore if */\n      if (!this._root) { throw Error('unexpected error') }\n      return (ref = this._root).$t.apply(ref, [ key ].concat( values ))\n    } else {\n      ret = this._warnDefault(locale, key, ret, host, values, 'string');\n      if (this._postTranslation && ret !== null && ret !== undefined) {\n        ret = this._postTranslation(ret, key);\n      }\n      return ret\n    }\n  };\n\n  VueI18n.prototype.t = function t (key) {\n      var ref;\n\n      var values = [], len = arguments.length - 1;\n      while ( len-- > 0 ) values[ len ] = arguments[ len + 1 ];\n    return (ref = this)._t.apply(ref, [ key, this.locale, this._getMessages(), null ].concat( values ))\n  };\n\n  VueI18n.prototype._i = function _i (key, locale, messages, host, values) {\n    var ret =\n      this._translate(messages, locale, this.fallbackLocale, key, host, 'raw', values);\n    if (this._isFallbackRoot(ret)) {\n      if (!this._isSilentTranslationWarn(key)) {\n        warn((\"Fall back to interpolate the keypath '\" + key + \"' with root locale.\"));\n      }\n      if (!this._root) { throw Error('unexpected error') }\n      return this._root.$i18n.i(key, locale, values)\n    } else {\n      return this._warnDefault(locale, key, ret, host, [values], 'raw')\n    }\n  };\n\n  VueI18n.prototype.i = function i (key, locale, values) {\n    /* istanbul ignore if */\n    if (!key) { return '' }\n\n    if (!isString(locale)) {\n      locale = this.locale;\n    }\n\n    return this._i(key, locale, this._getMessages(), null, values)\n  };\n\n  VueI18n.prototype._tc = function _tc (\n    key,\n    _locale,\n    messages,\n    host,\n    choice\n  ) {\n      var ref;\n\n      var values = [], len = arguments.length - 5;\n      while ( len-- > 0 ) values[ len ] = arguments[ len + 5 ];\n    if (!key) { return '' }\n    if (choice === undefined) {\n      choice = 1;\n    }\n\n    var predefined = { 'count': choice, 'n': choice };\n    var parsedArgs = parseArgs.apply(void 0, values);\n    parsedArgs.params = Object.assign(predefined, parsedArgs.params);\n    values = parsedArgs.locale === null ? [parsedArgs.params] : [parsedArgs.locale, parsedArgs.params];\n    return this.fetchChoice((ref = this)._t.apply(ref, [ key, _locale, messages, host ].concat( values )), choice)\n  };\n\n  VueI18n.prototype.fetchChoice = function fetchChoice (message, choice) {\n    /* istanbul ignore if */\n    if (!message || !isString(message)) { return null }\n    var choices = message.split('|');\n\n    choice = this.getChoiceIndex(choice, choices.length);\n    if (!choices[choice]) { return message }\n    return choices[choice].trim()\n  };\n\n  VueI18n.prototype.tc = function tc (key, choice) {\n      var ref;\n\n      var values = [], len = arguments.length - 2;\n      while ( len-- > 0 ) values[ len ] = arguments[ len + 2 ];\n    return (ref = this)._tc.apply(ref, [ key, this.locale, this._getMessages(), null, choice ].concat( values ))\n  };\n\n  VueI18n.prototype._te = function _te (key, locale, messages) {\n      var args = [], len = arguments.length - 3;\n      while ( len-- > 0 ) args[ len ] = arguments[ len + 3 ];\n\n    var _locale = parseArgs.apply(void 0, args).locale || locale;\n    return this._exist(messages[_locale], key)\n  };\n\n  VueI18n.prototype.te = function te (key, locale) {\n    return this._te(key, this.locale, this._getMessages(), locale)\n  };\n\n  VueI18n.prototype.getLocaleMessage = function getLocaleMessage (locale) {\n    return looseClone(this._vm.messages[locale] || {})\n  };\n\n  VueI18n.prototype.setLocaleMessage = function setLocaleMessage (locale, message) {\n    if (this._warnHtmlInMessage === 'warn' || this._warnHtmlInMessage === 'error') {\n      this._checkLocaleMessage(locale, this._warnHtmlInMessage, message);\n    }\n    this._vm.$set(this._vm.messages, locale, message);\n  };\n\n  VueI18n.prototype.mergeLocaleMessage = function mergeLocaleMessage (locale, message) {\n    if (this._warnHtmlInMessage === 'warn' || this._warnHtmlInMessage === 'error') {\n      this._checkLocaleMessage(locale, this._warnHtmlInMessage, message);\n    }\n    this._vm.$set(this._vm.messages, locale, merge(\n      typeof this._vm.messages[locale] !== 'undefined' && Object.keys(this._vm.messages[locale]).length\n        ? this._vm.messages[locale]\n        : {},\n      message\n    ));\n  };\n\n  VueI18n.prototype.getDateTimeFormat = function getDateTimeFormat (locale) {\n    return looseClone(this._vm.dateTimeFormats[locale] || {})\n  };\n\n  VueI18n.prototype.setDateTimeFormat = function setDateTimeFormat (locale, format) {\n    this._vm.$set(this._vm.dateTimeFormats, locale, format);\n    this._clearDateTimeFormat(locale, format);\n  };\n\n  VueI18n.prototype.mergeDateTimeFormat = function mergeDateTimeFormat (locale, format) {\n    this._vm.$set(this._vm.dateTimeFormats, locale, merge(this._vm.dateTimeFormats[locale] || {}, format));\n    this._clearDateTimeFormat(locale, format);\n  };\n\n  VueI18n.prototype._clearDateTimeFormat = function _clearDateTimeFormat (locale, format) {\n    // eslint-disable-next-line no-autofix/prefer-const\n    for (var key in format) {\n      var id = locale + \"__\" + key;\n\n      if (!this._dateTimeFormatters.hasOwnProperty(id)) {\n        continue\n      }\n\n      delete this._dateTimeFormatters[id];\n    }\n  };\n\n  VueI18n.prototype._localizeDateTime = function _localizeDateTime (\n    value,\n    locale,\n    fallback,\n    dateTimeFormats,\n    key\n  ) {\n    var _locale = locale;\n    var formats = dateTimeFormats[_locale];\n\n    var chain = this._getLocaleChain(locale, fallback);\n    for (var i = 0; i < chain.length; i++) {\n      var current = _locale;\n      var step = chain[i];\n      formats = dateTimeFormats[step];\n      _locale = step;\n      // fallback locale\n      if (isNull(formats) || isNull(formats[key])) {\n        if (step !== locale && \"development\" !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n          warn((\"Fall back to '\" + step + \"' datetime formats from '\" + current + \"' datetime formats.\"));\n        }\n      } else {\n        break\n      }\n    }\n\n    if (isNull(formats) || isNull(formats[key])) {\n      return null\n    } else {\n      var format = formats[key];\n      var id = _locale + \"__\" + key;\n      var formatter = this._dateTimeFormatters[id];\n      if (!formatter) {\n        formatter = this._dateTimeFormatters[id] = new Intl.DateTimeFormat(_locale, format);\n      }\n      return formatter.format(value)\n    }\n  };\n\n  VueI18n.prototype._d = function _d (value, locale, key) {\n    /* istanbul ignore if */\n    if (!VueI18n.availabilities.dateTimeFormat) {\n      warn('Cannot format a Date value due to not supported Intl.DateTimeFormat.');\n      return ''\n    }\n\n    if (!key) {\n      return new Intl.DateTimeFormat(locale).format(value)\n    }\n\n    var ret =\n      this._localizeDateTime(value, locale, this.fallbackLocale, this._getDateTimeFormats(), key);\n    if (this._isFallbackRoot(ret)) {\n      if (!this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n        warn((\"Fall back to datetime localization of root: key '\" + key + \"'.\"));\n      }\n      /* istanbul ignore if */\n      if (!this._root) { throw Error('unexpected error') }\n      return this._root.$i18n.d(value, key, locale)\n    } else {\n      return ret || ''\n    }\n  };\n\n  VueI18n.prototype.d = function d (value) {\n      var args = [], len = arguments.length - 1;\n      while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ];\n\n    var locale = this.locale;\n    var key = null;\n\n    if (args.length === 1) {\n      if (isString(args[0])) {\n        key = args[0];\n      } else if (isObject(args[0])) {\n        if (args[0].locale) {\n          locale = args[0].locale;\n        }\n        if (args[0].key) {\n          key = args[0].key;\n        }\n      }\n    } else if (args.length === 2) {\n      if (isString(args[0])) {\n        key = args[0];\n      }\n      if (isString(args[1])) {\n        locale = args[1];\n      }\n    }\n\n    return this._d(value, locale, key)\n  };\n\n  VueI18n.prototype.getNumberFormat = function getNumberFormat (locale) {\n    return looseClone(this._vm.numberFormats[locale] || {})\n  };\n\n  VueI18n.prototype.setNumberFormat = function setNumberFormat (locale, format) {\n    this._vm.$set(this._vm.numberFormats, locale, format);\n    this._clearNumberFormat(locale, format);\n  };\n\n  VueI18n.prototype.mergeNumberFormat = function mergeNumberFormat (locale, format) {\n    this._vm.$set(this._vm.numberFormats, locale, merge(this._vm.numberFormats[locale] || {}, format));\n    this._clearNumberFormat(locale, format);\n  };\n\n  VueI18n.prototype._clearNumberFormat = function _clearNumberFormat (locale, format) {\n    // eslint-disable-next-line no-autofix/prefer-const\n    for (var key in format) {\n      var id = locale + \"__\" + key;\n\n      if (!this._numberFormatters.hasOwnProperty(id)) {\n        continue\n      }\n\n      delete this._numberFormatters[id];\n    }\n  };\n\n  VueI18n.prototype._getNumberFormatter = function _getNumberFormatter (\n    value,\n    locale,\n    fallback,\n    numberFormats,\n    key,\n    options\n  ) {\n    var _locale = locale;\n    var formats = numberFormats[_locale];\n\n    var chain = this._getLocaleChain(locale, fallback);\n    for (var i = 0; i < chain.length; i++) {\n      var current = _locale;\n      var step = chain[i];\n      formats = numberFormats[step];\n      _locale = step;\n      // fallback locale\n      if (isNull(formats) || isNull(formats[key])) {\n        if (step !== locale && \"development\" !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n          warn((\"Fall back to '\" + step + \"' number formats from '\" + current + \"' number formats.\"));\n        }\n      } else {\n        break\n      }\n    }\n\n    if (isNull(formats) || isNull(formats[key])) {\n      return null\n    } else {\n      var format = formats[key];\n\n      var formatter;\n      if (options) {\n        // If options specified - create one time number formatter\n        formatter = new Intl.NumberFormat(_locale, Object.assign({}, format, options));\n      } else {\n        var id = _locale + \"__\" + key;\n        formatter = this._numberFormatters[id];\n        if (!formatter) {\n          formatter = this._numberFormatters[id] = new Intl.NumberFormat(_locale, format);\n        }\n      }\n      return formatter\n    }\n  };\n\n  VueI18n.prototype._n = function _n (value, locale, key, options) {\n    /* istanbul ignore if */\n    if (!VueI18n.availabilities.numberFormat) {\n      {\n        warn('Cannot format a Number value due to not supported Intl.NumberFormat.');\n      }\n      return ''\n    }\n\n    if (!key) {\n      var nf = !options ? new Intl.NumberFormat(locale) : new Intl.NumberFormat(locale, options);\n      return nf.format(value)\n    }\n\n    var formatter = this._getNumberFormatter(value, locale, this.fallbackLocale, this._getNumberFormats(), key, options);\n    var ret = formatter && formatter.format(value);\n    if (this._isFallbackRoot(ret)) {\n      if (!this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n        warn((\"Fall back to number localization of root: key '\" + key + \"'.\"));\n      }\n      /* istanbul ignore if */\n      if (!this._root) { throw Error('unexpected error') }\n      return this._root.$i18n.n(value, Object.assign({}, { key: key, locale: locale }, options))\n    } else {\n      return ret || ''\n    }\n  };\n\n  VueI18n.prototype.n = function n (value) {\n      var args = [], len = arguments.length - 1;\n      while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ];\n\n    var locale = this.locale;\n    var key = null;\n    var options = null;\n\n    if (args.length === 1) {\n      if (isString(args[0])) {\n        key = args[0];\n      } else if (isObject(args[0])) {\n        if (args[0].locale) {\n          locale = args[0].locale;\n        }\n        if (args[0].key) {\n          key = args[0].key;\n        }\n\n        // Filter out number format options only\n        options = Object.keys(args[0]).reduce(function (acc, key) {\n            var obj;\n\n          if (includes(numberFormatKeys, key)) {\n            return Object.assign({}, acc, ( obj = {}, obj[key] = args[0][key], obj ))\n          }\n          return acc\n        }, null);\n      }\n    } else if (args.length === 2) {\n      if (isString(args[0])) {\n        key = args[0];\n      }\n      if (isString(args[1])) {\n        locale = args[1];\n      }\n    }\n\n    return this._n(value, locale, key, options)\n  };\n\n  VueI18n.prototype._ntp = function _ntp (value, locale, key, options) {\n    /* istanbul ignore if */\n    if (!VueI18n.availabilities.numberFormat) {\n      {\n        warn('Cannot format to parts a Number value due to not supported Intl.NumberFormat.');\n      }\n      return []\n    }\n\n    if (!key) {\n      var nf = !options ? new Intl.NumberFormat(locale) : new Intl.NumberFormat(locale, options);\n      return nf.formatToParts(value)\n    }\n\n    var formatter = this._getNumberFormatter(value, locale, this.fallbackLocale, this._getNumberFormats(), key, options);\n    var ret = formatter && formatter.formatToParts(value);\n    if (this._isFallbackRoot(ret)) {\n      if (!this._isSilentTranslationWarn(key)) {\n        warn((\"Fall back to format number to parts of root: key '\" + key + \"' .\"));\n      }\n      /* istanbul ignore if */\n      if (!this._root) { throw Error('unexpected error') }\n      return this._root.$i18n._ntp(value, locale, key, options)\n    } else {\n      return ret || []\n    }\n  };\n\n  Object.defineProperties( VueI18n.prototype, prototypeAccessors );\n\n  var availabilities;\n  // $FlowFixMe\n  Object.defineProperty(VueI18n, 'availabilities', {\n    get: function get () {\n      if (!availabilities) {\n        var intlDefined = typeof Intl !== 'undefined';\n        availabilities = {\n          dateTimeFormat: intlDefined && typeof Intl.DateTimeFormat !== 'undefined',\n          numberFormat: intlDefined && typeof Intl.NumberFormat !== 'undefined'\n        };\n      }\n\n      return availabilities\n    }\n  });\n\n  VueI18n.install = install;\n  VueI18n.version = '8.24.4';\n\n  return VueI18n;\n\n})));\n"
  },
  {
    "path": "docs/404.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en-US\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n is internationalization plugin for Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><div class=\"content\"><h1>404</h1> <blockquote>Looks like we've got some broken links.</blockquote> <a href=\"/vue-i18n/\" class=\"router-link-active\">Take me home.</a></div></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/api/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en-US\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>API references | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n is internationalization plugin for Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/5.0b14e886.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link router-link-exact-active router-link-active\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link router-link-exact-active router-link-active\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><div class=\"sidebar-group first\"><p class=\"sidebar-heading open\"><span>API references</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/api/#extension-of-vue\" class=\"sidebar-link\">Extension of Vue</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/api/#vue-constructor-options\" class=\"sidebar-link\">Vue constructor options</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/api/#vue-injected-methods\" class=\"sidebar-link\">Vue injected methods</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/api/#injected-properties\" class=\"sidebar-link\">Injected properties</a></li></ul></li><li><a href=\"/vue-i18n/api/#vuei18n-class\" class=\"sidebar-link\">VueI18n class</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/api/#static-properties\" class=\"sidebar-link\">Static properties</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/api/#constructor-options\" class=\"sidebar-link\">Constructor options</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/api/#properties\" class=\"sidebar-link\">Properties</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/api/#methods\" class=\"sidebar-link\">Methods</a></li></ul></li><li><a href=\"/vue-i18n/api/#directives\" class=\"sidebar-link\">Directives</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/api/#v-t\" class=\"sidebar-link\">v-t</a></li></ul></li><li><a href=\"/vue-i18n/api/#components\" class=\"sidebar-link\">Components</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/api/#i18n-functional-component\" class=\"sidebar-link\">i18n functional component</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/api/#i18n-n-functional-component\" class=\"sidebar-link\">i18n-n functional component</a></li></ul></li><li><a href=\"/vue-i18n/api/#special-attributes\" class=\"sidebar-link\">Special Attributes</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/api/#place\" class=\"sidebar-link\">place</a></li></ul></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"api-references\"><a href=\"#api-references\" class=\"header-anchor\">#</a> API references</h1> <h2 id=\"extension-of-vue\"><a href=\"#extension-of-vue\" class=\"header-anchor\">#</a> Extension of Vue</h2> <h3 id=\"vue-constructor-options\"><a href=\"#vue-constructor-options\" class=\"header-anchor\">#</a> Vue constructor options</h3> <h4 id=\"i18n\"><a href=\"#i18n\" class=\"header-anchor\">#</a> i18n</h4> <ul><li><strong>Type:</strong> <code>I18nOptions</code></li></ul> <p>Component based localization option.</p> <ul><li><strong>See also:</strong> <code>VueI18n</code> class constructor options</li></ul> <h3 id=\"vue-injected-methods\"><a href=\"#vue-injected-methods\" class=\"header-anchor\">#</a> Vue injected methods</h3> <h4 id=\"t\"><a href=\"#t\" class=\"header-anchor\">#</a> $t</h4> <ul><li><p><strong>Arguments:</strong></p> <ul><li><code>{Path} key</code>: required</li> <li><code>{Locale} locale</code>: optional</li> <li><code>{Array | Object} values</code>: optional</li></ul></li> <li><p><strong>Return:</strong> <code>TranslateResult</code></p></li></ul> <p>Localize the locale message of <code>key</code>. Localize in preferentially component locale messages than global locale messages. If not specified component locale messages, localize with global locale messages. If you specified <code>locale</code>, localize the locale messages of <code>locale</code>. If you specified <code>key</code> of list / named formatting local messages, you must specify <code>values</code> too. For <code>values</code> more details see <a href=\"/vue-i18n/guide/formatting.html\">Formatting</a>.</p> <div class=\"danger custom-block\"><p class=\"custom-block-title\">Tip</p> <p>Note that you need to guarantee this context equal to component instance in lifecycle methods (e.g. in <code>data</code> options, <code>const $t = this.$t.bind(this)</code>).</p></div> <h4 id=\"tc\"><a href=\"#tc\" class=\"header-anchor\">#</a> $tc</h4> <ul><li><p><strong>Arguments:</strong></p> <ul><li><code>{Path} key</code>: required</li> <li><code>{number} choice</code>: optional, default 1</li> <li><code>{Locale} locale</code>: optional</li> <li><code>{string | Array | Object} values</code>: optional</li></ul></li> <li><p><strong>Return:</strong> <code>TranslateResult</code></p></li></ul> <p>Localize the locale message of <code>key</code> with pluralization. Localize in preferentially component locale messages than global locale messages. If not specified component locale messages, localize with global locale messages. If you specified <code>locale</code>, localize the locale messages of <code>locale</code>. If you will specify string value to <code>values</code>, localize the locale messages of value. If you will specify Array or Object value to <code>values</code>, you must specify with <code>values</code> of $t.</p> <div class=\"danger custom-block\"><p class=\"custom-block-title\">Tip</p> <p>Note that you need to guarantee this context equal to component instance in lifecycle methods (e.g. in <code>data</code> options, <code>const $tc = this.$tc.bind(this)</code>).</p></div> <h4 id=\"te\"><a href=\"#te\" class=\"header-anchor\">#</a> $te</h4> <ul><li><p><strong>Arguments:</strong></p> <ul><li><code>{Path} key</code>: required</li> <li><code>{Locale} locale</code>: optional</li></ul></li> <li><p><strong>Return:</strong> <code>boolean</code></p></li></ul> <p>Check whether key exists. In Vue instance, If not specified component locale messages, check with global locale messages. If you specified <code>locale</code>, check the locale messages of <code>locale</code>.</p> <div class=\"danger custom-block\"><p class=\"custom-block-title\">Tip</p> <p>Note that you need to guarantee this context equal to component instance in lifecycle methods (e.g. in <code>data</code> options, <code>const $te = this.$te.bind(this)</code>).</p></div> <h4 id=\"d\"><a href=\"#d\" class=\"header-anchor\">#</a> $d</h4> <blockquote><p>🆕 7.0+</p></blockquote> <ul><li><p><strong>Arguments:</strong></p> <ul><li><code>{number | Date} value</code>: required</li> <li><code>{Path | Object} key</code>: optional</li> <li><code>{Locale | Object} locale</code>: optional</li></ul></li> <li><p><strong>Return:</strong> <code>DateTimeFormatResult</code></p></li></ul> <p>Localize the datetime of <code>value</code> with datetime format of <code>key</code>. The datetime format of <code>key</code> need to register to <code>dateTimeFormats</code> option of <code>VueI18n</code> class, and depend on <code>locale</code> option of <code>VueI18n</code> constructor. If you will specify <code>locale</code> argument, it will have priority over <code>locale</code> option of <code>VueI18n</code> constructor.</p> <p>If the datetime format of <code>key</code> not exist in <code>dateTimeFormats</code> option, fallback to depend on <code>fallbackLocale</code> option of <code>VueI18n</code> constructor.</p> <div class=\"danger custom-block\"><p class=\"custom-block-title\">Tip</p> <p>Note that you need to guarantee this context equal to component instance in lifecycle methods (e.g. in <code>data</code> options, <code>const $d = this.$d.bind(this)</code>).</p></div> <h4 id=\"n\"><a href=\"#n\" class=\"header-anchor\">#</a> $n</h4> <blockquote><p>🆕 7.0+</p></blockquote> <ul><li><p><strong>Arguments:</strong></p> <ul><li><code>{number} value</code>: required</li> <li><code>{Path | Object} format</code>: optional</li> <li><code>{Locale} locale</code>: optional</li></ul></li> <li><p><strong>Return:</strong> <code>NumberFormatResult</code></p></li></ul> <p>Localize the number of <code>value</code> with number format of <code>format</code>. The number format of <code>format</code> need to register to <code>numberFormats</code> option of <code>VueI18n</code> class, and depend on <code>locale</code> option of <code>VueI18n</code> constructor. If you will specify <code>locale</code> argument, it will have priority over <code>locale</code> option of <code>VueI18n</code> constructor.</p> <p>If the number format of <code>format</code> not exist in <code>numberFormats</code> option, fallback to depend on <code>fallbackLocale</code> option of <code>VueI18n</code> constructor.</p> <p>If the second <code>format</code> argument specified as an object, it should have the following properties:</p> <ul><li><code>key {Path}</code>: optional, number format</li> <li><code>locale {Locale}</code>: optional, locale</li> <li><code>style {string}</code>: optional, number format option</li> <li><code>currency {string}</code>: optional, number format option</li> <li><code>currencyDisplay {string}</code>: optional, number format option</li> <li><code>useGrouping {string}</code>: optional, number format option</li> <li><code>minimumIntegerDigits {string}</code>: optional, number format option</li> <li><code>minimumFractionDigits {string}</code>: optional, number format option</li> <li><code>maximumFractionDigits {string}</code>: optional, number format option</li> <li><code>minimumSignificantDigits {string}</code>: optional, number format option</li> <li><code>maximumSignificantDigits {string}</code>: optional, number format option</li> <li><code>localeMatcher {string}</code>: optional, number format option</li> <li><code>formatMatcher {string}</code>: optional, number format option</li></ul> <p>Any specified number format options will have priority over <code>numberFormats</code> of <code>VueI18n</code> constructor.</p> <div class=\"danger custom-block\"><p class=\"custom-block-title\">Tip</p> <p>Note that you need to guarantee this context equal to component instance in lifecycle methods (e.g. in <code>data</code> options, <code>const $n = this.$n.bind(this)</code>).</p></div> <h3 id=\"injected-properties\"><a href=\"#injected-properties\" class=\"header-anchor\">#</a> Injected properties</h3> <h4 id=\"i18n-2\"><a href=\"#i18n-2\" class=\"header-anchor\">#</a> $i18n</h4> <ul><li><p><strong>Type:</strong> <code>I18n</code></p></li> <li><p><strong>Read only</strong></p></li></ul> <p>Get a <code>VueI18n</code> instance. If you are specify.</p> <p>If you have specified an <code>i18n</code> option at component options, you will be able to get a <code>VueI18n</code> instance at the component, Otherwise, you will be able get root <code>VueI18n</code> instance.</p> <h2 id=\"vuei18n-class\"><a href=\"#vuei18n-class\" class=\"header-anchor\">#</a> <code>VueI18n</code> class</h2> <p><code>VueI18n</code> class implement <code>I18n</code> interface of <a href=\"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js\" target=\"_blank\" rel=\"noopener noreferrer\">flowtype definitions<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></p> <h3 id=\"static-properties\"><a href=\"#static-properties\" class=\"header-anchor\">#</a> Static properties</h3> <h4 id=\"version\"><a href=\"#version\" class=\"header-anchor\">#</a> version</h4> <ul><li><strong>Type:</strong> <code>string</code></li></ul> <p>vue-i18n version.</p> <h4 id=\"availabilities\"><a href=\"#availabilities\" class=\"header-anchor\">#</a> availabilities</h4> <blockquote><p>🆕 7.0+</p></blockquote> <ul><li><strong>Type:</strong> <code>IntlAvailability</code></li></ul> <p>Whether the following internationalization features are available:</p> <ul><li><p><code>{boolean} dateTimeFormat</code>: locale sensitive datetime formatting</p></li> <li><p><code>{boolean} numberFormat</code>: locale sensitive number formatting</p></li></ul> <p>The above internationalization features are depends on <a href=\"http://kangax.github.io/compat-table/esintl/\" target=\"_blank\" rel=\"noopener noreferrer\">the browser environments<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>, due to implement with ECMAScript Internationalization API (ECMA-402).</p> <h3 id=\"constructor-options\"><a href=\"#constructor-options\" class=\"header-anchor\">#</a> Constructor options</h3> <p>You can specify the below some options of <code>I18nOptions</code> constructor options of <a href=\"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js\" target=\"_blank\" rel=\"noopener noreferrer\">flowtype definitions<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></p> <h4 id=\"locale\"><a href=\"#locale\" class=\"header-anchor\">#</a> locale</h4> <ul><li><p><strong>Type:</strong> <code>Locale</code></p></li> <li><p><strong>Default:</strong> <code>'en-US'</code></p></li></ul> <p>The locale of localization. If the locale contains a territory and a dialect, this locale contains an implicit fallback.</p> <h4 id=\"fallbacklocale\"><a href=\"#fallbacklocale\" class=\"header-anchor\">#</a> fallbackLocale</h4> <ul><li><p><strong>Type:</strong> <code>FallbackLocale</code></p></li> <li><p><strong>Default:</strong> <code>false</code></p></li></ul> <p>The locale of fallback localization. For more complex fallback definitions see <a href=\"/vue-i18n/guide/fallback.html\">fallback</a>.</p> <h4 id=\"messages\"><a href=\"#messages\" class=\"header-anchor\">#</a> messages</h4> <ul><li><p><strong>Type:</strong> <code>LocaleMessages</code></p></li> <li><p><strong>Default:</strong> <code>{}</code></p></li></ul> <p>The locale messages of localization.</p> <h4 id=\"datetimeformats\"><a href=\"#datetimeformats\" class=\"header-anchor\">#</a> dateTimeFormats</h4> <blockquote><p>🆕 7.0+</p></blockquote> <ul><li><p><strong>Type:</strong> <code>DateTimeFormats</code></p></li> <li><p><strong>Default:</strong> <code>{}</code></p></li></ul> <p>The datetime formats of localization.</p> <ul><li><strong>See also:</strong> <code>DateTimeFormats</code> type of <a href=\"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js\" target=\"_blank\" rel=\"noopener noreferrer\">flowtype definitions<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul> <h4 id=\"numberformats\"><a href=\"#numberformats\" class=\"header-anchor\">#</a> numberFormats</h4> <blockquote><p>🆕 7.0+</p></blockquote> <ul><li><p><strong>Type:</strong> <code>NumberFormats</code></p></li> <li><p><strong>Default:</strong> <code>{}</code></p></li></ul> <p>The number formats of localization.</p> <ul><li><strong>See also:</strong> <code>NumberFormats</code> type of <a href=\"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js\" target=\"_blank\" rel=\"noopener noreferrer\">flowtype definitions<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul> <h4 id=\"availablelocales\"><a href=\"#availablelocales\" class=\"header-anchor\">#</a> availableLocales</h4> <blockquote><p>🆕 8.9.0+</p></blockquote> <ul><li><p><strong>Type:</strong> <code>Locale[]</code></p></li> <li><p><strong>Default:</strong> <code>[]</code></p></li> <li><p><strong>Examples:</strong> <code>[&quot;en&quot;, &quot;ja&quot;]</code></p></li></ul> <p>The list of available locales in <code>messages</code> in lexical order.</p> <h4 id=\"formatter\"><a href=\"#formatter\" class=\"header-anchor\">#</a> formatter</h4> <ul><li><p><strong>Type:</strong> <code>Formatter</code></p></li> <li><p><strong>Default:</strong> Built in formatter</p></li></ul> <p>The formatter that implemented with <code>Formatter</code> interface.</p> <h4 id=\"modifiers\"><a href=\"#modifiers\" class=\"header-anchor\">#</a> modifiers</h4> <blockquote><p>🆕 8.15.0+</p></blockquote> <ul><li><p><strong>Type:</strong> <code>Modifier</code></p></li> <li><p><strong>Default:</strong> <code>lower</code> and <code>upper</code> modifiers</p></li></ul> <p>Modifiers functions for linked messages</p> <h4 id=\"missing\"><a href=\"#missing\" class=\"header-anchor\">#</a> missing</h4> <ul><li><p><strong>Type:</strong> <code>MissingHandler</code></p></li> <li><p><strong>Default:</strong> <code>null</code></p></li></ul> <p>A handler for localization missing. The handler gets called with the localization target locale, localization path key, the Vue instance and values.</p> <p>If missing handler is assigned, and occurred localization missing, it's not warned.</p> <h4 id=\"fallbackroot\"><a href=\"#fallbackroot\" class=\"header-anchor\">#</a> fallbackRoot</h4> <ul><li><p><strong>Type:</strong> <code>Boolean</code></p></li> <li><p><strong>Default:</strong> <code>true</code></p></li></ul> <p>In the component localization, whether to fall back to root level (global) localization when localization fails.</p> <p>If <code>false</code>, it's warned, and is returned the key.</p> <h4 id=\"sync\"><a href=\"#sync\" class=\"header-anchor\">#</a> sync</h4> <ul><li><p><strong>Type:</strong> <code>Boolean</code></p></li> <li><p><strong>Default:</strong> <code>true</code></p></li></ul> <p>Whether synchronize the root level locale to the component localization locale.</p> <p>If <code>false</code>, regardless of the root level locale, localize for each component locale.</p> <h4 id=\"silenttranslationwarn\"><a href=\"#silenttranslationwarn\" class=\"header-anchor\">#</a> silentTranslationWarn</h4> <blockquote><p>6.1+, 🆙 8.13</p></blockquote> <ul><li><p><strong>Type:</strong> <code>Boolean | RegExp</code></p></li> <li><p><strong>Default:</strong> <code>false</code></p></li></ul> <p>Whether suppress warnings outputted when localization fails.</p> <p>If <code>true</code>, suppress localization fail warnings.\nIf you use regular expression, you can suppress localization fail warnings that it match with translation <code>key</code> (e.g. <code>$t</code>).</p> <h4 id=\"silentfallbackwarn\"><a href=\"#silentfallbackwarn\" class=\"header-anchor\">#</a> silentFallbackWarn</h4> <blockquote><p>🆕 8.8+, 🆙 8.13</p></blockquote> <ul><li><strong>Type:</strong> <code>Boolean | RegExp</code></li> <li><strong>Default:</strong> <code>false</code></li></ul> <p>Whether suppress warnings when falling back to either <code>fallbackLocale</code> or <code>root</code>.</p> <p>If <code>true</code>, warnings will be generated only when no translation is available at all, and not for fallbacks.\nIf you use regular expression, you can suppress the fallback warnings that it match <code>key</code> (e.g. <code>$t</code>).</p> <h4 id=\"preservedirectivecontent\"><a href=\"#preservedirectivecontent\" class=\"header-anchor\">#</a> preserveDirectiveContent</h4> <blockquote><p>8.7+</p></blockquote> <ul><li><p><strong>Type:</strong> <code>Boolean</code></p></li> <li><p><strong>Default:</strong> <code>false</code></p></li></ul> <p>Whether <code>v-t</code> directive's element should preserve <code>textContent</code> after directive is unbinded.</p> <h4 id=\"warnhtmlinmessage\"><a href=\"#warnhtmlinmessage\" class=\"header-anchor\">#</a> warnHtmlInMessage</h4> <blockquote><p>8.11+</p></blockquote> <ul><li><p><strong>Type:</strong> <code>WarnHtmlInMessageLevel</code></p></li> <li><p><strong>Default:</strong> <code>off</code></p></li></ul> <p>Whether to allow the use locale messages of HTML formatting. See the <code>warnHtmlInMessage</code> property.</p> <div class=\"danger custom-block\"><p class=\"custom-block-title\">Important!!</p> <p>In next major version, <code>warnHtmlInMessage</code> option is <code>warn</code> as default.</p></div> <h4 id=\"sharedmessages\"><a href=\"#sharedmessages\" class=\"header-anchor\">#</a> sharedMessages</h4> <blockquote><p>8.12+</p></blockquote> <ul><li><p><strong>Type:</strong> <code>LocaleMessages</code></p></li> <li><p><strong>Default:</strong> <code>undefined</code></p></li></ul> <p>The shared locale messages of localization for components. More detail see <a href=\"/vue-i18n/guide/component.html#shared-locale-messages-for-components\">Component based localization</a>.</p> <h4 id=\"posttranslation\"><a href=\"#posttranslation\" class=\"header-anchor\">#</a> postTranslation</h4> <blockquote><p>8.16+</p></blockquote> <ul><li><p><strong>Type:</strong> <code>PostTranslationHandler</code></p></li> <li><p><strong>Default:</strong> <code>null</code></p></li></ul> <p>A handler for post processing of translation. The handler gets after being called with the <code>$t</code>, <code>t</code>, <code>$tc</code>, and <code>tc</code>.</p> <p>This handler is useful if you want to filter on translated text such as space trimming.</p> <h3 id=\"properties\"><a href=\"#properties\" class=\"header-anchor\">#</a> Properties</h3> <h4 id=\"locale-2\"><a href=\"#locale-2\" class=\"header-anchor\">#</a> locale</h4> <ul><li><p><strong>Type:</strong> <code>Locale</code></p></li> <li><p><strong>Read/Write</strong></p></li></ul> <p>The locale of localization. If the locale contains a territory and a dialect, this locale contains an implicit fallback.</p> <h4 id=\"fallbacklocale-2\"><a href=\"#fallbacklocale-2\" class=\"header-anchor\">#</a> fallbackLocale</h4> <ul><li><p><strong>Type:</strong> <code>FallbackLocale</code></p></li> <li><p><strong>Read/Write</strong></p></li></ul> <p>The locale of fallback localization. For more complex fallback definitions see <a href=\"/vue-i18n/guide/fallback.html\">fallback</a>.</p> <h4 id=\"messages-2\"><a href=\"#messages-2\" class=\"header-anchor\">#</a> messages</h4> <ul><li><p><strong>Type:</strong> <code>LocaleMessages</code></p></li> <li><p><strong>Read only</strong></p></li></ul> <p>The locale messages of localization.</p> <h4 id=\"datetimeformats-2\"><a href=\"#datetimeformats-2\" class=\"header-anchor\">#</a> dateTimeFormats</h4> <blockquote><p>🆕 7.0+</p></blockquote> <ul><li><p><strong>Type:</strong> <code>DateTimeFormats</code></p></li> <li><p><strong>Read only</strong></p></li></ul> <p>The datetime formats of localization.</p> <h4 id=\"numberformats-2\"><a href=\"#numberformats-2\" class=\"header-anchor\">#</a> numberFormats</h4> <blockquote><p>🆕 7.0+</p></blockquote> <ul><li><p><strong>Type:</strong> <code>NumberFormats</code></p></li> <li><p><strong>Read only</strong></p></li></ul> <p>The number formats of localization.</p> <h4 id=\"missing-2\"><a href=\"#missing-2\" class=\"header-anchor\">#</a> missing</h4> <ul><li><p><strong>Type:</strong> <code>MissingHandler</code></p></li> <li><p><strong>Read/Write</strong></p></li></ul> <p>A handler for localization missing.</p> <h4 id=\"formatter-2\"><a href=\"#formatter-2\" class=\"header-anchor\">#</a> formatter</h4> <ul><li><p><strong>Type:</strong> <code>Formatter</code></p></li> <li><p><strong>Read/Write</strong></p></li></ul> <p>The formatter that implemented with <code>Formatter</code> interface.</p> <h4 id=\"silenttranslationwarn-2\"><a href=\"#silenttranslationwarn-2\" class=\"header-anchor\">#</a> silentTranslationWarn</h4> <blockquote><p>6.1+, 🆙 8.13</p></blockquote> <ul><li><p><strong>Type:</strong> <code>Boolean | RegExp</code></p></li> <li><p><strong>Read/Write</strong></p></li></ul> <p>Whether suppress warnings outputted when localization fails.</p> <h4 id=\"silentfallbackwarn-2\"><a href=\"#silentfallbackwarn-2\" class=\"header-anchor\">#</a> silentFallbackWarn</h4> <blockquote><p>🆕 8.8+, 🆙 8.13</p></blockquote> <ul><li><p><strong>Type:</strong> <code>Boolean | RegExp</code></p></li> <li><p><strong>Read/Write</strong></p></li></ul> <p>Whether suppress fallback warnings when localization fails.</p> <h4 id=\"preservedirectivecontent-2\"><a href=\"#preservedirectivecontent-2\" class=\"header-anchor\">#</a> preserveDirectiveContent</h4> <blockquote><p>8.7+</p></blockquote> <ul><li><p><strong>Type:</strong> <code>Boolean</code></p></li> <li><p><strong>Read/Write</strong></p></li></ul> <p>Whether <code>v-t</code> directive's element should preserve <code>textContent</code> after directive is unbinded.</p> <h4 id=\"warnhtmlinmessage-2\"><a href=\"#warnhtmlinmessage-2\" class=\"header-anchor\">#</a> warnHtmlInMessage</h4> <blockquote><p>8.11+</p></blockquote> <ul><li><p><strong>Type:</strong> <code>WarnHtmlInMessageLevel</code></p></li> <li><p><strong>Read/Write</strong></p></li></ul> <p>Whether to allow the use locale messages of HTML formatting.</p> <p>If you set <code>warn</code> or<code>error</code>, will check the locale messages on the VueI18n instance.</p> <p>If you are specified <code>warn</code>, a warning will be output at console.\nIf you are specified <code>error</code> will occurred an Error.</p> <p>In VueI18n instance, set the <code>off</code> as default.</p> <h4 id=\"posttranslation-2\"><a href=\"#posttranslation-2\" class=\"header-anchor\">#</a> postTranslation</h4> <blockquote><p>8.16+</p></blockquote> <ul><li><p><strong>Type:</strong> <code>PostTranslationHandler</code></p></li> <li><p><strong>Read/Write</strong></p></li></ul> <p>A handler for post processing of translation.</p> <h3 id=\"methods\"><a href=\"#methods\" class=\"header-anchor\">#</a> Methods</h3> <h4 id=\"getchoiceindex\"><a href=\"#getchoiceindex\" class=\"header-anchor\">#</a> getChoiceIndex</h4> <ul><li><p><strong>Arguments:</strong></p> <ul><li><code>{number} choice</code></li> <li><code>{number} choicesLength</code></li></ul></li> <li><p><strong>Return:</strong> <code>finalChoice {number}</code></p></li></ul> <p>Get pluralization index for current pluralizing number and a given amount of choices. Can be overridden through prototype mutation:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">.</span>prototype<span class=\"token punctuation\">.</span>getChoiceIndex <span class=\"token operator\">=</span> <span class=\"token comment\">/* custom implementation */</span>\n</code></pre></div><h4 id=\"getlocalemessage-locale\"><a href=\"#getlocalemessage-locale\" class=\"header-anchor\">#</a> getLocaleMessage( locale )</h4> <ul><li><p><strong>Arguments:</strong></p> <ul><li><code>{Locale} locale</code></li></ul></li> <li><p><strong>Return:</strong> <code>LocaleMessageObject</code></p></li></ul> <p>Get the locale message of locale.</p> <h4 id=\"setlocalemessage-locale-message\"><a href=\"#setlocalemessage-locale-message\" class=\"header-anchor\">#</a> setLocaleMessage( locale, message )</h4> <ul><li><p><strong>Arguments:</strong></p> <ul><li><code>{Locale} locale</code></li> <li><code>{LocaleMessageObject} message</code></li></ul></li></ul> <p>Set the locale message of locale.</p> <div class=\"tip custom-block\"><p class=\"custom-block-title\">NOTE</p> <blockquote><p>8.11+</p></blockquote> <p>If you set <code>warn</code> or<code>error</code> in the <code>warnHtmlInMessage</code> property, when this method is executed, it will check if HTML formatting is used for locale message.</p></div> <h4 id=\"mergelocalemessage-locale-message\"><a href=\"#mergelocalemessage-locale-message\" class=\"header-anchor\">#</a> mergeLocaleMessage( locale, message )</h4> <blockquote><p>6.1+</p></blockquote> <ul><li><p><strong>Arguments:</strong></p> <ul><li><code>{Locale} locale</code></li> <li><code>{LocaleMessageObject} message</code></li></ul></li></ul> <p>Merge the registered locale messages with the locale message of locale.</p> <div class=\"tip custom-block\"><p class=\"custom-block-title\">NOTE</p> <blockquote><p>8.11+</p></blockquote> <p>If you set <code>warn</code> or<code>error</code> in the <code>warnHtmlInMessage</code> property, when this method is executed, it will check if HTML formatting is used for locale message.</p></div> <h4 id=\"t-key-locale-values\"><a href=\"#t-key-locale-values\" class=\"header-anchor\">#</a> t( key, [locale], [values] )</h4> <ul><li><p><strong>Arguments:</strong></p> <ul><li><code>{Path} key</code>: required</li> <li><code>{Locale} locale</code>: optional</li> <li><code>{Array | Object} values</code>: optional</li></ul></li> <li><p><strong>Return:</strong> : <code>TranslateResult</code></p></li></ul> <p>This is the same as the <code>Function</code> returned with <code>$t</code> method. More detail see <a href=\"#t\">$t</a>.</p> <h4 id=\"tc-key-choice-values\"><a href=\"#tc-key-choice-values\" class=\"header-anchor\">#</a> tc( key, [choice], [values] )</h4> <ul><li><p><strong>Arguments:</strong></p> <ul><li><code>{Path} key</code>: required</li> <li><code>{number} choice</code>: optional, default <code>1</code></li> <li><code>{string | Array | Object} values</code>: optional</li></ul></li> <li><p><strong>Return:</strong> <code>TranslateResult</code></p></li></ul> <p>This is the same as the <code>Function</code> returned <code>$tc</code> method. More detail see <a href=\"#tc\">$tc</a>.</p> <h4 id=\"te-key-locale\"><a href=\"#te-key-locale\" class=\"header-anchor\">#</a> te( key, [locale] )</h4> <ul><li><p><strong>Arguments:</strong></p> <ul><li><code>{string} key</code>: required</li> <li><code>{Locale} locale</code>: optional</li></ul></li> <li><p><strong>Return:</strong> <code>boolean</code></p></li></ul> <p>Check whether key path exists in global locale message. If you specified <code>locale</code>, check the locale message of <code>locale</code>.</p> <h4 id=\"getdatetimeformat-locale\"><a href=\"#getdatetimeformat-locale\" class=\"header-anchor\">#</a> getDateTimeFormat ( locale )</h4> <blockquote><p>🆕 7.0+</p></blockquote> <ul><li><p><strong>Arguments:</strong></p> <ul><li><code>{Locale} locale</code></li></ul></li> <li><p><strong>Return:</strong> <code>DateTimeFormat</code></p></li></ul> <p>Get the datetime format of locale.</p> <h4 id=\"setdatetimeformat-locale-format\"><a href=\"#setdatetimeformat-locale-format\" class=\"header-anchor\">#</a> setDateTimeFormat ( locale, format )</h4> <blockquote><p>🆕 7.0+</p></blockquote> <ul><li><p><strong>Arguments:</strong></p> <ul><li><code>{Locale} locale</code></li> <li><code>{DateTimeFormat} format</code></li></ul></li></ul> <p>Set the datetime format of locale.</p> <h4 id=\"mergedatetimeformat-locale-format\"><a href=\"#mergedatetimeformat-locale-format\" class=\"header-anchor\">#</a> mergeDateTimeFormat ( locale, format )</h4> <blockquote><p>🆕 7.0+</p></blockquote> <ul><li><p><strong>Arguments:</strong></p> <ul><li><code>{Locale} locale</code></li> <li><code>{DateTimeFormat} format</code></li></ul></li></ul> <p>Merge the registered datetime formats with the datetime format of locale.</p> <h4 id=\"d-value-key-locale\"><a href=\"#d-value-key-locale\" class=\"header-anchor\">#</a> d( value, [key], [locale] )</h4> <blockquote><p>🆕 7.0+</p></blockquote> <ul><li><p><strong>Arguments:</strong></p> <ul><li><code>{number | Date} value</code>: required</li> <li><code>{Path | Object} key</code>: optional</li> <li><code>{Locale | Object} locale</code>: optional</li></ul></li> <li><p><strong>Return:</strong> <code>DateTimeFormatResult</code></p></li></ul> <p>This is the same as <code>$d</code> method of Vue instance method. More detail see <a href=\"#d\">$d</a>.</p> <h4 id=\"getnumberformat-locale\"><a href=\"#getnumberformat-locale\" class=\"header-anchor\">#</a> getNumberFormat ( locale )</h4> <blockquote><p>🆕 7.0+</p></blockquote> <ul><li><p><strong>Arguments:</strong></p> <ul><li><code>{Locale} locale</code></li></ul></li> <li><p><strong>Return:</strong> <code>NumberFormat</code></p></li></ul> <p>Get the number format of locale.</p> <h4 id=\"setnumberformat-locale-format\"><a href=\"#setnumberformat-locale-format\" class=\"header-anchor\">#</a> setNumberFormat ( locale, format )</h4> <blockquote><p>🆕 7.0+</p></blockquote> <ul><li><p><strong>Arguments:</strong></p> <ul><li><code>{Locale} locale</code></li> <li><code>{NumberFormat} format</code></li></ul></li></ul> <p>Set the number format of locale.</p> <h4 id=\"mergenumberformat-locale-format\"><a href=\"#mergenumberformat-locale-format\" class=\"header-anchor\">#</a> mergeNumberFormat ( locale, format )</h4> <blockquote><p>🆕 7.0+</p></blockquote> <ul><li><p><strong>Arguments:</strong></p> <ul><li><code>{Locale} locale</code></li> <li><code>{NumberFormat} format</code></li></ul></li></ul> <p>Merge the registered number formats with the number format of locale.</p> <h4 id=\"n-value-format-locale\"><a href=\"#n-value-format-locale\" class=\"header-anchor\">#</a> n( value, [format], [locale] )</h4> <blockquote><p>🆕 7.0+</p></blockquote> <ul><li><p><strong>Arguments:</strong></p> <ul><li><code>{number} value</code>: required</li> <li><code>{Path | Object} format</code>: optional</li> <li><code>{Locale} locale</code>: optional</li></ul></li> <li><p><strong>Return:</strong> <code>NumberFormatResult</code></p></li></ul> <p>This is the same as <code>$n</code> method of Vue instance method. More detail see <a href=\"#n\">$n</a>.</p> <h2 id=\"directives\"><a href=\"#directives\" class=\"header-anchor\">#</a> Directives</h2> <blockquote><p>🆕 7.3+</p></blockquote> <h3 id=\"v-t\"><a href=\"#v-t\" class=\"header-anchor\">#</a> v-t</h3> <ul><li><p><strong>Expects:</strong> <code>string | Object</code></p></li> <li><p><strong>Modifiers:</strong></p> <ul><li><code>.preserve</code>: (8.7.0+) preserves element <code>textContent</code> when directive is unbinded.</li></ul></li> <li><p><strong>Details:</strong></p></li></ul> <p>Update the element <code>textContent</code> that localized with locale messages. You can use string syntax or object syntax. string syntax can be specified as a keypath of locale messages. If you can be used object syntax, you need to specify as the object key the following params:</p> <pre><code>* path: required, key of locale messages\n* locale: optional, locale\n* args: optional, for list or named formatting\n</code></pre> <div class=\"tip custom-block\"><p class=\"custom-block-title\">NOTE</p> <p>The element <code>textContent</code> will be cleared by default when <code>v-t</code> directive is unbinded. This might be undesirable situation when used inside <a href=\"https://vuejs.org/v2/guide/transitions.html\" target=\"_blank\" rel=\"noopener noreferrer\">transitions<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>. To preserve <code>textContent</code> data after directive unbind use <code>.preserve</code> modifier or global <a href=\"#preservedirectivecontent\"><code>preserveDirectiveContent</code> option</a>.</p></div> <ul><li><strong>Examples:</strong></li></ul> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token comment\">&lt;!-- string syntax: literal --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">v-t</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span><span class=\"token punctuation\">'</span>foo.bar'<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token comment\">&lt;!-- string syntax: binding via data or computed props --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">v-t</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>msg<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token comment\">&lt;!-- object syntax: literal --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">v-t</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>{ path: 'hi', locale: 'ja', args: { name: 'kazupon' } }<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token comment\">&lt;!-- object syntax: binding via data or computed props --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">v-t</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>{ path: greeting, args: { name: fullName } }<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token comment\">&lt;!-- with preserve modifier --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">v-t.preserve</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span><span class=\"token punctuation\">'</span>foo.bar'<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><ul><li><strong>See also:</strong> <a href=\"/vue-i18n/guide/directive.html\">Custom directive localization</a></li></ul> <h2 id=\"components\"><a href=\"#components\" class=\"header-anchor\">#</a> Components</h2> <h3 id=\"i18n-functional-component\"><a href=\"#i18n-functional-component\" class=\"header-anchor\">#</a> i18n functional component</h3> <blockquote><p>🆕 7.0+</p></blockquote> <h4 id=\"props\"><a href=\"#props\" class=\"header-anchor\">#</a> Props:</h4> <ul><li><code>path {Path}</code>: required, keypath of locale messages</li> <li><code>locale {Locale}</code>: optional, locale</li> <li><code>tag {string|boolean}</code>: optional, default <code>'span'</code></li> <li><code>places {Array | Object}</code>: optional (7.2+)</li></ul> <div class=\"danger custom-block\"><p class=\"custom-block-title\">Important!!</p> <p>In next major version, <code>places</code> prop is deprecated. Please switch to slots syntax.</p></div> <h4 id=\"usage\"><a href=\"#usage\" class=\"header-anchor\">#</a> Usage:</h4> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span> <span class=\"token attr-name\">path</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>term<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">tag</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>label<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">for</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>tos<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">:href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>url<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">target</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>_blank<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>{{ $t('tos') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    tos<span class=\"token operator\">:</span> <span class=\"token string\">'Term of Service'</span><span class=\"token punctuation\">,</span>\n    term<span class=\"token operator\">:</span> <span class=\"token string\">'I accept xxx {0}.'</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  ja<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    tos<span class=\"token operator\">:</span> <span class=\"token string\">'利用規約'</span><span class=\"token punctuation\">,</span>\n    term<span class=\"token operator\">:</span> <span class=\"token string\">'私は xxx の{0}に同意します。'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token punctuation\">,</span>\n  data<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    url<span class=\"token operator\">:</span> <span class=\"token string\">'/term'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><h4 id=\"see-also\"><a href=\"#see-also\" class=\"header-anchor\">#</a> See also:</h4> <p><a href=\"/vue-i18n/guide/interpolation.html\">Component interpolation</a></p> <h3 id=\"i18n-n-functional-component\"><a href=\"#i18n-n-functional-component\" class=\"header-anchor\">#</a> i18n-n functional component</h3> <blockquote><p>🆕 8.10+</p></blockquote> <h4 id=\"props-2\"><a href=\"#props-2\" class=\"header-anchor\">#</a> Props:</h4> <ul><li><code>value {number}</code>: required, number to format</li> <li><code>format {string | NumberFormatOptions}</code>: optional, number format name or object with explicit format options</li> <li><code>locale {Locale}</code>: optional, locale</li> <li><code>tag {string|boolean}</code>: optional, default <code>'span'</code></li></ul> <h4 id=\"usage-2\"><a href=\"#usage-2\" class=\"header-anchor\">#</a> Usage:</h4> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n-n</span> <span class=\"token attr-name\">:value</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>money<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">format</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>currency<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">tag</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>label<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\"><span class=\"token namespace\">v-slot:</span>currency</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>slotProps<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>font-weight: bold<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>{{ slotProps.currency }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n-n</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">var</span> numberFormats <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token string\">'en-US'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    currency<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      style<span class=\"token operator\">:</span> <span class=\"token string\">'currency'</span><span class=\"token punctuation\">,</span> currency<span class=\"token operator\">:</span> <span class=\"token string\">'USD'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token string\">'ja-JP'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    currency<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      style<span class=\"token operator\">:</span> <span class=\"token string\">'currency'</span><span class=\"token punctuation\">,</span> currency<span class=\"token operator\">:</span> <span class=\"token string\">'JPY'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en-US'</span><span class=\"token punctuation\">,</span>\n  numberFormats\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token punctuation\">,</span>\n  data<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    money<span class=\"token operator\">:</span> <span class=\"token number\">10234</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><h4 id=\"scoped-slots\"><a href=\"#scoped-slots\" class=\"header-anchor\">#</a> Scoped slots</h4> <p><code>&lt;i18n-n&gt;</code> functional component can accept a number of named scoped slots. List of supported slot names is based on <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/formatToParts\" target=\"_blank\" rel=\"noopener noreferrer\"><code>Intl.NumberFormat.formatToParts()</code> output types<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>:</p> <ul><li><code>currency</code></li> <li><code>decimal</code></li> <li><code>fraction</code></li> <li><code>group</code></li> <li><code>infinity</code></li> <li><code>integer</code></li> <li><code>literal</code></li> <li><code>minusSign</code></li> <li><code>nan</code></li> <li><code>plusSign</code></li> <li><code>percentSign</code></li></ul> <p>Each of these named scoped slots will accept three scope parameters:</p> <ul><li><code>[slotName] {FormattedNumberPartType}</code>: parameter of the same name as actual slot name (like <code>integer</code>)</li> <li><code>index {Number}</code>: index of the specific part in the array of number parts</li> <li><code>parts {Array}</code>: array of all formatted number parts</li></ul> <h4 id=\"see-also-2\"><a href=\"#see-also-2\" class=\"header-anchor\">#</a> See also:</h4> <p><a href=\"/vue-i18n/guide/number.html#custom-formatting\">Number custom formatting</a></p> <h2 id=\"special-attributes\"><a href=\"#special-attributes\" class=\"header-anchor\">#</a> Special Attributes</h2> <h3 id=\"place\"><a href=\"#place\" class=\"header-anchor\">#</a> place</h3> <blockquote><p>🆕 7.2+</p></blockquote> <h4 id=\"expects-number-string\"><a href=\"#expects-number-string\" class=\"header-anchor\">#</a> Expects: <code>{number | string}</code></h4> <p>Used on component interpolation to indicate which index of list formatting or key of named formatting.</p> <p>For detailed usage, see the guide section linked below.</p> <h4 id=\"see-also-3\"><a href=\"#see-also-3\" class=\"header-anchor\">#</a> See also:</h4> <p><a href=\"/vue-i18n/guide/interpolation.html\">Component interpolation</a></p></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/api/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">Edit this page on GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Last Updated: </span> <span class=\"time\">5/14/2020, 11:30:34 PM</span></div></div> <!----> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/5.0b14e886.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/assets/css/0.styles.c299b601.css",
    "content": ".home{padding:3.6rem 2rem 0;max-width:960px;margin:0 auto}.home .hero{text-align:center}.home .hero img{max-width:100%;max-height:280px;display:block;margin:3rem auto 1.5rem}.home .hero h1{font-size:3rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.8rem auto}.home .hero .description{max-width:35rem;font-size:1.6rem;line-height:1.3;color:#6a8bad}.home .hero .action-button{display:inline-block;font-size:1.2rem;color:#fff;background-color:#3eaf7c;padding:.8rem 1.6rem;border-radius:4px;transition:background-color .1s ease;box-sizing:border-box;border-bottom:1px solid #389d70}.home .hero .action-button:hover{background-color:#4abf8a}.home .features{border-top:1px solid #eaecef;padding:1.2rem 0;margin-top:2.5rem;display:flex;flex-wrap:wrap;align-items:flex-start;align-content:stretch;justify-content:space-between}.home .feature{flex-grow:1;flex-basis:30%;max-width:30%}.home .feature h2{font-size:1.4rem;font-weight:500;border-bottom:none;padding-bottom:0;color:#3a5169}.home .feature p{color:#4e6e8e}.home .footer{padding:2.5rem;border-top:1px solid #eaecef;text-align:center;color:#4e6e8e}@media (max-width:719px){.home .features{flex-direction:column}.home .feature{max-width:100%;padding:0 2.5rem}}@media (max-width:419px){.home{padding-left:1.5rem;padding-right:1.5rem}.home .hero img{max-height:210px;margin:2rem auto 1.2rem}.home .hero h1{font-size:2rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.2rem auto}.home .hero .description{font-size:1.2rem}.home .hero .action-button{font-size:1rem;padding:.6rem 1.2rem}.home .feature h2{font-size:1.25rem}}.sidebar-button{display:none;width:1.25rem;height:1.25rem;position:absolute;padding:.6rem;top:.6rem;left:1rem;cursor:pointer}.sidebar-button .icon{display:block;width:1.25rem;height:1.25rem}@media (max-width:719px){.sidebar-button{display:block}}.search-box{display:inline-block;position:relative;margin-right:1rem}.search-box input{cursor:text;width:10rem;color:#4e6e8e;display:inline-block;border:1px solid #cfd4db;border-radius:2rem;font-size:.9rem;line-height:2rem;padding:0 .5rem 0 2rem;outline:none;transition:all .2s ease;background:#fff url(/vue-i18n/assets/img/search.83621669.svg) .6rem .5rem no-repeat;background-size:1rem}.search-box input:focus{cursor:auto;border-color:#3eaf7c}.search-box .suggestions{background:#fff;width:20rem;position:absolute;top:1.5rem;border:1px solid #cfd4db;border-radius:6px;padding:.4rem;list-style-type:none}.search-box .suggestions.align-right{right:0}.search-box .suggestion{line-height:1.4;padding:.4rem .6rem;border-radius:4px;cursor:pointer}.search-box .suggestion a{white-space:normal;color:#5d82a6}.search-box .suggestion a .page-title{font-weight:600}.search-box .suggestion a .header{font-size:.9em;margin-left:.25em}.search-box .suggestion.focused{background-color:#f3f4f5}.search-box .suggestion.focused a{color:#3eaf7c}@media (max-width:959px){.search-box input{cursor:pointer;width:0;border-color:transparent;position:relative}.search-box input:focus{cursor:text;left:0;width:10rem}}@media (max-width:959px) and (min-width:719px){.search-box .suggestions{left:0}}@media (max-width:719px){.search-box{margin-right:0}.search-box input{left:1rem}.search-box .suggestions{right:0}}@media (max-width:419px){.search-box .suggestions{width:calc(100vw - 4rem)}.search-box input:focus{width:8rem}}.dropdown-enter,.dropdown-leave-to{height:0!important}.dropdown-wrapper{cursor:pointer}.dropdown-wrapper .dropdown-title{display:block}.dropdown-wrapper .dropdown-title:hover{border-color:transparent}.dropdown-wrapper .dropdown-title .arrow{vertical-align:middle;margin-top:-1px;margin-left:.4rem}.dropdown-wrapper .nav-dropdown .dropdown-item{color:inherit;line-height:1.7rem}.dropdown-wrapper .nav-dropdown .dropdown-item h4{margin:.45rem 0 0;border-top:1px solid #eee;padding:.45rem 1.5rem 0 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper{padding:0;list-style:none}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper .dropdown-subitem{font-size:.9em}.dropdown-wrapper .nav-dropdown .dropdown-item a{display:block;line-height:1.7rem;position:relative;border-bottom:none;font-weight:400;margin-bottom:0;padding:0 1.5rem 0 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active,.dropdown-wrapper .nav-dropdown .dropdown-item a:hover{color:#3eaf7c}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{content:\"\";width:0;height:0;border-left:5px solid #3eaf7c;border-top:3px solid transparent;border-bottom:3px solid transparent;position:absolute;top:calc(50% - 2px);left:9px}.dropdown-wrapper .nav-dropdown .dropdown-item:first-child h4{margin-top:0;padding-top:0;border-top:0}@media (max-width:719px){.dropdown-wrapper.open .dropdown-title{margin-bottom:.5rem}.dropdown-wrapper .nav-dropdown{transition:height .1s ease-out;overflow:hidden}.dropdown-wrapper .nav-dropdown .dropdown-item h4{border-top:0;margin-top:0;padding-top:0}.dropdown-wrapper .nav-dropdown .dropdown-item>a,.dropdown-wrapper .nav-dropdown .dropdown-item h4{font-size:15px;line-height:2rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem{font-size:14px;padding-left:1rem}}@media (min-width:719px){.dropdown-wrapper{height:1.8rem}.dropdown-wrapper:hover .nav-dropdown{display:block!important}.dropdown-wrapper .dropdown-title .arrow{border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid #ccc;border-bottom:0}.dropdown-wrapper .nav-dropdown{display:none;height:auto!important;box-sizing:border-box;max-height:calc(100vh - 2.7rem);overflow-y:auto;position:absolute;top:100%;right:0;background-color:#fff;padding:.6rem 0;border:1px solid #ddd;border-bottom-color:#ccc;text-align:left;border-radius:.25rem;white-space:nowrap;margin:0}}.nav-links{display:inline-block}.nav-links a{line-height:1.4rem;color:inherit}.nav-links a.router-link-active,.nav-links a:hover{color:#3eaf7c}.nav-links .nav-item{position:relative;display:inline-block;margin-left:1.5rem;line-height:2rem}.nav-links .nav-item:first-child{margin-left:0}.nav-links .repo-link{margin-left:1.5rem}@media (max-width:719px){.nav-links .nav-item,.nav-links .repo-link{margin-left:0}}@media (min-width:719px){.nav-links a.router-link-active,.nav-links a:hover{color:#2c3e50}.nav-item>a:not(.external).router-link-active,.nav-item>a:not(.external):hover{margin-bottom:-2px;border-bottom:2px solid #46bd87}}.navbar{padding:.7rem 1.5rem;line-height:2.2rem;position:relative}.navbar a,.navbar img,.navbar span{display:inline-block}.navbar .logo{height:2.2rem;min-width:2.2rem;margin-right:.8rem;vertical-align:top}.navbar .site-name{font-size:1.3rem;font-weight:600;color:#2c3e50;position:relative}.navbar .links{padding-left:1.5rem;box-sizing:border-box;background-color:#fff;white-space:nowrap;font-size:.9rem;position:absolute;right:1.5rem;top:.7rem;display:flex}.navbar .links .search-box{flex:0 0 auto;vertical-align:top}.navbar .links .nav-links{flex:1}@media (max-width:719px){.navbar{padding-left:4rem}.navbar .can-hide{display:none}.navbar .links{padding-left:1.5rem}}.page-edit,.page-nav{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-edit,.page-nav{padding:2rem}}@media (max-width:419px){.page-edit,.page-nav{padding:1.5rem}}.page{padding-bottom:2rem}.page-edit{padding-top:1rem;padding-bottom:1rem;overflow:auto}.page-edit .edit-link{display:inline-block}.page-edit .edit-link a{color:#4e6e8e;margin-right:.25rem}.page-edit .last-updated{float:right;font-size:.9em}.page-edit .last-updated .prefix{font-weight:500;color:#4e6e8e}.page-edit .last-updated .time{font-weight:400;color:#aaa}.page-nav{padding-top:1rem;padding-bottom:0}.page-nav .inner{min-height:2rem;margin-top:0;border-top:1px solid #eaecef;padding-top:1rem;overflow:auto}.page-nav .next{float:right}@media (max-width:719px){.page-edit .edit-link{margin-bottom:.5rem}.page-edit .last-updated{font-size:.8em;float:none;text-align:left}}.sidebar .sidebar-sub-headers{padding-left:1rem;font-size:.95em}a.sidebar-link{font-weight:400;display:inline-block;color:#2c3e50;border-left:.25rem solid transparent;padding:.35rem 1rem .35rem 1.25rem;line-height:1.4;width:100%;box-sizing:border-box}a.sidebar-link:hover{color:#3eaf7c}a.sidebar-link.active{font-weight:600;color:#3eaf7c;border-left-color:#3eaf7c}.sidebar-group a.sidebar-link{padding-left:2rem}.sidebar-sub-headers a.sidebar-link{padding-top:.25rem;padding-bottom:.25rem;border-left:none}.sidebar-sub-headers a.sidebar-link.active{font-weight:500}.sidebar-group:not(.first){margin-top:1em}.sidebar-group .sidebar-group{padding-left:.5em}.sidebar-group:not(.collapsable) .sidebar-heading{cursor:auto;color:inherit}.sidebar-heading{color:#999;transition:color .15s ease;cursor:pointer;font-size:1.1em;font-weight:700;padding:0 1.5rem;margin-top:0;margin-bottom:.5rem}.sidebar-heading.open,.sidebar-heading:hover{color:inherit}.sidebar-heading .arrow{position:relative;top:-.12em;left:.5em}.sidebar-heading:.open .arrow{top:-.18em}.sidebar-group-items{transition:height .1s ease-out;overflow:hidden}.sidebar ul{padding:0;margin:0;list-style-type:none}.sidebar a{display:inline-block}.sidebar .nav-links{display:none;border-bottom:1px solid #eaecef;padding:.5rem 0 .75rem 0}.sidebar .nav-links a{font-weight:600}.sidebar .nav-links .nav-item,.sidebar .nav-links .repo-link{display:block;line-height:1.25rem;font-size:1.1em;padding:.5rem 0 .5rem 1.5rem}.sidebar .sidebar-links{padding:1.5rem 0}@media (max-width:719px){.sidebar .nav-links{display:block}.sidebar .nav-links .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{top:calc(1rem - 2px)}.sidebar .sidebar-links{padding:1rem 0}}.sw-update-popup{position:fixed;right:1em;bottom:1em;padding:1em;border:1px solid #3eaf7c;border-radius:3px;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.5);text-align:center}.sw-update-popup button{margin-top:.5em;padding:.25em 2em}.sw-update-popup-enter-active,.sw-update-popup-leave-active{transition:opacity .3s,transform .3s}.sw-update-popup-enter,.sw-update-popup-leave-to{opacity:0;transform:translateY(50%) scale(.5)}code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}#nprogress{pointer-events:none}#nprogress .bar{background:#3eaf7c;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #3eaf7c,0 0 5px #3eaf7c;opacity:1;transform:rotate(3deg) translateY(-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:2px solid transparent;border-top-color:#3eaf7c;border-left-color:#3eaf7c;border-radius:50%;animation:nprogress-spinner .4s linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.content code{color:#476582;padding:.25rem .5rem;margin:0;font-size:.85em;background-color:rgba(27,31,35,.05);border-radius:3px}.content pre,.content pre[class*=language-]{line-height:1.4;padding:1.25rem 1.5rem;margin:.85rem 0;background-color:#282c34;border-radius:6px;overflow:auto}.content pre[class*=language-] code,.content pre code{color:#fff;padding:0;background-color:transparent;border-radius:0}div[class*=language-]{position:relative;background-color:#282c34;border-radius:6px}div[class*=language-] .highlight-lines{-webkit-user-select:none;-ms-user-select:none;user-select:none;padding-top:1.3rem;position:absolute;top:0;left:0;width:100%;line-height:1.4}div[class*=language-] .highlight-lines .highlighted{background-color:rgba(0,0,0,.66)}div[class*=language-] pre,div[class*=language-] pre[class*=language-]{background:transparent;position:relative;z-index:1}div[class*=language-]:before{position:absolute;z-index:3;top:.8em;right:1em;font-size:.75rem;color:hsla(0,0%,100%,.4)}div[class*=language-]:not(.line-numbers-mode) .line-numbers-wrapper{display:none}div[class*=language-].line-numbers-mode .highlight-lines .highlighted{position:relative}div[class*=language-].line-numbers-mode .highlight-lines .highlighted:before{content:\" \";position:absolute;z-index:3;left:0;top:0;display:block;width:3.5rem;height:100%;background-color:rgba(0,0,0,.66)}div[class*=language-].line-numbers-mode pre{padding-left:4.5rem;vertical-align:middle}div[class*=language-].line-numbers-mode .line-numbers-wrapper{position:absolute;top:0;width:3.5rem;text-align:center;color:hsla(0,0%,100%,.3);padding:1.25rem 0;line-height:1.4}div[class*=language-].line-numbers-mode .line-numbers-wrapper br{-webkit-user-select:none;-ms-user-select:none;user-select:none}div[class*=language-].line-numbers-mode .line-numbers-wrapper .line-number{position:relative;z-index:4;-webkit-user-select:none;-ms-user-select:none;user-select:none;font-size:.85em}div[class*=language-].line-numbers-mode:after{content:\"\";position:absolute;z-index:2;top:0;left:0;width:3.5rem;height:100%;border-radius:6px 0 0 6px;border-right:1px solid rgba(0,0,0,.66);background-color:#282c34}div[class~=language-js]:before{content:\"js\"}div[class~=language-ts]:before{content:\"ts\"}div[class~=language-html]:before{content:\"html\"}div[class~=language-md]:before{content:\"md\"}div[class~=language-vue]:before{content:\"vue\"}div[class~=language-css]:before{content:\"css\"}div[class~=language-sass]:before{content:\"sass\"}div[class~=language-scss]:before{content:\"scss\"}div[class~=language-less]:before{content:\"less\"}div[class~=language-stylus]:before{content:\"stylus\"}div[class~=language-go]:before{content:\"go\"}div[class~=language-java]:before{content:\"java\"}div[class~=language-c]:before{content:\"c\"}div[class~=language-sh]:before{content:\"sh\"}div[class~=language-yaml]:before{content:\"yaml\"}div[class~=language-py]:before{content:\"py\"}div[class~=language-javascript]:before{content:\"js\"}div[class~=language-typescript]:before{content:\"ts\"}div[class~=language-markup]:before{content:\"html\"}div[class~=language-markdown]:before{content:\"md\"}div[class~=language-json]:before{content:\"json\"}div[class~=language-ruby]:before{content:\"rb\"}div[class~=language-python]:before{content:\"py\"}div[class~=language-bash]:before{content:\"sh\"}.custom-block .custom-block-title{font-weight:600;margin-bottom:-.4rem}.custom-block.danger,.custom-block.tip,.custom-block.warning{padding:.1rem 1.5rem;border-left-width:.5rem;border-left-style:solid;margin:1rem 0}.custom-block.tip{background-color:#f3f5f7;border-color:#42b983}.custom-block.warning{background-color:rgba(255,229,100,.3);border-color:#e7c000;color:#6b5900}.custom-block.warning .custom-block-title{color:#b29400}.custom-block.warning a{color:#2c3e50}.custom-block.danger{background-color:#ffe6e6;border-color:#c00;color:#4d0000}.custom-block.danger .custom-block-title{color:#900}.custom-block.danger a{color:#2c3e50}.arrow{display:inline-block;width:0;height:0}.arrow.up{border-bottom:6px solid #ccc}.arrow.down,.arrow.up{border-left:4px solid transparent;border-right:4px solid transparent}.arrow.down{border-top:6px solid #ccc}.arrow.right{border-left:6px solid #ccc}.arrow.left,.arrow.right{border-top:4px solid transparent;border-bottom:4px solid transparent}.arrow.left{border-right:6px solid #ccc}.content:not(.custom){max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.content:not(.custom){padding:2rem}}@media (max-width:419px){.content:not(.custom){padding:1.5rem}}.table-of-contents .badge{vertical-align:middle}body,html{padding:0;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;color:#2c3e50}.page{padding-left:20rem}.navbar{z-index:20;right:0;height:3.6rem;background-color:#fff;box-sizing:border-box;border-bottom:1px solid #eaecef}.navbar,.sidebar-mask{position:fixed;top:0;left:0}.sidebar-mask{z-index:9;width:100vw;height:100vh;display:none}.sidebar{font-size:15px;background-color:#fff;width:20rem;position:fixed;z-index:10;margin:0;top:3.6rem;left:0;bottom:0;box-sizing:border-box;border-right:1px solid #eaecef;overflow-y:auto}.content:not(.custom)>:first-child{margin-top:3.6rem}.content:not(.custom) a:hover{text-decoration:underline}.content:not(.custom) p.demo{padding:1rem 1.5rem;border:1px solid #ddd;border-radius:4px}.content:not(.custom) img{max-width:100%}.content.custom{padding:0;margin:0}.content.custom img{max-width:100%}a{font-weight:500;text-decoration:none}a,p a code{color:#3eaf7c}p a code{font-weight:400}kbd{background:#eee;border:.15rem solid #ddd;border-bottom:.25rem solid #ddd;border-radius:.15rem;padding:0 .15em}blockquote{font-size:1.2rem;color:#999;border-left:.25rem solid #dfe2e5;margin-left:0;padding-left:1rem}ol,ul{padding-left:1.2em}strong{font-weight:600}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25}.content:not(.custom)>h1,.content:not(.custom)>h2,.content:not(.custom)>h3,.content:not(.custom)>h4,.content:not(.custom)>h5,.content:not(.custom)>h6{margin-top:-3.1rem;padding-top:4.6rem;margin-bottom:0}.content:not(.custom)>h1:first-child,.content:not(.custom)>h2:first-child,.content:not(.custom)>h3:first-child,.content:not(.custom)>h4:first-child,.content:not(.custom)>h5:first-child,.content:not(.custom)>h6:first-child{margin-top:-1.5rem;margin-bottom:1rem}.content:not(.custom)>h1:first-child+.custom-block,.content:not(.custom)>h1:first-child+p,.content:not(.custom)>h1:first-child+pre,.content:not(.custom)>h2:first-child+.custom-block,.content:not(.custom)>h2:first-child+p,.content:not(.custom)>h2:first-child+pre,.content:not(.custom)>h3:first-child+.custom-block,.content:not(.custom)>h3:first-child+p,.content:not(.custom)>h3:first-child+pre,.content:not(.custom)>h4:first-child+.custom-block,.content:not(.custom)>h4:first-child+p,.content:not(.custom)>h4:first-child+pre,.content:not(.custom)>h5:first-child+.custom-block,.content:not(.custom)>h5:first-child+p,.content:not(.custom)>h5:first-child+pre,.content:not(.custom)>h6:first-child+.custom-block,.content:not(.custom)>h6:first-child+p,.content:not(.custom)>h6:first-child+pre{margin-top:2rem}h1:hover .header-anchor,h2:hover .header-anchor,h3:hover .header-anchor,h4:hover .header-anchor,h5:hover .header-anchor,h6:hover .header-anchor{opacity:1}h1{font-size:2.2rem}h2{font-size:1.65rem;padding-bottom:.3rem;border-bottom:1px solid #eaecef}h3{font-size:1.35rem}a.header-anchor{font-size:.85em;float:left;margin-left:-.87em;padding-right:.23em;margin-top:.125em;opacity:0}a.header-anchor:hover{text-decoration:none}.line-number,code,kbd{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}ol,p,ul{line-height:1.7}hr{border:0;border-top:1px solid #eaecef}table{border-collapse:collapse;margin:1rem 0;display:block;overflow-x:auto}tr{border-top:1px solid #dfe2e5}tr:nth-child(2n){background-color:#f6f8fa}td,th{border:1px solid #dfe2e5;padding:.6em 1em}.custom-layout{padding-top:3.6rem}.theme-container.sidebar-open .sidebar-mask{display:block}.theme-container.no-navbar .content:not(.custom)>h1,.theme-container.no-navbar h2,.theme-container.no-navbar h3,.theme-container.no-navbar h4,.theme-container.no-navbar h5,.theme-container.no-navbar h6{margin-top:1.5rem;padding-top:0}.theme-container.no-navbar .sidebar{top:0}.theme-container.no-navbar .custom-layout{padding-top:0}@media (min-width:720px){.theme-container.no-sidebar .sidebar{display:none}.theme-container.no-sidebar .page{padding-left:0}}@media (max-width:959px){.sidebar{font-size:15px;width:16.4rem}.page{padding-left:16.4rem}}@media (max-width:719px){.sidebar{top:0;padding-top:3.6rem;transform:translateX(-100%);transition:transform .2s ease}.page{padding-left:0}.theme-container.sidebar-open .sidebar{transform:translateX(0)}.theme-container.no-navbar .sidebar{padding-top:0}}@media (max-width:419px){h1{font-size:1.9rem}.content div[class*=language-]{margin:.85rem -1.5rem;border-radius:0}}.icon.outbound{color:#aaa;display:inline-block}.badge[data-v-099ab69c]{display:inline-block;font-size:14px;height:18px;line-height:18px;border-radius:3px;padding:0 6px;color:#fff;margin-right:5px;background-color:#42b983}.badge.middle[data-v-099ab69c]{vertical-align:middle}.badge.top[data-v-099ab69c]{vertical-align:top}.badge.green[data-v-099ab69c],.badge.tip[data-v-099ab69c]{background-color:#42b983}.badge.error[data-v-099ab69c]{background-color:#da5961}.badge.warn[data-v-099ab69c],.badge.warning[data-v-099ab69c],.badge.yellow[data-v-099ab69c]{background-color:#e7c000}"
  },
  {
    "path": "docs/assets/js/10.13689381.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{242:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),t._m(1),t._v(\" \"),a(\"p\",[t._v(\"Locale messages:\")]),t._v(\" \"),t._m(2),a(\"p\",[t._v(\"Template:\")]),t._v(\" \"),t._m(3),a(\"p\",[t._v(\"Output:\")]),t._v(\" \"),t._m(4),t._m(5),t._v(\" \"),a(\"p\",[t._v(\"Locale messages:\")]),t._v(\" \"),t._m(6),a(\"p\",[t._v(\"Template:\")]),t._v(\" \"),t._m(7),a(\"p\",[t._v(\"Output:\")]),t._v(\" \"),t._m(8),a(\"p\",[t._v(\"List formatting also accepts array-like objects:\")]),t._v(\" \"),t._m(9),a(\"p\",[t._v(\"Output:\")]),t._v(\" \"),t._m(10),t._m(11),t._v(\" \"),a(\"div\",{staticClass:\"warning custom-block\"},[a(\"p\",{staticClass:\"custom-block-title\"},[t._v(\"Notice\")]),t._v(\" \"),a(\"p\",[t._v(\"⚠️ Dynamically localizing arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use HTML interpolation on trusted content and never on user-provided content.\")]),t._v(\" \"),a(\"p\",[t._v(\"We recommended using the \"),a(\"router-link\",{attrs:{to:\"./interpolation.html\"}},[t._v(\"component interpolation\")]),t._v(\" feature.\")],1)]),t._v(\" \"),t._m(12),t._v(\" \"),a(\"p\",[t._v(\"In some cases you might want to render your translation as an HTML message and not a static string.\")]),t._v(\" \"),t._m(13),a(\"p\",[t._v(\"Template:\")]),t._v(\" \"),t._m(14),a(\"p\",[t._v(\"Output (instead of the pre-formatted message )\")]),t._v(\" \"),t._m(15),t._m(16),t._v(\" \"),a(\"p\",[t._v(\"Locale messages:\")]),t._v(\" \"),t._m(17),a(\"p\",[t._v(\"Template:\")]),t._v(\" \"),t._m(18),a(\"p\",[t._v(\"Output:\")]),t._v(\" \"),t._m(19),t._m(20),t._v(\" \"),a(\"p\",[t._v(\"Sometimes, you may need to translate using custom formatting (e.g. \"),a(\"a\",{attrs:{href:\"http://userguide.icu-project.org/formatparse/messages\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"ICU message syntax\"),a(\"OutboundLink\")],1),t._v(\").\")]),t._v(\" \"),a(\"p\",[t._v(\"You can do that with a custom formatter that implements the \"),a(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js#L41-L43\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Formatter Interface\"),a(\"OutboundLink\")],1),t._v(\".\")]),t._v(\" \"),a(\"p\",[t._v(\"The following custom formatter with ES2015 class syntax:\")]),t._v(\" \"),t._m(21),a(\"p\",[t._v(\"You can check \"),a(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/dev/examples/formatting/custom\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"the custom formatter official example\"),a(\"OutboundLink\")],1),t._v(\".\")])])}),[function(){var t=this.$createElement,s=this._self._c||t;return s(\"h1\",{attrs:{id:\"formatting\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#formatting\"}},[this._v(\"#\")]),this._v(\" Formatting\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"named-formatting\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#named-formatting\"}},[this._v(\"#\")]),this._v(\" Named formatting\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'{msg} world'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('message.hello', { msg: 'hello' }) }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"hello world\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"list-formatting\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#list-formatting\"}},[this._v(\"#\")]),this._v(\" List formatting\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'{0} world'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('message.hello', ['hello']) }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"hello world\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('message.hello', {'0': 'hello'}) }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"hello world\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"html-formatting\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#html-formatting\"}},[this._v(\"#\")]),this._v(\" HTML formatting\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"warning custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Notice\")]),this._v(\" \"),s(\"blockquote\",[s(\"p\",[this._v(\"🆕 8.11+\")])]),this._v(\" \"),s(\"p\",[this._v(\"You can control the use of HTML formatting. see the detail \"),s(\"code\",[this._v(\"warnHtmlInMessage\")]),this._v(\" constructor option and property API.\")])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hello <br> world'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-html\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"$t('message.hello')\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"hello\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!--<br> exists but is rendered as html and not a string--\\x3e\")]),t._v(\"\\nworld\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"support-ruby-on-rails-i18n-format\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#support-ruby-on-rails-i18n-format\"}},[this._v(\"#\")]),this._v(\" Support ruby on rails i18n format\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'%{msg} world'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('message.hello', { msg: 'hello' }) }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"hello world\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"custom-formatting\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#custom-formatting\"}},[this._v(\"#\")]),this._v(\" Custom formatting\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Custom Formatter implementation\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"class\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"CustomFormatter\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"constructor\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"options\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n       \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// interpolate\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// @param {string} message\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   string of list or named format.\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   e.g.\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   - named formatting: 'Hi {name}'\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   - list formatting: 'Hi {0}'\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// @param {Object | Array} values\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   values of `message` interpolation.\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   passed values with `$t`, `$tc` and `i18n` functional component.\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   e.g.\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   - $t('hello', { name: 'kazupon' }) -> passed values: Object `{ name: 'kazupon' }`\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   - $t('hello', ['kazupon']) -> passed values: Array `['kazupon']`\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   - `i18n` functional component (component interpolation)\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v('//     <i18n path=\"hello\">')]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//       <p>kazupon</p>\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//       <p>how are you?</p>\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//     </i18n>\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//     -> passed values: Array (included VNode):\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//        `[VNode{ tag: 'p', text: 'kazupon', ...}, VNode{ tag: 'p', text: 'how are you?', ...}]`\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// @return {Array<any>}\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   interpolated values. you need to return the following:\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   - array of string, when is using `$t` or `$tc`.\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   - array included VNode object, when is using `i18n` functional component.\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"interpolate\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"message\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" values\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n       \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// implement interpolation logic here\")]),t._v(\"\\n       \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\\n       \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// return the interpolated array\")]),t._v(\"\\n       \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'resolved message string'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// register with `formatter` option\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en-US'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  formatter\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"CustomFormatter\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"/* here the constructor options */\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en-US'\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Run!\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/11.aa13f293.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{243:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),a(\"p\",[t._v(\"You can use Webpack's \"),a(\"a\",{attrs:{href:\"https://webpack.js.org/concepts/hot-module-replacement/\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Hot Module Replacement\"),a(\"OutboundLink\")],1),t._v(\" (HMR) feature to watch for changes in localization files and hot reload changes into your application.\")]),t._v(\" \"),t._m(1),t._v(\" \"),a(\"p\",[t._v(\"If you only use a static set of locales, you can hot reload those locales explicitly:\")]),t._v(\" \"),t._m(2),t._m(3),t._v(\" \"),t._m(4),t._v(\" \"),t._m(5)])}),[function(){var t=this.$createElement,s=this._self._c||t;return s(\"h1\",{attrs:{id:\"hot-reloading\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#hot-reloading\"}},[this._v(\"#\")]),this._v(\" Hot reloading\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"basic-example\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#basic-example\"}},[this._v(\"#\")]),this._v(\" Basic example\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),t._v(\" Vue \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"vue\"')]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),t._v(\" VueI18n \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"vue-i18n\"')]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),t._v(\" en \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'./en'\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),t._v(\" ja \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'./ja'\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  ja\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// VueI18n instance\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Run app\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" app \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Hot updates\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"if\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"module\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"hot\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  module\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"hot\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"accept\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'./en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'./ja'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"function\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setLocaleMessage\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"require\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'./en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"default\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n    i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setLocaleMessage\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ja'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"require\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'./ja'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"default\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Or the following hot updates via $i18n property\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// app.$i18n.setLocaleMessage('en', require('./en').default)\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// app.$i18n.setLocaleMessage('ja', require('./ja').default)\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"advanced-example\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#advanced-example\"}},[this._v(\"#\")]),this._v(\" Advanced example\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"If you want to support a changing set of locales, you can hot reload those locales dynamically using \"),s(\"code\",[this._v(\"require.context\")]),this._v(\":\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),t._v(\" Vue \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"vue\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),t._v(\" VueI18n \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"vue-i18n\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\\nVue\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"use\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"VueI18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Load all locales and remember context\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"function\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"loadMessages\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" context \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" require\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"context\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"./locales\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token boolean\"}},[t._v(\"true\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token regex\"}},[t._v(\"/[a-z0-9-_]+\\\\.json$/i\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" context\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"keys\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"map\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"key\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" key\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" key\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"match\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token regex\"}},[t._v(\"/[a-z0-9-_]+/i\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),a(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"0\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"reduce\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"messages\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" key\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" locale \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"...\")]),t._v(\"messages\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"context\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"key\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" context\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" context\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"loadMessages\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// VueI18n instance\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"en\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Run app\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" app \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Hot updates\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"if\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"module\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"hot\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  module\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"hot\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"accept\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"context\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"id\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" newMessages \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"loadMessages\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\\n    Object\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"keys\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"newMessages\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"filter\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"locale\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" messages\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"!==\")]),t._v(\" newMessages\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"forEach\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"locale\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        messages\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" newMessages\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n        i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setLocaleMessage\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" messages\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/12.2b21ead8.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{244:function(t,a,s){\"use strict\";s.r(a);var n=s(0),e=Object(n.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),t._m(1),t._v(\" \"),t._m(2),t._v(\" \"),s(\"p\",[t._v(\"Sometimes, we need to localize with a locale message that was included in a HTML tag or component. For example:\")]),t._v(\" \"),t._m(3),t._m(4),t._v(\" \"),t._m(5),s(\"p\",[t._v(\"And your localized template may look like this:\")]),t._v(\" \"),t._m(6),s(\"p\",[t._v(\"Output:\")]),t._v(\" \"),t._m(7),t._m(8),t._v(\" \"),t._m(9),t._v(\" \"),t._m(10),t._m(11),s(\"p\",[t._v(\"the following output:\")]),t._v(\" \"),t._m(12),s(\"p\",[t._v(\"About the above example, see the \"),s(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/dev/examples/interpolation/places\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"example\"),s(\"OutboundLink\")],1)]),t._v(\" \"),t._m(13),t._v(\" \"),t._m(14),t._v(\" \"),t._m(15),t._v(\" \"),t._m(16),t._v(\" \"),t._m(17),t._v(\" \"),t._m(18),t._v(\" \"),t._m(19),t._v(\" \"),s(\"p\",[t._v(\"It's more convenient to use the named slots syntax. For example:\")]),t._v(\" \"),t._m(20),t._m(21),s(\"p\",[t._v(\"Outputs:\")]),t._v(\" \"),t._m(22),s(\"p\",[t._v(\"In Vue 2.6 and later, you can use the following slots syntax in templates:\")]),t._v(\" \"),t._m(23),t._m(24),t._v(\" \"),t._m(25),t._v(\" \"),t._m(26),t._v(\" \"),t._m(27),t._v(\" \"),t._m(28),t._v(\" \"),t._m(29),t._v(\" \"),t._m(30),t._m(31),s(\"p\",[t._v(\"Outputs:\")]),t._v(\" \"),t._m(32),t._m(33),t._v(\" \"),t._m(34),t._v(\" \"),t._m(35),s(\"p\",[t._v(\"Outputs:\")]),t._v(\" \"),t._m(36)])}),[function(){var t=this.$createElement,a=this._self._c||t;return a(\"h1\",{attrs:{id:\"component-interpolation\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#component-interpolation\"}},[this._v(\"#\")]),this._v(\" Component interpolation\")])},function(){var t=this.$createElement,a=this._self._c||t;return a(\"h2\",{attrs:{id:\"basic-usage\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#basic-usage\"}},[this._v(\"#\")]),this._v(\" Basic Usage\")])},function(){var t=this.$createElement,a=this._self._c||t;return a(\"div\",{staticClass:\"tip custom-block\"},[a(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Support Version\")]),this._v(\" \"),a(\"p\",[this._v(\"🆕 7.0+\")])])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"I accept xxx \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"href\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"/term\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Terms of Service Agreement\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a(\"p\",[this._v(\"In the above message, if you use \"),a(\"code\",[this._v(\"$t\")]),this._v(\", you will probably try to compose the following locale messages:\")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s(\"div\",{staticClass:\"language-js extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    term1\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'I Accept xxx\\\\'s'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    term2\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Terms of Service Agreement'\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('term1') }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"href\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"/term\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('term2') }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"I accept xxx \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"href\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"/term\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Terms of Service Agreement\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a(\"p\",[this._v(\"This is very cumbersome, and if you configure the \"),a(\"code\",[this._v(\"<a>\")]),this._v(\" tag in a locale message, there is a possibility of XSS vulnerabilities due to localizing with\\n\"),a(\"code\",[this._v(\"v-html=\\\"$t('term')\\\"\")]),this._v(\".\")])},function(){var t=this.$createElement,a=this._self._c||t;return a(\"p\",[this._v(\"You can avoid it using the \"),a(\"code\",[this._v(\"i18n\")]),this._v(\" functional component. For example:\")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"path\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"term\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"tag\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"label\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"for\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"tos\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":href\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"url\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"target\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"_blank\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('tos') }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s(\"div\",{staticClass:\"language-js extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    tos\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Term of Service'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    term\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'I accept xxx {0}.'\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  ja\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    tos\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'利用規約'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    term\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'私は xxx の{0}に同意します。'\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  data\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    url\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'/term'\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),s(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"label\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"for\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"tos\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    I accept xxx \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"href\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"/term\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"target\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"_blank\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Term of Service\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\".\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"label\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a(\"p\",[this._v(\"The children of \"),a(\"code\",[this._v(\"i18n\")]),this._v(\" functional component are interpolated with locale message of \"),a(\"code\",[this._v(\"path\")]),this._v(\" prop. In the above example,\")])},function(){var t=this.$createElement,a=this._self._c||t;return a(\"div\",{pre:!0},[a(\"p\",[a(\"code\",[this._v('<a :href=\"url\" target=\"_blank\">{{ $t(\\'tos\\') }}</a>')])])])},function(){var t=this.$createElement,a=this._self._c||t;return a(\"p\",[this._v(\"is interpolated with \"),a(\"code\",[this._v(\"term\")]),this._v(\" locale message.\")])},function(){var t=this.$createElement,a=this._self._c||t;return a(\"p\",[this._v(\"In the above example, the component interpolation follows the \"),a(\"strong\",[this._v(\"list formatting\")]),this._v(\". The children of \"),a(\"code\",[this._v(\"i18n\")]),this._v(\" functional component are interpolated by their order of appearance.\")])},function(){var t=this.$createElement,a=this._self._c||t;return a(\"p\",[this._v(\"You can choose the root container's node type by specifying a \"),a(\"code\",[this._v(\"tag\")]),this._v(\" prop. If omitted, it defaults to \"),a(\"code\",[this._v(\"'span'\")]),this._v(\". You can also set it to the boolean value \"),a(\"code\",[this._v(\"false\")]),this._v(\" to insert the child nodes directly without creating a root element.\")])},function(){var t=this.$createElement,a=this._self._c||t;return a(\"h2\",{attrs:{id:\"slots-syntax-usage\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#slots-syntax-usage\"}},[this._v(\"#\")]),this._v(\" Slots syntax usage\")])},function(){var t=this.$createElement,a=this._self._c||t;return a(\"div\",{staticClass:\"tip custom-block\"},[a(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Support Version\")]),this._v(\" \"),a(\"p\",[this._v(\"🆕 8.14+\")])])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"path\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"info\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"tag\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"p\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"template\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[s(\"span\",{pre:!0,attrs:{class:\"token namespace\"}},[t._v(\"v-slot:\")]),t._v(\"limit\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n      \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ changeLimit }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"template\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"template\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[s(\"span\",{pre:!0,attrs:{class:\"token namespace\"}},[t._v(\"v-slot:\")]),t._v(\"action\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n      \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":href\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"changeUrl\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('change') }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"template\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s(\"div\",{staticClass:\"language-js extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    info\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'You can {action} until {limit} minutes from departure.'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    change\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'change your flight'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    refund\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'refund the ticket'\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  data\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    changeUrl\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'/change'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    refundUrl\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'/refund'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    changeLimit\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"15\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    refundLimit\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"30\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),s(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    You can \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"href\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"/change\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"change your flight\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\" until \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"15\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\" minutes from departure.\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"path\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"info\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"tag\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"p\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"template\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"#limit\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n      \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ changeLimit }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"template\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"template\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"#action\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n      \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":href\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"changeUrl\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('change') }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"template\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a(\"div\",{staticClass:\"warning custom-block\"},[a(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Limitation\")]),this._v(\" \"),a(\"p\",[this._v(\"⚠️ In \"),a(\"code\",[this._v(\"i18n\")]),this._v(\" component, slots props are not supported.\")])])},function(){var t=this.$createElement,a=this._self._c||t;return a(\"h2\",{attrs:{id:\"places-syntax-usage\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#places-syntax-usage\"}},[this._v(\"#\")]),this._v(\" Places syntax usage\")])},function(){var t=this.$createElement,a=this._self._c||t;return a(\"div\",{staticClass:\"danger custom-block\"},[a(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Important!!\")]),this._v(\" \"),a(\"p\",[this._v(\"In the next major version, the \"),a(\"code\",[this._v(\"place\")]),this._v(\" and \"),a(\"code\",[this._v(\"places\")]),this._v(\" props will be deprecated. Please switch to slots syntax.\")])])},function(){var t=this.$createElement,a=this._self._c||t;return a(\"div\",{staticClass:\"tip custom-block\"},[a(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Support Version\")]),this._v(\" \"),a(\"p\",[this._v(\"🆕 7.2+\")])])},function(){var t=this.$createElement,a=this._self._c||t;return a(\"div\",{staticClass:\"warning custom-block\"},[a(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Notice\")]),this._v(\" \"),a(\"p\",[this._v(\"⚠️ In \"),a(\"code\",[this._v(\"i18n\")]),this._v(\" component, text content consisting of only white spaces will be omitted.\")])])},function(){var t=this.$createElement,a=this._self._c||t;return a(\"p\",[this._v(\"Named formatting is supported with the help of \"),a(\"code\",[this._v(\"place\")]),this._v(\" attribute. For example:\")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"path\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"info\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"tag\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"p\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"place\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"limit\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ changeLimit }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"place\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"action\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":href\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"changeUrl\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('change') }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s(\"div\",{staticClass:\"language-js extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    info\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'You can {action} until {limit} minutes from departure.'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    change\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'change your flight'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    refund\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'refund the ticket'\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  data\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    changeUrl\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'/change'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    refundUrl\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'/refund'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    changeLimit\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"15\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    refundLimit\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"30\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),s(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    You can \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"href\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"/change\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"change your flight\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\" until \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"15\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\" minutes from departure.\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a(\"div\",{staticClass:\"warning custom-block\"},[a(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Notice\")]),this._v(\" \"),a(\"p\",[this._v(\"⚠️ To use named formatting, all children of \"),a(\"code\",[this._v(\"i18n\")]),this._v(\" component must have \"),a(\"code\",[this._v(\"place\")]),this._v(\" attribute set. Otherwise it will fallback to list formatting.\")])])},function(){var t=this.$createElement,a=this._self._c||t;return a(\"p\",[this._v(\"If you still want to interpolate text content in named formatting, you could define \"),a(\"code\",[this._v(\"places\")]),this._v(\" property on \"),a(\"code\",[this._v(\"i18n\")]),this._v(\" component. For example:\")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"path\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"info\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"tag\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"p\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":places\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"{ limit: refundLimit }\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"place\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"action\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":href\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"refundUrl\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('refund') }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    You can \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"href\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"/refund\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"refund your ticket\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\" until 30 minutes from departure.\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])}],!1,null,null,null);a.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/13.b3706367.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{245:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),a(\"p\",[t._v(\"Loading all of your translation files at once is overkill and unnecessary.\")]),t._v(\" \"),a(\"p\",[t._v(\"Lazy loading or asynchronously loading the translation files is really easy when using Webpack.\")]),t._v(\" \"),a(\"p\",[t._v(\"Let´s assume we have a project directory similar to the one below:\")]),t._v(\" \"),t._m(1),t._m(2),t._v(\" \"),t._m(3),t._m(4),t._v(\" \"),t._m(5),t._v(\" \"),a(\"p\",[t._v(\"You can learn more about the import function in the \"),a(\"a\",{attrs:{href:\"https://webpack.js.org/guides/code-splitting/#dynamic-imports\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Webpack documentation\"),a(\"OutboundLink\")],1),t._v(\".\")]),t._v(\" \"),t._m(6),t._v(\" \"),t._m(7),t._m(8)])}),[function(){var t=this.$createElement,s=this._self._c||t;return s(\"h1\",{attrs:{id:\"lazy-loading-translations\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#lazy-loading-translations\"}},[this._v(\"#\")]),this._v(\" Lazy loading translations\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"language- extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-text\"}},[s(\"code\",[this._v(\"our-cool-project\\n-dist\\n-src\\n--routes\\n--store\\n--setup\\n---i18n-setup.js\\n--lang\\n---en.js\\n---it.js\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"The \"),s(\"code\",[this._v(\"lang\")]),this._v(\" folder is where all of our translation files reside. The \"),s(\"code\",[this._v(\"setup\")]),this._v(\" folder is where our arbitrary setup files like the i18n-setup, global component inits, plugin inits and other reside.\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//i18n-setup.js\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),t._v(\" Vue \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'vue'\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),t._v(\" VueI18n \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'vue-i18n'\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'@/lang/en'\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),t._v(\" axios \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'axios'\")]),t._v(\"\\n\\nVue\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"use\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"VueI18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"export\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// set locale\")]),t._v(\"\\n  fallbackLocale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// set locale messages\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" loadedLanguages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// our default language that is preloaded\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"function\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setI18nLanguage\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"lang\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"locale \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" lang\\n  axios\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"defaults\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"headers\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"common\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Accept-Language'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" lang\\n  document\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"querySelector\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'html'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setAttribute\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'lang'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" lang\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" lang\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"export\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"function\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"loadLanguageAsync\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"lang\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// If the same language\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"if\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"locale \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"===\")]),t._v(\" lang\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" Promise\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"resolve\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setI18nLanguage\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"lang\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// If the language was already loaded\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"if\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"loadedLanguages\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"includes\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"lang\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" Promise\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"resolve\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setI18nLanguage\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"lang\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// If the language hasn't been loaded yet\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v('/* webpackChunkName: \"lang-[request]\" */')]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token template-string\"}},[a(\"span\",{pre:!0,attrs:{class:\"token template-punctuation string\"}},[t._v(\"`\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"@/i18n/messages/\")]),a(\"span\",{pre:!0,attrs:{class:\"token interpolation\"}},[a(\"span\",{pre:!0,attrs:{class:\"token interpolation-punctuation punctuation\"}},[t._v(\"${\")]),t._v(\"lang\"),a(\"span\",{pre:!0,attrs:{class:\"token interpolation-punctuation punctuation\"}},[t._v(\"}\")])]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\".js\")]),a(\"span\",{pre:!0,attrs:{class:\"token template-punctuation string\"}},[t._v(\"`\")])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"then\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"messages\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setLocaleMessage\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"lang\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" messages\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"default\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      loadedLanguages\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"push\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"lang\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setI18nLanguage\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"lang\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"In short we are creating a new VueI18n instance as we normally would. Then we are creating a \"),s(\"code\",[this._v(\"loadedLanguages\")]),this._v(\" array that will keep track of our loaded languages. Next is the \"),s(\"code\",[this._v(\"setI18nLanguage\")]),this._v(\" function that will actually change the language in our vueI18n instance, axios and where ever else is needed.\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"The \"),s(\"code\",[this._v(\"loadLanguageAsync\")]),this._v(\" function is what we will actually use to change the languages. Loading the new files is done via the \"),s(\"code\",[this._v(\"import\")]),this._v(\" function, which is generously provided by Webpack and it allows us to load files dynamically, and because it uses promises we can easily wait for the loading to finish.\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"Using the \"),s(\"code\",[this._v(\"loadLanguageAsync\")]),this._v(\" function is straightforward. A common use case is inside a vue-router beforeEach hook.\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[t._v(\"router\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"beforeEach\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"to\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" next\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" lang \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" to\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"params\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"lang\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"loadLanguageAsync\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"lang\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"then\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"next\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"We could improve this by checking if the \"),s(\"code\",[this._v(\"lang\")]),this._v(\" is actually supported by us or not, call \"),s(\"code\",[this._v(\"reject\")]),this._v(\" so we can catch that in the \"),s(\"code\",[this._v(\"beforeEach\")]),this._v(\" stopping the route transition.\")])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/14.1819508a.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{246:function(t,a,s){\"use strict\";s.r(a);var n=s(0),e=Object(n.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),t._m(1),t._v(\" \"),t._m(2),t._v(\" \"),t._m(3),t._m(4),t._v(\" \"),s(\"p\",[t._v(\"Example:\")]),t._v(\" \"),t._m(5),t._m(6),t._v(\" \"),s(\"div\",{staticClass:\"warning custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[t._v(\"Component vs. root scope\")]),t._v(\" \"),s(\"p\",[t._v(\"⚠️ Changing \"),s(\"code\",[t._v(\"$i18n.locale\")]),t._v(\" inside a component does not update the root locale.\\nIf you rely on the root locale, for example when using \"),s(\"router-link\",{attrs:{to:\"./fallback.html\"}},[t._v(\"root fallbacks\")]),t._v(\", use \"),s(\"code\",[t._v(\"$root.$i18n.locale\")]),t._v(\" instead of \"),s(\"code\",[t._v(\"$i18n.locale\")]),t._v(\".\")],1)])])}),[function(){var t=this.$createElement,a=this._self._c||t;return a(\"h1\",{attrs:{id:\"locale-changing\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#locale-changing\"}},[this._v(\"#\")]),this._v(\" Locale changing\")])},function(){var t=this.$createElement,a=this._self._c||t;return a(\"p\",[this._v(\"Normally, using the root Vue instance as the starting point, all child components are localized using the \"),a(\"code\",[this._v(\"locale\")]),this._v(\" property of the \"),a(\"code\",[this._v(\"VueI18n\")]),this._v(\" class as a reference.\")])},function(){var t=this.$createElement,a=this._self._c||t;return a(\"p\",[this._v(\"Sometimes you might want to dynamically change the locale. In that case you can change the value of the \"),a(\"code\",[this._v(\"locale\")]),this._v(\" property of the \"),a(\"code\",[this._v(\"VueI18n\")]),this._v(\" instance.\")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s(\"div\",{staticClass:\"language-js extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ja'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// set locale\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"...\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// create root Vue instance\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"...\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),s(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// change other locale\")]),t._v(\"\\ni18n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"locale \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a(\"p\",[this._v(\"Each component contains a \"),a(\"code\",[this._v(\"VueI18n\")]),this._v(\" instance referenced as the \"),a(\"code\",[this._v(\"$i18n\")]),this._v(\" property that can also be used to change the locale.\")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"template\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"class\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"locale-changer\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"select\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-model\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"$i18n.locale\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n      \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"option\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-for\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"(lang, i) in langs\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":key\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"`Lang${i}`\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":value\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"lang\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ lang }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"option\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"select\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"template\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"script\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),s(\"span\",{pre:!0,attrs:{class:\"token script\"}},[s(\"span\",{pre:!0,attrs:{class:\"token language-javascript\"}},[t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"export\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"default\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  name\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'locale-changer'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"data\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" langs\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ja'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])]),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"script\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a(\"div\",{staticClass:\"warning custom-block\"},[a(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Notice\")]),this._v(\" \"),a(\"p\",[this._v(\"⚠️ Locale changing is ignored for components that use \"),a(\"code\",[this._v(\"sync: false\")]),this._v(\".\")])])}],!1,null,null,null);a.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/15.12152ec7.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{247:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this.$createElement;this._self._c;return this._m(0)}),[function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[a(\"h1\",{attrs:{id:\"locale-messages-syntax\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#locale-messages-syntax\"}},[t._v(\"#\")]),t._v(\" Locale messages syntax\")]),t._v(\" \"),a(\"h2\",{attrs:{id:\"structure\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#structure\"}},[t._v(\"#\")]),t._v(\" Structure\")]),t._v(\" \"),a(\"p\",[t._v(\"Locale Messages syntax below:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-typescript extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-typescript\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// As Flowtype definition, Locale Messages syntax like BNF annotation\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"type\")]),t._v(\" LocaleMessages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"key\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" Locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" LocaleMessageObject \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"type\")]),t._v(\" LocaleMessageObject \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"key\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" Path\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" LocaleMessage \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"type\")]),t._v(\" LocaleMessageArray \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" LocaleMessage\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"type\")]),t._v(\" LocaleMessage \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token builtin\"}},[t._v(\"string\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"|\")]),t._v(\" LocaleMessageObject \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"|\")]),t._v(\" LocaleMessageArray\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"type\")]),t._v(\" Locale \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token builtin\"}},[t._v(\"string\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"type\")]),t._v(\" Path \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token builtin\"}},[t._v(\"string\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"Based on the above syntax, You can configure the following Locale Messages structure:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-json extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-json\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v('\"en\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 'en' Locale\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v('\"key1\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"this is message1\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// basic\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v('\"nested\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// nested\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v('\"message1\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"this is nested message1\"')]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v('\"errors\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// array\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"this is 0 error code message\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// object in array\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v('\"internal1\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"this is internal 1 error message\"')]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// array in array\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"this is nested array error 1\"')]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v('\"ja\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 'ja' Locale\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"In the above Locale Messages structure, You can translate using below key paths.\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- basic --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('key1') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- nested --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('nested.message1') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- array --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('errors[0]') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- object in array --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('errors[1].internal1') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- array in array --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('errors[2][0]') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"Output the following:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- basic --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"this is message1\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- nested --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"this is nested message1\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- array --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"this is 0 error code message\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- object in array --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"this is internal 1 error message\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- array in array --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"this is nested array error 1\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),a(\"h2\",{attrs:{id:\"linked-locale-messages\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#linked-locale-messages\"}},[t._v(\"#\")]),t._v(\" Linked locale messages\")]),t._v(\" \"),a(\"p\",[t._v(\"If there's a translation key that will always have the same concrete text as another one you can just link to it. To link to another translation key, all you have to do is to prefix its contents with an \"),a(\"code\",[t._v(\"@:\")]),t._v(\" sign followed by the full name of the translation key including the namespace you want to link to.\")]),t._v(\" \"),a(\"p\",[t._v(\"Locale messages the below:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      the_world\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'the world'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      dio\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'DIO:'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      linked\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'@:message.dio @:message.the_world !!!!'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"Template:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('message.linked') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"Output:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"DIO: the world !!!!\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),a(\"h3\",{attrs:{id:\"formatting-linked-locale-messages\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#formatting-linked-locale-messages\"}},[t._v(\"#\")]),t._v(\" Formatting linked locale messages\")]),t._v(\" \"),a(\"p\",[t._v(\"If the language distinguish cases of character, you may need control the case of the linked locale messages.\\nLinked messages can be formatted with modifier \"),a(\"code\",[t._v(\"@.modifier:key\")])]),t._v(\" \"),a(\"p\",[t._v(\"The below modifiers are available currently.\")]),t._v(\" \"),a(\"ul\",[a(\"li\",[a(\"code\",[t._v(\"upper\")]),t._v(\": Uppercase all characters in the linked message.\")]),t._v(\" \"),a(\"li\",[a(\"code\",[t._v(\"lower\")]),t._v(\": Lowercase all characters in the linked message.\")]),t._v(\" \"),a(\"li\",[a(\"code\",[t._v(\"capitalize\")]),t._v(\": Capitalize the first character in the linked message.\")])]),t._v(\" \"),a(\"p\",[t._v(\"Locale messages the below:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-javascript extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-javascript\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      homeAddress\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Home address'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      missingHomeAddress\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Please provide @.lower:message.homeAddress'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"label\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('message.homeAddress') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"label\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"class\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"error\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('message.missingHomeAddress') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"Output the below:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"label\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Home address\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"label\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"class\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"error\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Please provide home address\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"You can add modifiers or overwrite the existing ones passing the \"),a(\"code\",[t._v(\"modifiers\")]),t._v(\" options to the \"),a(\"code\",[t._v(\"VueI18n\")]),t._v(\" constructor.\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-javascript extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-javascript\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  modifiers\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token function-variable function\"}},[t._v(\"snakeCase\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"str\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" str\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"split\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"' '\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"join\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'-'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])]),a(\"h3\",{attrs:{id:\"grouping-by-brackets\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#grouping-by-brackets\"}},[t._v(\"#\")]),t._v(\" Grouping by brackets\")]),t._v(\" \"),a(\"p\",[t._v(\"A translation key of linked locale message can also have the form of \"),a(\"code\",[t._v(\"@:(message.foo.bar.baz)\")]),t._v(\" in which the link to another translation key is within brackets \"),a(\"code\",[t._v(\"()\")]),t._v(\".\")]),t._v(\" \"),a(\"p\",[t._v(\"This can be useful if the link \"),a(\"code\",[t._v(\"@:message.something\")]),t._v(\" is followed by period \"),a(\"code\",[t._v(\".\")]),t._v(\", which otherwise would be part of the link and may not need to be.\")]),t._v(\" \"),a(\"p\",[t._v(\"Locale messages:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      dio\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'DIO'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      linked\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'There\\\\'s a reason, you lost, @:(message.dio).'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"Template:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('message.linked') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"Output:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"There's a reason, you lost, DIO.\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/16.c251473e.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{248:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),t._m(1),t._v(\" \"),a(\"p\",[t._v(\"You can localize the number with your definition formats.\")]),t._v(\" \"),a(\"p\",[t._v(\"Number formats the below:\")]),t._v(\" \"),t._m(2),a(\"p\",[t._v(\"As the above, you can define named number formats (e.g. \"),a(\"code\",[t._v(\"currency\")]),t._v(\", etc), and you need to use \"),a(\"a\",{attrs:{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"the options with ECMA-402 Intl.NumberFormat\"),a(\"OutboundLink\")],1)]),t._v(\" \"),t._m(3),t._v(\" \"),t._m(4),a(\"p\",[t._v(\"Template the below:\")]),t._v(\" \"),t._m(5),a(\"p\",[t._v(\"Output the below:\")]),t._v(\" \"),t._m(6),t._m(7),t._v(\" \"),t._m(8),t._v(\" \"),t._m(9),t._v(\" \"),t._m(10),t._v(\" \"),a(\"p\",[t._v(\"The following template:\")]),t._v(\" \"),t._m(11),a(\"p\",[t._v(\"will produce the below output:\")]),t._v(\" \"),t._m(12),a(\"p\",[t._v(\"But the real power of this component comes into play when it is used with \"),a(\"a\",{attrs:{href:\"https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"scoped slots\"),a(\"OutboundLink\")],1),t._v(\".\")]),t._v(\" \"),t._m(13),t._v(\" \"),t._m(14),a(\"p\",[t._v(\"Template above will result in the following HTML:\")]),t._v(\" \"),t._m(15),a(\"p\",[t._v(\"It is possible to specify multiple scoped slots at the same time:\")]),t._v(\" \"),t._m(16),a(\"p\",[t._v(\"(this resulting HTML was formatted for better readability)\")]),t._v(\" \"),t._m(17),t._m(18),t._v(\" \"),a(\"p\",[t._v(\"Full list of the supported scoped slots as well as other \"),a(\"code\",[t._v(\"<i18n-n>\")]),t._v(\" properties can be found \"),a(\"router-link\",{attrs:{to:\"./../api/#i18n-n-functional-component\"}},[t._v(\"on API page\")]),t._v(\".\")],1)])}),[function(){var t=this.$createElement,s=this._self._c||t;return s(\"h1\",{attrs:{id:\"number-localization\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#number-localization\"}},[this._v(\"#\")]),this._v(\" Number localization\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"tip custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Support Version\")]),this._v(\" \"),s(\"p\",[this._v(\"🆕 7.0+\")])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" numberFormats \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en-US'\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    currency\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      style\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'currency'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" currency\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'USD'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ja-JP'\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    currency\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      style\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'currency'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" currency\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'JPY'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" currencyDisplay\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'symbol'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"After that, when using the locale messages, you need to specify the \"),s(\"code\",[this._v(\"numberFormats\")]),this._v(\" option of the \"),s(\"code\",[this._v(\"VueI18n\")]),this._v(\" constructor:\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  numberFormats\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $n(100, 'currency') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $n(100, 'currency', 'ja-JP') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"$100.00\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"￥100\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"custom-formatting\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#custom-formatting\"}},[this._v(\"#\")]),this._v(\" Custom formatting\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"tip custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Support Version\")]),this._v(\" \"),s(\"p\",[this._v(\"🆕 8.10+\")])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[s(\"code\",[this._v(\"$n\")]),this._v(\" method returns resulting string with fully formatted number, which can only be used as a whole. In situations when you need to style some part of the formatted number (like fraction digits), \"),s(\"code\",[this._v(\"$n\")]),this._v(\" is not enough. In such cases \"),s(\"code\",[this._v(\"<i18n-n>\")]),this._v(\" functional component will be of help.\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"With a minimum set of properties, \"),s(\"code\",[this._v(\"<i18n-n>\")]),this._v(\" generates the same output as \"),s(\"code\",[this._v(\"$n\")]),this._v(\", wrapped into configured DOM element.\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n-n\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":value\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"100\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n-n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n-n\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":value\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"100\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"format\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"currency\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n-n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n-n\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":value\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"100\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"format\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"currency\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"locale\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"ja-JP\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n-n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"100\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"$100.00\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"￥100\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"Let's say there is a requirement to render the integer part of the number with a bolder font. This can be achieved by specifying \"),s(\"code\",[this._v(\"integer\")]),this._v(\" scoped slot element:\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n-n\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":value\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"100\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"format\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"currency\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[a(\"span\",{pre:!0,attrs:{class:\"token namespace\"}},[t._v(\"v-slot:\")]),t._v(\"integer\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"slotProps\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"styles\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"font-weight: bold\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ slotProps.integer }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n-n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"$\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"styles\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"font-weight: bold\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"100\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\".00\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n-n\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":value\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"1234\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":format\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"{ key: 'currency', currency: 'EUR' }\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[a(\"span\",{pre:!0,attrs:{class:\"token namespace\"}},[t._v(\"v-slot:\")]),t._v(\"currency\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"slotProps\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"styles\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"color: green\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ slotProps.currency }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[a(\"span\",{pre:!0,attrs:{class:\"token namespace\"}},[t._v(\"v-slot:\")]),t._v(\"integer\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"slotProps\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"styles\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"font-weight: bold\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ slotProps.integer }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[a(\"span\",{pre:!0,attrs:{class:\"token namespace\"}},[t._v(\"v-slot:\")]),t._v(\"group\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"slotProps\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"styles\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"font-weight: bold\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ slotProps.group }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[a(\"span\",{pre:!0,attrs:{class:\"token namespace\"}},[t._v(\"v-slot:\")]),t._v(\"fraction\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"slotProps\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"styles\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"font-size: small\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ slotProps.fraction }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n-n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"styles\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"color: green\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"€\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"styles\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"font-weight: bold\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"1\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"styles\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"font-weight: bold\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\",\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"styles\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"font-weight: bold\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"234\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  .\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"styles\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"font-size: small\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"00\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"You can choose the root container's node type by specifying a \"),s(\"code\",[this._v(\"tag\")]),this._v(\" prop. If omitted, it defaults to \"),s(\"code\",[this._v(\"'span'\")]),this._v(\". You can also set it to the boolean value \"),s(\"code\",[this._v(\"false\")]),this._v(\" to insert the child nodes directly without creating a root element.\")])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/17.311179bd.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{249:function(t,a,s){\"use strict\";s.r(a);var n=s(0),p=Object(n.a)({},(function(){var t=this.$createElement;this._self._c;return this._m(0)}),[function(){var t=this,a=t.$createElement,s=t._self._c||a;return s(\"div\",{staticClass:\"content\"},[s(\"h1\",{attrs:{id:\"pluralization\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#pluralization\"}},[t._v(\"#\")]),t._v(\" Pluralization\")]),t._v(\" \"),s(\"p\",[t._v(\"You can translate with pluralization. You must define the locale that have a pipe \"),s(\"code\",[t._v(\"|\")]),t._v(\" separator, and define plurals in pipe separator.\")]),t._v(\" \"),s(\"p\",[s(\"em\",[t._v(\"Your template will need to use \"),s(\"code\",[t._v(\"$tc()\")]),t._v(\" instead of \"),s(\"code\",[t._v(\"$t()\")]),t._v(\".\")])]),t._v(\" \"),s(\"p\",[t._v(\"Locale messages below:\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-js extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    car\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'car | cars'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    apple\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'no apples | one apple | {count} apples'\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),s(\"p\",[t._v(\"Template below:\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('car', 1) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('car', 2) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('apple', 0) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('apple', 1) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('apple', 10, { count: 10 }) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),s(\"p\",[t._v(\"Output below:\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"car\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"cars\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"no apples\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"one apple\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"10 apples\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),s(\"h2\",{attrs:{id:\"accessing-the-number-via-the-pre-defined-argument\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#accessing-the-number-via-the-pre-defined-argument\"}},[t._v(\"#\")]),t._v(\" Accessing the number via the pre-defined argument\")]),t._v(\" \"),s(\"p\",[t._v(\"You don't need to explicitly give the number for pluralization.\\nThe number can be accessed within locale messages via pre-defined named arguments \"),s(\"code\",[t._v(\"{count}\")]),t._v(\" and/or \"),s(\"code\",[t._v(\"{n}\")]),t._v(\".\\nYou can overwrite those pre-defined named arguments if necessary.\")]),t._v(\" \"),s(\"p\",[t._v(\"Locale messages the below:\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-js extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    apple\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'no apples | one apple | {count} apples'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    banana\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'no bananas | {n} banana | {n} bananas'\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),s(\"p\",[t._v(\"Template below:\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('apple', 10, { count: 10 }) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('apple', 10) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('banana', 1, { n: 1 }) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('banana', 1) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('banana', 100, { n: 'too many' }) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),s(\"p\",[t._v(\"Output below:\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"10 apples\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"10 apples\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"1 banana\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"1 banana\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"too many bananas\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),s(\"h2\",{attrs:{id:\"custom-pluralization\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#custom-pluralization\"}},[t._v(\"#\")]),t._v(\" Custom pluralization\")]),t._v(\" \"),s(\"p\",[t._v(\"Such pluralization, however, does not apply to all languages (Slavic languages, for example, have different pluralization rules).\")]),t._v(\" \"),s(\"p\",[t._v(\"In order to implement these rules you can override the \"),s(\"code\",[t._v(\"VueI18n.prototype.getChoiceIndex\")]),t._v(\" function.\")]),t._v(\" \"),s(\"p\",[t._v(\"Very simplified example using rules for Slavic languages (Russian, Ukrainian, etc.):\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-js extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[s(\"code\",[t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" defaultImpl \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"prototype\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"getChoiceIndex\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"/**\\n * @param choice {number} a choice index given by the input to $tc: `$tc('path.to.rule', choiceIndex)`\\n * @param choicesLength {number} an overall amount of available choices\\n * @returns a final choice index to select plural word by\\n**/\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"prototype\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),s(\"span\",{pre:!0,attrs:{class:\"token function-variable function\"}},[t._v(\"getChoiceIndex\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"function\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"choice\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" choicesLength\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// this === VueI18n instance, so the locale property also exists here\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"if\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"this\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"locale \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"!==\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ru'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// proceed to the default implementation\")]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"defaultImpl\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),s(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"apply\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"this\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" arguments\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"if\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"choice \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"===\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"0\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"0\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" teen \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" choice \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"10\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"&&\")]),t._v(\" choice \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"20\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" endsWithOne \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" choice \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"%\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"10\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"===\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"1\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"if\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"!\")]),t._v(\"teen \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"&&\")]),t._v(\" endsWithOne\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"1\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"if\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"!\")]),t._v(\"teen \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"&&\")]),t._v(\" choice \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"%\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"10\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"2\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"&&\")]),t._v(\" choice \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"%\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"10\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"4\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"2\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"choicesLength \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"4\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"?\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"2\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"3\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),s(\"p\",[t._v(\"This would effectively give this:\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-javascript extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-javascript\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  ru\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    car\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'0 машин | {n} машина | {n} машины | {n} машин'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    banana\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'нет бананов | {n} банан | {n} банана | {n} бананов'\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),s(\"p\",[t._v(\"Where the format is \"),s(\"code\",[t._v(\"0 things | 1 thing | few things | multiple things\")]),t._v(\".\")]),t._v(\" \"),s(\"p\",[t._v(\"Your template still needs to use \"),s(\"code\",[t._v(\"$tc()\")]),t._v(\", not \"),s(\"code\",[t._v(\"$t()\")]),t._v(\":\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('car', 1) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('car', 2) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('car', 4) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('car', 12) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('car', 21) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('banana', 0) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('banana', 4) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('banana', 11) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('banana', 31) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),s(\"p\",[t._v(\"Which results in:\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"1 машина\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"2 машины\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"4 машины\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"12 машин\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"21 машина\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"нет бананов\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"4 банана\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"11 бананов\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"31 банан\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])])}],!1,null,null,null);a.default=p.exports}}]);"
  },
  {
    "path": "docs/assets/js/18.a9d0f1d4.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{250:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),t._m(1),t._v(\" \"),t._m(2),t._v(\" \"),a(\"p\",[t._v(\"The following in \"),a(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/dev/examples/sfc\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"single file components example\"),a(\"OutboundLink\")],1),t._v(\":\")]),t._v(\" \"),t._m(3),t._m(4),t._v(\" \"),a(\"p\",[t._v(\"You need to install \"),a(\"code\",[t._v(\"vue-loader\")]),t._v(\" and \"),a(\"code\",[t._v(\"vue-i18n-loader\")]),t._v(\" due to use \"),a(\"code\",[t._v(\"<i18n>\")]),t._v(\" custom blocks. While \"),a(\"a\",{attrs:{href:\"https://github.com/vuejs/vue-loader\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"vue-loader\"),a(\"OutboundLink\")],1),t._v(\" most likely is already used in your project if you are working with single file components, you must install \"),a(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n-loader\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"vue-i18n-loader\"),a(\"OutboundLink\")],1),t._v(\" additionally:\")]),t._v(\" \"),t._m(5),t._m(6),t._v(\" \"),a(\"p\",[t._v(\"For Webpack the configuration below is required:\")]),t._v(\" \"),a(\"p\",[t._v(\"for vue-loader v15 or later:\")]),t._v(\" \"),t._m(7),a(\"p\",[t._v(\"for vue-loader v14:\")]),t._v(\" \"),t._m(8),t._m(9),t._v(\" \"),a(\"p\",[a(\"a\",{attrs:{href:\"https://github.com/vuejs/vue-cli\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Vue CLI 3.0\"),a(\"OutboundLink\")],1),t._v(\" hides the webpack configuration, so, if we want to add support to the \"),a(\"code\",[t._v(\"<i18n>\")]),t._v(\" tag inside a single file component we need to modify the existing configuration.\")]),t._v(\" \"),t._m(10),t._v(\" \"),a(\"p\",[t._v(\"for vue-loader v15 or later:\")]),t._v(\" \"),t._m(11),a(\"p\",[t._v(\"for vue-loader v14:\")]),t._v(\" \"),t._m(12),a(\"p\",[a(\"em\",[t._v(\"Don 't forget to install \"),a(\"a\",{attrs:{href:\"https://github.com/KyleAMathews/deepmerge\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"deepmerge\"),a(\"OutboundLink\")],1),t._v(\"! (\"),a(\"code\",[t._v(\"npm i deepmerge -D\")]),t._v(\" or \"),a(\"code\",[t._v(\"yarn add deepmerge -D\")]),t._v(\")\")])]),t._v(\" \"),a(\"p\",[t._v(\"If you want to read more about modifying the existing configuration \"),a(\"a\",{attrs:{href:\"https://cli.vuejs.org/guide/webpack.html\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"click here\"),a(\"OutboundLink\")],1),t._v(\".\")]),t._v(\" \"),t._m(13),t._v(\" \"),a(\"p\",[t._v(\"for Laravel-mix 4 with vue-loader v15 or later:\")]),t._v(\" \"),t._m(14),a(\"p\",[t._v(\"for Laravel-mix 2 with vue-loader v14:\")]),t._v(\" \"),a(\"p\",[t._v(\"As of \"),a(\"a\",{attrs:{href:\"https://github.com/JeffreyWay/laravel-mix/releases/tag/v2.1\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"V2.1\"),a(\"OutboundLink\")],1),t._v(\" of Laravel-mix, you can add custom rules via mix.extend(). Laravel mix already has its own rules for handling .vue files. To add the \"),a(\"code\",[t._v(\"vue-i18n-loader\")]),t._v(\", add the following to \"),a(\"code\",[t._v(\"webpack.mix.js\")])]),t._v(\" \"),t._m(15),t._m(16),t._v(\" \"),t._m(17),t._v(\" \"),t._m(18),t._v(\" \"),t._m(19),a(\"p\",[t._v(\"Webpack conf the below:\")]),t._v(\" \"),a(\"p\",[t._v(\"for vue-loader v15 or later:\")]),t._v(\" \"),t._m(20),a(\"p\",[t._v(\"for vue-loader v14:\")]),t._v(\" \"),t._m(21),t._m(22),t._v(\" \"),t._m(23),t._v(\" \"),t._m(24),t._m(25),t._v(\" \"),a(\"p\",[t._v(\"In this way, multiple custom blocks useful when want to be used as module.\")]),t._v(\" \"),t._m(26),t._v(\" \"),a(\"p\",[t._v(\"When using \"),a(\"code\",[t._v(\"vue-i18n\")]),t._v(\" with \"),a(\"code\",[t._v(\"scoped style\")]),t._v(\", it's important to remember to use a \"),a(\"a\",{attrs:{href:\"https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"deep selector\"),a(\"OutboundLink\")],1),t._v(\" for styling an element \"),t._m(27),t._v(\" the translation string. For example:\")]),t._v(\" \"),t._m(28),t._v(\" \"),t._m(29),t._m(30),t._v(\" \"),t._m(31),t._m(32),t._v(\" \"),t._m(33),t._v(\" \"),t._m(34),t._v(\" \"),t._m(35)])}),[function(){var t=this.$createElement,s=this._self._c||t;return s(\"h1\",{attrs:{id:\"single-file-components\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#single-file-components\"}},[this._v(\"#\")]),this._v(\" Single file components\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"basic-usage\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#basic-usage\"}},[this._v(\"#\")]),this._v(\" Basic Usage\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"If you are building Vue component or Vue application using single file components, you can manage the locale messages \"),s(\"code\",[this._v(\"i18n\")]),this._v(\" custom block.\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),t._v(\"i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"en\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"hello\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"hello world!\"')]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"ja\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"hello\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"こんにちは、世界！\"')]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"/\")]),t._v(\"i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),t._v(\"template\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),t._v(\"div id\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"app\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),t._v(\"label \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"for\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"locale\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"/\")]),t._v(\"label\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),t._v(\"select v\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"-\")]),t._v(\"model\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"locale\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),t._v(\"option\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"/\")]),t._v(\"option\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),t._v(\"option\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"ja\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"/\")]),t._v(\"option\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"/\")]),t._v(\"select\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),t._v(\"p\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$t\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hello'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"/\")]),t._v(\"p\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"/\")]),t._v(\"div\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"/\")]),t._v(\"template\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),t._v(\"script\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"export\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"default\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  name\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"data\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"this\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"$i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"locale \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  watch\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"locale\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"val\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"this\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"$i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"locale \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" val\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"/\")]),t._v(\"script\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"installing-vue-i18n-loader\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#installing-vue-i18n-loader\"}},[this._v(\"#\")]),this._v(\" Installing vue-i18n-loader\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"language-sh extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-text\"}},[s(\"code\",[this._v(\"npm i --save-dev @kazupon/vue-i18n-loader\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"webpack\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#webpack\"}},[this._v(\"#\")]),this._v(\" Webpack\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[t._v(\"module\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"exports \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n  module\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    rules\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        test\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token regex\"}},[t._v(\"/\\\\.vue$/\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        loader\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'vue-loader'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        resourceQuery\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token regex\"}},[t._v(\"/blockType=i18n/\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        type\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'javascript/auto'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        loader\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'@kazupon/vue-i18n-loader'\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[t._v(\"module\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"exports \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n  module\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    rules\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        test\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token regex\"}},[t._v(\"/\\\\.vue$/\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        loader\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'vue-loader'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        options\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n          loaders\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n            \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// you need to specify `i18n` loaders key with `vue-i18n-loader` (https://github.com/kazupon/vue-i18n-loader)\")]),t._v(\"\\n            i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'@kazupon/vue-i18n-loader'\")]),t._v(\"\\n          \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"vue-cli-3-0\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#vue-cli-3-0\"}},[this._v(\"#\")]),this._v(\" Vue CLI 3.0\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"In order to do that we have to create a \"),s(\"code\",[this._v(\"vue.config.js\")]),this._v(\" at the root of our project. Once we have done that, we have to include the following:\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[t._v(\"module\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"exports \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token function-variable function\"}},[t._v(\"chainWebpack\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"config\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    config\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"module\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"rule\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"i18n\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"resourceQuery\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token regex\"}},[t._v(\"/blockType=i18n/\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"type\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'javascript/auto'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"use\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"i18n\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"loader\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"@kazupon/vue-i18n-loader\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"end\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" merge \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"require\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'deepmerge'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\nmodule\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"exports \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token function-variable function\"}},[t._v(\"chainWebpack\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"config\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    config\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"module\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"rule\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'vue'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"use\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'vue-loader'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"tap\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"options\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"merge\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"options\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n          loaders\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n            i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'@kazupon/vue-i18n-loader'\")]),t._v(\"\\n          \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"laravel-mix\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#laravel-mix\"}},[this._v(\"#\")]),this._v(\" Laravel-Mix\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v('// Extend Mix with the \"i18n\" method, that loads the vue-i18n-loader')]),t._v(\"\\nmix\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"extend\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'i18n'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"class\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"webpackRules\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n            \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"\\n                \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n                    resourceQuery\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token regex\"}},[t._v(\"/blockType=i18n/\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n                    type\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\"          \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'javascript/auto'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n                    loader\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\"        \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'@kazupon/vue-i18n-loader'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n                \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n            \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Make sure to call the .i18n() (to load the loader) before .js(..., ...)\")]),t._v(\"\\nmix\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n   \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"js\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'resources/js/App.js'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'public/js/app.js'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n   \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"...\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// The below code will inject i18n Kazupon/vue-18-loader as a loader for .vue files.\")]),t._v(\"\\nmix\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"extend\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'i18n'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"function\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"webpackConfig\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"...\")]),t._v(\"args\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    webpackConfig\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"module\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"rules\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"forEach\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"module\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v('// Search for the \"vue-loader\" component, which handles .vue files.')]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"if\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\" module\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"loader \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"!==\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'vue-loader'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n            \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Within this module, add the vue-i18n-loader for the i18n tag.\")]),t._v(\"\\n        module\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"options\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"loaders\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'@kazupon/vue-i18n-loader'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Make sure to call .i18n() before .js(..., ...)\")]),t._v(\"\\nmix\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n   \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"js\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'resources/assets/js/App.js'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'public/js/app.js'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n   \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"...\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"yaml-loading\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#yaml-loading\"}},[this._v(\"#\")]),this._v(\" YAML loading\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"p\",[a(\"code\",[t._v(\"i18n\")]),t._v(\" custom blocks need to specify \"),a(\"code\",[t._v(\"JSON\")]),t._v(\" format, also you can use \"),a(\"code\",[t._v(\"YAML\")]),t._v(\" format by using pre-loader feature of \"),a(\"code\",[t._v(\"vue-loader\")]),t._v(\".\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"the \"),s(\"code\",[this._v(\"i18n\")]),this._v(\" custom blocks below of \"),s(\"code\",[this._v(\"YAML\")]),this._v(\" format:\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v('\\nen:\\n  hello: \"hello world!\"\\nja:\\n  hello: \"こんにちは、世界！\"\\n'),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Vue CLI 3.0\")]),t._v(\"\\nmodule\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"exports \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token function-variable function\"}},[t._v(\"chainWebpack\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"config\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    config\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"module\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"rule\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"i18n\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"resourceQuery\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token regex\"}},[t._v(\"/blockType=i18n/\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"type\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'javascript/auto'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"use\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"i18n\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"loader\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"@kazupon/vue-i18n-loader\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"end\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"use\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'yaml'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"loader\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'yaml-loader'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"end\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[t._v(\"module\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"exports \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n  module\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    rules\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        test\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token regex\"}},[t._v(\"/\\\\.vue$/\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        loader\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'vue-loader'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        options\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n          preLoaders\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n            i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'yaml-loader'\")]),t._v(\"\\n          \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n          loaders\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n            i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'@kazupon/vue-i18n-loader'\")]),t._v(\"\\n          \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"multiple-custom-blocks\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#multiple-custom-blocks\"}},[this._v(\"#\")]),this._v(\" Multiple custom blocks\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"You can use locale messages with multiple \"),s(\"code\",[this._v(\"i18n\")]),this._v(\" custom blocks.\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"src\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"./common/locales.json\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v('\\n  {\\n    \"en\": {\\n      \"hello\": \"hello world!\"\\n    },\\n    \"ja\": {\\n      \"hello\": \"こんにちは、世界！\"\\n    }\\n  }\\n'),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"In the above, first custom block load the common locale message with \"),s(\"code\",[this._v(\"src\")]),this._v(\" attribute, second custom block load the locale message that is defined only at single file component. These locale messages will be merged as locale message of component.\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"scoped-style\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#scoped-style\"}},[this._v(\"#\")]),this._v(\" Scoped style\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"strong\",[s(\"em\",[this._v(\"inside\")])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[s(\"strong\",[this._v(\"Translation contains only text\")]),this._v(\" (Work without deep selector)\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[t._v(\"...\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v('\\n{\\n  \"en\": {\\n    \"hello\": \"hello world!\"\\n  },\\n  \"ja\": {\\n    \"hello\": \"こんにちは、世界\"\\n  }\\n}\\n'),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n...\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"template\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"class\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"parent\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"message: {{ $t('hello') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"template\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n...\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- Will work --\\x3e\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"style\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token style\"}},[a(\"span\",{pre:!0,attrs:{class:\"token language-css\"}},[t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token selector\"}},[t._v(\".parent p\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v(\"color\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\":\")]),t._v(\" #42b883\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"style\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[s(\"strong\",[this._v(\"Translation with HTML element\")]),this._v(\" (Must use deep selector)\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[t._v(\"...\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v('\\n{\\n  \"en\": {\\n    \"hello\": \"hello'),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"world!\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v('\"\\n  },\\n  \"ja\": {\\n    \"hello\": \"こんにちは、'),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"世界！\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v('\"\\n  }\\n}\\n'),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n...\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"template\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"class\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"parent\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-html\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"$t('hello')\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"template\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n...\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- Won't work --\\x3e\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"style\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token style\"}},[a(\"span\",{pre:!0,attrs:{class:\"token language-css\"}},[t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token selector\"}},[t._v(\".parent p\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v(\"color\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\":\")]),t._v(\" #42b883\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token selector\"}},[t._v(\".parent p span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v(\"color\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\":\")]),t._v(\" red\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"style\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- Will work --\\x3e\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"style\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token style\"}},[a(\"span\",{pre:!0,attrs:{class:\"token language-css\"}},[t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token selector\"}},[t._v(\".parent p\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v(\"color\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\":\")]),t._v(\" #42b883\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token selector\"}},[t._v(\".parent p >>> span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v(\"color\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\":\")]),t._v(\" red\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"style\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"custom-blocks-in-functional-component\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#custom-blocks-in-functional-component\"}},[this._v(\"#\")]),this._v(\" Custom blocks in functional component\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"If the single file components have the template using a functional component, and you had been defined \"),s(\"code\",[this._v(\"i18n\")]),this._v(\" custom blocks, note you cannot localize using locale messages.\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"For example, the following code cannot localize with the locale message of \"),s(\"code\",[this._v(\"i18n\")]),this._v(\" custom block.\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v('\\n{\\n  \"en\": {\\n    \"hello\": \"hello world\"\\n  },\\n  \"ja\": {\\n    \"hello\": \"こんにちは、世界\"\\n  }\\n}\\n'),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"template\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"functional\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- 'hello' of locale messages of parent instance --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ parent.$t('hello') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"template\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/19.d0288f09.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{251:function(t,e,n){\"use strict\";n.r(e);var i=n(0),r=Object(i.a)({},(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),n(\"p\",[t._v(\"To support the i18n of Vue applications, some tools are officially provided.\")]),t._v(\" \"),n(\"p\",[t._v(\"There are also tools from third vendors integrating Vue I18n.\")]),t._v(\" \"),t._m(1),t._v(\" \"),t._m(2),t._v(\" \"),n(\"p\",[n(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-cli-plugin-i18n\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"vue-cli-plugin-i18n\"),n(\"OutboundLink\")],1),t._v(\" is officially provided as the Vue CLI Plugin.\")]),t._v(\" \"),n(\"p\",[t._v(\"With this plugin, you can setup the i18n environment for the Vue application, and support the i18n development environment.\")]),t._v(\" \"),t._m(3),t._v(\" \"),n(\"p\",[n(\"a\",{attrs:{href:\"https://github.com/nuxt-community/nuxt-i18n/\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"nuxt-i18n\"),n(\"OutboundLink\")],1),t._v(\" is corresponding Nuxt.js module.\")]),t._v(\" \"),t._m(4),t._v(\" \"),n(\"p\",[n(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n-loader\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"vue-i18n-loader\"),n(\"OutboundLink\")],1),t._v(\" is an officially provided webpack loader.\")]),t._v(\" \"),t._m(5),t._v(\" \"),n(\"p\",[t._v(\"In about \"),n(\"code\",[t._v(\"i18n\")]),t._v(\" custom block, see the \"),n(\"router-link\",{attrs:{to:\"./sfc.html\"}},[t._v(\"Single file components section\")])],1),t._v(\" \"),t._m(6),t._v(\" \"),n(\"p\",[n(\"a\",{attrs:{href:\"https://intlify.github.io/eslint-plugin-vue-i18n/\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"eslint-plugin-vue-i18n\"),n(\"OutboundLink\")],1),t._v(\" is ESLint plugin for Vue I18n.\")]),t._v(\" \"),n(\"p\",[t._v(\"It easily integrates some localization lint features to your Vue.js Application.\")]),t._v(\" \"),t._m(7),t._v(\" \"),n(\"p\",[n(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n-extensions\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"vue-i18n-extensions\"),n(\"OutboundLink\")],1),t._v(\" provides some extensions for Vue I18n.\")]),t._v(\" \"),n(\"p\",[t._v(\"You can use this extension to enable SSR and improve i18n performance.\")]),t._v(\" \"),t._m(8),t._v(\" \"),t._m(9),t._v(\" \"),n(\"p\",[n(\"a\",{attrs:{href:\"https://www.codeandweb.com/babeledit\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"BabelEdit\"),n(\"OutboundLink\")],1),t._v(\" is translation editor for web apps.\")]),t._v(\" \"),t._m(10),t._v(\" \"),n(\"p\",[t._v(\"Read more about BabelEdit in \"),n(\"a\",{attrs:{href:\"https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-vue-app-with-vue-i18n\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"tutorial page\"),n(\"OutboundLink\")],1),t._v(\".\")]),t._v(\" \"),t._m(11),t._v(\" \"),n(\"p\",[n(\"a\",{attrs:{href:\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"i18n Ally\"),n(\"OutboundLink\")],1),t._v(\" is i18n extension for VSCode.\")]),t._v(\" \"),n(\"p\",[t._v(\"i18n Ally give awesome DX for your i18n development.\")]),t._v(\" \"),n(\"p\",[t._v(\"Read more about i18n Ally in \"),n(\"a\",{attrs:{href:\"https://github.com/antfu/i18n-ally/blob/master/README.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"README\"),n(\"OutboundLink\")],1),t._v(\".\")]),t._v(\" \"),t._m(12),t._v(\" \"),n(\"p\",[n(\"a\",{attrs:{href:\"https://github.com/nyavro/i18nPlugin\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"i18nPlugin\"),n(\"OutboundLink\")],1),t._v(\" Intellij idea i18next support plugin ( \"),n(\"a\",{attrs:{href:\"https://plugins.jetbrains.com/plugin/12981-i18n-support\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Jetbrains plugin page \"),n(\"OutboundLink\")],1),t._v(\").\")]),t._v(\" \"),n(\"p\",[t._v('Plugin for i18n typescript/javascript/PHP. Supports vue-i18n. To enable vue-i18n support go to settings -> Tools -> i18n Plugin configuration and check \"Vue-i18n\". You need set vue locales directory (locales by default).')])])}),[function(){var t=this.$createElement,e=this._self._c||t;return e(\"h1\",{attrs:{id:\"tooling\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#tooling\"}},[this._v(\"#\")]),this._v(\" Tooling\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"official-tooling\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#official-tooling\"}},[this._v(\"#\")]),this._v(\" Official tooling\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"vue-cli-plugin\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#vue-cli-plugin\"}},[this._v(\"#\")]),this._v(\" Vue CLI Plugin\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"nuxt-module\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#nuxt-module\"}},[this._v(\"#\")]),this._v(\" Nuxt Module\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"webpack-loader\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#webpack-loader\"}},[this._v(\"#\")]),this._v(\" Webpack loader\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"With this loader, you can use the \"),e(\"code\",[this._v(\"i18n\")]),this._v(\" custom block in the Single file components.\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"eslint-plugin\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#eslint-plugin\"}},[this._v(\"#\")]),this._v(\" ESLint Plugin\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"extensions\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#extensions\"}},[this._v(\"#\")]),this._v(\" Extensions\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"_3rd-party-tooling\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#_3rd-party-tooling\"}},[this._v(\"#\")]),this._v(\" 3rd party tooling\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"babeledit\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#babeledit\"}},[this._v(\"#\")]),this._v(\" BabelEdit\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"BabelEdit can translate \"),e(\"code\",[this._v(\"json\")]),this._v(\" files, and it can also translate \"),e(\"code\",[this._v(\"i18n\")]),this._v(\" custom block of Single-file components.\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"i18n-ally\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#i18n-ally\"}},[this._v(\"#\")]),this._v(\" i18n Ally\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"i18nplugin-intellij-platform\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#i18nplugin-intellij-platform\"}},[this._v(\"#\")]),this._v(\" i18nPlugin (intellij platform)\")])}],!1,null,null,null);e.default=r.exports}}]);"
  },
  {
    "path": "docs/assets/js/2.aa910774.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{165:function(t,n,e){},166:function(t,n,e){\"use strict\";var a=e(165);e.n(a).a},235:function(t,n,e){\"use strict\";e.r(n);var a={functional:!0,props:{type:{type:String,default:\"tip\"},text:String,vertical:{type:String,default:\"top\"}},render:function(t,n){var e=n.props,a=n.slots;return t(\"span\",{class:[\"badge\",e.type,e.vertical]},e.text||a().default)}},r=(e(166),e(0)),i=Object(r.a)(a,void 0,void 0,!1,null,\"099ab69c\",null);n.default=i.exports}}]);"
  },
  {
    "path": "docs/assets/js/20.9de38e10.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{252:function(t,e,s){\"use strict\";s.r(e);var n=s(0),a=Object(n.a)({},(function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),t._m(1),t._v(\" \"),t._m(2),t._v(\" \"),t._m(3),t._v(\" \"),s(\"p\",[s(\"a\",{attrs:{href:\"https://unpkg.com/vue-i18n/dist/vue-i18n\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"https://unpkg.com/vue-i18n/dist/vue-i18n\"),s(\"OutboundLink\")],1)]),t._v(\" \"),s(\"p\",[s(\"a\",{attrs:{href:\"https://unpkg.com\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"unpkg.com\"),s(\"OutboundLink\")],1),t._v(\" provides NPM-based CDN links. The above link will always point to the latest release on NPM. You can also use a specific version/tag via URLs like \"),s(\"a\",{attrs:{href:\"https://unpkg.com/vue-i18n@8.17.5/dist/vue-i18n.js\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"https://unpkg.com/vue-i18n@8.17.5/dist/vue-i18n.js\"),s(\"OutboundLink\")],1)]),t._v(\" \"),s(\"p\",[t._v(\"Include vue-i18n after Vue and it will install itself automatically:\")]),t._v(\" \"),t._m(4),t._m(5),t._v(\" \"),t._m(6),t._m(7),t._v(\" \"),t._m(8),t._m(9),t._v(\" \"),t._m(10),s(\"p\",[t._v(\"You don't need to do this when using global script tags.\")]),t._v(\" \"),t._m(11),t._v(\" \"),t._m(12),s(\"p\",[t._v(\"You need Vue cli 3.x as pre-requisite, you can install it on your shell with the next command:\")]),t._v(\" \"),t._m(13),t._m(14),t._v(\" \"),t._m(15),t._v(\" \"),t._m(16),t._m(17),t._v(\" \"),s(\"p\",[t._v(\"In the dist/ \"),s(\"a\",{attrs:{href:\"https://cdn.jsdelivr.net/npm/vue-i18n/dist/\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"directory of the NPM package\"),s(\"OutboundLink\")],1),t._v(\" you will find many different builds of VueI18n. Here’s an overview of the difference between them:\")]),t._v(\" \"),t._m(18),t._v(\" \"),t._m(19),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[s(\"a\",{attrs:{href:\"https://github.com/umdjs/umd\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"UMD\"),s(\"OutboundLink\")],1)]),t._v(\": UMD builds can be used directly in the browser via a \"),s(\"code\",[t._v(\"<script>\")]),t._v(\" tag. The default file from Unpkg CDN at \"),s(\"a\",{attrs:{href:\"https://unpkg.com/vue-i18n\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"https://unpkg.com/vue-i18n\"),s(\"OutboundLink\")],1),t._v(\" is the UMD build (\"),s(\"code\",[t._v(\"vue-i18n.js\")]),t._v(\").\")])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[s(\"a\",{attrs:{href:\"http://wiki.commonjs.org/wiki/Modules/1.1\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"CommonJS\"),s(\"OutboundLink\")],1)]),t._v(\": CommonJS builds are intended for use with older bundlers like \"),s(\"a\",{attrs:{href:\"http://browserify.org/\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"browserify\"),s(\"OutboundLink\")],1),t._v(\" or \"),s(\"a\",{attrs:{href:\"https://webpack.github.io\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"webpack 1\"),s(\"OutboundLink\")],1),t._v(\". The default file for these bundlers (\"),s(\"code\",[t._v(\"pkg.main\")]),t._v(\") is the Runtime only CommonJS build (\"),s(\"code\",[t._v(\"vue-i18n.common.js\")]),t._v(\").\")])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[s(\"a\",{attrs:{href:\"http://exploringjs.com/es6/ch_modules.html\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"ES Module\"),s(\"OutboundLink\")],1)]),t._v(\": starting in 8.11 VueI18n provides two ES Modules (ESM) builds:\")]),t._v(\" \"),s(\"ul\",[s(\"li\",[t._v(\"ESM for bundlers: intended for use with modern bundlers like \"),s(\"a\",{attrs:{href:\"https://webpack.js.org\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"webpack 2\"),s(\"OutboundLink\")],1),t._v(\" or \"),s(\"a\",{attrs:{href:\"https://rollupjs.org/\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Rollup\"),s(\"OutboundLink\")],1),t._v('. ESM format is designed to be statically analyzable so the bundlers can take advantage of that to perform \"tree-shaking\" and eliminate unused code from your final bundle. The default file for these bundlers ('),s(\"code\",[t._v(\"pkg.module\")]),t._v(\") is the Runtime only ES Module build (\"),s(\"code\",[t._v(\"vue-i18n.esm.js\")]),t._v(\").\")]),t._v(\" \"),t._m(20)])])])])}),[function(){var t=this.$createElement,e=this._self._c||t;return e(\"h1\",{attrs:{id:\"installation\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#installation\"}},[this._v(\"#\")]),this._v(\" Installation\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"compatibility-note\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#compatibility-note\"}},[this._v(\"#\")]),this._v(\" Compatibility Note\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[this._v(\"Vue.js \"),e(\"code\",[this._v(\"2.0.0\")]),this._v(\"+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"direct-download-cdn\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#direct-download-cdn\"}},[this._v(\"#\")]),this._v(\" Direct Download / CDN\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"script\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"src\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"https://unpkg.com/vue/dist/vue.js\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),s(\"span\",{pre:!0,attrs:{class:\"token script\"}}),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"script\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"script\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"src\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"https://unpkg.com/vue-i18n/dist/vue-i18n.js\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),s(\"span\",{pre:!0,attrs:{class:\"token script\"}}),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"script\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"npm\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#npm\"}},[this._v(\"#\")]),this._v(\" NPM\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"div\",{staticClass:\"language-sh extra-class\"},[e(\"pre\",{pre:!0,attrs:{class:\"language-text\"}},[e(\"code\",[this._v(\"npm install vue-i18n\\n\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"yarn\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#yarn\"}},[this._v(\"#\")]),this._v(\" Yarn\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"div\",{staticClass:\"language-sh extra-class\"},[e(\"pre\",{pre:!0,attrs:{class:\"language-text\"}},[e(\"code\",[this._v(\"yarn add vue-i18n\\n\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"When using with a module system, you must explicitly install the \"),e(\"code\",[this._v(\"vue-i18n\")]),this._v(\"\\nvia \"),e(\"code\",[this._v(\"Vue.use()\")]),this._v(\":\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"div\",{staticClass:\"language-javascript extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-javascript\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),t._v(\" Vue \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'vue'\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),t._v(\" VueI18n \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'vue-i18n'\")]),t._v(\"\\n\\nVue\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),s(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"use\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"VueI18n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"vue-cli-3-x\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#vue-cli-3-x\"}},[this._v(\"#\")]),this._v(\" Vue Cli 3.x\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"div\",{staticClass:\"language-sh extra-class\"},[e(\"pre\",{pre:!0,attrs:{class:\"language-text\"}},[e(\"code\",[this._v(\"vue add i18n\\n\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"div\",{staticClass:\"language-sh extra-class\"},[e(\"pre\",{pre:!0,attrs:{class:\"language-text\"}},[e(\"code\",[this._v(\"npm install @vue/cli -g\\n\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"dev-build\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#dev-build\"}},[this._v(\"#\")]),this._v(\" Dev Build\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"You will have to clone directly from GitHub and build \"),e(\"code\",[this._v(\"vue-i18n\")]),this._v(\" yourself if you want to use the latest dev build.\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"div\",{staticClass:\"language-sh extra-class\"},[e(\"pre\",{pre:!0,attrs:{class:\"language-text\"}},[e(\"code\",[this._v(\"git clone https://github.com/kazupon/vue-i18n.git node_modules/vue-i18n\\ncd node_modules/vue-i18n\\nnpm install # or `yarn`\\nnpm run build  # or `yarn run build`\\n\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"explanation-of-different-builds\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#explanation-of-different-builds\"}},[this._v(\"#\")]),this._v(\" Explanation of Different Builds\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[t._v(\"UMD: \"),s(\"code\",[t._v(\"vue-i18n.js\")])]),t._v(\" \"),s(\"li\",[t._v(\"CommonJS: \"),s(\"code\",[t._v(\"vue-i18n.common.js\")])]),t._v(\" \"),s(\"li\",[t._v(\"ES Module for bundlers: \"),s(\"code\",[t._v(\"vue-i18n.esm.js\")])]),t._v(\" \"),s(\"li\",[t._v(\"ES Module for browsers: \"),s(\"code\",[t._v(\"vue-i18n.esm.browser.js\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"terms\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#terms\"}},[this._v(\"#\")]),this._v(\" Terms\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"li\",[this._v(\"ESM for browsers (8.11+ only, \"),e(\"code\",[this._v(\"vue-i18n.esm.browser.js\")]),this._v(\"): intended for direct imports in modern browsers via \"),e(\"code\",[this._v('<script type=\"module\">')]),this._v(\".\")])}],!1,null,null,null);e.default=a.exports}}]);"
  },
  {
    "path": "docs/assets/js/21.65715f7c.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{253:function(t,e,a){\"use strict\";a.r(e);var r=a(0),s=Object(r.a)({},(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),a(\"div\",{staticClass:\"warning custom-block\"},[a(\"p\",{staticClass:\"custom-block-title\"},[t._v(\"Notice\")]),t._v(\" \"),a(\"p\",[t._v(\"⚠️ This documentation is for Vue I18n v6.0 or later. if you use v5.x, see the \"),a(\"router-link\",{attrs:{to:\"./legacy/\"}},[t._v(\"legacy\")]),t._v(\" section.\")],1)]),t._v(\" \"),a(\"p\",[t._v(\"Vue I18n is internationalization plugin of Vue.js. It easily integrates some localization features to your Vue.js Application.\")]),t._v(\" \"),a(\"p\",[t._v(\"Go to \"),a(\"router-link\",{attrs:{to:\"./started.html\"}},[t._v(\"Get Started\")])],1),t._v(\" \"),t._m(1),t._v(\" \"),t._m(2),t._v(\" \"),t._m(3),t._v(\" \"),t._m(4),t._v(\" \"),t._m(5),t._v(\" \"),t._m(6),t._v(\" \"),a(\"p\",[t._v(\"Is your company using vue-i18n or vue-cli-plugin-i18n to build awesome apps? Join the other patrons and become a sponsor to add your logo on this documentation! Supporting me on Patreon allows me to work less for a job and to work more on Free Open Source Software such as vue-i18n! Thank you!\")]),t._v(\" \"),t._m(7)])}),[function(){var t=this.$createElement,e=this._self._c||t;return e(\"h1\",{attrs:{id:\"introduction\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#introduction\"}},[this._v(\"#\")]),this._v(\" Introduction\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"sponsors\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#sponsors\"}},[this._v(\"#\")]),this._v(\" Sponsors\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"silver\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#silver\"}},[this._v(\"#\")]),this._v(\" Silver\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",{staticStyle:{\"text-align\":\"center\"}},[e(\"a\",{attrs:{href:\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\",target:\"_blank\"}},[e(\"img\",{attrs:{src:\"/vue-i18n/patrons/babeledit.png\"}})])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"bronze\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#bronze\"}},[this._v(\"#\")]),this._v(\" Bronze\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",{staticStyle:{\"text-align\":\"center\"}},[e(\"a\",{attrs:{href:\"https://zenarchitects.co.jp/\",target:\"_blank\"}},[e(\"img\",{attrs:{src:\"/vue-i18n/patrons/zenarchitects.png\"}})])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"become-a-patreon\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#become-a-patreon\"}},[this._v(\"#\")]),this._v(\" Become a Patreon\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",{staticStyle:{\"text-align\":\"center\"}},[e(\"a\",{attrs:{href:\"https://www.patreon.com/kazupon\",target:\"_blank\"}},[e(\"img\",{attrs:{src:\"https://c5.patreon.com/external/logo/become_a_patron_button.png\",alt:\"Become a Patreon\"}})])])}],!1,null,null,null);e.default=s.exports}}]);"
  },
  {
    "path": "docs/assets/js/22.7b59f449.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{254:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this.$createElement;this._self._c;return this._m(0)}),[function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[a(\"h1\",{attrs:{id:\"migration-from-v5-x\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#migration-from-v5-x\"}},[t._v(\"#\")]),t._v(\" Migration from v5.x\")]),t._v(\" \"),a(\"h2\",{attrs:{id:\"global-config\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#global-config\"}},[t._v(\"#\")]),t._v(\" Global config\")]),t._v(\" \"),a(\"h3\",{attrs:{id:\"lang-replaced\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#lang-replaced\"}},[t._v(\"#\")]),t._v(\" lang  replaced\")]),t._v(\" \"),a(\"p\",[t._v(\"Use \"),a(\"code\",[t._v(\"VueI18n\")]),t._v(\" class constructor \"),a(\"code\",[t._v(\"locale\")]),t._v(\" option, or \"),a(\"code\",[t._v(\"VueI18n#locale\")]),t._v(\" property:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[t._v(\"  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" app \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// change locale\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"locale \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ja'\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// or\")]),t._v(\"\\n  app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"$i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"locale \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ja'\")]),t._v(\"\\n\")])])]),a(\"h3\",{attrs:{id:\"fallbacklang-replaced\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#fallbacklang-replaced\"}},[t._v(\"#\")]),t._v(\" fallbackLang replaced\")]),t._v(\" \"),a(\"p\",[t._v(\"Use \"),a(\"code\",[t._v(\"VueI18n\")]),t._v(\" class constructor \"),a(\"code\",[t._v(\"fallbackLocale\")]),t._v(\" option, or\\n\"),a(\"code\",[t._v(\"VueI18n#fallbackLocale\")]),t._v(\" property:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[t._v(\"  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ja'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    fallbackLocale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" app \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// change fallback locale\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"fallbackLocale \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'zh'\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// or\")]),t._v(\"\\n  app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"$i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"fallbackLocale \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'zh'\")]),t._v(\"\\n\")])])]),a(\"h3\",{attrs:{id:\"missinghandler-replaced\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#missinghandler-replaced\"}},[t._v(\"#\")]),t._v(\" missingHandler replaced\")]),t._v(\" \"),a(\"p\",[t._v(\"Use \"),a(\"code\",[t._v(\"VueI18n\")]),t._v(\" class constructor \"),a(\"code\",[t._v(\"missing\")]),t._v(\" option, or \"),a(\"code\",[t._v(\"VueI18n#missing\")]),t._v(\"\\nproperty:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token function-variable function\"}},[t._v(\"missing\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" key\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" vm\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" values\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// handle translation missing\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" app \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// change missing handler\")]),t._v(\"\\ni18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function-variable function\"}},[t._v(\"missing\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" key\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" vm\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" values\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// handle translation missing\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// or\")]),t._v(\"\\napp\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"$i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function-variable function\"}},[t._v(\"missing\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" key\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" vm\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" values\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// handle translation missing\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),a(\"h3\",{attrs:{id:\"i18nformatter-replaced\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#i18nformatter-replaced\"}},[t._v(\"#\")]),t._v(\" i18nFormatter replaced\")]),t._v(\" \"),a(\"p\",[t._v(\"Use \"),a(\"code\",[t._v(\"VueI18n\")]),t._v(\" class constructor \"),a(\"code\",[t._v(\"formatter\")]),t._v(\" option, or \"),a(\"code\",[t._v(\"VueI18n#formatter\")]),t._v(\"\\nproperty:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[t._v(\"  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"class\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"CustomFormatter\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"format\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"message\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"...\")]),t._v(\"values\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// something render logic\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'something string'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n    formatter\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"CustomFormatter\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" app \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// change custom formatter\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"formatter \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token function-variable function\"}},[t._v(\"format\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"message\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"...\")]),t._v(\"values\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// something render logic\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'something string'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// or\")]),t._v(\"\\n  app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"$i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"formatter \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token function-variable function\"}},[t._v(\"format\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"message\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"...\")]),t._v(\"values\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// something render logic\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'something string'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),a(\"h2\",{attrs:{id:\"global-methods\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#global-methods\"}},[t._v(\"#\")]),t._v(\" Global methods\")]),t._v(\" \"),a(\"h3\",{attrs:{id:\"vue-locale-replaced\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#vue-locale-replaced\"}},[t._v(\"#\")]),t._v(\" Vue.locale replaced\")]),t._v(\" \"),a(\"p\",[t._v(\"Use \"),a(\"code\",[t._v(\"VueI18n\")]),t._v(\" class constructor \"),a(\"code\",[t._v(\"messages\")]),t._v(\" option, or\\n\"),a(\"code\",[t._v(\"VueI18n#GetLocaleMessage\")]),t._v(\" / \"),a(\"code\",[t._v(\"VueI18n#setLocaleMessage\")]),t._v(\" methods:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[t._v(\"  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n    messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hello world'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      ja\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'こんにちは、世界'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" app \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// get locale message\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" en \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"getLocaleMessage\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"greeting \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hi!'\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// set locale message\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setLocaleMessage\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" en\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// or\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" ja \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"$i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"getLocaleMessage\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ja'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  ja\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"greeting \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'やあ！'\")]),t._v(\"\\n  app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"$i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setLocaleMessage\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ja'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" ja\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])]),a(\"h3\",{attrs:{id:\"vue-t-replaced\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#vue-t-replaced\"}},[t._v(\"#\")]),t._v(\" Vue.t replaced\")]),t._v(\" \"),a(\"p\",[t._v(\"Use \"),a(\"code\",[t._v(\"VueI18n#t\")]),t._v(\" method:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      greeting\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hi {name}'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\ni18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"t\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'greeting'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" name\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'kazupon'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// -> hi kazupon\")]),t._v(\"\\n\")])])]),a(\"h3\",{attrs:{id:\"vue-tc-replaced\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#vue-tc-replaced\"}},[t._v(\"#\")]),t._v(\" Vue.tc replaced\")]),t._v(\" \"),a(\"p\",[t._v(\"Use \"),a(\"code\",[t._v(\"VueI18n#tc\")]),t._v(\" method:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      apple\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'no apples | one apple | {count} apples'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" count \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"10\")]),t._v(\"\\ni18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"tc\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'apple'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" count\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" count \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// -> 10 apples\")]),t._v(\"\\n\")])])]),a(\"h3\",{attrs:{id:\"vue-te-replaced\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#vue-te-replaced\"}},[t._v(\"#\")]),t._v(\" Vue.te replaced\")]),t._v(\" \"),a(\"p\",[t._v(\"Use \"),a(\"code\",[t._v(\"VueI18n#te\")]),t._v(\" method:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hello world'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\ni18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"te\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hello'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// -> true\")]),t._v(\"\\ni18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"te\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hallo'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ja'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// -> false\")]),t._v(\"\\ni18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"te\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hello'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// -> true\")]),t._v(\"\\n\")])])]),a(\"h2\",{attrs:{id:\"constructor-options\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#constructor-options\"}},[t._v(\"#\")]),t._v(\" Constructor options\")]),t._v(\" \"),a(\"h3\",{attrs:{id:\"locales-replaced\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#locales-replaced\"}},[t._v(\"#\")]),t._v(\" locales replaced\")]),t._v(\" \"),a(\"p\",[t._v(\"Use \"),a(\"code\",[t._v(\"messages\")]),t._v(\" of \"),a(\"code\",[t._v(\"VueI18n\")]),t._v(\" class constructor option, or \"),a(\"code\",[t._v(\"messages\")]),t._v(\" of \"),a(\"code\",[t._v(\"i18n\")]),t._v(\"\\noption (for Component option):\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      greeting\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hi {name}'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// for Component\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" Component1 \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        title\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Title1'\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),a(\"h2\",{attrs:{id:\"instance-properties\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#instance-properties\"}},[t._v(\"#\")]),t._v(\" Instance properties\")]),t._v(\" \"),a(\"h3\",{attrs:{id:\"lang-replaced-2\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#lang-replaced-2\"}},[t._v(\"#\")]),t._v(\" $lang replaced\")]),t._v(\" \"),a(\"p\",[t._v(\"Use \"),a(\"code\",[t._v(\"VueI18n#locale\")]),t._v(\" property:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" app \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// change locale\")]),t._v(\"\\ni18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"locale \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ja'\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// or\")]),t._v(\"\\napp\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"$i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"locale \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ja'\")]),t._v(\"\\n\")])])]),a(\"h2\",{attrs:{id:\"features\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#features\"}},[t._v(\"#\")]),t._v(\" Features\")]),t._v(\" \"),a(\"h3\",{attrs:{id:\"dynamic-locale-removed\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#dynamic-locale-removed\"}},[t._v(\"#\")]),t._v(\" Dynamic locale removed\")]),t._v(\" \"),a(\"p\",[t._v(\"If you need to dynamic set locale messages, you should implement the below:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" app \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  data\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" loading\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"''\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"function\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"loadLocaleMessage\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" cb\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"fetch\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'/locales/'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"+\")]),t._v(\" locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    method\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'get'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    headers\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Accept'\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'application/json'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Content-Type'\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'application/json'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"then\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"res\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" res\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"json\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"then\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"json\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"if\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"Object\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"keys\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"json\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"length \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"===\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"0\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" Promise\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"reject\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Error\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'locale empty !!'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"else\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" Promise\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"resolve\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"json\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"then\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"message\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"cb\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"null\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" message\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"catch\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"error\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"cb\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"error\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\napp\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"loading \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'loading ...'\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"loadLocaleMessage\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"err\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" message\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"if\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"err\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"loading \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"''\")]),t._v(\"\\n    console\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"error\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"err\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setLocaleMessage\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" message\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"loading \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"''\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/23.11ece4c3.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{255:function(t,e,r){\"use strict\";r.r(e);var n=r(0),o=Object(n.a)({},(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),r(\"ul\",[r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/installation.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Installation\"),r(\"OutboundLink\")],1)]),t._v(\" \"),r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/started.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Getting Started\"),r(\"OutboundLink\")],1)]),t._v(\" \"),r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/formatting.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Formatting\"),r(\"OutboundLink\")],1)]),t._v(\" \"),r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/pluralization.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Pluralization\"),r(\"OutboundLink\")],1)]),t._v(\" \"),r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/syntax.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Locale and Keypath Syntax\"),r(\"OutboundLink\")],1)]),t._v(\" \"),r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/linked.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Linked Translation\"),r(\"OutboundLink\")],1)]),t._v(\" \"),r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/fallback.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Fallback Translation\"),r(\"OutboundLink\")],1)]),t._v(\" \"),r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/component.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Component Locale\"),r(\"OutboundLink\")],1)]),t._v(\" \"),r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/dynamic.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Dynamic Locale\"),r(\"OutboundLink\")],1)]),t._v(\" \"),r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/hot-reload.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Hot reload\"),r(\"OutboundLink\")],1)]),t._v(\" \"),r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/api.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"API References\"),r(\"OutboundLink\")],1)])])])}),[function(){var t=this.$createElement,e=this._self._c||t;return e(\"h1\",{attrs:{id:\"documentation-for-v5-x\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#documentation-for-v5-x\"}},[this._v(\"#\")]),this._v(\" documentation for v5.x\")])}],!1,null,null,null);e.default=o.exports}}]);"
  },
  {
    "path": "docs/assets/js/24.dffd1071.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[24],{256:function(t,e,a){\"use strict\";a.r(e);var s=a(0),i=Object(s.a)({},(function(){var t=this.$createElement,e=this._self._c||t;return e(\"div\",{staticClass:\"content\"},[this._m(0),this._v(\" \"),e(\"div\",{staticClass:\"github\",staticStyle:{\"text-align\":\"center\",padding:\"0 0 24px 0\"}},[e(\"sponsor-button\")],1),this._v(\" \"),this._m(1),this._v(\" \"),this._m(2)])}),[function(){var t=this.$createElement,e=this._self._c||t;return e(\"div\",{staticClass:\"sponsors\",staticStyle:{\"text-align\":\"center\",padding:\"0 0 24px 0\"}},[e(\"h4\",[this._v(\"Серебряные спонсоры\")]),this._v(\" \"),e(\"a\",{attrs:{href:\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\",target:\"_blank\"}},[e(\"img\",{attrs:{src:\"/vue-i18n/patrons/babeledit.png\"}})])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"div\",{staticClass:\"patreon\",staticStyle:{padding:\"0 0 24px 0\"}},[e(\"p\",{staticStyle:{\"text-align\":\"center\"}},[e(\"a\",{attrs:{href:\"https://www.patreon.com/kazupon\",target:\"_blank\"}},[e(\"img\",{attrs:{src:\"https://c5.patreon.com/external/logo/become_a_patron_button.png\",alt:\"Become a Patreon\"}})])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a(\"div\",{staticClass:\"features\"},[a(\"div\",{staticClass:\"feature\"},[a(\"h2\",[t._v(\"Простой\")]),t._v(\" \"),a(\"p\",[t._v(\"Позволяет легко добавить интернационализацию в приложение с помощью простого API\")])]),t._v(\" \"),a(\"div\",{staticClass:\"feature\"},[a(\"h2\",[t._v(\"Функциональный\")]),t._v(\" \"),a(\"p\",[t._v(\"В дополнение к переводам, поддерживает плюрализацию, локализацию для чисел, дат ... и т.д.\")])]),t._v(\" \"),a(\"div\",{staticClass:\"feature\"},[a(\"h2\",[t._v(\"Ориентированный на компоненты\")]),t._v(\" \"),a(\"p\",[t._v(\"Можно управлять сообщениями локализации в однофайловых компонентах\")])])])}],!1,null,null,null);e.default=i.exports}}]);"
  },
  {
    "path": "docs/assets/js/25.97b69148.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{257:function(t,e,s){\"use strict\";s.r(e);var a=s(0),r=Object(a.a)({},(function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),t._m(1),t._v(\" \"),t._m(2),t._v(\" \"),t._m(3),t._v(\" \"),t._m(4),t._v(\" \"),s(\"p\",[t._v(\"Опция локализации на основе компонентов.\")]),t._v(\" \"),t._m(5),t._v(\" \"),t._m(6),t._v(\" \"),t._m(7),t._v(\" \"),t._m(8),t._v(\" \"),s(\"p\",[t._v(\"Получение переведённого сообщения по ключу \"),s(\"code\",[t._v(\"key\")]),t._v(\". Сообщения локализации в компоненте имеют приоритет над глобальными сообщениями. Если сообщений локализации в компоненте нет, то локализация осуществляется с помощью глобальных сообщений локализации. Если указана \"),s(\"code\",[t._v(\"locale\")]),t._v(\", то используются сообщения локализации из \"),s(\"code\",[t._v(\"locale\")]),t._v(\". Если был указан \"),s(\"code\",[t._v(\"key\")]),t._v(\" именованного формата / формата списков сообщений локализации, то необходимо указывать также \"),s(\"code\",[t._v(\"values\")]),t._v(\". Подробнее про значения \"),s(\"code\",[t._v(\"values\")]),t._v(\" можно изучить в разделе \"),s(\"router-link\",{attrs:{to:\"./../guide/formatting.html\"}},[t._v(\"Формат сообщений локализации\")]),t._v(\".\")],1),t._v(\" \"),t._m(9),t._v(\" \"),t._m(10),t._v(\" \"),t._m(11),t._v(\" \"),t._m(12),t._v(\" \"),t._m(13),t._v(\" \"),t._m(14),t._v(\" \"),t._m(15),t._v(\" \"),t._m(16),t._v(\" \"),t._m(17),t._v(\" \"),t._m(18),t._v(\" \"),t._m(19),t._v(\" \"),t._m(20),t._v(\" \"),t._m(21),t._v(\" \"),t._m(22),t._v(\" \"),t._m(23),t._v(\" \"),t._m(24),t._v(\" \"),t._m(25),t._v(\" \"),t._m(26),t._v(\" \"),t._m(27),t._v(\" \"),t._m(28),t._v(\" \"),t._m(29),t._v(\" \"),t._m(30),t._v(\" \"),t._m(31),t._v(\" \"),t._m(32),t._v(\" \"),t._m(33),t._v(\" \"),t._m(34),t._v(\" \"),t._m(35),t._v(\" \"),t._m(36),t._v(\" \"),t._m(37),t._v(\" \"),t._m(38),t._v(\" \"),s(\"p\",[t._v(\"Класс \"),s(\"code\",[t._v(\"VueI18n\")]),t._v(\" реализует интерфейс \"),s(\"code\",[t._v(\"I18n\")]),t._v(\" из \"),s(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"определений flowtype\"),s(\"OutboundLink\")],1)]),t._v(\" \"),t._m(39),t._v(\" \"),t._m(40),t._v(\" \"),t._m(41),t._v(\" \"),t._m(42),t._v(\" \"),t._m(43),t._v(\" \"),t._m(44),t._v(\" \"),t._m(45),t._v(\" \"),s(\"p\",[t._v(\"Проверка доступности следующих возможностей интернационализации:\")]),t._v(\" \"),t._m(46),t._v(\" \"),s(\"p\",[t._v(\"Указанные выше возможности интернационализации зависят от \"),s(\"a\",{attrs:{href:\"http://kangax.github.io/compat-table/esintl/\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"окружения браузера\"),s(\"OutboundLink\")],1),t._v(\", в котором реализован ECMAScript Internationalization API (ECMA-402).\")]),t._v(\" \"),t._m(47),t._v(\" \"),s(\"p\",[t._v(\"Можно указывать некоторые опции конструктора \"),s(\"code\",[t._v(\"I18nOptions\")]),t._v(\", основываясь на \"),s(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"определениях flowtype\"),s(\"OutboundLink\")],1)]),t._v(\" \"),t._m(48),t._v(\" \"),t._m(49),t._v(\" \"),s(\"p\",[t._v(\"Локаль используемая для локализации. Если локаль содержит территорию и диалект, то эта локаль явно определяет запасную локализацию.\")]),t._v(\" \"),t._m(50),t._v(\" \"),t._m(51),t._v(\" \"),s(\"p\",[t._v(\"Запасная локаль для локализации. Подробнее в разделе \"),s(\"router-link\",{attrs:{to:\"./../guide/fallback.html\"}},[t._v(\"Запасная локализация\")]),t._v(\".\")],1),t._v(\" \"),t._m(52),t._v(\" \"),t._m(53),t._v(\" \"),s(\"p\",[t._v(\"Сообщения локализации для локали.\")]),t._v(\" \"),t._m(54),t._v(\" \"),t._m(55),t._v(\" \"),t._m(56),t._v(\" \"),s(\"p\",[t._v(\"Форматы дат для локализации.\")]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"strong\",[t._v(\"См. также:\")]),t._v(\" тип \"),s(\"code\",[t._v(\"DateTimeFormats\")]),t._v(\" в \"),s(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"определениях flowtype\"),s(\"OutboundLink\")],1)])]),t._v(\" \"),t._m(57),t._v(\" \"),t._m(58),t._v(\" \"),t._m(59),t._v(\" \"),s(\"p\",[t._v(\"Форматы чисел для локализации.\")]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"strong\",[t._v(\"См. также:\")]),t._v(\" тип \"),s(\"code\",[t._v(\"NumberFormats\")]),t._v(\" в \"),s(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"определениях flowtype\"),s(\"OutboundLink\")],1)])]),t._v(\" \"),t._m(60),t._v(\" \"),t._m(61),t._v(\" \"),t._m(62),t._v(\" \"),t._m(63),t._v(\" \"),t._m(64),t._v(\" \"),t._m(65),t._v(\" \"),t._m(66),t._v(\" \"),t._m(67),t._v(\" \"),t._m(68),t._v(\" \"),t._m(69),t._v(\" \"),s(\"p\",[t._v(\"Функции модификаторов для связанных сообщений\")]),t._v(\" \"),t._m(70),t._v(\" \"),t._m(71),t._v(\" \"),s(\"p\",[t._v(\"Обработчик для отсутствующих сообщений локализации. Обработчик будет вызван с локалью, ключом сообщения локализации и значениями values.\")]),t._v(\" \"),s(\"p\",[t._v(\"Если указан этот обработчик и произойдёт попытка доступа к отсутствующему сообщению локализации, то предупреждения в консоли не будет.\")]),t._v(\" \"),t._m(72),t._v(\" \"),t._m(73),t._v(\" \"),s(\"p\",[t._v(\"При использовании локализации в компонентах определяет обращаться ли к локализации корневого уровня (глобальной) при неудаче.\")]),t._v(\" \"),t._m(74),t._v(\" \"),t._m(75),t._v(\" \"),t._m(76),t._v(\" \"),s(\"p\",[t._v(\"Синхронизировать ли локализацию корневого уровня с локализацией компонента.\")]),t._v(\" \"),t._m(77),t._v(\" \"),t._m(78),t._v(\" \"),t._m(79),t._v(\" \"),t._m(80),t._v(\" \"),s(\"p\",[t._v(\"Отключение предупреждений, отображаемых при неудаче локализации.\")]),t._v(\" \"),t._m(81),t._v(\" \"),t._m(82),t._v(\" \"),t._m(83),t._v(\" \"),t._m(84),t._v(\" \"),t._m(85),t._v(\" \"),t._m(86),t._v(\" \"),t._m(87),t._v(\" \"),t._m(88),t._v(\" \"),t._m(89),t._v(\" \"),t._m(90),t._v(\" \"),t._m(91),t._v(\" \"),t._m(92),t._v(\" \"),t._m(93),t._v(\" \"),t._m(94),t._v(\" \"),t._m(95),t._v(\" \"),t._m(96),t._v(\" \"),t._m(97),t._v(\" \"),t._m(98),t._v(\" \"),s(\"p\",[t._v(\"Общие сообщения локализации при локализации в компонентах. Подробнее в разделе \"),s(\"router-link\",{attrs:{to:\"./../guide/component.html#локаnизация-на-основе-компонентов\"}},[t._v(\"Локализация на основе компонентов\")]),t._v(\".\")],1),t._v(\" \"),t._m(99),t._v(\" \"),t._m(100),t._v(\" \"),t._m(101),t._v(\" \"),t._m(102),t._v(\" \"),s(\"p\",[t._v(\"Может пригодиться при необходимости дополнительно обработать итоговый текст перевода, например избавиться от висящих пробелов.\")]),t._v(\" \"),t._m(103),t._v(\" \"),t._m(104),t._v(\" \"),t._m(105),t._v(\" \"),s(\"p\",[t._v(\"Локаль используемая для локализации. Если локаль содержит территорию и диалект, то эта локаль неявно указывает на запасные варианты.\")]),t._v(\" \"),t._m(106),t._v(\" \"),t._m(107),t._v(\" \"),s(\"p\",[t._v(\"Локаль используемая для запасной локализации. Способы определения и переключения на запасную локализацию можно изучить в разделе \"),s(\"router-link\",{attrs:{to:\"./../guide/fallback.html\"}},[t._v(\"Запасная локализация\")]),t._v(\".\")],1),t._v(\" \"),t._m(108),t._v(\" \"),t._m(109),t._v(\" \"),s(\"p\",[t._v(\"Переведённые сообщения используемые для локализации.\")]),t._v(\" \"),t._m(110),t._v(\" \"),t._m(111),t._v(\" \"),t._m(112),t._v(\" \"),s(\"p\",[t._v(\"Форматы форматирования дат для локализации.\")]),t._v(\" \"),t._m(113),t._v(\" \"),t._m(114),t._v(\" \"),t._m(115),t._v(\" \"),s(\"p\",[t._v(\"Форматы форматирования чисел для локализации.\")]),t._v(\" \"),t._m(116),t._v(\" \"),t._m(117),t._v(\" \"),s(\"p\",[t._v(\"Обработчик для отсутствующих ключей локализаций.\")]),t._v(\" \"),t._m(118),t._v(\" \"),t._m(119),t._v(\" \"),t._m(120),t._v(\" \"),t._m(121),t._v(\" \"),t._m(122),t._v(\" \"),t._m(123),t._v(\" \"),s(\"p\",[t._v(\"Отключение предупреждений выводимых при ошибке локализации.\")]),t._v(\" \"),t._m(124),t._v(\" \"),t._m(125),t._v(\" \"),t._m(126),t._v(\" \"),s(\"p\",[t._v(\"Отключение предупреждений выводимых при ошибке использования запасной локализации.\")]),t._v(\" \"),t._m(127),t._v(\" \"),t._m(128),t._v(\" \"),t._m(129),t._v(\" \"),t._m(130),t._v(\" \"),t._m(131),t._v(\" \"),t._m(132),t._v(\" \"),t._m(133),t._v(\" \"),s(\"p\",[t._v(\"Разрешить ли использование HTML-форматирования в сообщениях локализации.\")]),t._v(\" \"),t._m(134),t._v(\" \"),t._m(135),t._v(\" \"),t._m(136),t._v(\" \"),t._m(137),t._v(\" \"),t._m(138),t._v(\" \"),s(\"p\",[t._v(\"Обработчик для пост-обработки перевода.\")]),t._v(\" \"),t._m(139),t._v(\" \"),t._m(140),t._v(\" \"),t._m(141),t._v(\" \"),s(\"p\",[t._v(\"Получение индекса для плюрализации текущего числа и заданного количества вариантов. Реализация может быть переопределена через изменение прототипа:\")]),t._v(\" \"),t._m(142),t._m(143),t._v(\" \"),t._m(144),t._v(\" \"),s(\"p\",[t._v(\"Получение сообщений локализации для локали.\")]),t._v(\" \"),t._m(145),t._v(\" \"),t._m(146),t._v(\" \"),s(\"p\",[t._v(\"Установка сообщений локализации для локали.\")]),t._v(\" \"),t._m(147),t._v(\" \"),t._m(148),t._v(\" \"),t._m(149),t._v(\" \"),t._m(150),t._v(\" \"),s(\"p\",[t._v(\"Объединение указанных сообщений локализации с сообщениями локализации локали.\")]),t._v(\" \"),t._m(151),t._v(\" \"),t._m(152),t._v(\" \"),t._m(153),t._v(\" \"),t._m(154),t._v(\" \"),t._m(155),t._v(\" \"),t._m(156),t._v(\" \"),t._m(157),t._v(\" \"),t._m(158),t._v(\" \"),t._m(159),t._v(\" \"),t._m(160),t._v(\" \"),t._m(161),t._v(\" \"),t._m(162),t._v(\" \"),t._m(163),t._v(\" \"),s(\"p\",[t._v(\"Получение форматов форматирования дат локализации.\")]),t._v(\" \"),t._m(164),t._v(\" \"),t._m(165),t._v(\" \"),t._m(166),t._v(\" \"),s(\"p\",[t._v(\"Установка форматов форматирования дат для локализации.\")]),t._v(\" \"),t._m(167),t._v(\" \"),t._m(168),t._v(\" \"),t._m(169),t._v(\" \"),s(\"p\",[t._v(\"Объединение указанных форматов форматирования дат с форматами локализации.\")]),t._v(\" \"),t._m(170),t._v(\" \"),t._m(171),t._v(\" \"),t._m(172),t._v(\" \"),t._m(173),t._v(\" \"),t._m(174),t._v(\" \"),t._m(175),t._v(\" \"),t._m(176),t._v(\" \"),s(\"p\",[t._v(\"Получение форматов форматирования чисел для локализации.\")]),t._v(\" \"),t._m(177),t._v(\" \"),t._m(178),t._v(\" \"),t._m(179),t._v(\" \"),s(\"p\",[t._v(\"Установка форматов форматирования чисел для локализации.\")]),t._v(\" \"),t._m(180),t._v(\" \"),t._m(181),t._v(\" \"),t._m(182),t._v(\" \"),s(\"p\",[t._v(\"Объединение указанных форматов форматирования чисел с форматами локализации.\")]),t._v(\" \"),t._m(183),t._v(\" \"),t._m(184),t._v(\" \"),t._m(185),t._v(\" \"),t._m(186),t._v(\" \"),t._m(187),t._v(\" \"),t._m(188),t._v(\" \"),t._m(189),t._v(\" \"),t._m(190),t._v(\" \"),t._m(191),t._v(\" \"),t._m(192),t._v(\" \"),s(\"div\",{staticClass:\"tip custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[t._v(\"ПРИМЕЧАНИЕ\")]),t._v(\" \"),s(\"p\",[t._v(\"По умолчанию значение \"),s(\"code\",[t._v(\"textContent\")]),t._v(\" элемента удаляется при снятии директивы \"),s(\"code\",[t._v(\"v-t\")]),t._v(\". Это может быть нежелательной ситуацией например при \"),s(\"a\",{attrs:{href:\"https://ru.vuejs.org/v2/guide/transitions.html\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"анимировании списков\"),s(\"OutboundLink\")],1),t._v(\". Для сохранения данных \"),s(\"code\",[t._v(\"textContent\")]),t._v(\" после снятия директивы следует использовать модификатор \"),s(\"code\",[t._v(\".preserve\")]),t._v(\" или глобальную опцию \"),t._m(193),t._v(\".\")])]),t._v(\" \"),t._m(194),t._v(\" \"),t._m(195),s(\"ul\",[s(\"li\",[s(\"strong\",[t._v(\"См. также:\")]),t._v(\" \"),s(\"router-link\",{attrs:{to:\"./../guide/directive.html\"}},[t._v(\"Пользовательская директива для локализации\")])],1)]),t._v(\" \"),t._m(196),t._v(\" \"),t._m(197),t._v(\" \"),t._m(198),t._v(\" \"),t._m(199),t._v(\" \"),t._m(200),t._v(\" \"),t._m(201),t._v(\" \"),t._m(202),t._v(\" \"),t._m(203),t._m(204),t._m(205),t._v(\" \"),s(\"p\",[s(\"router-link\",{attrs:{to:\"./../guide/interpolation.html\"}},[t._v(\"Интерполяция компонента\")])],1),t._v(\" \"),t._m(206),t._v(\" \"),t._m(207),t._v(\" \"),t._m(208),t._v(\" \"),t._m(209),t._v(\" \"),t._m(210),t._v(\" \"),t._m(211),t._m(212),t._m(213),t._v(\" \"),s(\"p\",[t._v(\"Функциональный компонент \"),s(\"code\",[t._v(\"<i18n-n>\")]),t._v(\" может принимать различные слоты с ограниченной областью видимости. Список поддерживаемых имён слотов основан на \"),s(\"a\",{attrs:{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/formatToParts\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"выходных типах \"),s(\"code\",[t._v(\"Intl.NumberFormat.formatToParts()\")]),s(\"OutboundLink\")],1),t._v(\":\")]),t._v(\" \"),t._m(214),t._v(\" \"),s(\"p\",[t._v(\"Каждый из слотов предоставляет доступ к значениям трёх параметров:\")]),t._v(\" \"),t._m(215),t._v(\" \"),t._m(216),t._v(\" \"),s(\"p\",[s(\"router-link\",{attrs:{to:\"./../guide/number.html#custom-formatting\"}},[t._v(\"Локализация чисел\")])],1),t._v(\" \"),t._m(217),t._v(\" \"),t._m(218),t._v(\" \"),t._m(219),t._v(\" \"),t._m(220),t._v(\" \"),s(\"p\",[t._v(\"Используется при интерполяции компонента для указания индекса при форматировании списком или ключа при именованном форматировании.\")]),t._v(\" \"),s(\"p\",[t._v(\"Подробнее об использовании можно изучить в разделе по ссылке ниже.\")]),t._v(\" \"),t._m(221),t._v(\" \"),s(\"p\",[s(\"router-link\",{attrs:{to:\"./../guide/interpolation.html\"}},[t._v(\"Интерполяция компонента\")])],1)])}),[function(){var t=this.$createElement,e=this._self._c||t;return e(\"h1\",{attrs:{id:\"справочник-api\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#справочник-api\"}},[this._v(\"#\")]),this._v(\" Справочник API\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"расширение-прототипа-vue\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#расширение-прототипа-vue\"}},[this._v(\"#\")]),this._v(\" Расширение прототипа Vue\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"опции-конструктора-vue\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#опции-конструктора-vue\"}},[this._v(\"#\")]),this._v(\" Опции конструктора Vue\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"i18n\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#i18n\"}},[this._v(\"#\")]),this._v(\" i18n\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"strong\",[this._v(\"Тип:\")]),this._v(\" \"),e(\"code\",[this._v(\"I18nOptions\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"strong\",[this._v(\"См. также:\")]),this._v(\" Опции конструктора класса \"),e(\"code\",[this._v(\"VueI18n\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"внедряемые-методы\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#внедряемые-методы\"}},[this._v(\"#\")]),this._v(\" Внедряемые методы\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"t\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#t\"}},[this._v(\"#\")]),this._v(\" $t\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Аргументы:\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{Path} key\")]),t._v(\": обязательный\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Locale} locale\")]),t._v(\": опционально\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Array | Object} values\")]),t._v(\": опционально\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Возвращает:\")]),t._v(\" \"),s(\"code\",[t._v(\"TranslateResult\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"div\",{staticClass:\"danger custom-block\"},[e(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Совет\")]),this._v(\" \"),e(\"p\",[this._v(\"Обратите внимание, что в хуках жизненного цикла контекст должен быть экземпляром компонента (например в опции \"),e(\"code\",[this._v(\"data\")]),this._v(\", \"),e(\"code\",[this._v(\"const $t = this.$t.bind(this)\")]),this._v(\").\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"tc\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#tc\"}},[this._v(\"#\")]),this._v(\" $tc\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Аргументы:\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{Path} key\")]),t._v(\": обязательный\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{number} choice\")]),t._v(\": опционально, по умолчанию \"),s(\"code\",[t._v(\"1\")])]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Locale} locale\")]),t._v(\": опционально\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{string | Array | Object} values\")]),t._v(\": опционально\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Возвращает:\")]),t._v(\" \"),s(\"code\",[t._v(\"TranslateResult\")])])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"p\",[t._v(\"Получение переведённого сообщения по ключу \"),s(\"code\",[t._v(\"key\")]),t._v(\" с использованием плюрализации. Сообщения локализации компонента имеют приоритет над глобальными сообщениями. Если сообщений локализации в компоненте нет, то локализация осуществляется с помощью глобальных сообщений локализации. Если указана \"),s(\"code\",[t._v(\"locale\")]),t._v(\", то используются сообщения локализации из \"),s(\"code\",[t._v(\"locale\")]),t._v(\". Если указано строковое значение для \"),s(\"code\",[t._v(\"values\")]),t._v(\", то локализация выполняется для этого значения. Если указано значение Array или Object в \"),s(\"code\",[t._v(\"values\")]),t._v(\", то необходимо указывать с \"),s(\"code\",[t._v(\"values\")]),t._v(\" из $t.\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"div\",{staticClass:\"danger custom-block\"},[e(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Совет\")]),this._v(\" \"),e(\"p\",[this._v(\"Обратите внимание, что в хуках жизненного цикла контекст должен быть экземпляром компонента (например в опции \"),e(\"code\",[this._v(\"data\")]),this._v(\", \"),e(\"code\",[this._v(\"const $tc = this.$tc.bind(this)\")]),this._v(\").\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"te\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#te\"}},[this._v(\"#\")]),this._v(\" $te\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Аргументы:\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{Path} key\")]),t._v(\": обязательный\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Locale} locale\")]),t._v(\": опционально\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Возвращает:\")]),t._v(\" \"),s(\"code\",[t._v(\"boolean\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"Проверяет существует ли перевод для ключа в сообщениях локализации. Если нет сообщений локализации в компоненте, то проверяет в глобальных сообщениях локализации. Если указана \"),e(\"code\",[this._v(\"locale\")]),this._v(\", то проверяется наличие в сообщениях локализации \"),e(\"code\",[this._v(\"locale\")]),this._v(\".\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"div\",{staticClass:\"danger custom-block\"},[e(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Совет\")]),this._v(\" \"),e(\"p\",[this._v(\"Обратите внимание, что в хуках жизненного цикла контекст должен быть экземпляром компонента (например в опции \"),e(\"code\",[this._v(\"data\")]),this._v(\", \"),e(\"code\",[this._v(\"const $te = this.$te.bind(this)\")]),this._v(\").\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"d\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#d\"}},[this._v(\"#\")]),this._v(\" $d\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 Добавлено в версии 7.0+\")])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Аргументы:\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{number | Date} value\")]),t._v(\": обязательный\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Path | Object} key\")]),t._v(\": опционально\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Locale | Object} locale\")]),t._v(\": опционально\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Возвращает:\")]),t._v(\" \"),s(\"code\",[t._v(\"DateTimeFormatResult\")])])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"p\",[t._v(\"Локализация даты из \"),s(\"code\",[t._v(\"value\")]),t._v(\" по указанному формату даты из \"),s(\"code\",[t._v(\"key\")]),t._v(\". Формат указанный в \"),s(\"code\",[t._v(\"key\")]),t._v(\" должен быть зарегистрирован в опции \"),s(\"code\",[t._v(\"dateTimeFormats\")]),t._v(\" класса \"),s(\"code\",[t._v(\"VueI18n\")]),t._v(\", и зависит от опции \"),s(\"code\",[t._v(\"locale\")]),t._v(\" конструктора \"),s(\"code\",[t._v(\"VueI18n\")]),t._v(\". Если указать аргумент \"),s(\"code\",[t._v(\"locale\")]),t._v(\", то он будет иметь приоритет над опцией \"),s(\"code\",[t._v(\"locale\")]),t._v(\" конструктора \"),s(\"code\",[t._v(\"VueI18n\")]),t._v(\".\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"p\",[t._v(\"Если формата даты для \"),s(\"code\",[t._v(\"key\")]),t._v(\" нет в опции \"),s(\"code\",[t._v(\"dateTimeFormats\")]),t._v(\", то будет использован запасной формат, основываясь на опции \"),s(\"code\",[t._v(\"fallbackLocale\")]),t._v(\" конструктора \"),s(\"code\",[t._v(\"VueI18n\")]),t._v(\".\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"div\",{staticClass:\"danger custom-block\"},[e(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Совет\")]),this._v(\" \"),e(\"p\",[this._v(\"Обратите внимание, что в хуках жизненного цикла контекст должен быть экземпляром компонента (например в опции \"),e(\"code\",[this._v(\"data\")]),this._v(\", \"),e(\"code\",[this._v(\"const $d = this.$d.bind(this)\")]),this._v(\").\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"n\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#n\"}},[this._v(\"#\")]),this._v(\" $n\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 Добавлено в версии 7.0+\")])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Аргументы:\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{number} value\")]),t._v(\": обязательный\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Path | Object} format\")]),t._v(\": опционально\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Locale} locale\")]),t._v(\": опционально\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Возвращает:\")]),t._v(\" \"),s(\"code\",[t._v(\"NumberFormatResult\")])])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"p\",[t._v(\"Локализация числа \"),s(\"code\",[t._v(\"value\")]),t._v(\" с помощью формата чисел \"),s(\"code\",[t._v(\"format\")]),t._v(\". Числовой формат из \"),s(\"code\",[t._v(\"format\")]),t._v(\" должен быть зарегистрирован в опции \"),s(\"code\",[t._v(\"numberFormats\")]),t._v(\" класса \"),s(\"code\",[t._v(\"VueI18n\")]),t._v(\", и зависит от опции \"),s(\"code\",[t._v(\"locale\")]),t._v(\" конструктора \"),s(\"code\",[t._v(\"VueI18n\")]),t._v(\". Если указать аргумент \"),s(\"code\",[t._v(\"locale\")]),t._v(\", то он будет иметь приоритет над опцией \"),s(\"code\",[t._v(\"locale\")]),t._v(\" конструктора \"),s(\"code\",[t._v(\"VueI18n\")]),t._v(\".\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"p\",[t._v(\"Если формат чисел для \"),s(\"code\",[t._v(\"format\")]),t._v(\" не указан в опции \"),s(\"code\",[t._v(\"numberFormats\")]),t._v(\", будет использован запасной формат, основываясь на опции \"),s(\"code\",[t._v(\"fallbackLocale\")]),t._v(\" конструктора \"),s(\"code\",[t._v(\"VueI18n\")]),t._v(\".\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"Если второй аргумент \"),e(\"code\",[this._v(\"format\")]),this._v(\" указан объектом, то в нём должны быть следующие свойства:\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"key {Path}\")]),t._v(\": опционально, форматируемое число\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"locale {Locale}\")]),t._v(\": опционально, локализация\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"style {string}\")]),t._v(\": опционально, опция форматирования чисел\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"currency {string}\")]),t._v(\": опционально, опция форматирования чисел\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"currencyDisplay {string}\")]),t._v(\": опционально, опция форматирования чисел\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"useGrouping {string}\")]),t._v(\": опционально, опция форматирования чисел\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"minimumIntegerDigits {string}\")]),t._v(\": опционально, опция форматирования чисел\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"minimumFractionDigits {string}\")]),t._v(\": опционально, опция форматирования чисел\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"maximumFractionDigits {string}\")]),t._v(\": опционально, опция форматирования чисел\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"minimumSignificantDigits {string}\")]),t._v(\": опционально, опция форматирования чисел\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"maximumSignificantDigits {string}\")]),t._v(\": опционально, опция форматирования чисел\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"localeMatcher {string}\")]),t._v(\": опционально, опция форматирования чисел\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"formatMatcher {string}\")]),t._v(\": опционально, опция форматирования чисел\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"Любые указанные опции форматирования числа будут иметь приоритет над значениями \"),e(\"code\",[this._v(\"numberFormats\")]),this._v(\" из конструктора \"),e(\"code\",[this._v(\"VueI18n\")]),this._v(\".\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"div\",{staticClass:\"danger custom-block\"},[e(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Совет\")]),this._v(\" \"),e(\"p\",[this._v(\"Обратите внимание, что в хуках жизненного цикла контекст должен быть экземпляром компонента (например в опции \"),e(\"code\",[this._v(\"data\")]),this._v(\", \"),e(\"code\",[this._v(\"const $n = this.$n.bind(this)\")]),this._v(\").\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"внедряемые-свойства\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#внедряемые-свойства\"}},[this._v(\"#\")]),this._v(\" Внедряемые свойства\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"i18n-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#i18n-2\"}},[this._v(\"#\")]),this._v(\" $i18n\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Тип:\")]),this._v(\" \"),e(\"code\",[this._v(\"I18n\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Только для чтения\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"Получение экземпляра \"),e(\"code\",[this._v(\"VueI18n\")]),this._v(\", если был определён.\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"Если в компоненте указана опция \"),e(\"code\",[this._v(\"i18n\")]),this._v(\", то получение экземпляра \"),e(\"code\",[this._v(\"VueI18n\")]),this._v(\" компонента. В противном случае, получение корневого экземпляра \"),e(\"code\",[this._v(\"VueI18n\")]),this._v(\".\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"кnасс-vuei18n\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#кnасс-vuei18n\"}},[this._v(\"#\")]),this._v(\" Класс \"),e(\"code\",[this._v(\"VueI18n\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"статические-свойства\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#статические-свойства\"}},[this._v(\"#\")]),this._v(\" Статические свойства\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"version\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#version\"}},[this._v(\"#\")]),this._v(\" version\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"strong\",[this._v(\"Тип:\")]),this._v(\" \"),e(\"code\",[this._v(\"string\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"Версия \"),e(\"code\",[this._v(\"vue-i18n\")]),this._v(\".\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"availabilities\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#availabilities\"}},[this._v(\"#\")]),this._v(\" availabilities\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 Добавлено в версии 7.0+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"strong\",[this._v(\"Тип:\")]),this._v(\" \"),e(\"code\",[this._v(\"IntlAvailability\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"code\",[this._v(\"{boolean} dateTimeFormat\")]),this._v(\": форматирование дат для локалей\")])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"code\",[this._v(\"{boolean} numberFormat\")]),this._v(\": форматирование чисел для локалей\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"опции-конструктора\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#опции-конструктора\"}},[this._v(\"#\")]),this._v(\" Опции конструктора\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"locale\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#locale\"}},[this._v(\"#\")]),this._v(\" locale\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Тип:\")]),this._v(\" \"),e(\"code\",[this._v(\"Locale\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"По умолчанию:\")]),this._v(\" \"),e(\"code\",[this._v(\"'en-US'\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"fallbacklocale\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#fallbacklocale\"}},[this._v(\"#\")]),this._v(\" fallbackLocale\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Тип:\")]),this._v(\" \"),e(\"code\",[this._v(\"FallbackLocale\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"По умолчанию:\")]),this._v(\" \"),e(\"code\",[this._v(\"false\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"messages\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#messages\"}},[this._v(\"#\")]),this._v(\" messages\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Тип:\")]),this._v(\" \"),e(\"code\",[this._v(\"LocaleMessages\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"По умолчанию:\")]),this._v(\" \"),e(\"code\",[this._v(\"{}\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"datetimeformats\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#datetimeformats\"}},[this._v(\"#\")]),this._v(\" dateTimeFormats\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 Добавлено в версии 7.0+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Тип:\")]),this._v(\" \"),e(\"code\",[this._v(\"DateTimeFormats\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"По умолчанию:\")]),this._v(\" \"),e(\"code\",[this._v(\"{}\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"numberformats\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#numberformats\"}},[this._v(\"#\")]),this._v(\" numberFormats\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 Добавлено в версии 7.0+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Тип:\")]),this._v(\" \"),e(\"code\",[this._v(\"NumberFormats\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"По умолчанию:\")]),this._v(\" \"),e(\"code\",[this._v(\"{}\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"availablelocales\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#availablelocales\"}},[this._v(\"#\")]),this._v(\" availableLocales\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 Добавлено в версии 8.9.0+\")])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Тип:\")]),t._v(\" \"),s(\"code\",[t._v(\"Locale[]\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"По умолчанию:\")]),t._v(\" \"),s(\"code\",[t._v(\"[]\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Примеры:\")]),t._v(\" \"),s(\"code\",[t._v('[\"en\", \"ru\"]')])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"Список доступных локалей в \"),e(\"code\",[this._v(\"messages\")]),this._v(\" в лексическом порядке.\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"formatter\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#formatter\"}},[this._v(\"#\")]),this._v(\" formatter\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Тип:\")]),this._v(\" \"),e(\"code\",[this._v(\"Formatter\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"По умолчанию:\")]),this._v(\" Встроенный formatter\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"Метод форматирования, реализующий интерфейс \"),e(\"code\",[this._v(\"Formatter\")]),this._v(\".\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"modifiers\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#modifiers\"}},[this._v(\"#\")]),this._v(\" modifiers\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 Добавлено в версии 8.15.0+\")])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Тип:\")]),t._v(\" \"),s(\"code\",[t._v(\"Modifier\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"По умолчанию:\")]),t._v(\" модификаторы \"),s(\"code\",[t._v(\"lower\")]),t._v(\" и \"),s(\"code\",[t._v(\"upper\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"missing\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#missing\"}},[this._v(\"#\")]),this._v(\" missing\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Тип:\")]),this._v(\" \"),e(\"code\",[this._v(\"MissingHandler\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"По умолчанию:\")]),this._v(\" \"),e(\"code\",[this._v(\"null\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"fallbackroot\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#fallbackroot\"}},[this._v(\"#\")]),this._v(\" fallbackRoot\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Тип:\")]),this._v(\" \"),e(\"code\",[this._v(\"Boolean\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"По умолчанию:\")]),this._v(\" \"),e(\"code\",[this._v(\"true\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"При значении \"),e(\"code\",[this._v(\"false\")]),this._v(\" будет выбрасываться предупреждение и возвращаться ключ.\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"sync\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#sync\"}},[this._v(\"#\")]),this._v(\" sync\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Тип:\")]),this._v(\" \"),e(\"code\",[this._v(\"Boolean\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"По умолчанию:\")]),this._v(\" \"),e(\"code\",[this._v(\"true\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"При значении \"),e(\"code\",[this._v(\"false\")]),this._v(\", независимо от локали определённой на корневом уровне, будет использоваться локаль установленная в компоненте.\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"silenttranslationwarn\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#silenttranslationwarn\"}},[this._v(\"#\")]),this._v(\" silentTranslationWarn\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"6.1+, 🆙 8.13\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Тип:\")]),this._v(\" \"),e(\"code\",[this._v(\"Boolean | RegExp\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"По умолчанию:\")]),this._v(\" \"),e(\"code\",[this._v(\"false\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"При значении \"),e(\"code\",[this._v(\"true\")]),this._v(\", отключаются предупреждения об ошибках локализации. Если использовать регулярное выражение, то можно отключать предупреждения об ошибках, которые будут соответствовать \"),e(\"code\",[this._v(\"key\")]),this._v(\" (например, \"),e(\"code\",[this._v(\"$t\")]),this._v(\").\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"silentfallbackwarn\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#silentfallbackwarn\"}},[this._v(\"#\")]),this._v(\" silentFallbackWarn\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 Добавлено в версии 8.8+, 🆙 8.13\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Тип:\")]),this._v(\" \"),e(\"code\",[this._v(\"Boolean | RegExp\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"По умолчанию:\")]),this._v(\" \"),e(\"code\",[this._v(\"false\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"Отключение предупреждений при использовании запасной локали из \"),e(\"code\",[this._v(\"fallbackLocale\")]),this._v(\" или \"),e(\"code\",[this._v(\"root\")]),this._v(\".\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"При значении \"),e(\"code\",[this._v(\"true\")]),this._v(\" предупреждения будут генерироваться только если недоступна локализация вообще, а не для случаев использования запасной локали. При использовании регулярного выражения можно отключать предупреждения которые будут соответствовать \"),e(\"code\",[this._v(\"key\")]),this._v(\" (например, \"),e(\"code\",[this._v(\"$t\")]),this._v(\").\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"preservedirectivecontent\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#preservedirectivecontent\"}},[this._v(\"#\")]),this._v(\" preserveDirectiveContent\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"Добавлено в версии 8.7+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Тип:\")]),this._v(\" \"),e(\"code\",[this._v(\"Boolean\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"По умолчанию:\")]),this._v(\" \"),e(\"code\",[this._v(\"false\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"Определяет должен ли элемент директивы \"),e(\"code\",[this._v(\"v-t\")]),this._v(\" сохранять \"),e(\"code\",[this._v(\"textContent\")]),this._v(\" после того как директива будет снята с элемента.\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"warnhtmlinmessage\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#warnhtmlinmessage\"}},[this._v(\"#\")]),this._v(\" warnHtmlInMessage\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"Добавлено в версии 8.11+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Тип:\")]),this._v(\" \"),e(\"code\",[this._v(\"WarnHtmlInMessageLevel\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"По умолчанию:\")]),this._v(\" \"),e(\"code\",[this._v(\"off\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"Разрешить ли использование HTML-форматирования в сообщениях локализации. См. также свойство \"),e(\"code\",[this._v(\"warnHtmlInMessage\")]),this._v(\".\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"div\",{staticClass:\"danger custom-block\"},[e(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Внимание!\")]),this._v(\" \"),e(\"p\",[this._v(\"Со следующей мажорной версии значение по умолчанию \"),e(\"code\",[this._v(\"warnHtmlInMessage\")]),this._v(\" будет \"),e(\"code\",[this._v(\"warn\")]),this._v(\".\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"sharedmessages\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#sharedmessages\"}},[this._v(\"#\")]),this._v(\" sharedMessages\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"Добавлено в версии 8.12+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Тип:\")]),this._v(\" \"),e(\"code\",[this._v(\"LocaleMessages\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"По умолчанию:\")]),this._v(\" \"),e(\"code\",[this._v(\"undefined\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"posttranslation\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#posttranslation\"}},[this._v(\"#\")]),this._v(\" postTranslation\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"Добавлено в версии 8.16+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Тип:\")]),this._v(\" \"),e(\"code\",[this._v(\"PostTranslationHandler\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"По умолчанию:\")]),this._v(\" \"),e(\"code\",[this._v(\"null\")])])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"p\",[t._v(\"Пост-обработчик локализации. Выполняется после вызова \"),s(\"code\",[t._v(\"$t\")]),t._v(\", \"),s(\"code\",[t._v(\"t\")]),t._v(\", \"),s(\"code\",[t._v(\"$tc\")]),t._v(\" и \"),s(\"code\",[t._v(\"tc\")]),t._v(\".\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"свойства\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#свойства\"}},[this._v(\"#\")]),this._v(\" Свойства\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"locale-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#locale-2\"}},[this._v(\"#\")]),this._v(\" locale\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Тип:\")]),this._v(\" \"),e(\"code\",[this._v(\"Locale\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Чтение/Запись\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"fallbacklocale-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#fallbacklocale-2\"}},[this._v(\"#\")]),this._v(\" fallbackLocale\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Тип:\")]),this._v(\" \"),e(\"code\",[this._v(\"FallbackLocale\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Чтение/Запись\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"messages-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#messages-2\"}},[this._v(\"#\")]),this._v(\" messages\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Тип:\")]),this._v(\" \"),e(\"code\",[this._v(\"LocaleMessages\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Только для чтения\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"datetimeformats-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#datetimeformats-2\"}},[this._v(\"#\")]),this._v(\" dateTimeFormats\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 Добавлено в версии 7.0+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Тип:\")]),this._v(\" \"),e(\"code\",[this._v(\"DateTimeFormats\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Только для чтения\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"numberformats-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#numberformats-2\"}},[this._v(\"#\")]),this._v(\" numberFormats\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 Добавлено в версии 7.0+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Тип:\")]),this._v(\" \"),e(\"code\",[this._v(\"NumberFormats\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Только для чтения\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"missing-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#missing-2\"}},[this._v(\"#\")]),this._v(\" missing\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Тип:\")]),this._v(\" \"),e(\"code\",[this._v(\"MissingHandler\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Чтение/Запись\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"formatter-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#formatter-2\"}},[this._v(\"#\")]),this._v(\" formatter\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Тип:\")]),this._v(\" \"),e(\"code\",[this._v(\"Formatter\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Чтение/Запись\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"Метод форматирования, который реализует интерфейс \"),e(\"code\",[this._v(\"Formatter\")]),this._v(\".\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"silenttranslationwarn-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#silenttranslationwarn-2\"}},[this._v(\"#\")]),this._v(\" silentTranslationWarn\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"6.1+, 🆙 8.13\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Тип:\")]),this._v(\" \"),e(\"code\",[this._v(\"Boolean | RegExp\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Чтение/Запись\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"silentfallbackwarn-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#silentfallbackwarn-2\"}},[this._v(\"#\")]),this._v(\" silentFallbackWarn\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 Добавлено в версии 8.8+, 🆙 8.13\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Тип:\")]),this._v(\" \"),e(\"code\",[this._v(\"Boolean | RegExp\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Чтение/Запись\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"preservedirectivecontent-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#preservedirectivecontent-2\"}},[this._v(\"#\")]),this._v(\" preserveDirectiveContent\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"Добавлено в версии 8.7+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Тип:\")]),this._v(\" \"),e(\"code\",[this._v(\"Boolean\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Чтение/Запись\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"Должен ли элемент директивы \"),e(\"code\",[this._v(\"v-t\")]),this._v(\" сохранять \"),e(\"code\",[this._v(\"textContent\")]),this._v(\" после того как директива снята с элемента.\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"warnhtmlinmessage-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#warnhtmlinmessage-2\"}},[this._v(\"#\")]),this._v(\" warnHtmlInMessage\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"Добавлено в версии 8.11+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Тип:\")]),this._v(\" \"),e(\"code\",[this._v(\"WarnHtmlInMessageLevel\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Чтение/Запись\")])])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[t._v(\"При установке \"),s(\"code\",[t._v(\"warn\")]),t._v(\" или \"),s(\"code\",[t._v(\"error\")]),t._v(\" проверяются сообщения локализации экземпляра VueI18n.\")]),t._v(\" \"),s(\"li\",[t._v(\"При установке \"),s(\"code\",[t._v(\"warn\")]),t._v(\" выводятся предупреждения в консоль.\")]),t._v(\" \"),s(\"li\",[t._v(\"При установке \"),s(\"code\",[t._v(\"error\")]),t._v(\" генерируется Error.\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"В качестве значения по умолчанию в экземпляре VueI18n установлено \"),e(\"code\",[this._v(\"off\")]),this._v(\".\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"posttranslation-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#posttranslation-2\"}},[this._v(\"#\")]),this._v(\" postTranslation\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"Добавлено в версии 8.16+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Тип:\")]),this._v(\" \"),e(\"code\",[this._v(\"PostTranslationHandler\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Чтение/Запись\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"методы\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#методы\"}},[this._v(\"#\")]),this._v(\" Методы\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"getchoiceindex\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#getchoiceindex\"}},[this._v(\"#\")]),this._v(\" getChoiceIndex\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Аргументы:\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{number} choice\")])]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{number} choicesLength\")])])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Возвращает:\")]),t._v(\" \"),s(\"code\",[t._v(\"finalChoice {number}\")])])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"div\",{staticClass:\"language-js extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"prototype\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"getChoiceIndex \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"/* пользовательская реализация */\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"getlocalemessage-locale\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#getlocalemessage-locale\"}},[this._v(\"#\")]),this._v(\" getLocaleMessage( locale )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Аргументы:\")])]),this._v(\" \"),e(\"ul\",[e(\"li\",[e(\"code\",[this._v(\"{Locale} locale\")])])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Возвращает:\")]),this._v(\" \"),e(\"code\",[this._v(\"LocaleMessageObject\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"setlocalemessage-locale-message\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#setlocalemessage-locale-message\"}},[this._v(\"#\")]),this._v(\" setLocaleMessage( locale, message )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Аргументы:\")])]),this._v(\" \"),e(\"ul\",[e(\"li\",[e(\"code\",[this._v(\"{Locale} locale\")])]),this._v(\" \"),e(\"li\",[e(\"code\",[this._v(\"{LocaleMessageObject} message\")])])])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"div\",{staticClass:\"tip custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[t._v(\"ПРИМЕЧАНИЕ\")]),t._v(\" \"),s(\"blockquote\",[s(\"p\",[t._v(\"Добавлено в версии 8.11+\")])]),t._v(\" \"),s(\"p\",[t._v(\"При использовании \"),s(\"code\",[t._v(\"warn\")]),t._v(\" или \"),s(\"code\",[t._v(\"error\")]),t._v(\" в свойстве \"),s(\"code\",[t._v(\"warnHtmlInMessage\")]),t._v(\", при выполнении этого метода будет проверено используется ли HTML-форматирование для сообщения локализации.\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"mergelocalemessage-locale-message\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#mergelocalemessage-locale-message\"}},[this._v(\"#\")]),this._v(\" mergeLocaleMessage( locale, message )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"6.1+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Аргументы:\")])]),this._v(\" \"),e(\"ul\",[e(\"li\",[e(\"code\",[this._v(\"{Locale} locale\")])]),this._v(\" \"),e(\"li\",[e(\"code\",[this._v(\"{LocaleMessageObject} message\")])])])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"div\",{staticClass:\"tip custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[t._v(\"ПРИМЕЧАНИЕ\")]),t._v(\" \"),s(\"blockquote\",[s(\"p\",[t._v(\"Добавлено в версии 8.11+\")])]),t._v(\" \"),s(\"p\",[t._v(\"При использовании \"),s(\"code\",[t._v(\"warn\")]),t._v(\" или \"),s(\"code\",[t._v(\"error\")]),t._v(\" в свойстве \"),s(\"code\",[t._v(\"warnHtmlInMessage\")]),t._v(\", при выполнении этого метода будет проверено используется ли HTML-форматирование для сообщения локализации.\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"t-key-locale-values\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#t-key-locale-values\"}},[this._v(\"#\")]),this._v(\" t( key, [locale], [values] )\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Аргументы:\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{Path} key\")]),t._v(\": обязательный\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Locale} locale\")]),t._v(\": опционально\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Array | Object} values\")]),t._v(\": опционально\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Возвращает:\")]),t._v(\" : \"),s(\"code\",[t._v(\"TranslateResult\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"Аналогично функции возвращаемой методом \"),e(\"code\",[this._v(\"$t\")]),this._v(\". Подробнее см. \"),e(\"a\",{attrs:{href:\"#t\"}},[this._v(\"$t\")]),this._v(\".\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"tc-key-choice-values\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#tc-key-choice-values\"}},[this._v(\"#\")]),this._v(\" tc( key, [choice], [values] )\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Аргументы:\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{Path} key\")]),t._v(\": обязательный\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{number} choice\")]),t._v(\": опционально, по умолчанию \"),s(\"code\",[t._v(\"1\")])]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{string | Array | Object} values\")]),t._v(\": опционально\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Возвращает:\")]),t._v(\" \"),s(\"code\",[t._v(\"TranslateResult\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"Аналогично функции возвращаемой методом \"),e(\"code\",[this._v(\"$tc\")]),this._v(\". Подробнее см. \"),e(\"a\",{attrs:{href:\"#tc\"}},[this._v(\"$tc\")]),this._v(\".\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"te-key-locale\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#te-key-locale\"}},[this._v(\"#\")]),this._v(\" te( key, [locale] )\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Аргументы:\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{string} key\")]),t._v(\": обязательный\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Locale} locale\")]),t._v(\": опционально\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Возвращает:\")]),t._v(\" \"),s(\"code\",[t._v(\"boolean\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"Проверяет существует ли указанный ключ в глобальных сообщениях локализации. Если указать \"),e(\"code\",[this._v(\"locale\")]),this._v(\", проверка будет осуществляться в сообщениях локализации \"),e(\"code\",[this._v(\"locale\")]),this._v(\".\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"getdatetimeformat-locale\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#getdatetimeformat-locale\"}},[this._v(\"#\")]),this._v(\" getDateTimeFormat ( locale )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 Добавлено в версии 7.0+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Аргументы:\")])]),this._v(\" \"),e(\"ul\",[e(\"li\",[e(\"code\",[this._v(\"{Locale} locale\")])])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Возвращает:\")]),this._v(\" \"),e(\"code\",[this._v(\"DateTimeFormat\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"setdatetimeformat-locale-format\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#setdatetimeformat-locale-format\"}},[this._v(\"#\")]),this._v(\" setDateTimeFormat ( locale, format )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 Добавлено в версии 7.0+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Аргументы:\")])]),this._v(\" \"),e(\"ul\",[e(\"li\",[e(\"code\",[this._v(\"{Locale} locale\")])]),this._v(\" \"),e(\"li\",[e(\"code\",[this._v(\"{DateTimeFormat} format\")])])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"mergedatetimeformat-locale-format\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#mergedatetimeformat-locale-format\"}},[this._v(\"#\")]),this._v(\" mergeDateTimeFormat ( locale, format )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 Добавлено в версии 7.0+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Аргументы:\")])]),this._v(\" \"),e(\"ul\",[e(\"li\",[e(\"code\",[this._v(\"{Locale} locale\")])]),this._v(\" \"),e(\"li\",[e(\"code\",[this._v(\"{DateTimeFormat} format\")])])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"d-value-key-locale\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#d-value-key-locale\"}},[this._v(\"#\")]),this._v(\" d( value, [key], [locale] )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 Добавлено в версии 7.0+\")])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Аргументы:\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{number | Date} value\")]),t._v(\": обязательный\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Path | Object} key\")]),t._v(\": опционально\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Locale | Object} locale\")]),t._v(\": опционально\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Возвращает:\")]),t._v(\" \"),s(\"code\",[t._v(\"DateTimeFormatResult\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"Аналогично функции возвращаемой методом \"),e(\"code\",[this._v(\"$d\")]),this._v(\". Подробнее см. \"),e(\"a\",{attrs:{href:\"#d\"}},[this._v(\"$d\")]),this._v(\".\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"getnumberformat-locale\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#getnumberformat-locale\"}},[this._v(\"#\")]),this._v(\" getNumberFormat ( locale )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 Добавлено в версии 7.0+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Аргументы:\")])]),this._v(\" \"),e(\"ul\",[e(\"li\",[e(\"code\",[this._v(\"{Locale} locale\")])])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Возвращает:\")]),this._v(\" \"),e(\"code\",[this._v(\"NumberFormat\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"setnumberformat-locale-format\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#setnumberformat-locale-format\"}},[this._v(\"#\")]),this._v(\" setNumberFormat ( locale, format )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 Добавлено в версии 7.0+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Аргументы:\")])]),this._v(\" \"),e(\"ul\",[e(\"li\",[e(\"code\",[this._v(\"{Locale} locale\")])]),this._v(\" \"),e(\"li\",[e(\"code\",[this._v(\"{NumberFormat} format\")])])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"mergenumberformat-locale-format\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#mergenumberformat-locale-format\"}},[this._v(\"#\")]),this._v(\" mergeNumberFormat ( locale, format )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 Добавлено в версии 7.0+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Аргументы:\")])]),this._v(\" \"),e(\"ul\",[e(\"li\",[e(\"code\",[this._v(\"{Locale} locale\")])]),this._v(\" \"),e(\"li\",[e(\"code\",[this._v(\"{NumberFormat} format\")])])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"n-value-format-locale\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#n-value-format-locale\"}},[this._v(\"#\")]),this._v(\" n( value, [format], [locale] )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 Добавлено в версии 7.0+\")])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Аргументы:\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{number} value\")]),t._v(\": обязательный\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Path | Object} format\")]),t._v(\": опционально\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Locale} locale\")]),t._v(\": опционально\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Возвращает:\")]),t._v(\" \"),s(\"code\",[t._v(\"NumberFormatResult\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"Аналогично функции возвращаемой методом \"),e(\"code\",[this._v(\"$n\")]),this._v(\". Подробнее см. \"),e(\"a\",{attrs:{href:\"#n\"}},[this._v(\"$n\")]),this._v(\".\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"директивы\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#директивы\"}},[this._v(\"#\")]),this._v(\" Директивы\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 Добавлено в версии 7.3+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"v-t\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#v-t\"}},[this._v(\"#\")]),this._v(\" v-t\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Ожидает:\")]),t._v(\" \"),s(\"code\",[t._v(\"string | Object\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Модификаторы:\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\".preserve\")]),t._v(\": (8.7.0+) сохраняет \"),s(\"code\",[t._v(\"textContent\")]),t._v(\" элемента при снятии директивы с элемента.\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Подробности:\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"Обновление \"),e(\"code\",[this._v(\"textContent\")]),this._v(\" элемента, который был переведён с помощью сообщений локализации. Можно использовать строковый или объектный синтаксис. Строковый синтаксис может быть задан в качестве пути к сообщению локализации. При использовании объектного синтаксиса необходимо указать следующие свойства:\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"pre\",[e(\"code\",[this._v(\"* path: обязательный, ключ сообщения локализации\\n* locale: опционально, локализация\\n* args: опционально, для списка или именованного форматирования\\n\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"a\",{attrs:{href:\"#preservedirectivecontent\"}},[e(\"code\",[this._v(\"preserveDirectiveContent\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"strong\",[this._v(\"Примеры:\")])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- строковый синтаксис: литерал --\\x3e\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"'\")]),t._v(\"foo.bar'\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- строковый синтаксис: привязка к данным --\\x3e\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"msg\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- объектный синтаксис: литерал --\\x3e\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"{ path: 'hi', локализация: 'ru', args: { name: 'kazupon' } }\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- объектный синтаксис: привязка к данным --\\x3e\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"{ path: greeting, args: { name: fullName } }\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- с модификатором preserve --\\x3e\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t.preserve\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"'\")]),t._v(\"foo.bar'\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"компоненты\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#компоненты\"}},[this._v(\"#\")]),this._v(\" Компоненты\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"функционаnьный-компонент-i18n\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#функционаnьный-компонент-i18n\"}},[this._v(\"#\")]),this._v(\" Функциональный компонент i18n\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 Добавлено в версии 7.0+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"входные-параметры\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#входные-параметры\"}},[this._v(\"#\")]),this._v(\" Входные параметры:\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"path {Path}\")]),t._v(\": обязательный, путь к сообщению локализации\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"locale {Locale}\")]),t._v(\": опционально, локализация\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"tag {string}\")]),t._v(\": опционально, по умолчанию \"),s(\"code\",[t._v(\"span\")])]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"places {Array | Object}\")]),t._v(\": опционально (7.2+)\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"div\",{staticClass:\"danger custom-block\"},[e(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Внимание!\")]),this._v(\" \"),e(\"p\",[this._v(\"Со следующей мажорной версии опция \"),e(\"code\",[this._v(\"places\")]),this._v(\" будет удалена. Используйте синтаксис слотов.\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"испоnьзование\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#испоnьзование\"}},[this._v(\"#\")]),this._v(\" Использование:\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"path\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"term\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"tag\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"label\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"for\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"tos\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":href\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"url\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"target\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"_blank\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('tos') }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"div\",{staticClass:\"language-js extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    tos\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Term of Service'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    term\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'I accept xxx {0}.'\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  ru\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    tos\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Условия обслуживания'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    term\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Я соглашаюсь с xxx {0}.'\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  data\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    url\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'/term'\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),s(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"см-также\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#см-также\"}},[this._v(\"#\")]),this._v(\" См. также:\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"функционаnьный-компонент-i18n-n\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#функционаnьный-компонент-i18n-n\"}},[this._v(\"#\")]),this._v(\" Функциональный компонент i18n-n\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 Добавлено в версии 8.10+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"входные-параметры-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#входные-параметры-2\"}},[this._v(\"#\")]),this._v(\" Входные параметры:\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"value {number}\")]),t._v(\": обязательный, число для форматирования\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"format {string | NumberFormatOptions}\")]),t._v(\": опционально, форматируемое число или объект с указанными опциями форматирования\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"locale {Locale}\")]),t._v(\": опционально, локализация\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"tag {string}\")]),t._v(\": опционально, по умолчанию \"),s(\"code\",[t._v(\"span\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"испоnьзование-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#испоnьзование-2\"}},[this._v(\"#\")]),this._v(\" Использование:\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n-n\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":value\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"money\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"format\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"currency\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"tag\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"label\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[s(\"span\",{pre:!0,attrs:{class:\"token namespace\"}},[t._v(\"v-slot:\")]),t._v(\"currency\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"slotProps\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"class\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"font-weight: bold\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n      {{ slotProps.currency }}\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n-n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"div\",{staticClass:\"language-js extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"var\")]),t._v(\" numberFormats \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en-US'\")]),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    currency\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      style\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'currency'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      currency\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'USD'\")]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ru-RU'\")]),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    currency\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      style\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'currency'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      currency\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'RUB'\")]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en-US'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  numberFormats\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  data\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    money\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"10234\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),s(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"сnоты-с-ограниченной-обnастью-видимости\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#сnоты-с-ограниченной-обnастью-видимости\"}},[this._v(\"#\")]),this._v(\" Слоты с ограниченной областью видимости\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"currency\")])]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"decimal\")])]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"fraction\")])]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"group\")])]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"infinity\")])]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"integer\")])]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"literal\")])]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"minusSign\")])]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"nan\")])]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"plusSign\")])]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"percentSign\")])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"[slotName] {FormattedNumberPartType}\")]),t._v(\": параметр с тем же именем, что и имя слота (например, \"),s(\"code\",[t._v(\"integer\")]),t._v(\")\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"index {Number}\")]),t._v(\": индекс конкретной части в массиве частей числа\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"parts {Array}\")]),t._v(\": массив со всеми отформатированными частями числа\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"см-также-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#см-также-2\"}},[this._v(\"#\")]),this._v(\" См. также:\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"специаnьный-атрибуты\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#специаnьный-атрибуты\"}},[this._v(\"#\")]),this._v(\" Специальный атрибуты\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"place\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#place\"}},[this._v(\"#\")]),this._v(\" place\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 Добавлено в версии 7.2+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"ожидает-number-string\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#ожидает-number-string\"}},[this._v(\"#\")]),this._v(\" Ожидает: \"),e(\"code\",[this._v(\"{number | string}\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"см-также-3\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#см-также-3\"}},[this._v(\"#\")]),this._v(\" См. также:\")])}],!1,null,null,null);e.default=r.exports}}]);"
  },
  {
    "path": "docs/assets/js/26.616f0814.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{258:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this.$createElement;this._self._c;return this._m(0)}),[function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[a(\"h1\",{attrs:{id:\"локаnизация-на-основе-компонентов\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#локаnизация-на-основе-компонентов\"}},[t._v(\"#\")]),t._v(\" Локализация на основе компонентов\")]),t._v(\" \"),a(\"p\",[t._v(\"В основном данные для локализации (например, \"),a(\"code\",[t._v(\"locale\")]),t._v(\",\"),a(\"code\",[t._v(\"messages\")]),t._v(\", и т.д.) задаются опциями конструктора экземпляра \"),a(\"code\",[t._v(\"VueI18n\")]),t._v(\" и устанавливаются через свойство \"),a(\"code\",[t._v(\"i18n\")]),t._v(\" в корневой экземпляр Vue.\")]),t._v(\" \"),a(\"p\",[t._v(\"Поэтому можно глобально выполнять переводы, используя методы \"),a(\"code\",[t._v(\"$t\")]),t._v(\" или \"),a(\"code\",[t._v(\"$tc\")]),t._v(\" в корневом экземпляре Vue и любом из компонентов в нём. Но также возможно указывать данные для локализации в каждом компоненте в отдельности, что может быть удобнее благодаря компонентно-ориентированному дизайну.\")]),t._v(\" \"),a(\"p\",[t._v(\"Пример локализации на основе компонентов:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Установка локализации в корневой экземпляр Vue\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ru'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hello world'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        greeting\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'good morning'\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    ru\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'привет мир'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        greeting\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'доброе утро'\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Определение компонента\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" Component1 \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  template\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token template-string\"}},[a(\"span\",{pre:!0,attrs:{class:\"token template-punctuation string\"}},[t._v(\"`\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\\n    <div class=\"container\">\\n     <p>Component1 locale messages: {{ $t(\"message.hello\") }}</p>\\n     <p>Fallback global locale messages: {{ $t(\"message.greeting\") }}</p>\\n   </div>')]),a(\"span\",{pre:!0,attrs:{class:\"token template-punctuation string\"}},[t._v(\"`\")])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// опция `i18n`, определение данных локализации для компонента\")]),t._v(\"\\n    messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hello component1'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      ru\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'привет component1'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  components\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    Component1\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"Шаблон:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v('{{ $t(\"message.hello\") }}'),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"component1\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"component1\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"Результат:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"привет мир\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"class\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"container\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Component1 locale messages: привет component1\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Fallback global locale messages: доброе утро\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"Если компонент не имеет собственного сообщения для локализации, то в качестве запасного выхода он обратится к глобальным данным для локализации. Компонент использует локаль, установленную в корневом экземпляре (в примере выше установлена: \"),a(\"code\",[t._v(\"locale: 'ru'\")]),t._v(\").\")]),t._v(\" \"),a(\"p\",[t._v(\"Обратите внимание, по умолчанию при обращении к данным корневой локализации будут генерироваться предупреждения в консоли:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-console extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-text\"}},[a(\"code\",[t._v(\"[vue-i18n] Value of key 'message.greeting' is not a string!\\n[vue-i18n] Fall back to translate the keypath 'message.greeting' with root locale.\\n\")])])]),a(\"p\",[t._v(\"Чтобы скрыть эти предупреждения (оставив те, что предупреждают о полном отсутствии перевода для данного ключа) установите опцию \"),a(\"code\",[t._v(\"silentFallbackWarn: true\")]),t._v(\" при инициализации экземпляра \"),a(\"code\",[t._v(\"VueI18n\")]),t._v(\".\")]),t._v(\" \"),a(\"p\",[t._v(\"Если необходимо осуществлять перевод, основываясь на локали компонента, то это можно сделать с помощью опции \"),a(\"code\",[t._v(\"sync: false\")]),t._v(\" и \"),a(\"code\",[t._v(\"locale\")]),t._v(\" в настройках \"),a(\"code\",[t._v(\"i18n\")]),t._v(\".\")]),t._v(\" \"),a(\"h2\",{attrs:{id:\"общие-сообщения-nокаnизации-дnя-компонентов\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#общие-сообщения-nокаnизации-дnя-компонентов\"}},[t._v(\"#\")]),t._v(\" Общие сообщения локализации для компонентов\")]),t._v(\" \"),a(\"p\",[t._v(\"Иногда может потребоваться импортировать сообщения локализации в определённых компонентах, чтобы не обращаться к глобальным сообщениям локализации (например, общие сообщения для определённых функций компонентов).\")]),t._v(\" \"),a(\"p\",[t._v(\"Для этого можно использовать опцию \"),a(\"code\",[t._v(\"sharedMessages\")]),t._v(\" в свойстве \"),a(\"code\",[t._v(\"i18n\")]),t._v(\" компонента.\")]),t._v(\" \"),a(\"p\",[t._v(\"Пример использования общих сообщений локализации:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"export\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"default\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    buttons\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      save\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Save'\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  ru\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    buttons\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      save\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Сохранить'\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"Компонент:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),t._v(\" commonMessage \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'./locales/common'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// импорт общих сообщений локализации\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"export\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"default\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  name\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ServiceModal'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  template\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token template-string\"}},[a(\"span\",{pre:!0,attrs:{class:\"token template-punctuation string\"}},[t._v(\"`\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\\n    <div class=\"modal\">\\n      <div class=\"body\">\\n        <p>Это хороший сервис</p>\\n      </div>\\n      <div class=\"footer\">\\n        <button type=\"button\">\\n          {{ $t(\\'buttons.save\\') }}\\n        </button>\\n      </div>\\n    </div>\\n  ')]),a(\"span\",{pre:!0,attrs:{class:\"token template-punctuation string\"}},[t._v(\"`\")])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"...\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    sharedMessages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" commonMessages\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"Если указаны опции \"),a(\"code\",[t._v(\"sharedMessages\")]),t._v(\" и \"),a(\"code\",[t._v(\"messages\")]),t._v(\", то их сообщения будут объединены в сообщения локализации в экземпляре VueI18n этого компонента.\")]),t._v(\" \"),a(\"h2\",{attrs:{id:\"локаnизация-в-функционаnьных-компонентах\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#локаnизация-в-функционаnьных-компонентах\"}},[t._v(\"#\")]),t._v(\" Локализация в функциональных компонентах\")]),t._v(\" \"),a(\"p\",[t._v(\"При использовании функционального компонента все данные (включая \"),a(\"code\",[t._v(\"props\")]),t._v(\", \"),a(\"code\",[t._v(\"children\")]),t._v(\", \"),a(\"code\",[t._v(\"slots\")]),t._v(\", \"),a(\"code\",[t._v(\"parent\")]),t._v(\", и т.д.) передаются через \"),a(\"code\",[t._v(\"context\")]),t._v(\", в котором содержатся все эти атрибуты. Кроме того отсутствует возможность использовать \"),a(\"code\",[t._v(\"this\")]),t._v(\", поэтому при использовании vue-i18n с функциональными компонентами следует обращаться к \"),a(\"code\",[t._v(\"$t\")]),t._v(\" как к \"),a(\"code\",[t._v(\"parent.$t\")]),t._v(\", например так:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[t._v(\"...\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"href\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"#\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"target\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"_blank\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"rel\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"noopener noreferrer\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"img\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"src\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":alt\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"parent.$t('message.hello')\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"/>\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n...\\n\")])])])])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/27.adf21b94.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{259:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),t._m(1),t._v(\" \"),a(\"p\",[t._v(\"Можно выполнять локализацию дат по соответствующему формату.\")]),t._v(\" \"),a(\"p\",[t._v(\"Пример формата для дат:\")]),t._v(\" \"),t._m(2),a(\"p\",[t._v(\"Как видно выше, можно определять именованный формат даты (например, \"),a(\"code\",[t._v(\"short\")]),t._v(\", \"),a(\"code\",[t._v(\"long\")]),t._v(\" и т.д.) используя \"),a(\"a\",{attrs:{href:\"http://www.ecma-international.org/ecma-402/2.0/#sec-intl-datetimeformat-constructor\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"опции ECMA-402 Intl.DateTimeFormat\"),a(\"OutboundLink\")],1)]),t._v(\" \"),t._m(3),t._v(\" \"),t._m(4),a(\"p\",[t._v(\"Шаблон:\")]),t._v(\" \"),t._m(5),a(\"p\",[t._v(\"Результат:\")]),t._v(\" \"),t._m(6)])}),[function(){var t=this.$createElement,s=this._self._c||t;return s(\"h1\",{attrs:{id:\"локаnизация-дат\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#локаnизация-дат\"}},[this._v(\"#\")]),this._v(\" Локализация дат\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"tip custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Поддержка с версии\")]),this._v(\" \"),s(\"p\",[this._v(\"🆕 7.0+\")])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" dateTimeFormats \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en-US'\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    short\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      year\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'numeric'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      month\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'short'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      day\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'numeric'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    long\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      year\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'numeric'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      month\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'short'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      day\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'numeric'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      weekday\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'short'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      hour\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'numeric'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      minute\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'numeric'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"После этого, для возможности использования данного формата в сообщениях локализации, необходимо задать опцию \"),s(\"code\",[this._v(\"dateTimeFormats\")]),this._v(\" в конструкторе \"),s(\"code\",[this._v(\"VueI18n\")]),this._v(\":\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  dateTimeFormats\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $d(new Date(), 'short') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $d(new Date(), 'long', 'ru-RU') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Apr 19, 2017\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"2017年4月19日(水) 午前2:19\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/28.6bf6d42b.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{260:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),t._m(1),t._v(\" \"),t._m(2),t._v(\" \"),t._m(3),t._v(\" \"),a(\"p\",[t._v(\"Можно передавать ключ сообщения локализации строкой.\")]),t._v(\" \"),a(\"p\",[t._v(\"JavaScript:\")]),t._v(\" \"),t._m(4),a(\"p\",[t._v(\"Шаблон:\")]),t._v(\" \"),t._m(5),a(\"p\",[t._v(\"Результат:\")]),t._v(\" \"),t._m(6),t._m(7),t._v(\" \"),a(\"p\",[t._v(\"Можно использовать объектный синтаксис.\")]),t._v(\" \"),a(\"p\",[t._v(\"JavaScript:\")]),t._v(\" \"),t._m(8),a(\"p\",[t._v(\"Шаблон:\")]),t._v(\" \"),t._m(9),a(\"p\",[t._v(\"Результат:\")]),t._v(\" \"),t._m(10),t._m(11),t._v(\" \"),t._m(12),t._v(\" \"),a(\"p\",[t._v(\"При использовании директивы \"),a(\"code\",[t._v(\"v-t\")]),t._v(\" на элементе внутри \"),a(\"a\",{attrs:{href:\"https://ru.vuejs.org/v2/api/#transition\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"компонента \"),a(\"code\",[t._v(\"<transition>\")]),a(\"OutboundLink\")],1),t._v(\", можно заметить как переведённое сообщение исчезает во время анимации перехода. Это поведение связано с реализацией самого компонента \"),a(\"code\",[t._v(\"<transition>\")]),t._v(\" — все директивы в исчезающем элементе внутри компонента \"),a(\"code\",[t._v(\"<transition>\")]),t._v(\" должны быть уничтожены \"),a(\"strong\",[t._v(\"до начала анимации\")]),t._v(\". Это может привести к мерцанию содержимого на коротких анимациях, но наиболее заметно при длинных анимациях переходов.\")]),t._v(\" \"),a(\"p\",[t._v(\"Чтобы сохранить содержимое директивы во время анимации перехода, необходимо добавить \"),a(\"router-link\",{attrs:{to:\"./../api/#v-t\"}},[t._v(\"модификатор \"),a(\"code\",[t._v(\".preserve\")])]),t._v(\" при определении директивы \"),a(\"code\",[t._v(\"v-t\")]),t._v(\".\")],1),t._v(\" \"),a(\"p\",[t._v(\"Javascript:\")]),t._v(\" \"),t._m(13),a(\"p\",[t._v(\"Шаблон:\")]),t._v(\" \"),t._m(14),t._m(15),t._v(\" \"),a(\"p\",[t._v(\"JavaScript:\")]),t._v(\" \"),t._m(16),a(\"p\",[t._v(\"Шаблон:\")]),t._v(\" \"),t._m(17),a(\"p\",[t._v(\"Подробнее о примерах выше можно изучить \"),a(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/dev/examples/directive\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"здесь\"),a(\"OutboundLink\")],1)]),t._v(\" \"),t._m(18),t._v(\" \"),t._m(19),t._v(\" \"),t._m(20),t._v(\" \"),t._m(21),t._v(\" \"),t._m(22),t._v(\" \"),t._m(23),t._v(\" \"),t._m(24),t._v(\" \"),t._m(25),t._v(\" \"),t._m(26),t._v(\" \"),t._m(27),t._v(\" \"),a(\"p\",[a(\"code\",[t._v(\"v-t\")]),t._v(\" имеет \"),a(\"strong\",[t._v(\"лучшую производительность\")]),t._v(\" в сравнении с методом \"),a(\"code\",[t._v(\"$t\")]),t._v(\", благодаря кэшу в пользовательской директиве после выполнения перевода. Также можно реализовать предварительный перевод с помощью модуля для компилятора Vue, который предоставляет плагин \"),a(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n-extensions\",target:\"_blank\",rel:\"noopener noreferrer\"}},[a(\"code\",[t._v(\"vue-i18n-extensions\")]),a(\"OutboundLink\")],1),t._v(\".\")]),t._v(\" \"),t._m(28),t._v(\" \"),t._m(29),t._v(\" \"),a(\"p\",[a(\"code\",[t._v(\"v-t\")]),t._v(\" нельзя использовать также гибко, как \"),a(\"code\",[t._v(\"$t\")]),t._v(\", и это добавляет \"),a(\"strong\",[t._v(\"сложности\")]),t._v(\". Перевод с помощью \"),a(\"code\",[t._v(\"v-t\")]),t._v(\" вставляется в \"),a(\"code\",[t._v(\"textContent\")]),t._v(\" элемента. Также, при использовании рендеринга на стороне сервера необходимо установить \"),a(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n-extensions#directive-v-t-custom-directive-for-server-side\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"пользовательскую директиву\"),a(\"OutboundLink\")],1),t._v(\" через опцию \"),a(\"code\",[t._v(\"directives\")]),t._v(\" функции \"),a(\"code\",[t._v(\"createRenderer\")]),t._v(\".\")])])}),[function(){var t=this.$createElement,s=this._self._c||t;return s(\"h1\",{attrs:{id:\"поnьзоватеnьская-директива\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#поnьзоватеnьская-директива\"}},[this._v(\"#\")]),this._v(\" Пользовательская директива\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"tip custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Поддержка с версии\")]),this._v(\" \"),s(\"p\",[this._v(\"🆕 7.3+\")])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"Переводы можно осуществлять не только используя пользовательскую директиву \"),s(\"code\",[this._v(\"v-t\")]),this._v(\", но и с помощью метода \"),s(\"code\",[this._v(\"$t\")]),this._v(\".\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"строковый-синтаксис\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#строковый-синтаксис\"}},[this._v(\"#\")]),this._v(\" Строковый синтаксис\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hi there!'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      ru\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'привет всем!'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  data\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" path\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hello'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#string-syntax'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"string-syntax\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- строковый литерал --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"'\")]),t._v(\"hello'\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- привязка пути к сообщению из данных --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"path\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"string-syntax\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"привет всем!\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"привет всем!\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"объектный-синтаксис\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#объектный-синтаксис\"}},[this._v(\"#\")]),this._v(\" Объектный синтаксис\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hi {name}!'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      ru\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'привет {name}！'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  computed\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"nickName\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'kazupon'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  data\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" path\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hello'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#object-syntax'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"object-syntax\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- литерал --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"{ path: 'hello', locale: 'ru', args: { name: 'kazupon' } }\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- привязка к данным --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"{ path: path, args: { name: nickName } }\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"object-syntax\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"привет、kazupon！\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"hi kazupon!\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"испоnьзование-с-transition\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#испоnьзование-с-transition\"}},[this._v(\"#\")]),this._v(\" Использование с transition\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"tip custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Поддержка с версии\")]),this._v(\" \"),s(\"p\",[this._v(\"🆕 8.7+\")])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" preserve\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'with preserve'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  data\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" toggle\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token boolean\"}},[t._v(\"true\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#in-transitions'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"in-transitions\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"transition\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"name\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"fade\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-if\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"toggle\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t.preserve\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"'\")]),t._v(\"preserve'\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"transition\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"button\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"@click\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"toggle = !toggle\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Toggle\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"button\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"Также можно глобально установить настройку \"),s(\"code\",[this._v(\"preserveDirectiveContent\")]),this._v(\" в экземпляре \"),s(\"code\",[this._v(\"VueI18n\")]),this._v(\", что повлияет на все директивы \"),s(\"code\",[this._v(\"v-t\")]),this._v(\" без добавления модификатора к ним.\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" preserve\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'with preserve'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    preserveDirectiveContent\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token boolean\"}},[t._v(\"true\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  data\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" toggle\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token boolean\"}},[t._v(\"true\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#in-transitions'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"in-transitions\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"transition\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"name\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"fade\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-if\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"toggle\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"'\")]),t._v(\"preserve'\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"transition\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"button\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"@click\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"toggle = !toggle\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Toggle\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"button\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"t-иnи-v-t\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#t-иnи-v-t\"}},[this._v(\"#\")]),this._v(\" \"),s(\"code\",[this._v(\"$t\")]),this._v(\" или \"),s(\"code\",[this._v(\"v-t\")])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h3\",{attrs:{id:\"t\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#t\"}},[this._v(\"#\")]),this._v(\" \"),s(\"code\",[this._v(\"$t\")])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[s(\"code\",[this._v(\"$t\")]),this._v(\" — это метод, добавленный в экземпляр Vue. У него следующие плюсы и минусы:\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h4\",{attrs:{id:\"пnюсы\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#пnюсы\"}},[this._v(\"#\")]),this._v(\" Плюсы\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"Предоставляет \"),s(\"strong\",[this._v(\"гибкость\")]),this._v(\" в использовании синтаксиса фигурных скобок \"),s(\"code\",[this._v(\"{{}}\")]),this._v(\" в шаблонах, а также применять в вычисляемых свойствах и методах экземпляра Vue.\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h4\",{attrs:{id:\"минусы\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#минусы\"}},[this._v(\"#\")]),this._v(\" Минусы\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[s(\"code\",[this._v(\"$t\")]),this._v(\" выполняется \"),s(\"strong\",[this._v(\"каждый раз\")]),this._v(\" когда происходит перерисовка, поэтому у него есть расходы на осуществление перевода.\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h3\",{attrs:{id:\"v-t\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#v-t\"}},[this._v(\"#\")]),this._v(\" \"),s(\"code\",[this._v(\"v-t\")])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[s(\"code\",[this._v(\"v-t\")]),this._v(\" — пользовательская директива. У неё следующие плюсы и минусы:\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h4\",{attrs:{id:\"пnюсы-2\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#пnюсы-2\"}},[this._v(\"#\")]),this._v(\" Плюсы\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"Таким образом, можно достичь \"),s(\"strong\",[this._v(\"большей оптимизации производительности\")]),this._v(\".\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h4\",{attrs:{id:\"минусы-2\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#минусы-2\"}},[this._v(\"#\")]),this._v(\" Минусы\")])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/29.e8b42909.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{261:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this.$createElement;this._self._c;return this._m(0)}),[function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[a(\"h1\",{attrs:{id:\"запасная-nокаnизация\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#запасная-nокаnизация\"}},[t._v(\"#\")]),t._v(\" Запасная локализация\")]),t._v(\" \"),a(\"p\",[a(\"em\",[t._v(\"Вкратце: указывайте \"),a(\"code\",[t._v(\"fallbackLocale: '<lang>'\")]),t._v(\" для определения языка, который будет использоваться, если нет перевода в выбранной локализации.\")])]),t._v(\" \"),a(\"h2\",{attrs:{id:\"неявное-опредеnение-запасных-nокаnизаций-при-испоnьзовании-nокаnей\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#неявное-опредеnение-запасных-nокаnизаций-при-испоnьзовании-nокаnей\"}},[t._v(\"#\")]),t._v(\" Неявное определение запасных локализаций при использовании локалей\")]),t._v(\" \"),a(\"p\",[t._v(\"Если \"),a(\"code\",[t._v(\"locale\")]),t._v(\" содержит территорию и опционально диалект, то неявно будут определены автоматически запасные локали.\")]),t._v(\" \"),a(\"p\",[t._v(\"Например для \"),a(\"code\",[t._v(\"de-DE-bavarian\")]),t._v(\" в качестве запасных будут считаться следующие:\")]),t._v(\" \"),a(\"ol\",[a(\"li\",[a(\"code\",[t._v(\"de-DE-bavarian\")])]),t._v(\" \"),a(\"li\",[a(\"code\",[t._v(\"de-DE\")])]),t._v(\" \"),a(\"li\",[a(\"code\",[t._v(\"de\")])])]),t._v(\" \"),a(\"p\",[t._v(\"Для отключения автоматического определения запасных локалей укажите символ \"),a(\"code\",[t._v(\"!\")]),t._v(\", например \"),a(\"code\",[t._v(\"de-DE!\")])]),t._v(\" \"),a(\"h2\",{attrs:{id:\"явное-опредеnение-одной-nокаnи-запасной-nокаnизации\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#явное-опредеnение-одной-nокаnи-запасной-nокаnизации\"}},[t._v(\"#\")]),t._v(\" Явное определение одной локали запасной локализации\")]),t._v(\" \"),a(\"p\",[t._v(\"Иногда не все ключи сообщений переведены на другие языки. В примере ниже, сообщение для ключа \"),a(\"code\",[t._v(\"hello\")]),t._v(\" доступно в английской локали, но отсутствует в русской:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Hello, world!'\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  ru\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// упс, не все переведено\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"Если хочется использовать сообщения локализации из \"),a(\"code\",[t._v(\"en\")]),t._v(\", когда перевод отсутствует в нужной локализации, то следует указать опцию \"),a(\"code\",[t._v(\"fallbackLocale\")]),t._v(\" в конструкторе VueI18n:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ru'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  fallbackLocale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"Шаблон:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('hello') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"Результат:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Hello, world!\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"По умолчанию, если использовались сообщения запасной локализации из \"),a(\"code\",[t._v(\"fallbackLocale\")]),t._v(\", то в консоли будут выведены соответствующие предупреждения:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-console extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-text\"}},[a(\"code\",[t._v(\"[vue-i18n] Value of key 'hello' is not a string!\\n[vue-i18n] Fall back to translate the keypath 'hello' with 'en' locale.\\n\")])])]),a(\"p\",[t._v(\"Чтобы скрыть такие предупреждения (оставив при этом те, в случаях полного отсутствия переводов для данного ключа) установите \"),a(\"code\",[t._v(\"silentFallbackWarn: true\")]),t._v(\" при инициализации экземпляра \"),a(\"code\",[t._v(\"VueI18n\")]),t._v(\".\")]),t._v(\" \"),a(\"h2\",{attrs:{id:\"явное-опредеnение-запасной-nокаnи-с-помощью-массива\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#явное-опредеnение-запасной-nокаnи-с-помощью-массива\"}},[t._v(\"#\")]),t._v(\" Явное определение запасной локали с помощью массива\")]),t._v(\" \"),a(\"p\",[t._v(\"Можно указать более одной запасной локализации с помощью массива. Например:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[t._v(\"fallbackLocale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ru'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n\")])])]),a(\"h2\",{attrs:{id:\"явное-опредеnение-запасной-nокаnи-с-помощью-объекта\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#явное-опредеnение-запасной-nокаnи-с-помощью-объекта\"}},[t._v(\"#\")]),t._v(\" Явное определение запасной локали с помощью объекта\")]),t._v(\" \"),a(\"p\",[t._v(\"Более сложный алгоритм принятия решений для определения запасной локали можно реализовать с помощью карты принятия решений в виде объекта.\")]),t._v(\" \"),a(\"p\",[t._v(\"Например для подобного объекта:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[t._v(\"fallbackLocale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"/* 1 */\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'de-CH'\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\"   \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'fr'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'it'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"/* 2 */\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'zh-Hant'\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'zh-Hans'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"/* 3 */\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'es-CL'\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\"   \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'es-AR'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"/* 4 */\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'es'\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\"      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en-GB'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"/* 5 */\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'pt'\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\"      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'es-AR'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"/* 6 */\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'default'\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ru'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"Будут следующие цепочки выбора запасной локали:\")]),t._v(\" \"),a(\"table\",[a(\"thead\",[a(\"tr\",[a(\"th\",[t._v(\"Локаль\")]),t._v(\" \"),a(\"th\",[t._v(\"Цепочка выбора\")])])]),t._v(\" \"),a(\"tbody\",[a(\"tr\",[a(\"td\",[a(\"code\",[t._v(\"'de-CH'\")])]),t._v(\" \"),a(\"td\",[t._v(\"de-CH > fr > it > en > ru\")])]),t._v(\" \"),a(\"tr\",[a(\"td\",[a(\"code\",[t._v(\"'de'\")])]),t._v(\" \"),a(\"td\",[t._v(\"de > en > ru\")])]),t._v(\" \"),a(\"tr\",[a(\"td\",[a(\"code\",[t._v(\"'zh-Hant'\")])]),t._v(\" \"),a(\"td\",[t._v(\"zh-Hant > zh-Hans > zh > en > ru\")])]),t._v(\" \"),a(\"tr\",[a(\"td\",[a(\"code\",[t._v(\"'es-SP'\")])]),t._v(\" \"),a(\"td\",[t._v(\"es-SP > es > en-GB > en > ru\")])]),t._v(\" \"),a(\"tr\",[a(\"td\",[a(\"code\",[t._v(\"'es-SP!'\")])]),t._v(\" \"),a(\"td\",[t._v(\"es-SP > en > ru\")])]),t._v(\" \"),a(\"tr\",[a(\"td\",[a(\"code\",[t._v(\"'fr'\")])]),t._v(\" \"),a(\"td\",[t._v(\"fr > en > ru\")])]),t._v(\" \"),a(\"tr\",[a(\"td\",[a(\"code\",[t._v(\"'pt-BR'\")])]),t._v(\" \"),a(\"td\",[t._v(\"pt-BR > pt > es-AR > es > en-GB > en > ru\")])]),t._v(\" \"),a(\"tr\",[a(\"td\",[a(\"code\",[t._v(\"'es-CL'\")])]),t._v(\" \"),a(\"td\",[t._v(\"es-CL > es-AR > es > en-GB > en > ru\")])])])]),t._v(\" \"),a(\"h2\",{attrs:{id:\"резервная-интерпоnяция\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#резервная-интерпоnяция\"}},[t._v(\"#\")]),t._v(\" Резервная интерполяция\")]),t._v(\" \"),a(\"p\",[a(\"em\",[t._v(\"Вкратце: установите \"),a(\"code\",[t._v(\"formatFallbackMessages: true\")]),t._v(\" чтобы выполнять интерполяции шаблона по ключам перевода, когда в выбранном языке отсутствует данный ключ для перевода.\")])]),t._v(\" \"),a(\"p\",[t._v(\"Так как ключи переводов являются строками, то можно использовать само сообщение в качестве ключа (для определённого языка). Например:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  ru\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Hello, world!'\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Привет мир!'\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),a(\"p\",[t._v('Это может быть полезным, потому что не нужно будет указывать перевод для строки \"Hello, world!\" в английской локализации.')]),t._v(\" \"),a(\"p\",[t._v(\"Фактически, можно указывать даже параметры в ключе. Вместе с \"),a(\"code\",[t._v(\"formatFallbackMessages: true\")]),t._v(\" это позволит опустить создание шаблонов для «базового» языка; потому что его ключи \"),a(\"em\",[t._v(\"уже находятся\")]),t._v(\" в шаблоне.\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  ru\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Hello {name}'\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Здравствуйте {name}'\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ru'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  fallbackLocale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  formatFallbackMessages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token boolean\"}},[t._v(\"true\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"Шаблон:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('Hello {name}', { name: 'John' }}) }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('The weather today is {condition}!', { condition: 'sunny' }) }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"Результат:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Здравствуйте, John\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"The weather today is sunny!\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/3.5e63523d.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{167:function(e,t,o){\"use strict\";o.r(t),o.d(t,\"render\",(function(){return z}));\n/*!\n * github-buttons v2.7.0\n * (c) 2020 なつき\n * @license BSD-2-Clause\n */\nvar r=window.document,n=window.Math,a=window.HTMLElement,i=window.XMLHttpRequest,l=function(e){return function(t,o,r){var n=e.createElement(t);if(o)for(var a in o){var i=o[a];null!=i&&(null!=n[a]?n[a]=i:n.setAttribute(a,i))}if(r)for(var l=0,c=r.length;l<c;l++){var d=r[l];n.appendChild(\"string\"==typeof d?e.createTextNode(d):d)}return n}},c=l(r),d=function(e,t){return{}.hasOwnProperty.call(e,t)},s=i&&i.prototype&&\"withCredentials\"in i.prototype,h=s&&a&&a.prototype.attachShadow&&!a.prototype.attachShadow.prototype,u=function(e,t,o){e.addEventListener?e.addEventListener(t,o,!1):e.attachEvent(\"on\"+t,o)},f=function(e,t,o){e.removeEventListener?e.removeEventListener(t,o,!1):e.detachEvent(\"on\"+t,o)},p={light:\".btn{color:#24292e;background-color:#eff3f6;background-image:url(\\\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3clinearGradient id='o' x2='0' y2='1'%3e%3cstop stop-color='%23fafbfc'/%3e%3cstop offset='90%25' stop-color='%23eff3f6'/%3e%3c/linearGradient%3e%3crect width='100%25' height='100%25' fill='url(%23o)'/%3e%3c/svg%3e\\\");background-image:-moz-linear-gradient(top, #fafbfc, #eff3f6 90%);background-image:linear-gradient(180deg, #fafbfc, #eff3f6 90%);filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='#FFFAFBFC', endColorstr='#FFEEF2F5');border-color:#cdcfd1;border-color:rgba(27,31,35,.2)}:root .btn{filter:none}.btn:focus,.btn:hover{background-color:#e6ebf1;background-image:url(\\\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3clinearGradient id='o' x2='0' y2='1'%3e%3cstop stop-color='%23f0f3f6'/%3e%3cstop offset='90%25' stop-color='%23e6ebf1'/%3e%3c/linearGradient%3e%3crect width='100%25' height='100%25' fill='url(%23o)'/%3e%3c/svg%3e\\\");background-image:-moz-linear-gradient(top, #f0f3f6, #e6ebf1 90%);background-image:linear-gradient(180deg, #f0f3f6, #e6ebf1 90%);filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='#FFF0F3F6', endColorstr='#FFE5EAF0');background-position:-0.5em;border-color:#acaeb0;border-color:rgba(27,31,35,.35)}:root .btn:focus,:root .btn:hover{filter:none}.btn:active{background-color:#e9ecef;background-image:none;border-color:#acaeb0;border-color:rgba(27,31,35,.35);box-shadow:inset 0 .15em .3em rgba(27,31,35,.15);filter:none}.social-count{color:#24292e;background-color:#fff;border-color:#d1d2d3;border-color:rgba(27,31,35,.2)}.social-count:focus,.social-count:hover{color:#0366d6}.octicon-heart{color:#ea4aaa}\",dark:\".btn{color:#fafbfc;background-color:#202428;background-image:url(\\\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3clinearGradient id='o' x2='0' y2='1'%3e%3cstop stop-color='%232f363d'/%3e%3cstop offset='90%25' stop-color='%23202428'/%3e%3c/linearGradient%3e%3crect width='100%25' height='100%25' fill='url(%23o)'/%3e%3c/svg%3e\\\");background-image:-moz-linear-gradient(top, #2f363d, #202428 90%);background-image:linear-gradient(180deg, #2f363d, #202428 90%);filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='#FF2F363D', endColorstr='#FF1E2226');border-color:#2b3138;border-color:rgba(27,31,35,.2)}:root .btn{filter:none}.btn:focus,.btn:hover{background-color:#1b1f23;background-image:url(\\\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3clinearGradient id='o' x2='0' y2='1'%3e%3cstop stop-color='%232b3137'/%3e%3cstop offset='90%25' stop-color='%231b1f23'/%3e%3c/linearGradient%3e%3crect width='100%25' height='100%25' fill='url(%23o)'/%3e%3c/svg%3e\\\");background-image:-moz-linear-gradient(top, #2b3137, #1b1f23 90%);background-image:linear-gradient(180deg, #2b3137, #1b1f23 90%);filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='#FF2B3137', endColorstr='#FF191D21');background-position:-0.5em;border-color:#252b30;border-color:rgba(27,31,35,.5)}:root .btn:focus,:root .btn:hover{filter:none}.btn:active{background-color:#181b1f;background-image:none;border-color:#252b30;border-color:rgba(27,31,35,.5);box-shadow:inset 0 .15em .3em rgba(27,31,35,.15);filter:none}.social-count{color:#fafbfc;background-color:#1b1f23;border-color:#1b1f23;border-color:rgba(27,31,35,.2)}.social-count:focus,.social-count:hover{color:#2188ff}.octicon-heart{color:#ec6cb9}\"},g=function(e,t){return\"@media(prefers-color-scheme:\"+e+\"){\"+p[d(p,t)?t:e]+\"}\"},b=function(e){if(null==e)return p.light;var t=function(e,t,o,r){null==t&&(t=\"&\"),null==o&&(o=\"=\"),null==r&&(r=window.decodeURIComponent);for(var n={},a=e.split(t),i=0,l=a.length;i<l;++i){var c=a[i];if(\"\"!==c){var d=c.split(o);n[r(d[0])]=null!=d[1]?r(d.slice(1).join(o)):void 0}}return n}(e,\";\",\":\",(function(e){return e.replace(/^[ \\t\\n\\f\\r]+|[ \\t\\n\\f\\r]+$/g,\"\")}));return p[d(p,t[\"no-preference\"])?t[\"no-preference\"]:\"light\"]+g(\"light\",t.light)+g(\"dark\",t.dark)},v={\"mark-github\":{width:16,height:16,path:'<path fill-rule=\"evenodd\" d=\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z\"/>'},heart:{width:12,height:16,path:'<path fill-rule=\"evenodd\" d=\"M8.727 3C7.091 3 6.001 4.65 6.001 4.65S4.909 3 3.273 3C1.636 3 0 4.1 0 6.3 0 9.6 6 14 6 14s6-4.4 6-7.7C12 4.1 10.364 3 8.727 3z\"/>'},eye:{width:16,height:16,path:'<path fill-rule=\"evenodd\" d=\"M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z\"/>'},star:{width:14,height:16,path:'<path fill-rule=\"evenodd\" d=\"M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z\"/>'},\"repo-forked\":{width:10,height:16,path:'<path fill-rule=\"evenodd\" d=\"M8 1a1.993 1.993 0 00-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 002 1a1.993 1.993 0 00-1 3.72V6.5l3 3v1.78A1.993 1.993 0 005 15a1.993 1.993 0 001-3.72V9.5l3-3V4.72A1.993 1.993 0 008 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z\"/>'},\"repo-template\":{width:14,height:16,path:'<path fill-rule=\"evenodd\" d=\"M12 8V1c0-.55-.45-1-1-1H1C.45 0 0 .45 0 1v12c0 .55.45 1 1 1h2v2l1.5-1.5L6 16v-4H3v1H1v-2h7v-1H2V1h9v7h1zM4 2H3v1h1V2zM3 4h1v1H3V4zm1 2H3v1h1V6zm0 3H3V8h1v1zm6 3H8v2h2v2h2v-2h2v-2h-2v-2h-2v2z\"/>'},\"issue-opened\":{width:14,height:16,path:'<path fill-rule=\"evenodd\" d=\"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 011.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z\"/>'},\"cloud-download\":{width:16,height:16,path:'<path fill-rule=\"evenodd\" d=\"M9 12h2l-3 3-3-3h2V7h2v5zm3-8c0-.44-.91-3-4.5-3C5.08 1 3 2.92 3 5 1.02 5 0 6.52 0 8c0 1.53 1 3 3 3h3V9.7H3C1.38 9.7 1.3 8.28 1.3 8c0-.17.05-1.7 1.7-1.7h1.3V5c0-1.39 1.56-2.7 3.2-2.7 2.55 0 3.13 1.55 3.2 1.8v1.2H12c.81 0 2.7.22 2.7 2.2 0 2.09-2.25 2.2-2.7 2.2h-2V11h2c2.08 0 4-1.16 4-3.5C16 5.06 14.08 4 12 4z\"/>'}},m={},w=function(e,t){var o=m[e]||(m[e]=[]);if(!(o.push(t)>1)){var r=function(e){var t;return function(){t||(t=1,e.apply(this,arguments))}}((function(){for(delete m[e];t=o.shift();)t.apply(null,arguments)}));if(s){var n=new i;u(n,\"abort\",r),u(n,\"error\",r),u(n,\"load\",(function(){var e;try{e=JSON.parse(n.responseText)}catch(e){return void r(e)}r(200!==n.status,e)})),n.open(\"GET\",e),n.send()}else{var a=this||window;a._=function(e){a._=null,r(200!==e.meta.status,e.data)};var c=l(a.document)(\"script\",{async:!0,src:e+(/\\?/.test(e)?\"&\":\"?\")+\"callback=_\"}),d=function(){a._&&a._({meta:{}})};u(c,\"load\",d),u(c,\"error\",d),c.readyState&&function(e,t,o){var r=function(n){if(t.test(e.readyState))return f(e,\"readystatechange\",r),o(n)};u(e,\"readystatechange\",r)}(c,/de|m/,d),a.document.getElementsByTagName(\"head\")[0].appendChild(c)}}},x=function(e,t,o){var r=l(e.ownerDocument),n=e.appendChild(r(\"style\",{type:\"text/css\"})),a=\"body{margin:0}a{text-decoration:none;outline:0}.widget{display:inline-block;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;font-size:0;white-space:nowrap}.btn,.social-count{position:relative;display:inline-block;height:14px;padding:2px 5px;font-size:11px;font-weight:600;line-height:14px;vertical-align:bottom;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-repeat:repeat-x;background-position:-1px -1px;background-size:110% 110%;border:1px solid}.btn{border-radius:.25em}.btn:not(:last-child){border-radius:.25em 0 0 .25em}.social-count{border-left:0;border-radius:0 .25em .25em 0}.widget-lg .btn,.widget-lg .social-count{height:20px;padding:3px 10px;font-size:12px;line-height:20px}.octicon{display:inline-block;vertical-align:text-top;fill:currentColor}\"+b(t[\"data-color-scheme\"]);n.styleSheet?n.styleSheet.cssText=a:n.appendChild(e.ownerDocument.createTextNode(a));var i,c,s=r(\"a\",{className:\"btn\",href:t.href,target:\"_blank\",rel:\"noopener\",innerHTML:(i=t[\"data-icon\"],c=/^large$/i.test(t[\"data-size\"])?16:14,i=(\"\"+i).toLowerCase().replace(/^octicon-/,\"\"),d(v,i)||(i=\"mark-github\"),'<svg viewBox=\"0 0 '+v[i].width+\" \"+v[i].height+'\" class=\"octicon octicon-'+i+'\" style=\"width: '+c*v[i].width/v[i].height+\"px; height: \"+c+'px;\" aria-hidden=\"true\">'+v[i].path+\"</svg>\"),\"aria-label\":t[\"aria-label\"]||void 0},[\" \",r(\"span\",{},[t[\"data-text\"]||\"\"])]),h=e.appendChild(r(\"div\",{className:\"widget\"+(/^large$/i.test(t[\"data-size\"])?\" widget-lg\":\"\")},[s])),u=s.hostname.split(\".\").reverse();if(\"\"===u[0]&&u.shift(),\"com\"!==u[0]||\"github\"!==u[1])return s.href=\"#\",s.target=\"_self\",void o(h);var f=u.length,p=(\" /\"+s.pathname).split(/\\/+/);if(((2===f||3===f&&\"gist\"===u[2])&&\"archive\"===p[3]||2===f&&\"releases\"===p[3]&&\"download\"===p[4]||3===f&&\"codeload\"===u[2])&&(s.target=\"_top\"),/^true$/i.test(t[\"data-show-count\"])&&2===f){var g,m;if(!p[2]&&p[1])g=m=\"followers\";else if(!p[3]&&p[2])m=\"stargazers_count\",g=\"stargazers\";else if(p[4]||\"subscription\"!==p[3])if(p[4]||\"fork\"!==p[3]){if(\"issues\"!==p[3])return void o(h);m=\"open_issues_count\",g=\"issues\"}else m=\"forks_count\",g=\"network/members\";else m=\"subscribers_count\",g=\"watchers\";var x=p[2]?\"/repos/\"+p[1]+\"/\"+p[2]:\"/users/\"+p[1];w.call(this,\"https://api.github.com\"+x,(function(e,t){if(!e){var n=t[m];h.appendChild(r(\"a\",{className:\"social-count\",href:t.html_url+\"/\"+g,target:\"_blank\",rel:\"noopener\",\"aria-label\":n+\" \"+m.replace(/_count$/,\"\").replace(\"_\",\" \").slice(0,n<2?-1:void 0)+\" on GitHub\"},[(\"\"+n).replace(/\\B(?=(\\d{3})+(?!\\d))/g,\",\")]))}o(h)}))}else o(h)},k=window.devicePixelRatio||1,C=function(e){return(k>1?n.ceil(n.round(e*k)/k*2)/2:n.ceil(e))||0},y=function(e,t){e.style.width=t[0]+\"px\",e.style.height=t[1]+\"px\"},z=function(e,t){if(null!=e&&null!=t)if(e.getAttribute&&(e=function(e){for(var t={href:e.href,title:e.title,\"aria-label\":e.getAttribute(\"aria-label\")},o=[\"icon\",\"color-scheme\",\"text\",\"size\",\"show-count\"],r=0,n=o.length;r<n;r++){var a=\"data-\"+o[r];t[a]=e.getAttribute(a)}return null==t[\"data-text\"]&&(t[\"data-text\"]=e.textContent||e.innerText),t}(e)),h){var o=c(\"span\",{title:e.title||void 0});x(o.attachShadow({mode:\"closed\"}),e,(function(){t(o)}))}else{var a=c(\"iframe\",{src:\"javascript:0\",title:e.title||void 0,allowtransparency:!0,scrolling:\"no\",frameBorder:0});y(a,[0,0]),a.style.border=\"none\";var i=function(){var o,l=a.contentWindow;try{o=l.document.body}catch(e){return void r.body.appendChild(a.parentNode.removeChild(a))}f(a,\"load\",i),x.call(l,o,e,(function(o){var r=function(e){var t=e.offsetWidth,o=e.offsetHeight;if(e.getBoundingClientRect){var r=e.getBoundingClientRect();t=n.max(t,C(r.width)),o=n.max(o,C(r.height))}return[t,o]}(o);a.parentNode.removeChild(a),function(e,t,o){var r=function(n){return f(e,t,r),o(n)};u(e,t,r)}(a,\"load\",(function(){y(a,r)})),a.src=\"https://unpkg.com/github-buttons@2.7.0/dist/buttons.html#\"+(a.name=function(e,t,o,r){null==t&&(t=\"&\"),null==o&&(o=\"=\"),null==r&&(r=window.encodeURIComponent);var n=[];for(var a in e){var i=e[a];null!=i&&n.push(r(a)+o+r(i))}return n.join(t)}(e)),t(a)}))};u(a,\"load\",i),r.body.appendChild(a)}}},234:function(e,t,o){\"use strict\";o.r(t);var r={components:{GithubButton:{name:\"github-button\",props:[\"href\",\"ariaLabel\",\"title\",\"dataIcon\",\"dataColorScheme\",\"dataSize\",\"dataShowCount\",\"dataText\"],render:function(e){return e(\"span\",[e(\"a\",{attrs:{href:this.href,\"aria-label\":this.ariaLabel,title:this.title,\"data-icon\":this.dataIcon,\"data-color-scheme\":this.dataColorScheme,\"data-size\":this.dataSize,\"data-show-count\":this.dataShowCount,\"data-text\":this.dataText},ref:\"_\"},this.$slots.default)])},mounted:function(){this.paint()},beforeUpdate:function(){this.reset()},updated:function(){this.paint()},beforeDestroy:function(){this.reset()},methods:{paint:function(){const e=this.$el.appendChild(document.createElement(\"span\")),t=this;Promise.resolve().then(o.bind(null,167)).then((function(o){o.render(e.appendChild(t.$refs._),(function(t){try{e.parentNode.replaceChild(t,e)}catch(e){}}))}))},reset:function(){this.$el.replaceChild(this.$refs._,this.$el.lastChild)}}}}},n=o(0),a=Object(n.a)(r,(function(){var e=this.$createElement,t=this._self._c||e;return t(\"p\",{staticClass:\"sponsor-button\"},[t(\"github-button\",{attrs:{href:\"https://github.com/sponsors/kazupon\",\"data-icon\":\"octicon-heart\",\"data-size\":\"large\",\"aria-label\":\"Sponsor @kazupon on GitHub\"}},[this._v(\"\\n    Sponsor on GitHub\\n  \")])],1)}),[],!1,null,\"0a314292\",null);t.default=a.exports}}]);"
  },
  {
    "path": "docs/assets/js/30.24889fb9.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[30],{262:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),t._m(1),t._v(\" \"),a(\"p\",[t._v(\"Сообщения локализации:\")]),t._v(\" \"),t._m(2),a(\"p\",[t._v(\"Шаблон:\")]),t._v(\" \"),t._m(3),a(\"p\",[t._v(\"Результат:\")]),t._v(\" \"),t._m(4),t._m(5),t._v(\" \"),a(\"p\",[t._v(\"Сообщения локализации:\")]),t._v(\" \"),t._m(6),a(\"p\",[t._v(\"Шаблон:\")]),t._v(\" \"),t._m(7),a(\"p\",[t._v(\"Результат:\")]),t._v(\" \"),t._m(8),a(\"p\",[t._v(\"Форматирование списков также принимает объекты, соответствующие по структуре массиву:\")]),t._v(\" \"),t._m(9),a(\"p\",[t._v(\"Результат:\")]),t._v(\" \"),t._m(10),t._m(11),t._v(\" \"),a(\"div\",{staticClass:\"warning custom-block\"},[a(\"p\",{staticClass:\"custom-block-title\"},[t._v(\"Обратите внимание\")]),t._v(\" \"),a(\"p\",[t._v(\"⚠️ Динамическая локализация произвольного HTML на вебсайте очень опасна, потому что легко может привести к XSS-уязвимостям. Используйте HTML-интерполяцию только для доверенного контента и никогда для пользовательского.\")]),t._v(\" \"),a(\"p\",[t._v(\"Рекомендуем в таких случаях использовать возможности \"),a(\"router-link\",{attrs:{to:\"./interpolation.html\"}},[t._v(\"интерполяции компонента\")]),t._v(\".\")],1)]),t._v(\" \"),t._m(12),t._v(\" \"),a(\"p\",[t._v(\"Иногда требуется отобразить сообщение локализации HTML-кодом, а не статической строкой.\")]),t._v(\" \"),t._m(13),a(\"p\",[t._v(\"Шаблон:\")]),t._v(\" \"),t._m(14),a(\"p\",[t._v(\"Результат (вместо отформатированного сообщения)\")]),t._v(\" \"),t._m(15),t._m(16),t._v(\" \"),a(\"p\",[t._v(\"Сообщения локализации:\")]),t._v(\" \"),t._m(17),a(\"p\",[t._v(\"Шаблон:\")]),t._v(\" \"),t._m(18),a(\"p\",[t._v(\"Результат:\")]),t._v(\" \"),t._m(19),t._m(20),t._v(\" \"),a(\"p\",[t._v(\"Иногда может потребоваться реализовать локализацию для собственного формата сообщений (например, использовать \"),a(\"a\",{attrs:{href:\"http://userguide.icu-project.org/formatparse/messages\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"синтаксиса сообщений ICU\"),a(\"OutboundLink\")],1),t._v(\").\")]),t._v(\" \"),a(\"p\",[t._v(\"Реализовать это можно с помощью специального пользовательского метода форматирования, который должен реализовать \"),a(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js#L41-L43\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"интерфейс Formatter\"),a(\"OutboundLink\")],1),t._v(\".\")]),t._v(\" \"),a(\"p\",[t._v(\"Пример пользовательского метода форматирования с синтаксисом класса ES2015:\")]),t._v(\" \"),t._m(21),a(\"p\",[t._v(\"Также посмотрите \"),a(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/dev/examples/formatting/custom\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"официальный пример пользовательского метода форматирования\"),a(\"OutboundLink\")],1),t._v(\".\")])])}),[function(){var t=this.$createElement,s=this._self._c||t;return s(\"h1\",{attrs:{id:\"формат-сообщений-nокаnизации\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#формат-сообщений-nокаnизации\"}},[this._v(\"#\")]),this._v(\" Формат сообщений локализации\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"именованный-формат\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#именованный-формат\"}},[this._v(\"#\")]),this._v(\" Именованный формат\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'{msg} world'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  ru\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'{msg} мир'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('message.hello', { msg: 'привет' }) }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"привет мир\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"формат-списков\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#формат-списков\"}},[this._v(\"#\")]),this._v(\" Формат списков\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'{0} world'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  ru\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'{0} мир'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('message.hello', ['привееет']) }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"привееет мир\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('message.hello', {'0': 'привееет'}) }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"привееет мир\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"html-формат\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#html-формат\"}},[this._v(\"#\")]),this._v(\" HTML формат\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"warning custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Обратите внимание\")]),this._v(\" \"),s(\"blockquote\",[s(\"p\",[this._v(\"🆕 Добавлено в версии 8.11+\")])]),this._v(\" \"),s(\"p\",[this._v(\"Можно управлять использованием HTML форматирования. Для подробностей см. опцию конструктора \"),s(\"code\",[this._v(\"warnHtmlInMessage\")]),this._v(\" и свойства API.\")])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hello <br> world'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  ru\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'привет <br> мир'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-html\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"$t('message.hello')\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  привет\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- <br> существует, но отрисован как html, а не строкой --\\x3e\")]),t._v(\"\\n  мир\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"формат-ruby-on-rails-i18n\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#формат-ruby-on-rails-i18n\"}},[this._v(\"#\")]),this._v(\" Формат ruby on rails i18n\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'%{msg} world'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  ru\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'%{msg} мир'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('message.hello', { msg: 'привет' }) }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"привет мир\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"поnьзоватеnьский-формат\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#поnьзоватеnьский-формат\"}},[this._v(\"#\")]),this._v(\" Пользовательский формат\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Реализация пользовательского Formatter\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"class\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"CustomFormatter\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"constructor\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"options\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// interpolate\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// @param {string} message\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   строка или список или именованный формат\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   напр.\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   - именованный формат: 'Hi {name}'\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   - формат списка: 'Hi {0}'\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// @param {Object | Array} values\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   значения интерполяции `message`.\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   переданные значения с `$t`, `$tc` и функциональным компонентом `i18n`.\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   напр.\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   - $t('hello', { name: 'Alex' }) -> переданные значения: Object `{ name: 'Alex' }`\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   - $t('hello', ['Alex']) -> переданные значения: Array `['Alex']`\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   - функциональный компонент `i18n` (интерполяция в компоненте)\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v('//     <i18n path=\"hello\">')]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//       <p>Alex</p>\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//       <p>how are you?</p>\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//     </i18n>\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//     -> переданные значения: Array (included VNode):\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//        `[VNode{ tag: 'p', text: 'Alex', ...}, VNode{ tag: 'p', text: 'how are you?', ...}]`\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// @return {Array<any>}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   интерполированные значения. Они необходимы чтобы вернуть следующее:\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   - массив строк, когда используется `$t` или `$tc`.\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   - массив, включая объект VNode, когда используется функциональный компонент `i18n`.\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"interpolate\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"message\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" values\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// реализация логики интерполяции\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// возвращаем интерполированный массив\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'resolved message string'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Регистрация через опцию `formatter`\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en-US'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  formatter\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"CustomFormatter\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"/* опции конструктора */\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en-US'\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ru-RU'\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Запускаем приложение!\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/31.57bd94a5.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{263:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),a(\"p\",[t._v(\"С помощью функции Webpack для \"),a(\"a\",{attrs:{href:\"https://webpack.js.org/concepts/hot-module-replacement/\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"горячей перезагрузки модулей (HMR)\"),a(\"OutboundLink\")],1),t._v(\" можно отслеживать изменения в файлах локализации и осуществлять их горячую перезагрузку в приложении.\")]),t._v(\" \"),t._m(1),t._v(\" \"),a(\"p\",[t._v(\"Для статичного набора локалей, можно явно указать горячую перезагрузку этих переводов:\")]),t._v(\" \"),t._m(2),t._m(3),t._v(\" \"),t._m(4),t._v(\" \"),t._m(5)])}),[function(){var t=this.$createElement,s=this._self._c||t;return s(\"h1\",{attrs:{id:\"горячая-перезагрузка-переводов\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#горячая-перезагрузка-переводов\"}},[this._v(\"#\")]),this._v(\" Горячая перезагрузка переводов\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"простой-пример\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#простой-пример\"}},[this._v(\"#\")]),this._v(\" Простой пример\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),t._v(\" Vue \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"vue\"')]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),t._v(\" VueI18n \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"vue-i18n\"')]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),t._v(\" en \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'./en'\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),t._v(\" ru \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'./ru'\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  ru\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Экземпляр VueI18n\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Запускаем приложение\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" app \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Добавляем горячую перезагрузку сообщений локализации\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"if\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"module\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"hot\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  module\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"hot\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"accept\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'./en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'./ru'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"function\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setLocaleMessage\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"require\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'./en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"default\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n    i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setLocaleMessage\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ru'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"require\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'./ru'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"default\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Или добавляем горячую перезагрузку через свойство $i18n\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// app.$i18n.setLocaleMessage('en', require('./en').default)\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// app.$i18n.setLocaleMessage('ru', require('./ru').default)\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"продвинутый-пример\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#продвинутый-пример\"}},[this._v(\"#\")]),this._v(\" Продвинутый пример\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"Если требуется поддержка изменяющегося набор переводов, можно реализовать горячую перезагрузку для всех локалей динамически через \"),s(\"code\",[this._v(\"require.context\")]),this._v(\":\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),t._v(\" Vue \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"vue\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),t._v(\" VueI18n \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"vue-i18n\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\\nVue\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"use\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"VueI18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Загрузка всех локалей и сохранение контекста\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"function\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"loadMessages\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" context \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" require\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"context\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"./locales\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token boolean\"}},[t._v(\"true\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token regex\"}},[t._v(\"/[a-z0-9-_]+\\\\.json$/i\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" context\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"keys\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"map\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"key\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" key\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" key\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"match\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token regex\"}},[t._v(\"/[a-z0-9-_]+/i\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),a(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"0\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"reduce\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"messages\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" key\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" locale \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"...\")]),t._v(\"messages\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"context\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"key\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" context\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" context\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"loadMessages\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Экземпляр VueI18n\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"en\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Запускаем приложение\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" app \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Добавляем горячую перезагрузку сообщений локализации\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"if\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"module\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"hot\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  module\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"hot\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"accept\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"context\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"id\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" newMessages \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"loadMessages\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\\n    Object\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"keys\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"newMessages\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"filter\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"locale\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" messages\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"!==\")]),t._v(\" newMessages\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"forEach\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"locale\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        messages\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" newMessages\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n        i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setLocaleMessage\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" messages\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/32.14dc9bdc.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{264:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),t._m(1),t._v(\" \"),t._m(2),t._v(\" \"),a(\"p\",[t._v(\"Иногда требуется перевести сообщения в которых есть HTML теги или компоненты. Например:\")]),t._v(\" \"),t._m(3),t._m(4),t._v(\" \"),t._m(5),a(\"p\",[t._v(\"И в итоге шаблон станет выглядеть так:\")]),t._v(\" \"),t._m(6),a(\"p\",[t._v(\"Результат:\")]),t._v(\" \"),t._m(7),t._m(8),t._v(\" \"),t._m(9),t._v(\" \"),t._m(10),t._m(11),a(\"p\",[t._v(\"Результат:\")]),t._v(\" \"),t._m(12),a(\"p\",[t._v(\"Подробнее о примере можно изучить \"),a(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/dev/examples/interpolation/places\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"здесь\"),a(\"OutboundLink\")],1)]),t._v(\" \"),t._m(13),t._v(\" \"),t._m(14),t._v(\" \"),t._m(15),t._v(\" \"),t._m(16),t._v(\" \"),t._m(17),t._v(\" \"),t._m(18),t._v(\" \"),a(\"p\",[t._v(\"Гораздо удобнее использовать синтаксис именованных слотов. Например:\")]),t._v(\" \"),t._m(19),t._m(20),a(\"p\",[t._v(\"Результат:\")]),t._v(\" \"),t._m(21),a(\"p\",[t._v(\"С версии Vue 2.6 можно использовать сокращённый синтаксис слотов в шаблонах:\")]),t._v(\" \"),t._m(22),t._m(23),t._v(\" \"),t._m(24),t._v(\" \"),t._m(25),t._v(\" \"),t._m(26),t._v(\" \"),t._m(27),t._v(\" \"),t._m(28),t._v(\" \"),t._m(29),t._m(30),a(\"p\",[t._v(\"Результат:\")]),t._v(\" \"),t._m(31),t._m(32),t._v(\" \"),t._m(33),t._v(\" \"),t._m(34),a(\"p\",[t._v(\"Результат:\")]),t._v(\" \"),t._m(35)])}),[function(){var t=this.$createElement,s=this._self._c||t;return s(\"h1\",{attrs:{id:\"интерпоnяция-компонента\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#интерпоnяция-компонента\"}},[this._v(\"#\")]),this._v(\" Интерполяция компонента\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"базовое-испоnьзование\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#базовое-испоnьзование\"}},[this._v(\"#\")]),this._v(\" Базовое использование\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"tip custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Поддержка с версии\")]),this._v(\" \"),s(\"p\",[this._v(\"🆕 7.0+\")])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"I accept xxx \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"href\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"/term\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Terms of Service Agreement\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"Для такого сообщения, если хотим использовать \"),s(\"code\",[this._v(\"$t\")]),this._v(\", то, вероятно, попробуем достичь скомпоновав из следующих сообщений локализации:\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    term1\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"I Accept xxx\\'s\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    term2\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Terms of Service Agreement'\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('term1') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"href\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"/term\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('term2') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"I accept xxx \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"href\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"/term\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Terms of Service Agreement\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"Это выглядит очень громоздко, но если перенести тег \"),s(\"code\",[this._v(\"<a>\")]),this._v(\" в сообщение локализации, то добавится вероятность XSS-уязвимости из-за применения \"),s(\"code\",[this._v(\"v-html=\\\"$t('term')\\\"\")]),this._v(\".\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"Этого можно избежать воспользовавшись функциональным компонентом \"),s(\"code\",[this._v(\"i18n\")]),this._v(\". Например:\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"path\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"term\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"tag\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"label\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"for\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"tos\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":href\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"url\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"target\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"_blank\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('tos') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    tos\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Term of Service'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    term\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'I accept xxx {0}.'\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  ru\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    tos\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Условия обслуживания'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    term\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Я соглашаюсь с xxx {0}.'\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  data\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    url\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'/term'\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"label\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"for\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"tos\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    I accept xxx \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"href\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"/term\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"target\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"_blank\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Term of Service\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\".\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"label\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"Потомки функционального компонента \"),s(\"code\",[this._v(\"i18n\")]),this._v(\" интерполируют сообщения локализации по входному параметру \"),s(\"code\",[this._v(\"path\")]),this._v(\". В примере выше,\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{pre:!0},[s(\"p\",[s(\"code\",[this._v('<a :href=\"url\" target=\"_blank\">{{ $t(\\'tos\\') }}</a>')])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"интерполируется с сообщением локализации \"),s(\"code\",[this._v(\"term\")]),this._v(\".\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"В примере выше интерполяция компонента использует \"),s(\"strong\",[this._v(\"формат в виде списка\")]),this._v(\". Потомки функционального компонента \"),s(\"code\",[this._v(\"i18n\")]),this._v(\" интерполируются по порядку их появления.\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"испоnьзование-синтаксиса-сnотов\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#испоnьзование-синтаксиса-сnотов\"}},[this._v(\"#\")]),this._v(\" Использование синтаксиса слотов\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"tip custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Поддержка с версии\")]),this._v(\" \"),s(\"p\",[this._v(\"🆕 8.14+\")])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"path\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"info\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"tag\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"p\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"template\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[a(\"span\",{pre:!0,attrs:{class:\"token namespace\"}},[t._v(\"v-slot:\")]),t._v(\"limit\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ changeLimit }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"template\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"template\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[a(\"span\",{pre:!0,attrs:{class:\"token namespace\"}},[t._v(\"v-slot:\")]),t._v(\"action\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":href\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"changeUrl\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('change') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"template\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    info\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'You can {action} until {limit} minutes from departure.'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    change\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'change your flight'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    refund\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'refund the ticket'\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  data\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    changeUrl\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'/change'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    refundUrl\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'/refund'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    changeLimit\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"15\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    refundLimit\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"30\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    You can \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"href\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"/change\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"change your flight\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\" until\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"15\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\" minutes from departure.\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"path\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"info\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"tag\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"p\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"template\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"#limit\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ changeLimit }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"template\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"template\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"#action\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":href\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"changeUrl\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('change') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"template\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"warning custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Ограничение\")]),this._v(\" \"),s(\"p\",[this._v(\"⚠️ В компоненте \"),s(\"code\",[this._v(\"i18n\")]),this._v(\" входные параметры слота не поддерживаются.\")])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"испоnьзование-синтаксиса-places\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#испоnьзование-синтаксиса-places\"}},[this._v(\"#\")]),this._v(\" Использование синтаксиса places\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"danger custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Внимание!\")]),this._v(\" \"),s(\"p\",[this._v(\"В следующей мажорной версии входные параметры \"),s(\"code\",[this._v(\"place\")]),this._v(\" и \"),s(\"code\",[this._v(\"places\")]),this._v(\" будут объявлены устаревшими. Рекомендуем использовать синтаксис слотов.\")])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"tip custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Поддержка с версии\")]),this._v(\" \"),s(\"p\",[this._v(\"🆕 7.2+\")])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"warning custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Обратите внимание\")]),this._v(\" \"),s(\"p\",[this._v(\"⚠️ В компоненте \"),s(\"code\",[this._v(\"i18n\")]),this._v(\" содержимое, состоящее только из пробелов, будет опущено.\")])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"Именованное форматирование поддерживается с помощью атрибута \"),s(\"code\",[this._v(\"place\")]),this._v(\". Например:\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"path\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"info\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"tag\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"p\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"place\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"limit\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ changeLimit }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"place\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"action\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":href\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"changeUrl\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('change') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    info\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'You can {action} until {limit} minutes from departure.'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    change\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'change your flight'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    refund\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'refund the ticket'\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  data\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    changeUrl\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'/change'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    refundUrl\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'/refund'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    changeLimit\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"15\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    refundLimit\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"30\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    You can \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"href\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"/change\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"change your flight\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\" until\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"15\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\" minutes from departure.\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"warning custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Обратите внимание\")]),this._v(\" \"),s(\"p\",[this._v(\"⚠️ Для использования именованного форматирования все потомки компонента \"),s(\"code\",[this._v(\"i18n\")]),this._v(\" должны иметь установленный атрибут \"),s(\"code\",[this._v(\"place\")]),this._v(\". В противном случае будет использовано форматирование списком.\")])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"Если всё же необходимо интерполировать текстовое содержимое с помощью именованного форматирования, можно определить свойство \"),s(\"code\",[this._v(\"places\")]),this._v(\" на компоненте \"),s(\"code\",[this._v(\"i18n\")]),this._v(\". Например:\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"path\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"info\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"tag\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"p\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":places\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"{ limit: refundLimit }\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"place\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"action\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":href\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"refundUrl\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('refund') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    You can \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"href\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"/refund\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"refund your ticket\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\" until 30 minutes from\\n    departure.\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/33.4d59e7bf.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[33],{265:function(t,s,n){\"use strict\";n.r(s);var a=n(0),e=Object(a.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),n(\"p\",[t._v(\"Одновременная загрузка всех файлов переводов может быть излишней и ненужной.\")]),t._v(\" \"),n(\"p\",[t._v(\"Ленивая или асинхронная загрузка файлов переводов очень просто реализуется при использовании Webpack.\")]),t._v(\" \"),n(\"p\",[t._v(\"Предположим, что у нас есть каталог проекта следующей структуры:\")]),t._v(\" \"),t._m(1),t._m(2),t._v(\" \"),t._m(3),t._m(4),t._v(\" \"),t._m(5),t._v(\" \"),n(\"p\",[t._v(\"Подробнее о динамических импортах можно изучить в \"),n(\"a\",{attrs:{href:\"https://webpack.js.org/guides/code-splitting/#dynamic-imports\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"документации Webpack\"),n(\"OutboundLink\")],1),t._v(\".\")]),t._v(\" \"),t._m(6),t._v(\" \"),t._m(7),t._m(8)])}),[function(){var t=this.$createElement,s=this._self._c||t;return s(\"h1\",{attrs:{id:\"ленивая-загрузка-переводов\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#ленивая-загрузка-переводов\"}},[this._v(\"#\")]),this._v(\" Ленивая загрузка переводов\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"language- extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-text\"}},[s(\"code\",[this._v(\"our-cool-project\\n-dist\\n-src\\n--routes\\n--store\\n--setup\\n---i18n-setup.js\\n--lang\\n---en.js\\n---it.js\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"В каталоге \"),s(\"code\",[this._v(\"lang\")]),this._v(\" располагаются все файлы переводов. В каталоге \"),s(\"code\",[this._v(\"setup\")]),this._v(\" сгруппированы различные файлы настроек, например настройки i18n, регистрация глобальных компонентов, инициализации плагинов и другое.\")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n(\"div\",{staticClass:\"language-js extra-class\"},[n(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[n(\"code\",[n(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// i18n-setup.js\")]),t._v(\"\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),t._v(\" Vue \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'vue'\")]),t._v(\"\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),t._v(\" VueI18n \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'vue-i18n'\")]),t._v(\"\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),t._v(\" messages \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'@/lang/en'\")]),t._v(\"\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),t._v(\" axios \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'axios'\")]),t._v(\"\\n\\nVue\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"use\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"VueI18n\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"export\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),n(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),n(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// установка локализации\")]),t._v(\"\\n  fallbackLocale\"),n(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages \"),n(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// установка сообщений локализации\")]),t._v(\"\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" loadedLanguages \"),n(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),n(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// список локализаций, которые пред-загружены\")]),t._v(\"\\n\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"function\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setI18nLanguage\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"lang\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"locale \"),n(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" lang\\n  axios\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"defaults\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"headers\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"common\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),n(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Accept-Language'\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" lang\\n  document\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"querySelector\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'html'\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setAttribute\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'lang'\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" lang\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" lang\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"export\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"function\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"loadLanguageAsync\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"lang\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),n(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Если локализация та же\")]),t._v(\"\\n  \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"if\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"i18n\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"locale \"),n(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"===\")]),t._v(\" lang\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" Promise\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"resolve\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setI18nLanguage\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"lang\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n  \"),n(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Если локализация уже была загружена\")]),t._v(\"\\n  \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"if\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"loadedLanguages\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"includes\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"lang\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" Promise\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"resolve\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setI18nLanguage\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"lang\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n  \"),n(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Если локализация ещё не была загружена\")]),t._v(\"\\n  \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"\\n    \"),n(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v('/* webpackChunkName: \"lang-[request]\" */')]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token template-string\"}},[n(\"span\",{pre:!0,attrs:{class:\"token template-punctuation string\"}},[t._v(\"`\")]),n(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"@/i18n/messages/\")]),n(\"span\",{pre:!0,attrs:{class:\"token interpolation\"}},[n(\"span\",{pre:!0,attrs:{class:\"token interpolation-punctuation punctuation\"}},[t._v(\"${\")]),t._v(\"lang\"),n(\"span\",{pre:!0,attrs:{class:\"token interpolation-punctuation punctuation\"}},[t._v(\"}\")])]),n(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\".js\")]),n(\"span\",{pre:!0,attrs:{class:\"token template-punctuation string\"}},[t._v(\"`\")])]),t._v(\"\\n  \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"then\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"messages\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    i18n\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setLocaleMessage\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"lang\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" messages\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"default\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n    loadedLanguages\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"push\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"lang\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n    \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setI18nLanguage\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"lang\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"Для начала создаём новый экземпляр VueI18n как обычно. Затем определяем массив \"),s(\"code\",[this._v(\"loadedLanguages\")]),this._v(\" в котором будем хранить список загруженных языков. Далее создаём функцию \"),s(\"code\",[this._v(\"setI18nLanguage\")]),this._v(\", которая будет переключать локализацию в экземпляре vueI18n, axios и где ещё это необходимо.\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"Функция \"),s(\"code\",[this._v(\"loadLanguageAsync\")]),this._v(\" будет использоваться для изменения языка. Загрузка новых файлов осуществляется функцией \"),s(\"code\",[this._v(\"import\")]),this._v(\", которую предоставляет Webpack и позволяет загружать файлы динамически, а поскольку она возвращает Promise, то можем легко дождаться окончания загрузки.\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"Использовать \"),s(\"code\",[this._v(\"loadLanguageAsync\")]),this._v(\" очень просто. Например, в хуке beforeEach vue-router.\")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n(\"div\",{staticClass:\"language-js extra-class\"},[n(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[n(\"code\",[t._v(\"router\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"beforeEach\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"to\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" next\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" lang \"),n(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" to\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"params\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"lang\\n  \"),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"loadLanguageAsync\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"lang\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"then\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"next\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"Можно доработать реализацию, например добавив проверку поддерживается ли переданный \"),s(\"code\",[this._v(\"lang\")]),this._v(\" или нет и вызывать \"),s(\"code\",[this._v(\"reject\")]),this._v(\" чтобы отловить подобные случаи в хуке \"),s(\"code\",[this._v(\"beforeEach\")]),this._v(\" и остановить навигацию.\")])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/34.adc9b2af.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[34],{266:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),t._m(1),t._v(\" \"),t._m(2),t._v(\" \"),t._m(3),t._m(4),t._v(\" \"),a(\"p\",[t._v(\"Пример:\")]),t._v(\" \"),t._m(5),t._m(6),t._v(\" \"),a(\"div\",{staticClass:\"warning custom-block\"},[a(\"p\",{staticClass:\"custom-block-title\"},[t._v(\"Компонент vs. корневая область видимости\")]),t._v(\" \"),a(\"p\",[t._v(\"⚠️ Изменение \"),a(\"code\",[t._v(\"$i18n.locale\")]),t._v(\" внутри компонента не приводит к изменению корневой локализации. Если вы полагаетесь на корневую локализацию, например, при использовании \"),a(\"router-link\",{attrs:{to:\"./fallback.html\"}},[t._v(\"корневой запасной локализации\")]),t._v(\", используйте \"),a(\"code\",[t._v(\"$root.$i18n.locale\")]),t._v(\" вместо \"),a(\"code\",[t._v(\"$i18n.locale\")]),t._v(\".\")],1)])])}),[function(){var t=this.$createElement,s=this._self._c||t;return s(\"h1\",{attrs:{id:\"перекnючение-nокаnизации\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#перекnючение-nокаnизации\"}},[this._v(\"#\")]),this._v(\" Переключение локализации\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"Обычно используют корневой экземпляр Vue в качестве точки истины, а все дочерние компоненты используют свойство \"),s(\"code\",[this._v(\"locale\")]),this._v(\" от класса \"),s(\"code\",[this._v(\"VueI18n\")]),this._v(\" передаваемого по ссылке.\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"Иногда может потребоваться динамически переключать локализацию. Для этого нужно изменить значение свойства \"),s(\"code\",[this._v(\"locale\")]),this._v(\" экземпляра \"),s(\"code\",[this._v(\"VueI18n\")]),this._v(\".\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ru'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// устанавливаем локализацию по умолчанию\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Создаём корневой экземпляр Vue\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Переключаем на другую локализацию\")]),t._v(\"\\ni18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"locale \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"Каждый компонент содержит экземпляр \"),s(\"code\",[this._v(\"VueI18n\")]),this._v(\", ссылающийся на свойство \"),s(\"code\",[this._v(\"$i18n\")]),this._v(\", которое также можно использовать для переключения локализации.\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-vue extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-vue\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"template\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"class\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"locale-changer\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"select\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-model\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"$i18n.locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"option\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-for\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"(lang, i) in langs\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":key\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"`Lang${i}`\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":value\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"lang\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n        {{ lang }}\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"option\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"select\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"template\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"script\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token script\"}},[a(\"span\",{pre:!0,attrs:{class:\"token language-javascript\"}},[t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"export\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"default\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    name\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'locale-changer'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"data\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" langs\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ru'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"script\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"warning custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Обратите внимание\")]),this._v(\" \"),s(\"p\",[this._v(\"⚠️ Изменение локализации игнорируется компонентами с опцией \"),s(\"code\",[this._v(\"sync: false\")]),this._v(\".\")])])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/35.4e6e5ad7.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[35],{267:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this.$createElement;this._self._c;return this._m(0)}),[function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[a(\"h1\",{attrs:{id:\"синтаксис-сообщений-nокаnизации\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#синтаксис-сообщений-nокаnизации\"}},[t._v(\"#\")]),t._v(\" Синтаксис сообщений локализации\")]),t._v(\" \"),a(\"h2\",{attrs:{id:\"структура\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#структура\"}},[t._v(\"#\")]),t._v(\" Структура\")]),t._v(\" \"),a(\"p\",[t._v(\"Синтаксис сообщений локализации:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-typescript extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-typescript\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// As Flowtype definition, Locale Messages syntax like BNF annotation\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"type\")]),t._v(\" LocaleMessages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"key\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" Locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" LocaleMessageObject \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"type\")]),t._v(\" LocaleMessageObject \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"key\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" Path\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" LocaleMessage \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"type\")]),t._v(\" LocaleMessageArray \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" LocaleMessage\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"type\")]),t._v(\" LocaleMessage \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token builtin\"}},[t._v(\"string\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"|\")]),t._v(\" LocaleMessageObject \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"|\")]),t._v(\" LocaleMessageArray\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"type\")]),t._v(\" Locale \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token builtin\"}},[t._v(\"string\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"type\")]),t._v(\" Path \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token builtin\"}},[t._v(\"string\")]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"Используя синтаксис выше, можно создать следующую структуру сообщений локализации:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-json extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-json\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// локализация 'en'\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v('\"en\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v('\"key1\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"это сообщение 1\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// обычное использование\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v('\"nested\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// вложенное\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v('\"message1\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"это вложенное сообщение 1\"')]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v('\"errors\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// массив\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"это сообщение кода ошибки 0\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// объект в массиве\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v('\"internal1\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"это внутреннее сообщение кода ошибки 1\"')]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// массив в массиве\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"это вложенный массив ошибки 1\"')]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// локализация 'ru'\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v('\"ru\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"Для такой структуры сообщений локализации, можно переводить сообщения используя ключи:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- обычное использование --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('key1') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- вложенное --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('nested.message1') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- массив --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('errors[0]') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- объект в массиве --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('errors[1].internal1') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- массив в массиве --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('errors[2][0]') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"Результат:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- обычное использование --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"это сообщение 1\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- вложенное --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"это вложенное сообщение 1\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- массив --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"это сообщение кода ошибки 0\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- объект в массиве --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"это внутреннее сообщение кода ошибки 1\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- массив в массиве --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"это вложенный массив ошибки 1\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),a(\"h2\",{attrs:{id:\"связанные-сообщения-nокаnизации\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#связанные-сообщения-nокаnизации\"}},[t._v(\"#\")]),t._v(\" Связанные сообщения локализации\")]),t._v(\" \"),a(\"p\",[t._v(\"Когда есть ключ с сообщением перевода, которое в точности повторяется в сообщении по другому ключу, то вместо дублирования можно поставить ссылку на него. Для этого к его содержимому нужно добавить префикс \"),a(\"code\",[t._v(\"@:\")]),t._v(\" после которого указать полное имя ключа к сообщению перевода, включая пространство имён, к которому делаем ссылку.\")]),t._v(\" \"),a(\"p\",[t._v(\"Сообщения локализации:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      the_world\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'the world'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      dio\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'DIO:'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      linked\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'@:message.dio @:message.the_world !!!!'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"Шаблон:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('message.linked') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"Результат:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"DIO: the world !!!!\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),a(\"h3\",{attrs:{id:\"форматирование-связанных-сообщений-nокаnизации\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#форматирование-связанных-сообщений-nокаnизации\"}},[t._v(\"#\")]),t._v(\" Форматирование связанных сообщений локализации\")]),t._v(\" \"),a(\"p\",[t._v(\"Если важен регистр символов в переводе, то можно управлять регистром связанного сообщения локализации. Связанные сообщения можно отформатировать используя модификатор \"),a(\"code\",[t._v(\"@.modifier:key\")])]),t._v(\" \"),a(\"p\",[t._v(\"Доступны следующие модификаторы:\")]),t._v(\" \"),a(\"ul\",[a(\"li\",[a(\"code\",[t._v(\"upper\")]),t._v(\": Форматирование в верхний регистр всех символов в связанном сообщении.\")]),t._v(\" \"),a(\"li\",[a(\"code\",[t._v(\"lower\")]),t._v(\": Форматирование в нижний регистр всех символов в связанном сообщении.\")]),t._v(\" \"),a(\"li\",[a(\"code\",[t._v(\"capitalize\")]),t._v(\": Форматирование заглавной первой буквы в связанном сообщении.\")])]),t._v(\" \"),a(\"p\",[t._v(\"Сообщения локализации:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      homeAddress\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Home address'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      missingHomeAddress\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Please provide @.lower:message.homeAddress'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  ru\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      homeAddress\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Домашний адрес'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      missingHomeAddress\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Пожалуйста укажите @.lower:message.homeAddress'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"label\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('message.homeAddress') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"label\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"class\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"error\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('message.missingHomeAddress') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"Результат:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"label\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Домашний адрес\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"label\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"class\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"error\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Пожалуйста укажите домашний адрес\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"При необходимости можно добавлять новые модификаторы или перезаписывать существующие через опцию \"),a(\"code\",[t._v(\"modifiers\")]),t._v(\" в конструкторе \"),a(\"code\",[t._v(\"VueI18n\")]),t._v(\".\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ru'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  modifiers\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Добавление нового модификатора\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token function-variable function\"}},[t._v(\"snakeCase\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"str\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" str\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"split\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"' '\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"join\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'-'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])]),a(\"h3\",{attrs:{id:\"группировка-с-помощью-скобок\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#группировка-с-помощью-скобок\"}},[t._v(\"#\")]),t._v(\" Группировка с помощью скобок\")]),t._v(\" \"),a(\"p\",[t._v(\"Ключ связанного сообщения также можно указывать в виде \"),a(\"code\",[t._v(\"@:(message.foo.bar.baz)\")]),t._v(\", где ссылка на другой ключ перевода обрамляется в скобки \"),a(\"code\",[t._v(\"()\")]),t._v(\".\")]),t._v(\" \"),a(\"p\",[t._v(\"Подобное может потребоваться, если за ссылкой на другое сообщение \"),a(\"code\",[t._v(\"@:message.something\")]),t._v(\" требуется поставить точку \"),a(\"code\",[t._v(\".\")]),t._v(\", которая в противном случае считалась бы частью ссылки.\")]),t._v(\" \"),a(\"p\",[t._v(\"Сообщения локализации:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      dio\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'DIO'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      linked\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"There\\'s a reason, you lost, @:(message.dio).\"')]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  ru\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      dio\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'DIO'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      linked\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"Есть причина по которой ты проиграл, @:(message.dio).\"')]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"Шаблон:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('message.linked') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"Результат:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"There's a reason, you lost, DIO.\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/36.7b1eb244.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[36],{268:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),t._m(1),t._v(\" \"),a(\"p\",[t._v(\"Можно выполнять локализацию чисел по соответствующему формату.\")]),t._v(\" \"),a(\"p\",[t._v(\"Пример формата для чисел:\")]),t._v(\" \"),t._m(2),a(\"p\",[t._v(\"Как указано выше, можно задать числовые форматы (например, \"),a(\"code\",[t._v(\"currency\")]),t._v(\" для валюты) используя \"),a(\"a\",{attrs:{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"опции ECMA-402 Intl.NumberFormat\"),a(\"OutboundLink\")],1),t._v(\".\")]),t._v(\" \"),t._m(3),t._v(\" \"),t._m(4),a(\"p\",[t._v(\"Шаблон:\")]),t._v(\" \"),t._m(5),a(\"p\",[t._v(\"Результат:\")]),t._v(\" \"),t._m(6),t._m(7),t._v(\" \"),t._m(8),t._v(\" \"),t._m(9),t._v(\" \"),t._m(10),t._v(\" \"),a(\"p\",[t._v(\"Шаблон:\")]),t._v(\" \"),t._m(11),a(\"p\",[t._v(\"Результат:\")]),t._v(\" \"),t._m(12),a(\"p\",[t._v(\"Но по-настоящему оценить удобство компонента можно лишь тогда, когда он применяется с использованием \"),a(\"a\",{attrs:{href:\"https://ru.vuejs.org/v2/guide/components-slots.html#%D0%A1%D0%BB%D0%BE%D1%82%D1%8B-%D1%81-%D0%BE%D0%B3%D1%80%D0%B0%D0%BD%D0%B8%D1%87%D0%B5%D0%BD%D0%BD%D0%BE%D0%B9-%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D1%8C%D1%8E-%D0%B2%D0%B8%D0%B4%D0%B8%D0%BC%D0%BE%D1%81%D1%82%D0%B8\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"слотов с ограниченной областью видимости\"),a(\"OutboundLink\")],1),t._v(\".\")]),t._v(\" \"),t._m(13),t._v(\" \"),t._m(14),a(\"p\",[t._v(\"Результат:\")]),t._v(\" \"),t._m(15),a(\"p\",[t._v(\"Можно использовать несколько слотов одновременно:\")]),t._v(\" \"),t._m(16),a(\"p\",[t._v(\"(Полученный HTML ниже отформатирован для лучшей читаемости)\")]),t._v(\" \"),t._m(17),a(\"p\",[t._v(\"Полный список поддерживаемых слотов, а также другие свойства \"),a(\"code\",[t._v(\"<i18n-n>\")]),t._v(\" можно найти \"),a(\"router-link\",{attrs:{to:\"./../api/#i18n-n-functional-component\"}},[t._v(\"на странице справочника API\")]),t._v(\".\")],1)])}),[function(){var t=this.$createElement,s=this._self._c||t;return s(\"h1\",{attrs:{id:\"локаnизация-чисеn\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#локаnизация-чисеn\"}},[this._v(\"#\")]),this._v(\" Локализация чисел\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"tip custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Поддержка с версии\")]),this._v(\" \"),s(\"p\",[this._v(\"🆕 7.0+\")])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" numberFormats \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en-US'\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    currency\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      style\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'currency'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      currency\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'USD'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ru-RU'\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    currency\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      style\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'currency'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      currency\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'RUB'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      currencyDisplay\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'symbol'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"После этого, для возможности использования данного формата в сообщениях локализации, необходимо задать опцию \"),s(\"code\",[this._v(\"numberFormats\")]),this._v(\" конструктора \"),s(\"code\",[this._v(\"VueI18n\")]),this._v(\":\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  numberFormats\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $n(100, 'currency') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $n(100, 'currency', 'ru-RU') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"$100.00\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"100,00 ₽\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"поnьзоватеnьское-форматирование\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#поnьзоватеnьское-форматирование\"}},[this._v(\"#\")]),this._v(\" Пользовательское форматирование\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"tip custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Поддержка с версии\")]),this._v(\" \"),s(\"p\",[this._v(\"🆕 8.10+\")])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"Метод \"),s(\"code\",[this._v(\"$n\")]),this._v(\" возвращает результат в виде строки с полностью отформатированным числом, которую можно использовать лишь целиком. В случаях, когда нужно стилизовать некоторую часть отформатированного числа (например, дробную часть), \"),s(\"code\",[this._v(\"$n\")]),this._v(\" будет недостаточно. В таких случаях необходимо использовать функциональный компонент \"),s(\"code\",[this._v(\"<i18n-n>\")]),this._v(\".\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"При минимальном наборе свойств \"),s(\"code\",[this._v(\"<i18n-n>\")]),this._v(\" генерирует тот же результат, что и \"),s(\"code\",[this._v(\"$n\")]),this._v(\" обернутый в сконфигурированный DOM-элемент.\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n-n\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":value\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"100\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n-n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n-n\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":value\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"100\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"format\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"currency\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n-n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n-n\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":value\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"100\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"format\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"currency\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"locale\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"ru-RU\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n-n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"100\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"$100.00\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"100,00 ₽\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"Допустим, есть требование выводить целую часть числа полужирным шрифтом. Реализовать это можно с помощью слота \"),s(\"code\",[this._v(\"integer\")]),this._v(\":\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n-n\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":value\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"100\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"format\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"currency\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[a(\"span\",{pre:!0,attrs:{class:\"token namespace\"}},[t._v(\"v-slot:\")]),t._v(\"integer\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"slotProps\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"styles\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"font-weight: bold\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    {{ slotProps.integer }}\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n-n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"$\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"styles\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"font-weight: bold\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"100\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\".00\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n-n\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":value\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"1234\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":format\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"{ key: 'currency', currency: 'EUR' }\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[a(\"span\",{pre:!0,attrs:{class:\"token namespace\"}},[t._v(\"v-slot:\")]),t._v(\"currency\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"slotProps\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"styles\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"color: green\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    {{ slotProps.currency }}\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[a(\"span\",{pre:!0,attrs:{class:\"token namespace\"}},[t._v(\"v-slot:\")]),t._v(\"integer\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"slotProps\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"styles\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"font-weight: bold\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    {{ slotProps.integer }}\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[a(\"span\",{pre:!0,attrs:{class:\"token namespace\"}},[t._v(\"v-slot:\")]),t._v(\"group\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"slotProps\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"styles\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"font-weight: bold\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    {{ slotProps.group }}\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[a(\"span\",{pre:!0,attrs:{class:\"token namespace\"}},[t._v(\"v-slot:\")]),t._v(\"fraction\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"slotProps\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"styles\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"font-size: small\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    {{ slotProps.fraction }}\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n-n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"styles\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"color: green\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"€\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"styles\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"font-weight: bold\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"1\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"styles\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"font-weight: bold\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\",\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"styles\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"font-weight: bold\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"234\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  .\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"styles\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"font-size: small\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"00\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/37.6584773d.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[37],{269:function(t,a,s){\"use strict\";s.r(a);var n=s(0),p=Object(n.a)({},(function(){var t=this.$createElement;this._self._c;return this._m(0)}),[function(){var t=this,a=t.$createElement,s=t._self._c||a;return s(\"div\",{staticClass:\"content\"},[s(\"h1\",{attrs:{id:\"пnюраnизация\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#пnюраnизация\"}},[t._v(\"#\")]),t._v(\" Плюрализация\")]),t._v(\" \"),s(\"p\",[t._v(\"Для переводимых сообщений есть возможность использовать плюрализацию. Для этого необходимо указывать строки переводов для различных случаев через разделитель \"),s(\"code\",[t._v(\"|\")]),t._v(\".\")]),t._v(\" \"),s(\"p\",[s(\"em\",[t._v(\"В шаблоне в таких случаях необходимо использовать метод \"),s(\"code\",[t._v(\"$tc()\")]),t._v(\" вместо \"),s(\"code\",[t._v(\"$t()\")]),t._v(\".\")])]),t._v(\" \"),s(\"p\",[t._v(\"Сообщения локализации:\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-js extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    car\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'car | cars'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    apple\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'no apples | one apple | {count} apples'\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  ru\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    car\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'машина | машины'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    apple\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'нет яблок | одно яблоко | {count} яблок'\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),s(\"p\",[t._v(\"Шаблон:\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('car', 1) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('car', 2) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('apple', 0) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('apple', 1) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('apple', 10, { count: 10 }) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),s(\"p\",[t._v(\"Результат:\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"машина\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"машины\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"нет яблок\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"одно яблоко\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"10 яблок\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),s(\"h2\",{attrs:{id:\"аргумент-дnя-доступа-к-чисnу\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#аргумент-дnя-доступа-к-чисnу\"}},[t._v(\"#\")]),t._v(\" Аргумент для доступа к числу\")]),t._v(\" \"),s(\"p\",[t._v(\"Нет необходимости явно передавать число для плюрализации. В сообщениях локализации число доступно через именованные аргументы \"),s(\"code\",[t._v(\"{count}\")]),t._v(\" и/или \"),s(\"code\",[t._v(\"{n}\")]),t._v(\". При желании их можно переопределить.\")]),t._v(\" \"),s(\"p\",[t._v(\"Сообщения локализации:\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-js extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    apple\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'no apples | one apple | {count} apples'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    banana\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'no bananas | {n} banana | {n} bananas'\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  ru\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    apple\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'нет яблок | одно яблоко | {count} яблок'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    banana\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'нет бананов | {n} банан | {n} бананов'\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),s(\"p\",[t._v(\"Шаблон:\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('apple', 10, { count: 10 }) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('apple', 10) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('banana', 1, { n: 1 }) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('banana', 1) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('banana', 100, { n: 'слишком много' }) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),s(\"p\",[t._v(\"Результат:\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"10 яблок\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"10 яблок\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"1 банан\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"1 банан\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"слишком много бананов\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),s(\"h2\",{attrs:{id:\"поnьзоватеnьская-пnюраnизация\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#поnьзоватеnьская-пnюраnизация\"}},[t._v(\"#\")]),t._v(\" Пользовательская плюрализация\")]),t._v(\" \"),s(\"p\",[t._v(\"Стандартная реализация плюрализации может быть не применима ко всем языкам (к примеру, в Славянских языках другие правила множественности).\")]),t._v(\" \"),s(\"p\",[t._v(\"Можно указать собственную реализацию переопределив функцию \"),s(\"code\",[t._v(\"VueI18n.prototype.getChoiceIndex\")]),t._v(\".\")]),t._v(\" \"),s(\"p\",[t._v(\"Очень упрощённый пример правил для Славянских языков (Русский, Украинский и другие):\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-js extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" defaultImpl \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"prototype\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"getChoiceIndex\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"/**\\n * @param choice {number} индекс выбора, переданный в $tc: `$tc('path.to.rule', choiceIndex)`\\n * @param choicesLength {number} общее количество доступных вариантов\\n * @returns финальный индекс для выбора соответственного варианта слова\\n **/\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"prototype\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),s(\"span\",{pre:!0,attrs:{class:\"token function-variable function\"}},[t._v(\"getChoiceIndex\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"function\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"choice\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" choicesLength\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// this === экземпляр VueI18n, поэтому свойство locale также здесь существует\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"if\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"this\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"locale \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"!==\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ru'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// возвращаемся к реализации по умолчанию\")]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"defaultImpl\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),s(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"apply\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"this\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" arguments\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"if\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"choice \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"===\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"0\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"0\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" teen \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" choice \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"10\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"&&\")]),t._v(\" choice \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"20\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" endsWithOne \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" choice \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"%\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"10\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"===\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"1\")]),t._v(\"\\n\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"if\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"!\")]),t._v(\"teen \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"&&\")]),t._v(\" endsWithOne\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"1\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"if\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"!\")]),t._v(\"teen \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"&&\")]),t._v(\" choice \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"%\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"10\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"2\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"&&\")]),t._v(\" choice \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"%\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"10\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"4\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"2\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" choicesLength \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"4\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"?\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"2\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"3\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),s(\"p\",[t._v(\"Такая реализация позволит использовать:\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-js extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  ru\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    car\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'0 машин | {n} машина | {n} машины | {n} машин'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    banana\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'нет бананов | {n} банан | {n} банана | {n} бананов'\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),s(\"p\",[t._v(\"Для такого формата вариантов \"),s(\"code\",[t._v(\"0 вещей | 1 вещь | несколько вещей | множество вещей\")]),t._v(\".\")]),t._v(\" \"),s(\"p\",[t._v(\"В шаблоне, по-прежнему, необходимо использовать \"),s(\"code\",[t._v(\"$tc()\")]),t._v(\" вместо \"),s(\"code\",[t._v(\"$t()\")]),t._v(\":\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('car', 1) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('car', 2) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('car', 4) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('car', 12) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('car', 21) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('banana', 0) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('banana', 4) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('banana', 11) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('banana', 31) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),s(\"p\",[t._v(\"Результат:\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"1 машина\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"2 машины\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"4 машины\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"12 машин\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"21 машина\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"нет бананов\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"4 банана\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"11 бананов\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"31 банан\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])])}],!1,null,null,null);a.default=p.exports}}]);"
  },
  {
    "path": "docs/assets/js/38.7879de31.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[38],{270:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),t._m(1),t._v(\" \"),t._m(2),t._v(\" \"),a(\"p\",[t._v(\"Код компонента из \"),a(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/dev/examples/sfc\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"примера использования с однофайловыми компонентами\"),a(\"OutboundLink\")],1),t._v(\":\")]),t._v(\" \"),t._m(3),t._m(4),t._v(\" \"),a(\"p\",[t._v(\"Требуется установить \"),a(\"code\",[t._v(\"vue-loader\")]),t._v(\" и \"),a(\"code\",[t._v(\"vue-i18n-loader\")]),t._v(\" чтобы использовать пользовательские блоки \"),a(\"code\",[t._v(\"<i18n>\")]),t._v(\". Скорее всего \"),a(\"a\",{attrs:{href:\"https://github.com/vuejs/vue-loader\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"vue-loader\"),a(\"OutboundLink\")],1),t._v(\" уже используется в проекте, если уже работаете с однофайловыми компонентами, но необходимо дополнительно установить \"),a(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n-loader\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"vue-i18n-loader\"),a(\"OutboundLink\")],1),t._v(\":\")]),t._v(\" \"),t._m(5),t._m(6),t._v(\" \"),a(\"p\",[t._v(\"Для Webpack требуется следующая конфигурация:\")]),t._v(\" \"),a(\"p\",[t._v(\"Для vue-loader v15 или более поздних версий:\")]),t._v(\" \"),t._m(7),a(\"p\",[t._v(\"Для vue-loader v14:\")]),t._v(\" \"),t._m(8),t._m(9),t._v(\" \"),a(\"p\",[a(\"a\",{attrs:{href:\"https://github.com/vuejs/vue-cli\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Vue CLI 3.0\"),a(\"OutboundLink\")],1),t._v(\" скрывает конфигурацию Webpack, поэтому для добавления поддержки тегов \"),a(\"code\",[t._v(\"<i18n>\")]),t._v(\" в однофайловых компонентах необходимо изменить существующую конфигурацию.\")]),t._v(\" \"),t._m(10),t._v(\" \"),a(\"p\",[t._v(\"Для vue-loader v15 или более поздних версий:\")]),t._v(\" \"),t._m(11),a(\"p\",[t._v(\"Для vue-loader v14:\")]),t._v(\" \"),t._m(12),a(\"p\",[a(\"em\",[t._v(\"Не забудьте установить \"),a(\"a\",{attrs:{href:\"https://github.com/KyleAMathews/deepmerge\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"deepmerge\"),a(\"OutboundLink\")],1),t._v(\"! (\"),a(\"code\",[t._v(\"npm i deepmerge -D\")]),t._v(\" или \"),a(\"code\",[t._v(\"yarn add deepmerge -D\")]),t._v(\")\")])]),t._v(\" \"),a(\"p\",[t._v(\"Подробнее о возможностях изменения существующей конфигурации Webpack можно изучить \"),a(\"a\",{attrs:{href:\"https://cli.vuejs.org/ru/guide/webpack.html\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"здесь\"),a(\"OutboundLink\")],1),t._v(\".\")]),t._v(\" \"),t._m(13),t._v(\" \"),a(\"p\",[t._v(\"Для Laravel-mix 4 с vue-loader v15 или более поздней версии:\")]),t._v(\" \"),t._m(14),a(\"p\",[t._v(\"Для Laravel-mix 2 с vue-loader v14:\")]),t._v(\" \"),a(\"p\",[t._v(\"В Laravel-mix, начиная с версии \"),a(\"a\",{attrs:{href:\"https://github.com/JeffreyWay/laravel-mix/releases/tag/v2.1\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"V2.1\"),a(\"OutboundLink\")],1),t._v(\", можно добавлять пользовательские правила с помощью \"),a(\"code\",[t._v(\"mix.extend()\")]),t._v(\". Laravel-mix уже имеет собственные правила для обработки \"),a(\"code\",[t._v(\".vue\")]),t._v(\" файлов. Чтобы добавить \"),a(\"code\",[t._v(\"vue-i18n-loader\")]),t._v(\", нужно добавить в \"),a(\"code\",[t._v(\"webpack.mix.js\")]),t._v(\" следующее:\")]),t._v(\" \"),t._m(15),t._m(16),t._v(\" \"),t._m(17),t._v(\" \"),t._m(18),t._v(\" \"),t._m(19),a(\"p\",[t._v(\"Конфигурация Webpack:\")]),t._v(\" \"),a(\"p\",[t._v(\"Для vue-loader v15 или более поздних версий:\")]),t._v(\" \"),t._m(20),a(\"p\",[t._v(\"Для vue-loader v14:\")]),t._v(\" \"),t._m(21),t._m(22),t._v(\" \"),t._m(23),t._v(\" \"),t._m(24),t._m(25),t._v(\" \"),a(\"p\",[t._v(\"Несколько пользовательских блоков полезны, когда использовать их в качестве модулей.\")]),t._v(\" \"),t._m(26),t._v(\" \"),a(\"p\",[t._v(\"При использовании \"),a(\"code\",[t._v(\"vue-i18n\")]),t._v(\" с локальными стилями (\"),a(\"code\",[t._v(\"style scoped\")]),t._v(\") необходимо помнить и использовать \"),a(\"a\",{attrs:{href:\"https://vue-loader.vuejs.org/ru/guide/scoped-css.html#%D0%BA%D0%BE%D1%80%D0%BD%D0%B5%D0%B2%D0%BE%D0%B9-%D1%8Dn%D0%B5%D0%BC%D0%B5%D0%BD%D1%82-%D0%B4%D0%BE%D1%87%D0%B5%D1%80%D0%BD%D0%B5%D0%B3%D0%BE-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"глубокий селектор\"),a(\"OutboundLink\")],1),t._v(\" для стилизации элемента \"),t._m(27),t._v(\" строки перевода. Например:\")]),t._v(\" \"),t._m(28),t._v(\" \"),t._m(29),t._m(30),t._v(\" \"),t._m(31),t._m(32),t._v(\" \"),t._m(33),t._v(\" \"),t._m(34),t._v(\" \"),t._m(35)])}),[function(){var t=this.$createElement,s=this._self._c||t;return s(\"h1\",{attrs:{id:\"однофайnовые-компоненты\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#однофайnовые-компоненты\"}},[this._v(\"#\")]),this._v(\" Однофайловые компоненты\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"базовое-испоnьзование\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#базовое-испоnьзование\"}},[this._v(\"#\")]),this._v(\" Базовое использование\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"В компоненте Vue или приложении Vue с использованием однофайловых компонентов, можно управлять сообщениями локализации с помощью пользовательского блока \"),s(\"code\",[this._v(\"i18n\")]),this._v(\".\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-vue extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-vue\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v('\\n{\\n  \"en\": {\\n    \"hello\": \"hello world!\"\\n  },\\n  \"ru\": {\\n    \"hello\": \"Привет мир!\"\\n  }\\n}\\n'),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"template\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"label\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"for\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Язык\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"label\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"select\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-model\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"option\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"en\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"option\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"option\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"ru\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"option\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"select\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Сообщение: {{ $t('hello') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"template\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"script\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token script\"}},[a(\"span\",{pre:!0,attrs:{class:\"token language-javascript\"}},[t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"export\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"default\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  name\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"data\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"this\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"$i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"locale \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ru'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ru'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  watch\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"locale\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"val\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"this\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"$i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"locale \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" val\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"script\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"установка-vue-i18n-loader\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#установка-vue-i18n-loader\"}},[this._v(\"#\")]),this._v(\" Установка vue-i18n-loader\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"language-bash extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-bash\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token function\"}},[this._v(\"npm\")]),this._v(\" i --save-dev @kazupon/vue-i18n-loader\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"webpack\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#webpack\"}},[this._v(\"#\")]),this._v(\" Webpack\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[t._v(\"module\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"exports \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n  module\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    rules\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        test\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token regex\"}},[t._v(\"/\\\\.vue$/\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        loader\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'vue-loader'\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        resourceQuery\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token regex\"}},[t._v(\"/blockType=i18n/\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        type\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'javascript/auto'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        loader\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'@kazupon/vue-i18n-loader'\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[t._v(\"module\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"exports \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n  module\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    rules\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        test\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token regex\"}},[t._v(\"/\\\\.vue$/\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        loader\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'vue-loader'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        options\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n          loaders\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n            \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// необходимо указать ключ `i18n` для загрузчика `vue-i18n-loader`\")]),t._v(\"\\n            \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// (https://github.com/kazupon/vue-i18n-loader)\")]),t._v(\"\\n            i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'@kazupon/vue-i18n-loader'\")]),t._v(\"\\n          \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"vue-cli-3-0\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#vue-cli-3-0\"}},[this._v(\"#\")]),this._v(\" Vue CLI 3.0\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"Для этого нужно создать файл \"),s(\"code\",[this._v(\"vue.config.js\")]),this._v(\" в корне проекта и добавить в него следующее:\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[t._v(\"module\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"exports \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token function-variable function\"}},[t._v(\"chainWebpack\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"config\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    config\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"module\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"rule\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'i18n'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"resourceQuery\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token regex\"}},[t._v(\"/blockType=i18n/\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"type\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'javascript/auto'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"use\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'i18n'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"loader\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'@kazupon/vue-i18n-loader'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"end\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" merge \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"require\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'deepmerge'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\nmodule\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"exports \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token function-variable function\"}},[t._v(\"chainWebpack\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"config\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    config\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"module\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"rule\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'vue'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"use\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'vue-loader'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"tap\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"options\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"merge\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"options\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n          loaders\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n            i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'@kazupon/vue-i18n-loader'\")]),t._v(\"\\n          \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"laravel-mix\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#laravel-mix\"}},[this._v(\"#\")]),this._v(\" Laravel-Mix\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v('// Расширяем Mix с помощью метода \"i18n\", который загрузит vue-i18n-loader')]),t._v(\"\\nmix\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"extend\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'i18n'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"class\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"webpackRules\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n            \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"\\n                \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n                    resourceQuery\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token regex\"}},[t._v(\"/blockType=i18n/\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n                    type\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\"          \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'javascript/auto'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n                    loader\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\"        \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'@kazupon/vue-i18n-loader'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n                \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n            \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Убедитесь что вызвали .i18n() (для загрузки загрузчика) перед .js(..., ...)\")]),t._v(\"\\nmix\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n   \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"js\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'resources/js/App.js'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'public/js/app.js'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n   \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"...\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Код ниже внедрит загрузчик i18n (@kazupon/vue-i18n-loader) в качестве загрузчика .vue файлов.\")]),t._v(\"\\nmix\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"extend\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'i18n'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"function\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"webpackConfig\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"...\")]),t._v(\"args\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    webpackConfig\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"module\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"rules\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"forEach\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"module\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v('// Поиск компонента \"vue-loader\", который обрабатывает .vue файлы.')]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"if\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\" module\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"loader \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"!==\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'vue-loader'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n            \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// В этом модуле добавляем vue-i18n-loader для тега i18n.\")]),t._v(\"\\n        module\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"options\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"loaders\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'@kazupon/vue-i18n-loader'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Убедитесь что вызвали .i18n() (для загрузки загрузчика) перед .js(..., ...)\")]),t._v(\"\\nmix\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n   \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"js\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'resources/assets/js/App.js'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'public/js/app.js'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n   \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"...\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"загрузка-yaml\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#загрузка-yaml\"}},[this._v(\"#\")]),this._v(\" Загрузка YAML\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"p\",[t._v(\"Пользовательские блоки \"),a(\"code\",[t._v(\"i18n\")]),t._v(\" можно указывать в формате \"),a(\"code\",[t._v(\"JSON\")]),t._v(\" или \"),a(\"code\",[t._v(\"YAML\")]),t._v(\" (используя функцию предварительного загрузчика \"),a(\"code\",[t._v(\"vue-loader\")]),t._v(\").\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"Пользовательский блок \"),s(\"code\",[this._v(\"i18n\")]),this._v(\" в формате \"),s(\"code\",[this._v(\"YAML\")]),this._v(\":\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-vue extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-vue\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v('\\n  en:\\n    hello: \"hello world!\"\\n  ru:\\n    hello: \"привет мир!\"\\n'),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Vue CLI 3.0\")]),t._v(\"\\nmodule\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"exports \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token function-variable function\"}},[t._v(\"chainWebpack\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"config\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    config\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"module\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"rule\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'i18n'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"resourceQuery\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token regex\"}},[t._v(\"/blockType=i18n/\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"type\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'javascript/auto'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"use\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'i18n'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"loader\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'@kazupon/vue-i18n-loader'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"end\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"use\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'yaml'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"loader\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'yaml-loader'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"end\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[t._v(\"module\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"exports \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n  module\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    rules\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        test\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token regex\"}},[t._v(\"/\\\\.vue$/\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        loader\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'vue-loader'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        options\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n          preLoaders\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n            i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'yaml-loader'\")]),t._v(\"\\n          \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n          loaders\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n            i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'@kazupon/vue-i18n-loader'\")]),t._v(\"\\n          \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"нескоnько-поnьзоватеnьских-бnоков\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#нескоnько-поnьзоватеnьских-бnоков\"}},[this._v(\"#\")]),this._v(\" Несколько пользовательских блоков\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"Можно использовать сообщения локализации из нескольких пользовательских блоков \"),s(\"code\",[this._v(\"i18n\")]),this._v(\".\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-vue extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-vue\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"src\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"./common/locales.json\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v('\\n  {\\n    \"en\": {\\n      \"hello\": \"hello world!\"\\n    },\\n    \"ru\": {\\n      \"hello\": \"Привет мир!\"\\n    }\\n  }\\n'),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"В примере выше, первый пользовательский блок загружает общие сообщения локализации с помощью атрибута \"),s(\"code\",[this._v(\"src\")]),this._v(\", второй пользовательский блок загружает сообщения локализации, которые определены только в этом однофайловом компоненте. Все они будут объединены в качестве сообщений локализации компонента.\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"локаnьные-стиnи\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#локаnьные-стиnи\"}},[this._v(\"#\")]),this._v(\" Локальные стили\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"strong\",[s(\"em\",[this._v(\"внутри\")])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[s(\"strong\",[this._v(\"Когда перевод содержит только текст\")]),this._v(\" (работает без глубокого селектора)\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-vue extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-vue\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v('\\n  {\\n    \"en\": {\\n      \"hello\": \"hello world!\"\\n    },\\n    \"ru\": {\\n      \"hello\": \"Привет мир!\"\\n    }\\n  }\\n'),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"template\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"class\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"parent\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Сообщение: {{ $t('hello') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"template\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- Будет работать --\\x3e\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"style\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token style\"}},[a(\"span\",{pre:!0,attrs:{class:\"token language-css\"}},[t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token selector\"}},[t._v(\".parent p\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v(\"color\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\":\")]),t._v(\" #42b883\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"style\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[s(\"strong\",[this._v(\"Когда перевод содержит HTML-элемент\")]),this._v(\" (необходимо использовать глубокий селектор)\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-vue extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-vue\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v('\\n  {\\n    \"en\": {\\n      \"hello\": \"hello'),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"world!\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v('\"\\n    },\\n    \"ru\": {\\n      \"hello\": \"привет '),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"мир!\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v('\"\\n    }\\n  }\\n'),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"template\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"class\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"parent\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-html\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"$t('hello')\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"template\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- НЕ БУДЕТ РАБОТАТЬ! --\\x3e\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"style\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token style\"}},[a(\"span\",{pre:!0,attrs:{class:\"token language-css\"}},[t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token selector\"}},[t._v(\".parent p\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v(\"color\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\":\")]),t._v(\" #42b883\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token selector\"}},[t._v(\".parent p span\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v(\"color\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\":\")]),t._v(\" red\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"style\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- Будет работать --\\x3e\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"style\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token style\"}},[a(\"span\",{pre:!0,attrs:{class:\"token language-css\"}},[t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token selector\"}},[t._v(\".parent p\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v(\"color\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\":\")]),t._v(\" #42b883\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token selector\"}},[t._v(\".parent p >>> span\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v(\"color\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\":\")]),t._v(\" red\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"style\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"поnьзоватеnьские-бnоки-в-функционаnьном-компоненте\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#поnьзоватеnьские-бnоки-в-функционаnьном-компоненте\"}},[this._v(\"#\")]),this._v(\" Пользовательские блоки в функциональном компоненте\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"Если в шаблоне однофайловых компонентов используется функциональный компонент и определены пользовательские блоки \"),s(\"code\",[this._v(\"i18n\")]),this._v(\", то обратите внимание что невозможно локализовать с помощью сообщений локализации.\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"Например, следующий код не может использовать сообщения локализации из блока \"),s(\"code\",[this._v(\"i18n\")]),this._v(\".\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-vue extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-vue\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v('\\n  {\\n    \"en\": {\\n      \"hello\": \"hello world\"\\n    },\\n    \"ru\": {\\n      \"hello\": \"привет мир\"\\n    }\\n  }\\n'),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"template\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"functional\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- Сообщение локализации 'hello' из родительского экземпляра --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ parent.$t('hello') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"template\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/39.f7496f35.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[39],{271:function(t,e,n){\"use strict\";n.r(e);var r=n(0),a=Object(r.a)({},(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),n(\"p\",[t._v(\"Для поддержки i18n приложений Vue некоторые инструменты предоставляются официально.\")]),t._v(\" \"),n(\"p\",[t._v(\"Также есть инструменты от сторонних разработчиков, которые интегрируются в Vue I18n.\")]),t._v(\" \"),t._m(1),t._v(\" \"),t._m(2),t._v(\" \"),n(\"p\",[n(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-cli-plugin-i18n\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"vue-cli-plugin-i18n\"),n(\"OutboundLink\")],1),t._v(\" — официальный плагин для Vue CLI.\")]),t._v(\" \"),n(\"p\",[t._v(\"С помощью этого плагина можно настроить среду i18n для приложения Vue и поддерживать среду разработки i18n.\")]),t._v(\" \"),t._m(3),t._v(\" \"),n(\"p\",[n(\"a\",{attrs:{href:\"https://github.com/nuxt-community/nuxt-i18n/\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"nuxt-i18n\"),n(\"OutboundLink\")],1),t._v(\" — соответствующий модуль для Nuxt.js.\")]),t._v(\" \"),t._m(4),t._v(\" \"),n(\"p\",[n(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n-loader\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"vue-i18n-loader\"),n(\"OutboundLink\")],1),t._v(\" — официальный загрузчик для webpack.\")]),t._v(\" \"),t._m(5),t._v(\" \"),n(\"p\",[t._v(\"Подробнее о пользовательских блоках \"),n(\"code\",[t._v(\"i18n\")]),t._v(\" можно изучить в разделе \"),n(\"router-link\",{attrs:{to:\"./sfc.html\"}},[t._v(\"Однофайловых компонентов\")])],1),t._v(\" \"),t._m(6),t._v(\" \"),n(\"p\",[n(\"a\",{attrs:{href:\"https://intlify.github.io/eslint-plugin-vue-i18n/\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"eslint-plugin-vue-i18n\"),n(\"OutboundLink\")],1),t._v(\" — ESLint-плагин для Vue I18n.\")]),t._v(\" \"),n(\"p\",[t._v(\"Позволяет легко интегрировать функции проверки локализацией в ваше приложение Vue.js.\")]),t._v(\" \"),t._m(7),t._v(\" \"),n(\"p\",[n(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n-extensions\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"vue-i18n-extensions\"),n(\"OutboundLink\")],1),t._v(\" — предоставляет некоторые расширения дляVue I18n.\")]),t._v(\" \"),n(\"p\",[t._v(\"Эти расширения позволяет использовать в рендеринге на стороне сервера (SSR) и улучшить производительность i18n.\")]),t._v(\" \"),t._m(8),t._v(\" \"),t._m(9),t._v(\" \"),n(\"p\",[n(\"a\",{attrs:{href:\"https://www.codeandweb.com/babeledit\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"BabelEdit\"),n(\"OutboundLink\")],1),t._v(\" — редактор переводов для веб-приложений.\")]),t._v(\" \"),t._m(10),t._v(\" \"),n(\"p\",[t._v(\"Подробнее про BabelEdit можно узнать \"),n(\"a\",{attrs:{href:\"https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-vue-app-with-vue-i18n\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"на странице введения\"),n(\"OutboundLink\")],1),t._v(\".\")]),t._v(\" \"),t._m(11),t._v(\" \"),n(\"p\",[n(\"a\",{attrs:{href:\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"i18n Ally\"),n(\"OutboundLink\")],1),t._v(\" — расширение i18n для VSCode.\")]),t._v(\" \"),n(\"p\",[t._v(\"i18n Ally предоставляет потрясающий DX для разработки с использованием i18n.\")]),t._v(\" \"),n(\"p\",[t._v(\"Подробнее о расширении i18n Ally можно изучить в \"),n(\"a\",{attrs:{href:\"https://github.com/antfu/i18n-ally/blob/master/README.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"README\"),n(\"OutboundLink\")],1),t._v(\".\")])])}),[function(){var t=this.$createElement,e=this._self._c||t;return e(\"h1\",{attrs:{id:\"инструментарий\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#инструментарий\"}},[this._v(\"#\")]),this._v(\" Инструментарий\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"официаnьный-инструментарий\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#официаnьный-инструментарий\"}},[this._v(\"#\")]),this._v(\" Официальный инструментарий\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"пnагин-дnя-vue-cli\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#пnагин-дnя-vue-cli\"}},[this._v(\"#\")]),this._v(\" Плагин для Vue CLI\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"модуnь-дnя-nuxt\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#модуnь-дnя-nuxt\"}},[this._v(\"#\")]),this._v(\" Модуль для Nuxt\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"загрузчик-дnя-webpack\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#загрузчик-дnя-webpack\"}},[this._v(\"#\")]),this._v(\" Загрузчик для Webpack\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"С помощью этого загрузчика можно использовать пользовательские блоки \"),e(\"code\",[this._v(\"i18n\")]),this._v(\" в однофайловых компонентах.\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"пnагин-дnя-eslint\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#пnагин-дnя-eslint\"}},[this._v(\"#\")]),this._v(\" Плагин для ESLint\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"расширения\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#расширения\"}},[this._v(\"#\")]),this._v(\" Расширения\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"сторонние-разработки\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#сторонние-разработки\"}},[this._v(\"#\")]),this._v(\" Сторонние разработки\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"babeledit\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#babeledit\"}},[this._v(\"#\")]),this._v(\" BabelEdit\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"BabelEdit может переводить файлы \"),e(\"code\",[this._v(\"json\")]),this._v(\", а также умеет работать с пользовательскими блоками \"),e(\"code\",[this._v(\"i18n\")]),this._v(\" однофайловых компонентов.\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"i18n-ally\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#i18n-ally\"}},[this._v(\"#\")]),this._v(\" i18n Ally\")])}],!1,null,null,null);e.default=a.exports}}]);"
  },
  {
    "path": "docs/assets/js/4.9735c0af.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{236:function(t,e,a){\"use strict\";a.r(e);var s=a(0),n=Object(s.a)({},(function(){var t=this.$createElement,e=this._self._c||t;return e(\"div\",{staticClass:\"content\"},[this._m(0),this._v(\" \"),e(\"div\",{staticClass:\"github\",staticStyle:{\"text-align\":\"center\",padding:\"0 0 24px 0\"}},[e(\"sponsor-button\")],1),this._v(\" \"),this._m(1),this._v(\" \"),this._m(2)])}),[function(){var t=this.$createElement,e=this._self._c||t;return e(\"div\",{staticClass:\"sponsors\",staticStyle:{\"text-align\":\"center\",padding:\"24px 0 24px 0\"}},[e(\"h4\",[this._v(\"Silver Sponsors\")]),this._v(\" \"),e(\"a\",{attrs:{href:\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\",target:\"_blank\"}},[e(\"img\",{attrs:{src:\"/vue-i18n/patrons/babeledit.png\"}})]),this._v(\" \"),e(\"h4\",{staticStyle:{padding:\"12px 0 0 0\"}},[this._v(\"Bronze Sponsors\")]),this._v(\" \"),e(\"a\",{attrs:{href:\"https://zenarchitects.co.jp/\",target:\"_blank\"}},[e(\"img\",{attrs:{src:\"/vue-i18n/patrons/zenarchitects.png\"}})])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"div\",{staticClass:\"patreon\",staticStyle:{padding:\"0 0 24px 0\"}},[e(\"p\",{staticStyle:{\"text-align\":\"center\"}},[e(\"a\",{attrs:{href:\"https://www.patreon.com/kazupon\",target:\"_blank\"}},[e(\"img\",{attrs:{src:\"https://c5.patreon.com/external/logo/become_a_patron_button.png\",alt:\"Become a Patreon\"}})])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a(\"div\",{staticClass:\"features\"},[a(\"div\",{staticClass:\"feature\"},[a(\"h2\",[t._v(\"Easy\")]),t._v(\" \"),a(\"p\",[t._v(\"You can introduce internationalization into your app with simple API\")])]),t._v(\" \"),a(\"div\",{staticClass:\"feature\"},[a(\"h2\",[t._v(\"Powerful\")]),t._v(\" \"),a(\"p\",[t._v(\"In addition to simple translation, support localization such as pluralization, number, datetime ... etc\")])]),t._v(\" \"),a(\"div\",{staticClass:\"feature\"},[a(\"h2\",[t._v(\"Component-oriented\")]),t._v(\" \"),a(\"p\",[t._v(\"You can manage locale messages on single file component\")])])])}],!1,null,null,null);e.default=n.exports}}]);"
  },
  {
    "path": "docs/assets/js/40.b5b5dc72.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[40],{272:function(t,s,e){\"use strict\";e.r(s);var n=e(0),a=Object(n.a)({},(function(){var t=this,s=t.$createElement,e=t._self._c||s;return e(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),t._m(1),t._v(\" \"),t._m(2),t._v(\" \"),t._m(3),t._v(\" \"),e(\"p\",[e(\"a\",{attrs:{href:\"https://unpkg.com/vue-i18n/dist/vue-i18n\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"https://unpkg.com/vue-i18n/dist/vue-i18n\"),e(\"OutboundLink\")],1)]),t._v(\" \"),e(\"p\",[t._v(\"Сервис \"),e(\"a\",{attrs:{href:\"https://unpkg.com\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"unpkg.com\"),e(\"OutboundLink\")],1),t._v(\" предоставляет CDN-ссылки на основе NPM-пакетов. Ссылка выше будет всегда указывать на последнюю версию на NPM. Можно использовать конкретную версию или тег с помощью URL следующего вида \"),e(\"a\",{attrs:{href:\"https://unpkg.com/vue-i18n@8.17.3/dist/vue-i18n.js\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"https://unpkg.com/vue-i18n@8.17.3/dist/vue-i18n.js\"),e(\"OutboundLink\")],1)]),t._v(\" \"),e(\"p\",[t._v(\"При подключении vue-i18n после Vue плагин установит себя автоматически:\")]),t._v(\" \"),t._m(4),t._m(5),t._v(\" \"),t._m(6),t._m(7),t._v(\" \"),t._m(8),t._m(9),t._v(\" \"),t._m(10),t._m(11),t._v(\" \"),t._m(12),t._v(\" \"),t._m(13),e(\"p\",[t._v(\"Предварительно требуется установить Vue CLI 3.x, его можно установить следующей командой:\")]),t._v(\" \"),t._m(14),t._m(15),t._v(\" \"),t._m(16),t._v(\" \"),t._m(17),t._m(18),t._v(\" \"),e(\"p\",[e(\"a\",{attrs:{href:\"https://cdn.jsdelivr.net/npm/vue-i18n/dist/\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Внутри каталога dist / NPM-пакета\"),e(\"OutboundLink\")],1),t._v(\" можно обнаружить несколько различных сборок VueI18n. Вот следующие отличия между ними:\")]),t._v(\" \"),t._m(19),t._v(\" \"),t._m(20),t._v(\" \"),e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[e(\"a\",{attrs:{href:\"https://github.com/umdjs/umd\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"UMD\"),e(\"OutboundLink\")],1)]),t._v(\": UMD-сборки можно использовать непосредственно в браузере через тег \"),e(\"code\",[t._v(\"<script>\")]),t._v(\". Файл по умолчанию с Unpkg CDN \"),e(\"a\",{attrs:{href:\"https://unpkg.com/vue-i18n\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"https://unpkg.com/vue-i18n\"),e(\"OutboundLink\")],1),t._v(\" указывает на UMD-сборку (\"),e(\"code\",[t._v(\"vue-i18n.js\")]),t._v(\").\")])]),t._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[e(\"a\",{attrs:{href:\"http://wiki.commonjs.org/wiki/Modules/1.1\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"CommonJS\"),e(\"OutboundLink\")],1)]),t._v(\": CommonJS сборки предназначены для использования со старыми системами сборки, такими как \"),e(\"a\",{attrs:{href:\"http://browserify.org/\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"browserify\"),e(\"OutboundLink\")],1),t._v(\" или \"),e(\"a\",{attrs:{href:\"https://webpack.github.io\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"webpack 1\"),e(\"OutboundLink\")],1),t._v(\". Файлом по умолчанию для этих систем сборки (\"),e(\"code\",[t._v(\"pkg.main\")]),t._v(\") будет сборка CommonJS (\"),e(\"code\",[t._v(\"vue-i18n.common.js\")]),t._v(\").\")])]),t._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[e(\"a\",{attrs:{href:\"http://exploringjs.com/es6/ch_modules.html\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"ES Module\"),e(\"OutboundLink\")],1)]),t._v(\": VueI18n, начиная с версии 8.11, предоставляет две сборки ES-модулей (ESM):\")]),t._v(\" \"),e(\"ul\",[e(\"li\",[t._v(\"ESM для систем сборки: предназначен для использования с современными системами сборки, такими как \"),e(\"a\",{attrs:{href:\"https://webpack.js.org\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"webpack 2\"),e(\"OutboundLink\")],1),t._v(\" или \"),e(\"a\",{attrs:{href:\"https://rollupjs.org/\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Rollup\"),e(\"OutboundLink\")],1),t._v('. Формат ESM разработан для возможности статического анализа, чтобы системы сборки могли применять \"tree-shaking\" и удалять неиспользуемый код из финального приложения. Файлом по умолчанию для этих систем сборки ('),e(\"code\",[t._v(\"pkg.module\")]),t._v(\") будет ES-сборка (\"),e(\"code\",[t._v(\"vue-i18n.esm.js\")]),t._v(\").\")]),t._v(\" \"),t._m(21)])])])])}),[function(){var t=this.$createElement,s=this._self._c||t;return s(\"h1\",{attrs:{id:\"установка\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#установка\"}},[this._v(\"#\")]),this._v(\" Установка\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"примечание-совместимости\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#примечание-совместимости\"}},[this._v(\"#\")]),this._v(\" Примечание совместимости\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"ul\",[s(\"li\",[this._v(\"Vue.js версии \"),s(\"code\",[this._v(\"2.0.0+\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"загрузка-файnа-cdn\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#загрузка-файnа-cdn\"}},[this._v(\"#\")]),this._v(\" Загрузка файла / CDN\")])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e(\"div\",{staticClass:\"language-html extra-class\"},[e(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[e(\"code\",[e(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[e(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[e(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"script\")]),t._v(\" \"),e(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"src\")]),e(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[e(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),e(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"https://unpkg.com/vue/dist/vue.js\"),e(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),e(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),e(\"span\",{pre:!0,attrs:{class:\"token script\"}}),e(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[e(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[e(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"script\")]),e(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),e(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[e(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[e(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"script\")]),t._v(\" \"),e(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"src\")]),e(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[e(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),e(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"https://unpkg.com/vue-i18n/dist/vue-i18n.js\"),e(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),e(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),e(\"span\",{pre:!0,attrs:{class:\"token script\"}}),e(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[e(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[e(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"script\")]),e(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"npm\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#npm\"}},[this._v(\"#\")]),this._v(\" NPM\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"language-bash extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-bash\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token function\"}},[this._v(\"npm\")]),this._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token function\"}},[this._v(\"install\")]),this._v(\" vue-i18n\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"yarn\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#yarn\"}},[this._v(\"#\")]),this._v(\" Yarn\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"language-bash extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-bash\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token function\"}},[this._v(\"yarn\")]),this._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token function\"}},[this._v(\"add\")]),this._v(\" vue-i18n\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"При использовании системы модулей нужно явно устанавливать \"),s(\"code\",[this._v(\"vue-i18n\")]),this._v(\" через \"),s(\"code\",[this._v(\"Vue.use()\")]),this._v(\":\")])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e(\"div\",{staticClass:\"language-js extra-class\"},[e(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[e(\"code\",[e(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),t._v(\" Vue \"),e(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),t._v(\" \"),e(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'vue'\")]),t._v(\"\\n\"),e(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),t._v(\" VueI18n \"),e(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),t._v(\" \"),e(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'vue-i18n'\")]),t._v(\"\\n\\nVue\"),e(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),e(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"use\")]),e(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"VueI18n\"),e(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"Подобного не требуется делать при подключении через глобальный тег \"),s(\"code\",[this._v(\"<script>\")]),this._v(\".\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"vue-cli-3-x\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#vue-cli-3-x\"}},[this._v(\"#\")]),this._v(\" Vue CLI 3.x\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"language-bash extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-bash\"}},[s(\"code\",[this._v(\"vue \"),s(\"span\",{pre:!0,attrs:{class:\"token function\"}},[this._v(\"add\")]),this._v(\" i18n\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"language-bash extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-bash\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token function\"}},[this._v(\"npm\")]),this._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token function\"}},[this._v(\"install\")]),this._v(\" @vue/cli -g\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"dev-сборка\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#dev-сборка\"}},[this._v(\"#\")]),this._v(\" Dev-сборка\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"При необходимости использовать последнюю dev-сборку нужно склонировать репозиторий с GitHub и выполнить сборку \"),s(\"code\",[this._v(\"vue-i18n\")]),this._v(\" самостоятельно.\")])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e(\"div\",{staticClass:\"language-bash extra-class\"},[e(\"pre\",{pre:!0,attrs:{class:\"language-bash\"}},[e(\"code\",[e(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"git\")]),t._v(\" clone https://github.com/kazupon/vue-i18n.git node_modules/vue-i18n\\n\"),e(\"span\",{pre:!0,attrs:{class:\"token builtin class-name\"}},[t._v(\"cd\")]),t._v(\" node_modules/vue-i18n\\n\"),e(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"npm\")]),t._v(\" \"),e(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"install\")]),t._v(\" \"),e(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"# или `yarn`\")]),t._v(\"\\n\"),e(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"npm\")]),t._v(\" run build  \"),e(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"# или `yarn run build`\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"отnичия-разnичных-сборок\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#отnичия-разnичных-сборок\"}},[this._v(\"#\")]),this._v(\" Отличия различных сборок\")])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e(\"ul\",[e(\"li\",[t._v(\"UMD: \"),e(\"code\",[t._v(\"vue-i18n.js\")])]),t._v(\" \"),e(\"li\",[t._v(\"CommonJS: \"),e(\"code\",[t._v(\"vue-i18n.common.js\")])]),t._v(\" \"),e(\"li\",[t._v(\"ES Module для систем сборки: \"),e(\"code\",[t._v(\"vue-i18n.esm.js\")])]),t._v(\" \"),e(\"li\",[t._v(\"ES Module для браузеров: \"),e(\"code\",[t._v(\"vue-i18n.esm.browser.js\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h3\",{attrs:{id:\"термины\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#термины\"}},[this._v(\"#\")]),this._v(\" Термины\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"li\",[this._v(\"ESM для браузеров (только для 8.11+, \"),s(\"code\",[this._v(\"vue-i18n.esm.browser.js\")]),this._v(\"): предназначен для импорта напрямую в современных браузерах через тег \"),s(\"code\",[this._v('<script type=\"module\">')]),this._v(\".\")])}],!1,null,null,null);s.default=a.exports}}]);"
  },
  {
    "path": "docs/assets/js/41.638a9c02.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[41],{273:function(t,e,a){\"use strict\";a.r(e);var r=a(0),s=Object(r.a)({},(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),a(\"div\",{staticClass:\"warning custom-block\"},[a(\"p\",{staticClass:\"custom-block-title\"},[t._v(\"Предупреждение\")]),t._v(\" \"),a(\"p\",[t._v(\"⚠️ Документация для Vue I18n v6.0 или более поздних версий. Если используете и ищете документацию для версии v5.x, обратитесь к разделу \"),a(\"router-link\",{attrs:{to:\"./legacy/\"}},[t._v(\"устаревшей версии\")]),t._v(\".\")],1)]),t._v(\" \"),a(\"p\",[t._v(\"Vue I18n — плагин для интернационализации во Vue.js. Он легко интегрирует дополнительные возможности по локализации приложения Vue.js.\")]),t._v(\" \"),a(\"p\",[t._v(\"Изучение лучше начинать с раздела \"),a(\"router-link\",{attrs:{to:\"./started.html\"}},[t._v(\"Начало работы\")])],1),t._v(\" \"),t._m(1),t._v(\" \"),t._m(2),t._v(\" \"),t._m(3),t._v(\" \"),t._m(4),t._v(\" \"),a(\"p\",[t._v(\"Ваша компания для создания потрясающих приложений использует vue-i18n или vue-cli-plugin-i18n? Присоединяйтесь к другим патронам или становитесь спонсором, чтобы увидеть свой логотип в документации! Поддержка на Patreon позволяет автору меньше работать и больше заниматься развитием свободным опенсорсом, таким как vue-i18n! Спасибо!\")]),t._v(\" \"),t._m(5)])}),[function(){var t=this.$createElement,e=this._self._c||t;return e(\"h1\",{attrs:{id:\"введение\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#введение\"}},[this._v(\"#\")]),this._v(\" Введение\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"спонсоры\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#спонсоры\"}},[this._v(\"#\")]),this._v(\" Спонсоры\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"серебряные\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#серебряные\"}},[this._v(\"#\")]),this._v(\" Серебряные\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",{staticStyle:{\"text-align\":\"center\"}},[e(\"a\",{attrs:{href:\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\",target:\"_blank\"}},[e(\"img\",{attrs:{src:\"/vue-i18n/patrons/babeledit.png\"}})])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"поддержите-на-patreon\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#поддержите-на-patreon\"}},[this._v(\"#\")]),this._v(\" Поддержите на Patreon\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",{staticStyle:{\"text-align\":\"center\"}},[e(\"a\",{attrs:{href:\"https://www.patreon.com/kazupon\",target:\"_blank\"}},[e(\"img\",{attrs:{src:\"https://c5.patreon.com/external/logo/become_a_patron_button.png\",alt:\"Become a Patreon\"}})])])}],!1,null,null,null);e.default=s.exports}}]);"
  },
  {
    "path": "docs/assets/js/42.222a2780.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[42],{274:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this.$createElement;this._self._c;return this._m(0)}),[function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[a(\"h1\",{attrs:{id:\"миграция-с-версии-v5-x\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#миграция-с-версии-v5-x\"}},[t._v(\"#\")]),t._v(\" Миграция с версии v5.x\")]),t._v(\" \"),a(\"h2\",{attrs:{id:\"гnобаnьная-конфигурация\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#гnобаnьная-конфигурация\"}},[t._v(\"#\")]),t._v(\" Глобальная конфигурация\")]),t._v(\" \"),a(\"h3\",{attrs:{id:\"заменён-lang\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#заменён-lang\"}},[t._v(\"#\")]),t._v(\" Заменён lang\")]),t._v(\" \"),a(\"p\",[t._v(\"Используйте у конструктора класса \"),a(\"code\",[t._v(\"VueI18n\")]),t._v(\" опцию \"),a(\"code\",[t._v(\"locale\")]),t._v(\" или свойство \"),a(\"code\",[t._v(\"VueI18n#locale\")]),t._v(\":\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" app \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// переключение локализации\")]),t._v(\"\\ni18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"locale \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ru'\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// или\")]),t._v(\"\\napp\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"$i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"locale \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ru'\")]),t._v(\"\\n\")])])]),a(\"h3\",{attrs:{id:\"заменён-fallbacklang\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#заменён-fallbacklang\"}},[t._v(\"#\")]),t._v(\" Заменён fallbackLang\")]),t._v(\" \"),a(\"p\",[t._v(\"Используйте у конструктора класса \"),a(\"code\",[t._v(\"VueI18n\")]),t._v(\" опцию \"),a(\"code\",[t._v(\"fallbackLocale\")]),t._v(\" или свойство\\n\"),a(\"code\",[t._v(\"VueI18n#fallbackLocale\")]),t._v(\":\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ru'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  fallbackLocale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" app \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// изменение запасной локализации\")]),t._v(\"\\ni18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"fallbackLocale \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'zh'\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// или\")]),t._v(\"\\napp\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"$i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"fallbackLocale \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'zh'\")]),t._v(\"\\n\")])])]),a(\"h3\",{attrs:{id:\"заменён-missinghandler\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#заменён-missinghandler\"}},[t._v(\"#\")]),t._v(\" Заменён missingHandler\")]),t._v(\" \"),a(\"p\",[t._v(\"Используйте у конструктора класса \"),a(\"code\",[t._v(\"VueI18n\")]),t._v(\" опцию \"),a(\"code\",[t._v(\"missing\")]),t._v(\" или свойство \"),a(\"code\",[t._v(\"VueI18n#missing\")]),t._v(\":\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token function-variable function\"}},[t._v(\"missing\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" key\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" vm\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" values\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// обработка отсутствующих переводов\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" app \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// изменение обработчика для отсутствующих переводов\")]),t._v(\"\\ni18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function-variable function\"}},[t._v(\"missing\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" key\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" vm\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" values\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// обработка отсутствующих переводов\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// или\")]),t._v(\"\\napp\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"$i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function-variable function\"}},[t._v(\"missing\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" key\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" vm\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" values\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// обработка отсутствующих переводов\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),a(\"h3\",{attrs:{id:\"заменён-i18nformatter\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#заменён-i18nformatter\"}},[t._v(\"#\")]),t._v(\" Заменён i18nFormatter\")]),t._v(\" \"),a(\"p\",[t._v(\"Используйте у конструктора класса \"),a(\"code\",[t._v(\"VueI18n\")]),t._v(\" опцию \"),a(\"code\",[t._v(\"formatter\")]),t._v(\" или свойство \"),a(\"code\",[t._v(\"VueI18n#formatter\")]),t._v(\":\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"class\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"CustomFormatter\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"format\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"message\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"...\")]),t._v(\"values\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// какая-то логика\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'something string'\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n  formatter\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"CustomFormatter\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" app \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// изменение пользовательского форматтера\")]),t._v(\"\\ni18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"formatter \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token function-variable function\"}},[t._v(\"format\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"message\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"...\")]),t._v(\"values\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// какая-то логика\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'something string'\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// или\")]),t._v(\"\\napp\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"$i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"formatter \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token function-variable function\"}},[t._v(\"format\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"message\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"...\")]),t._v(\"values\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// какая-то логика\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'something string'\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),a(\"h2\",{attrs:{id:\"гnобаnьные-методы\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#гnобаnьные-методы\"}},[t._v(\"#\")]),t._v(\" Глобальные методы\")]),t._v(\" \"),a(\"h3\",{attrs:{id:\"заменён-vue-locale\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#заменён-vue-locale\"}},[t._v(\"#\")]),t._v(\" Заменён Vue.locale\")]),t._v(\" \"),a(\"p\",[t._v(\"Используйте у конструктора класса \"),a(\"code\",[t._v(\"VueI18n\")]),t._v(\" опцию \"),a(\"code\",[t._v(\"messages\")]),t._v(\" или методы \"),a(\"code\",[t._v(\"VueI18n#GetLocaleMessage\")]),t._v(\" / \"),a(\"code\",[t._v(\"VueI18n#setLocaleMessage\")]),t._v(\":\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n  messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hello world'\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    ru\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'привет мир'\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" app \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// получение сообщений локализации\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" en \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"getLocaleMessage\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\nen\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"greeting \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hi!'\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// установка сообщений локализации\")]),t._v(\"\\ni18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setLocaleMessage\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" en\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// или\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" ru \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"$i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"getLocaleMessage\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ru'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\nru\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"greeting \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Привет!'\")]),t._v(\"\\napp\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"$i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setLocaleMessage\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ru'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" ru\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])]),a(\"h3\",{attrs:{id:\"заменён-vue-t\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#заменён-vue-t\"}},[t._v(\"#\")]),t._v(\" Заменён Vue.t\")]),t._v(\" \"),a(\"p\",[t._v(\"Используйте метод \"),a(\"code\",[t._v(\"VueI18n#t\")]),t._v(\":\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      greeting\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hi {name}'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\ni18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"t\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'greeting'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" name\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'kazupon'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// -> hi kazupon\")]),t._v(\"\\n\")])])]),a(\"h3\",{attrs:{id:\"заменён-vue-tc\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#заменён-vue-tc\"}},[t._v(\"#\")]),t._v(\" Заменён Vue.tc\")]),t._v(\" \"),a(\"p\",[t._v(\"Используйте метод \"),a(\"code\",[t._v(\"VueI18n#tc\")]),t._v(\":\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      apple\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'no apples | one apple | {count} apples'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" count \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"10\")]),t._v(\"\\ni18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"tc\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'apple'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" count\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" count \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// -> 10 apples\")]),t._v(\"\\n\")])])]),a(\"h3\",{attrs:{id:\"заменён-vue-te\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#заменён-vue-te\"}},[t._v(\"#\")]),t._v(\" Заменён Vue.te\")]),t._v(\" \"),a(\"p\",[t._v(\"Используйте метод \"),a(\"code\",[t._v(\"VueI18n#te\")]),t._v(\":\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hello world'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\ni18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"te\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hello'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// -> true\")]),t._v(\"\\ni18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"te\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hallo'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ru'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// -> false\")]),t._v(\"\\ni18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"te\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hello'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// -> true\")]),t._v(\"\\n\")])])]),a(\"h2\",{attrs:{id:\"опции-конструктора\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#опции-конструктора\"}},[t._v(\"#\")]),t._v(\" Опции конструктора\")]),t._v(\" \"),a(\"h3\",{attrs:{id:\"заменён-locales\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#заменён-locales\"}},[t._v(\"#\")]),t._v(\" Заменён locales\")]),t._v(\" \"),a(\"p\",[t._v(\"Используйте у конструктора класса \"),a(\"code\",[t._v(\"VueI18n\")]),t._v(\" опцию \"),a(\"code\",[t._v(\"messages\")]),t._v(\" или \"),a(\"code\",[t._v(\"messages\")]),t._v(\" из \"),a(\"code\",[t._v(\"i18n\")]),t._v(\" (для компонента):\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      greeting\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hi {name}'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// для компонента\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" Component1 \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        title\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Title1'\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),a(\"h2\",{attrs:{id:\"свойства-экземпnяра\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#свойства-экземпnяра\"}},[t._v(\"#\")]),t._v(\" Свойства экземпляра\")]),t._v(\" \"),a(\"h3\",{attrs:{id:\"заменён-lang-2\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#заменён-lang-2\"}},[t._v(\"#\")]),t._v(\" Заменён $lang\")]),t._v(\" \"),a(\"p\",[t._v(\"Используйте свойство \"),a(\"code\",[t._v(\"VueI18n#locale\")]),t._v(\":\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" app \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// переключение локализации\")]),t._v(\"\\ni18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"locale \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ru'\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// или\")]),t._v(\"\\napp\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"$i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"locale \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ru'\")]),t._v(\"\\n\")])])]),a(\"h2\",{attrs:{id:\"другие-возможности\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#другие-возможности\"}},[t._v(\"#\")]),t._v(\" Другие возможности\")]),t._v(\" \"),a(\"h3\",{attrs:{id:\"динамическая-nокаnизация-удаnена\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#динамическая-nокаnизация-удаnена\"}},[t._v(\"#\")]),t._v(\" Динамическая локализация удалена\")]),t._v(\" \"),a(\"p\",[t._v(\"При необходимости динамически устанавливать сообщения локализации потребуется добавить реализацию самостоятельно:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" app \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  data\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" loading\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"''\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"function\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"loadLocaleMessage\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" cb\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"fetch\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'/locales/'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"+\")]),t._v(\" locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    method\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'get'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    headers\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      Accept\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'application/json'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Content-Type'\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'application/json'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"then\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"res\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" res\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"json\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"then\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"json\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"if\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"Object\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"keys\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"json\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"length \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"===\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"0\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" Promise\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"reject\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Error\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'locale empty !!'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"else\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" Promise\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"resolve\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"json\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"then\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"message\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"cb\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"null\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" message\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"catch\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"error\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"cb\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"error\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\napp\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"loading \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'loading ...'\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"loadLocaleMessage\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"err\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" message\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"if\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"err\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"loading \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"''\")]),t._v(\"\\n    console\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"error\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"err\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setLocaleMessage\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" message\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"loading \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"''\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/43.b28cd4fc.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[43],{275:function(t,e,r){\"use strict\";r.r(e);var n=r(0),o=Object(n.a)({},(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),r(\"ul\",[r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/installation.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Установка\"),r(\"OutboundLink\")],1)]),t._v(\" \"),r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/started.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Начало работы\"),r(\"OutboundLink\")],1)]),t._v(\" \"),r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/formatting.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Форматирование\"),r(\"OutboundLink\")],1)]),t._v(\" \"),r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/pluralization.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Плюрализация\"),r(\"OutboundLink\")],1)]),t._v(\" \"),r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/syntax.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Локализация и синтаксис ключей\"),r(\"OutboundLink\")],1)]),t._v(\" \"),r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/linked.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Связанные сообщения\"),r(\"OutboundLink\")],1)]),t._v(\" \"),r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/fallback.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Запасная локализация\"),r(\"OutboundLink\")],1)]),t._v(\" \"),r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/component.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Локализация в компонентах\"),r(\"OutboundLink\")],1)]),t._v(\" \"),r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/dynamic.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Динамическая локализация\"),r(\"OutboundLink\")],1)]),t._v(\" \"),r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/hot-reload.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Горячая перезагрузка переводов\"),r(\"OutboundLink\")],1)]),t._v(\" \"),r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/api.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Справочник API\"),r(\"OutboundLink\")],1)])])])}),[function(){var t=this.$createElement,e=this._self._c||t;return e(\"h1\",{attrs:{id:\"документация-дnя-версии-v5-x\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#документация-дnя-версии-v5-x\"}},[this._v(\"#\")]),this._v(\" Документация для версии v5.x\")])}],!1,null,null,null);e.default=o.exports}}]);"
  },
  {
    "path": "docs/assets/js/44.67f64685.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[44],{276:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),a(\"div\",{staticClass:\"tip custom-block\"},[a(\"p\",{staticClass:\"custom-block-title\"},[t._v(\"ПРИМЕЧАНИЕ\")]),t._v(\" \"),a(\"p\",[t._v(\"В примерах кода этого руководства используется \"),a(\"a\",{attrs:{href:\"https://github.com/lukehoban/es6features\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"ES2015\"),a(\"OutboundLink\")],1),t._v(\".\")])]),t._v(\" \"),t._m(1),t._v(\" \"),t._m(2),t._m(3),t._v(\" \"),t._m(4),a(\"p\",[t._v(\"Результат будет таким:\")]),t._v(\" \"),t._m(5)])}),[function(){var t=this.$createElement,s=this._self._c||t;return s(\"h1\",{attrs:{id:\"начаnо-работы\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#начаnо-работы\"}},[this._v(\"#\")]),this._v(\" Начало работы\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"html\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#html\"}},[this._v(\"#\")]),this._v(\" HTML\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"script\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"src\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"https://unpkg.com/vue/dist/vue.js\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token script\"}}),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"script\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"script\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"src\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"https://unpkg.com/vue-i18n/dist/vue-i18n.js\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token script\"}}),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"script\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v('{{ $t(\"message.hello\") }}'),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"javascript\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#javascript\"}},[this._v(\"#\")]),this._v(\" JavaScript\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// При использовании модульной системы (например, через vue-cli)\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// нужно импортировать Vue и VueI18n и вызвать Vue.use(VueI18n).\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// import Vue from 'vue'\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// import VueI18n from 'vue-i18n'\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Vue.use(VueI18n)\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Готовые переводы сообщений локализаций\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hello world'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  ru\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Привет мир'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Создание экземпляра VueI18n с настройками\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ru'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// установка локализации по умолчанию\")]),t._v(\"\\n  messages \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// установка сообщений локализаций\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Создание экземпляра Vue с опцией `i18n`\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Теперь можно запускать приложение!\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"#app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Привет мир\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/45.550cbef0.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[45],{277:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),a(\"div\",{staticClass:\"tip custom-block\"},[a(\"p\",{staticClass:\"custom-block-title\"},[t._v(\"NOTE\")]),t._v(\" \"),a(\"p\",[t._v(\"We will be using \"),a(\"a\",{attrs:{href:\"https://github.com/lukehoban/es6features\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"ES2015\"),a(\"OutboundLink\")],1),t._v(\" in the\\ncode samples in the guide.\")])]),t._v(\" \"),t._m(1),t._v(\" \"),t._m(2),t._m(3),t._v(\" \"),t._m(4),a(\"p\",[t._v(\"Output the following:\")]),t._v(\" \"),t._m(5)])}),[function(){var t=this.$createElement,s=this._self._c||t;return s(\"h1\",{attrs:{id:\"getting-started\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#getting-started\"}},[this._v(\"#\")]),this._v(\" Getting started\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"html\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#html\"}},[this._v(\"#\")]),this._v(\" HTML\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"script\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"src\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"https://unpkg.com/vue/dist/vue.js\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token script\"}}),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"script\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"script\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"src\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"https://unpkg.com/vue-i18n/dist/vue-i18n.js\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token script\"}}),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"script\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v('{{ $t(\"message.hello\") }}'),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"javascript\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#javascript\"}},[this._v(\"#\")]),this._v(\" JavaScript\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// If using a module system (e.g. via vue-cli), import Vue and VueI18n and then call Vue.use(VueI18n).\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// import Vue from 'vue'\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// import VueI18n from 'vue-i18n'\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Vue.use(VueI18n)\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Ready translated locale messages\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hello world'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  ja\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'こんにちは、世界'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Create VueI18n instance with options\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ja'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// set locale\")]),t._v(\"\\n  messages\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// set locale messages\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Create a Vue instance with `i18n` option\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Now the app has started!\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"#app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"こんにちは、世界\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/46.5ab1c570.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[46],{278:function(t,a,e){\"use strict\";e.r(a);var s=e(0),n=Object(s.a)({},(function(){var t=this.$createElement;this._self._c;return this._m(0)}),[function(){var t=this,a=t.$createElement,e=t._self._c||a;return e(\"div\",{staticClass:\"content\"},[e(\"div\",{staticClass:\"sponsors\",staticStyle:{\"text-align\":\"center\",padding:\"0 0 24px 0\"}},[e(\"h4\",[t._v(\"白银赞助商\")]),t._v(\" \"),e(\"a\",{attrs:{href:\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\",target:\"_blank\"}},[e(\"img\",{attrs:{src:\"/vue-i18n/patrons/babeledit.png\"}})])]),t._v(\" \"),e(\"div\",{staticClass:\"patreon\",staticStyle:{padding:\"0 0 24px 0\"}},[e(\"p\",{staticStyle:{\"text-align\":\"center\"}},[e(\"a\",{attrs:{href:\"https://www.patreon.com/kazupon\",target:\"_blank\"}},[e(\"img\",{attrs:{src:\"https://c5.patreon.com/external/logo/become_a_patron_button.png\",alt:\"Become a Patreon\"}})])])]),t._v(\" \"),e(\"div\",{staticClass:\"features\"},[e(\"div\",{staticClass:\"feature\"},[e(\"h2\",[t._v(\"简单\")]),t._v(\" \"),e(\"p\",[t._v(\"通过简单的 API 将你的应用国际化\")])]),t._v(\" \"),e(\"div\",{staticClass:\"feature\"},[e(\"h2\",[t._v(\"强大\")]),t._v(\" \"),e(\"p\",[t._v(\"除了简单的翻译外，还支持复数，数字，日期时间等本地化处理\")])]),t._v(\" \"),e(\"div\",{staticClass:\"feature\"},[e(\"h2\",[t._v(\"面向组件\")]),t._v(\" \"),e(\"p\",[t._v(\"你可以在单文件组件上管理语言环境信息\")])])])])}],!1,null,null,null);a.default=n.exports}}]);"
  },
  {
    "path": "docs/assets/js/47.d7b6ca42.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[47],{279:function(t,e,s){\"use strict\";s.r(e);var a=s(0),r=Object(a.a)({},(function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),t._m(1),t._v(\" \"),t._m(2),t._v(\" \"),t._m(3),t._v(\" \"),t._m(4),t._v(\" \"),s(\"p\",[t._v(\"基于组件的本地化选项\")]),t._v(\" \"),t._m(5),t._v(\" \"),t._m(6),t._v(\" \"),t._m(7),t._v(\" \"),t._m(8),t._v(\" \"),s(\"p\",[t._v(\"本地化语言环境信息 \"),s(\"code\",[t._v(\"key\")]),t._v(\"，在本地化时组件的语言环境信息优先于全局语言环境信息。如果未指定组件的语言环境信息，就使用全局语言环境信息进行本地化。如果你指定了 \"),s(\"code\",[t._v(\"locale\")]),t._v(\" 参数，则使用 \"),s(\"code\",[t._v(\"locale\")]),t._v(\" 提供的语言环境进行本地化。如果你为列表/格式化的语言环境信息指定了 \"),s(\"code\",[t._v(\"key\")]),t._v(\"，就必须同时指定 \"),s(\"code\",[t._v(\"values\")]),t._v(\"。有关 \"),s(\"code\",[t._v(\"values\")]),t._v(\" 的详细信息，请参阅\"),s(\"router-link\",{attrs:{to:\"./../guide/formatting.html\"}},[t._v(\"格式化\")]),t._v(\"。\")],1),t._v(\" \"),t._m(9),t._v(\" \"),t._m(10),t._v(\" \"),t._m(11),t._v(\" \"),t._m(12),t._v(\" \"),t._m(13),t._v(\" \"),t._m(14),t._v(\" \"),t._m(15),t._v(\" \"),t._m(16),t._v(\" \"),t._m(17),t._v(\" \"),t._m(18),t._v(\" \"),t._m(19),t._v(\" \"),t._m(20),t._v(\" \"),t._m(21),t._v(\" \"),t._m(22),t._v(\" \"),t._m(23),t._v(\" \"),t._m(24),t._v(\" \"),t._m(25),t._v(\" \"),t._m(26),t._v(\" \"),t._m(27),t._v(\" \"),t._m(28),t._v(\" \"),t._m(29),t._v(\" \"),t._m(30),t._v(\" \"),t._m(31),t._v(\" \"),t._m(32),t._v(\" \"),t._m(33),t._v(\" \"),t._m(34),t._v(\" \"),t._m(35),t._v(\" \"),t._m(36),t._v(\" \"),t._m(37),t._v(\" \"),t._m(38),t._v(\" \"),s(\"p\",[s(\"code\",[t._v(\"Vuei18n\")]),t._v(\" 类实现了 \"),s(\"code\",[t._v(\"I18n\")]),t._v(\" \"),s(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"flowtype 接口\"),s(\"OutboundLink\")],1)]),t._v(\" \"),t._m(39),t._v(\" \"),t._m(40),t._v(\" \"),t._m(41),t._v(\" \"),s(\"p\",[t._v(\"vue-i18n 版本\")]),t._v(\" \"),t._m(42),t._v(\" \"),t._m(43),t._v(\" \"),t._m(44),t._v(\" \"),s(\"p\",[t._v(\"是否提供以下国际化功能：\")]),t._v(\" \"),t._m(45),t._v(\" \"),s(\"p\",[t._v(\"由于使用 ECMAScript Internationalization API (ECMA-402) 实现，上述国际化功能取决于\"),s(\"a\",{attrs:{href:\"http://kangax.github.io/compat-table/esintl/\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"浏览器环境\"),s(\"OutboundLink\")],1),t._v(\"。\")]),t._v(\" \"),t._m(46),t._v(\" \"),s(\"p\",[t._v(\"你可以基于\"),s(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"flowtype 定义\"),s(\"OutboundLink\")],1),t._v(\" 中的 \"),s(\"code\",[t._v(\"I18nOptions\")]),t._v(\" 指定下列构造函数选项\")]),t._v(\" \"),t._m(47),t._v(\" \"),t._m(48),t._v(\" \"),s(\"p\",[t._v(\"语言环境。\")]),t._v(\" \"),t._m(49),t._v(\" \"),t._m(50),t._v(\" \"),s(\"p\",[t._v(\"预设的语言环境。\")]),t._v(\" \"),t._m(51),t._v(\" \"),t._m(52),t._v(\" \"),s(\"p\",[t._v(\"本地化的语言环境信息。\")]),t._v(\" \"),t._m(53),t._v(\" \"),t._m(54),t._v(\" \"),t._m(55),t._v(\" \"),s(\"p\",[t._v(\"本地化的日期时间格式。\")]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"strong\",[t._v(\"请参阅：\")]),s(\"code\",[t._v(\"DateTimeFormats\")]),t._v(\" 类型的\"),s(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"flowtype 接口\"),s(\"OutboundLink\")],1)])]),t._v(\" \"),t._m(56),t._v(\" \"),t._m(57),t._v(\" \"),t._m(58),t._v(\" \"),s(\"p\",[t._v(\"本地化的数字格式。\")]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"strong\",[t._v(\"请参阅：\")]),s(\"code\",[t._v(\"NumberFormats\")]),t._v(\" 类型的\"),s(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"flowtype 接口\"),s(\"OutboundLink\")],1)])]),t._v(\" \"),t._m(59),t._v(\" \"),t._m(60),t._v(\" \"),t._m(61),t._v(\" \"),t._m(62),t._v(\" \"),t._m(63),t._v(\" \"),t._m(64),t._v(\" \"),t._m(65),t._v(\" \"),t._m(66),t._v(\" \"),t._m(67),t._v(\" \"),s(\"p\",[t._v(\"缺少本地化时的处理函数。该处理函数在被调用时会使用本地化目标语言环境，本地化路径关键字和 Vue 实例。\")]),t._v(\" \"),s(\"p\",[t._v(\"如果设置了该函数，则本地化信息未定义时不会产生警告。\")]),t._v(\" \"),t._m(68),t._v(\" \"),t._m(69),t._v(\" \"),s(\"p\",[t._v(\"在组件本地化中，当本地化失败时是否回退到根级别 (全局) 本地化。\")]),t._v(\" \"),t._m(70),t._v(\" \"),t._m(71),t._v(\" \"),t._m(72),t._v(\" \"),s(\"p\",[t._v(\"是否将根级别语言环境与组件本地化语言环境同步。\")]),t._v(\" \"),t._m(73),t._v(\" \"),t._m(74),t._v(\" \"),t._m(75),t._v(\" \"),t._m(76),t._v(\" \"),s(\"p\",[t._v(\"是否取消本地化失败时输出的警告。\")]),t._v(\" \"),t._m(77),t._v(\" \"),t._m(78),t._v(\" \"),t._m(79),t._v(\" \"),t._m(80),t._v(\" \"),t._m(81),t._v(\" \"),t._m(82),t._v(\" \"),t._m(83),t._v(\" \"),t._m(84),t._v(\" \"),t._m(85),t._v(\" \"),t._m(86),t._v(\" \"),t._m(87),t._v(\" \"),t._m(88),t._v(\" \"),t._m(89),t._v(\" \"),s(\"p\",[t._v(\"语言环境。\")]),t._v(\" \"),t._m(90),t._v(\" \"),t._m(91),t._v(\" \"),s(\"p\",[t._v(\"预设的语言环境。\")]),t._v(\" \"),t._m(92),t._v(\" \"),t._m(93),t._v(\" \"),s(\"p\",[t._v(\"本地化的语言环境信息。\")]),t._v(\" \"),t._m(94),t._v(\" \"),t._m(95),t._v(\" \"),t._m(96),t._v(\" \"),s(\"p\",[t._v(\"本地化的日期时间格式。\")]),t._v(\" \"),t._m(97),t._v(\" \"),t._m(98),t._v(\" \"),t._m(99),t._v(\" \"),s(\"p\",[t._v(\"本地化的数字格式。\")]),t._v(\" \"),t._m(100),t._v(\" \"),t._m(101),t._v(\" \"),s(\"p\",[t._v(\"缺少本地化时的处理函数。\")]),t._v(\" \"),t._m(102),t._v(\" \"),t._m(103),t._v(\" \"),t._m(104),t._v(\" \"),t._m(105),t._v(\" \"),t._m(106),t._v(\" \"),t._m(107),t._v(\" \"),s(\"p\",[t._v(\"是否取消本地化失败时输出的警告。\")]),t._v(\" \"),t._m(108),t._v(\" \"),t._m(109),t._v(\" \"),t._m(110),t._v(\" \"),t._m(111),t._v(\" \"),t._m(112),t._v(\" \"),t._m(113),t._v(\" \"),t._m(114),t._v(\" \"),s(\"p\",[t._v(\"根据当前的数字和一组给定的选项，获取其复数索引，可以通过原型变更覆盖：\")]),t._v(\" \"),t._m(115),t._m(116),t._v(\" \"),t._m(117),t._v(\" \"),t._m(118),t._v(\" \"),t._m(119),t._v(\" \"),t._m(120),t._v(\" \"),t._m(121),t._v(\" \"),t._m(122),t._v(\" \"),t._m(123),t._v(\" \"),t._m(124),t._v(\" \"),t._m(125),t._v(\" \"),t._m(126),t._v(\" \"),t._m(127),t._v(\" \"),t._m(128),t._v(\" \"),t._m(129),t._v(\" \"),t._m(130),t._v(\" \"),t._m(131),t._v(\" \"),t._m(132),t._v(\" \"),t._m(133),t._v(\" \"),t._m(134),t._v(\" \"),t._m(135),t._v(\" \"),t._m(136),t._v(\" \"),t._m(137),t._v(\" \"),s(\"p\",[t._v(\"获取语言环境的日期时间格式。\")]),t._v(\" \"),t._m(138),t._v(\" \"),t._m(139),t._v(\" \"),t._m(140),t._v(\" \"),s(\"p\",[t._v(\"设置语言环境的日期时间格式。\")]),t._v(\" \"),t._m(141),t._v(\" \"),t._m(142),t._v(\" \"),t._m(143),t._v(\" \"),s(\"p\",[t._v(\"将已注册的日期时间格式与语言环境的日期时间格式合并。\")]),t._v(\" \"),t._m(144),t._v(\" \"),t._m(145),t._v(\" \"),t._m(146),t._v(\" \"),t._m(147),t._v(\" \"),t._m(148),t._v(\" \"),t._m(149),t._v(\" \"),t._m(150),t._v(\" \"),s(\"p\",[t._v(\"获取语言环境的数字格式。\")]),t._v(\" \"),t._m(151),t._v(\" \"),t._m(152),t._v(\" \"),t._m(153),t._v(\" \"),s(\"p\",[t._v(\"设置语言环境的数字格式。\")]),t._v(\" \"),t._m(154),t._v(\" \"),t._m(155),t._v(\" \"),t._m(156),t._v(\" \"),s(\"p\",[t._v(\"将已注册的数字格式与语言环境的数字格式合并。\")]),t._v(\" \"),t._m(157),t._v(\" \"),t._m(158),t._v(\" \"),t._m(159),t._v(\" \"),t._m(160),t._v(\" \"),t._m(161),t._v(\" \"),t._m(162),t._v(\" \"),t._m(163),t._v(\" \"),t._m(164),t._v(\" \"),t._m(165),t._v(\" \"),t._m(166),t._v(\" \"),s(\"div\",{staticClass:\"tip custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[t._v(\"注意\")]),t._v(\" \"),s(\"p\",[t._v(\"当 \"),s(\"code\",[t._v(\"v-t\")]),t._v(\" 指令解除绑定时，默认情况下将清除元素 \"),s(\"code\",[t._v(\"textContent\")]),t._v(\"。在\"),s(\"a\",{attrs:{href:\"https://cn.vuejs.org/v2/guide/transitions.html\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"过渡动画\"),s(\"OutboundLink\")],1),t._v(\"内部使用的时候，可能出现不合预期的情况。为了在指令解除绑定之后保留 \"),s(\"code\",[t._v(\"textContent\")]),t._v(\" 数据，可使用 \"),s(\"code\",[t._v(\".preserve\")]),t._v(\" 修饰符或全局的 \"),t._m(167),t._v(\"。\")])]),t._v(\" \"),t._m(168),t._v(\" \"),t._m(169),s(\"ul\",[s(\"li\",[s(\"strong\",[t._v(\"请参阅：\")]),s(\"router-link\",{attrs:{to:\"./../guide/directive.html\"}},[t._v(\"自定义指令本地化\")])],1)]),t._v(\" \"),t._m(170),t._v(\" \"),t._m(171),t._v(\" \"),t._m(172),t._v(\" \"),t._m(173),t._v(\" \"),t._m(174),t._v(\" \"),t._m(175),t._v(\" \"),t._m(176),t._m(177),t._m(178),t._v(\" \"),s(\"p\",[s(\"router-link\",{attrs:{to:\"./../guide/interpolation.html\"}},[t._v(\"组件插值\")])],1),t._v(\" \"),t._m(179),t._v(\" \"),t._m(180),t._v(\" \"),t._m(181),t._v(\" \"),t._m(182),t._v(\" \"),s(\"p\",[t._v(\"用于组件插槽，指示格式列表的索引值或具名格式的关键字。\")]),t._v(\" \"),s(\"p\",[t._v(\"有关详细用法，请参阅下面链接的指南部分。\")]),t._v(\" \"),t._m(183),t._v(\" \"),s(\"p\",[s(\"router-link\",{attrs:{to:\"./../guide/interpolation.html\"}},[t._v(\"组件插值\")])],1)])}),[function(){var t=this.$createElement,e=this._self._c||t;return e(\"h1\",{attrs:{id:\"api参考\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#api参考\"}},[this._v(\"#\")]),this._v(\" API参考\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"扩展-vue\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#扩展-vue\"}},[this._v(\"#\")]),this._v(\" 扩展 Vue\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"vue-构造函数选项\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#vue-构造函数选项\"}},[this._v(\"#\")]),this._v(\" Vue 构造函数选项\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"i18n\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#i18n\"}},[this._v(\"#\")]),this._v(\" i18n\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"strong\",[this._v(\"类型：\")]),e(\"code\",[this._v(\"I18nOptions\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"strong\",[this._v(\"请参阅：\")]),e(\"code\",[this._v(\"VueI18n\")]),this._v(\" 类构造函数选项\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"vue-注入方法\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#vue-注入方法\"}},[this._v(\"#\")]),this._v(\" Vue 注入方法\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"t\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#t\"}},[this._v(\"#\")]),this._v(\" $t\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"参数：\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{Path} key\")]),t._v(\"：必填\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Locale} locale\")]),t._v(\"：可选\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Array | Object} values\")]),t._v(\"：可选\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"返回值：\")]),s(\"code\",[t._v(\"TranslateResult\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"div\",{staticClass:\"danger custom-block\"},[e(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"提示\")]),this._v(\" \"),e(\"p\",[this._v(\"注意，你需要在生命周期方法中保证上下文是组件实例 (例如在 \"),e(\"code\",[this._v(\"data\")]),this._v(\" 选项中，\"),e(\"code\",[this._v(\"const $t = this.$t.bind(this)\")]),this._v(\")。\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"tc\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#tc\"}},[this._v(\"#\")]),this._v(\" $tc\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"参数：\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{Path} key\")]),t._v(\"：必填\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{number} choice\")]),t._v(\"：可选，默认为 1\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Locale} locale\")]),t._v(\"：可选\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{string | Array | Object} values\")]),t._v(\"：可选\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"返回值：\")]),s(\"code\",[t._v(\"TranslateResult\")])])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"p\",[t._v(\"以复数形式将语言环境信息 \"),s(\"code\",[t._v(\"key\")]),t._v(\" 本地化。在本地化时组件的语言环境信息优先于全局语言环境信息。如果未指定组件的语言环境信息，就使用全局语言环境信息进行本地化。如果你指定了 \"),s(\"code\",[t._v(\"locale\")]),t._v(\" 参数，则使用 \"),s(\"code\",[t._v(\"locale\")]),t._v(\" 提供的语言环境进行本地化。如果将 \"),s(\"code\",[t._v(\"values\")]),t._v(\" 指定为字符串，则该字符串会作为语言环境信息进行本地化。如果将 \"),s(\"code\",[t._v(\"values\")]),t._v(\" 指定为 Array 或 Object，则格式必须为 \"),s(\"code\",[t._v(\"$t\")]),t._v(\" 的 \"),s(\"code\",[t._v(\"values\")]),t._v(\"。\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"div\",{staticClass:\"danger custom-block\"},[e(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"提示\")]),this._v(\" \"),e(\"p\",[this._v(\"注意，你需要在生命周期方法中保证上下文是组件实例 (例如在 \"),e(\"code\",[this._v(\"data\")]),this._v(\" 选项中，\"),e(\"code\",[this._v(\"const $tc = this.$tc.bind(this)\")]),this._v(\")\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"te\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#te\"}},[this._v(\"#\")]),this._v(\" $te\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"参数：\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{Path} key\")]),t._v(\"：必填\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Locale} locale\")]),t._v(\"：可选\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"返回值：\")]),s(\"code\",[t._v(\"boolean\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"检查 key 是否存在。在 Vue 实例中，如果未指定组件语言环境信息，则使用全局语言环境信息。如果指定了 \"),e(\"code\",[this._v(\"locale\")]),this._v(\"，则使用 \"),e(\"code\",[this._v(\"locale\")]),this._v(\" 的语言环境。\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"div\",{staticClass:\"danger custom-block\"},[e(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"提示\")]),this._v(\" \"),e(\"p\",[this._v(\"注意，你需要在生命周期方法中保证上下文是组件实例 (例如在 \"),e(\"code\",[this._v(\"data\")]),this._v(\" 选项中，\"),e(\"code\",[this._v(\"const $te = this.$te.bind(this)\")]),this._v(\")。\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"d\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#d\"}},[this._v(\"#\")]),this._v(\" $d\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.0 新增\")])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"参数：\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{number | Date} value\")]),t._v(\"：必填\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Path | Object} key\")]),t._v(\"：可选\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Locale | Object} locale\")]),t._v(\"：可选\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"返回值：\")]),s(\"code\",[t._v(\"DateTimeFormatResult\")])])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"p\",[t._v(\"将日期时间 \"),s(\"code\",[t._v(\"value\")]),t._v(\" 以 \"),s(\"code\",[t._v(\"key\")]),t._v(\" 的格式本地化。日期时间格式 \"),s(\"code\",[t._v(\"key\")]),t._v(\" 需要注册到 \"),s(\"code\",[t._v(\"VueI18n\")]),t._v(\" 类的 \"),s(\"code\",[t._v(\"dateTimeFormats\")]),t._v(\" 选项，并依赖于 \"),s(\"code\",[t._v(\"VueI18n\")]),t._v(\" 构造函数的 \"),s(\"code\",[t._v(\"locale\")]),t._v(\" 选项。如果要指定 \"),s(\"code\",[t._v(\"locale\")]),t._v(\" 参数，它将优先于 \"),s(\"code\",[t._v(\"VueI18n\")]),t._v(\" 构造函数的 \"),s(\"code\",[t._v(\"locale\")]),t._v(\" 选项。\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"p\",[t._v(\"如果 \"),s(\"code\",[t._v(\"dateTimeFormats\")]),t._v(\" 选项中不存在日期时间格式的 \"),s(\"code\",[t._v(\"key\")]),t._v(\"，则根据 \"),s(\"code\",[t._v(\"VueI18n\")]),t._v(\" 构造函数的 \"),s(\"code\",[t._v(\"fallbackLocale\")]),t._v(\" 选项回退。\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"div\",{staticClass:\"danger custom-block\"},[e(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"提示\")]),this._v(\" \"),e(\"p\",[this._v(\"注意，你需要在生命周期方法中保证上下文是组件实例 (例如在 \"),e(\"code\",[this._v(\"data\")]),this._v(\" 选项中，\"),e(\"code\",[this._v(\"const $n = this.$n.bind(this)\")]),this._v(\")。\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"n\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#n\"}},[this._v(\"#\")]),this._v(\" $n\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.0 新增\")])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"参数：\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{number} value\")]),t._v(\"：必填\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Path | Object} key\")]),t._v(\"：可选\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Locale} locale\")]),t._v(\"：可选\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"返回值：\")]),s(\"code\",[t._v(\"NumberFormatResult\")])])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"p\",[t._v(\"将数字 \"),s(\"code\",[t._v(\"value\")]),t._v(\" 以 \"),s(\"code\",[t._v(\"key\")]),t._v(\" 的格式本地化。数字格式 \"),s(\"code\",[t._v(\"key\")]),t._v(\" 需要注册到 \"),s(\"code\",[t._v(\"VueI18n\")]),t._v(\" 类的 \"),s(\"code\",[t._v(\"numberFormats\")]),t._v(\" 选项，并依赖于 \"),s(\"code\",[t._v(\"VueI18n\")]),t._v(\" 构造函数的 \"),s(\"code\",[t._v(\"locale\")]),t._v(\" 选项。如果要指定 \"),s(\"code\",[t._v(\"locale\")]),t._v(\" 参数，它将优先于 \"),s(\"code\",[t._v(\"VueI18n\")]),t._v(\" 构造函数的 \"),s(\"code\",[t._v(\"locale\")]),t._v(\" 选项。\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"p\",[t._v(\"如果 \"),s(\"code\",[t._v(\"numberFormats\")]),t._v(\" 选项中不存在用数字格式 \"),s(\"code\",[t._v(\"key\")]),t._v(\"，则根据 \"),s(\"code\",[t._v(\"VueI18n\")]),t._v(\" 构造函数的 \"),s(\"code\",[t._v(\"fallbackLocale\")]),t._v(\" 选项回退。\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"如果第二个 \"),e(\"code\",[this._v(\"key\")]),this._v(\" 参数指定为对象，则它应具有以下属性：\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"key {Path}\")]),t._v(\"：可选，数字格式\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"locale {Locale}\")]),t._v(\"：可选，语言环境\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"style {string}\")]),t._v(\"：可选，数字格式选项\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"currency {string}\")]),t._v(\"：可选，数字格式选项\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"currencyDisplay {string}\")]),t._v(\"：可选，数字格式选项\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"useGrouping {string}\")]),t._v(\"：可选，数字格式选项\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"minimumIntegerDigits {string}\")]),t._v(\"：可选，数字格式选项\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"minimumFractionDigits {string}\")]),t._v(\"：可选，数字格式选项\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"maximumFractionDigits {string}\")]),t._v(\"：可选，数字格式选项\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"minimumSignificantDigits {string}\")]),t._v(\"：可选，数字格式选项\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"maximumSignificantDigits {string}\")]),t._v(\"：可选，数字格式选项\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"localeMatcher {string}\")]),t._v(\"：可选，数字格式选项\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"formatMatcher {string}\")]),t._v(\"：可选，数字格式选项\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"任何指定数字的格式选项将优先于 \"),e(\"code\",[this._v(\"VueI18n\")]),this._v(\" 构造函数的 \"),e(\"code\",[this._v(\"numberFormats\")]),this._v(\"。\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"div\",{staticClass:\"danger custom-block\"},[e(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"提示\")]),this._v(\" \"),e(\"p\",[this._v(\"注意，你需要在生命周期方法中保证上下文是组件实例 (例如在 \"),e(\"code\",[this._v(\"data\")]),this._v(\" 选项中，\"),e(\"code\",[this._v(\"const $d = this.$d.bind(this)\")]),this._v(\")。\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"注入属性\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#注入属性\"}},[this._v(\"#\")]),this._v(\" 注入属性\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"i18n-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#i18n-2\"}},[this._v(\"#\")]),this._v(\" $i18n\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"类型：\")]),e(\"code\",[this._v(\"I18n\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"只读\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"若已经指定了 \"),e(\"code\",[this._v(\"VueI18n\")]),this._v(\" 实例，则将其返回。\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"如果在组件选项中指定了 \"),e(\"code\",[this._v(\"i18n\")]),this._v(\" 选项，则可以在组件上获得 \"),e(\"code\",[this._v(\"VueI18n\")]),this._v(\" 实例，否则，你将获得 \"),e(\"code\",[this._v(\"VueI18n\")]),this._v(\" 的根实例。\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"vuei18n-类\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#vuei18n-类\"}},[this._v(\"#\")]),this._v(\" \"),e(\"code\",[this._v(\"VueI18n\")]),this._v(\" 类\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"静态属性\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#静态属性\"}},[this._v(\"#\")]),this._v(\" 静态属性\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"版本\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#版本\"}},[this._v(\"#\")]),this._v(\" 版本\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"strong\",[this._v(\"类型：\")]),e(\"code\",[this._v(\"string\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"可用性\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#可用性\"}},[this._v(\"#\")]),this._v(\" 可用性\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.0 新增\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"strong\",[this._v(\"类型：\")]),e(\"code\",[this._v(\"IntlAvailability\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"code\",[this._v(\"{boolean} dateTimeFormat\")]),this._v(\"：环境敏感的时间格式\")])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"code\",[this._v(\"{boolean} numberFormat\")]),this._v(\"：环境敏感的数字格式\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"构造函数选项\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#构造函数选项\"}},[this._v(\"#\")]),this._v(\" 构造函数选项\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"locale\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#locale\"}},[this._v(\"#\")]),this._v(\" locale\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"类型：\")]),e(\"code\",[this._v(\"Locale\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"默认值：\")]),e(\"code\",[this._v(\"'en-US'\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"fallbacklocale\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#fallbacklocale\"}},[this._v(\"#\")]),this._v(\" fallbackLocale\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"类型：\")]),e(\"code\",[this._v(\"Locale\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"默认值：\")]),e(\"code\",[this._v(\"'en-US'\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"messages\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#messages\"}},[this._v(\"#\")]),this._v(\" messages\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"类型：\")]),e(\"code\",[this._v(\"LocaleMessages\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"默认值：\")]),e(\"code\",[this._v(\"{}\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"datetimeformats\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#datetimeformats\"}},[this._v(\"#\")]),this._v(\" dateTimeFormats\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.0 新增\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"类型：\")]),e(\"code\",[this._v(\"DateTimeFormats\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"默认值：\")]),e(\"code\",[this._v(\"{}\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"numberformats\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#numberformats\"}},[this._v(\"#\")]),this._v(\" numberFormats\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.0 新增\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"类型：\")]),e(\"code\",[this._v(\"NumberFormats\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"默认值：\")]),e(\"code\",[this._v(\"{}\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"availablelocales\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#availablelocales\"}},[this._v(\"#\")]),this._v(\" availableLocales\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 8.9.0 新增\")])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"类型：\")]),s(\"code\",[t._v(\"Locale[]\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"默认值：\")]),s(\"code\",[t._v(\"[]\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"示例：\")]),s(\"code\",[t._v('[\"en\", \"ja\"]')])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"以词法顺序排列的 \"),e(\"code\",[this._v(\"messages\")]),this._v(\" 中的可用语言环境列表。\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"formatter\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#formatter\"}},[this._v(\"#\")]),this._v(\" formatter\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"类型：\")]),e(\"code\",[this._v(\"Formatter\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"默认值：\")]),this._v(\" Built in formatter\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"使用 \"),e(\"code\",[this._v(\"Formatter\")]),this._v(\" 接口实现的格式化。\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"missing\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#missing\"}},[this._v(\"#\")]),this._v(\" missing\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"类型：\")]),e(\"code\",[this._v(\"MissingHandler\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"默认值：\")]),e(\"code\",[this._v(\"null\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"fallbackroot\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#fallbackroot\"}},[this._v(\"#\")]),this._v(\" fallbackRoot\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"类型：\")]),e(\"code\",[this._v(\"Boolean\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"默认值：\")]),e(\"code\",[this._v(\"true\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"如果为 \"),e(\"code\",[this._v(\"false\")]),this._v(\"，则会发出警告，并返回 key。\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"sync\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#sync\"}},[this._v(\"#\")]),this._v(\" sync\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"类型：\")]),e(\"code\",[this._v(\"Boolean\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"默认值：\")]),e(\"code\",[this._v(\"true\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"如果为 \"),e(\"code\",[this._v(\"false\")]),this._v(\"，则无论根级别语言环境如何，都要为每个组件语言环境进行本地化。\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"silenttranslationwarn\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#silenttranslationwarn\"}},[this._v(\"#\")]),this._v(\" silentTranslationWarn\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"6.1 新增\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"类型：\")]),e(\"code\",[this._v(\"Boolean\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"默认值：\")]),e(\"code\",[this._v(\"false\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"如果为 \"),e(\"code\",[this._v(\"true\")]),this._v(\"，则禁止本地化失败警告。\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"silentfallbackwarn\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#silentfallbackwarn\"}},[this._v(\"#\")]),this._v(\" silentFallbackWarn\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 8.8 新增\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"strong\",[this._v(\"类型：\")]),e(\"code\",[this._v(\"Boolean\")])]),this._v(\" \"),e(\"li\",[e(\"strong\",[this._v(\"默认值：\")]),e(\"code\",[this._v(\"false\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"是否在回退到 \"),e(\"code\",[this._v(\"fallbackLocale\")]),this._v(\" 或 \"),e(\"code\",[this._v(\"root\")]),this._v(\" 时取消警告。\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"如果为 \"),e(\"code\",[this._v(\"true\")]),this._v(\"，则仅在根本没有可用的转换时生成警告，而不是在回退时。\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"preservedirectivecontent\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#preservedirectivecontent\"}},[this._v(\"#\")]),this._v(\" preserveDirectiveContent\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"8.7 新增\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"类型：\")]),e(\"code\",[this._v(\"Boolean\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"默认值：\")]),e(\"code\",[this._v(\"false\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"在指令解除绑定后，\"),e(\"code\",[this._v(\"v-t\")]),this._v(\" 指令的元素是否应该保留 \"),e(\"code\",[this._v(\"textContent\")]),this._v(\"。\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"properties\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#properties\"}},[this._v(\"#\")]),this._v(\" Properties\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"locale-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#locale-2\"}},[this._v(\"#\")]),this._v(\" locale\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"类型：\")]),e(\"code\",[this._v(\"Locale\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"可读/可写\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"fallbacklocale-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#fallbacklocale-2\"}},[this._v(\"#\")]),this._v(\" fallbackLocale\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"类型：\")]),e(\"code\",[this._v(\"Locale\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"可读/可写\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"messages-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#messages-2\"}},[this._v(\"#\")]),this._v(\" messages\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"类型：\")]),e(\"code\",[this._v(\"LocaleMessages\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"只读\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"datetimeformats-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#datetimeformats-2\"}},[this._v(\"#\")]),this._v(\" dateTimeFormats\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.0 新增\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"类型：\")]),e(\"code\",[this._v(\"DateTimeFormats\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"只读\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"numberformats-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#numberformats-2\"}},[this._v(\"#\")]),this._v(\" numberFormats\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.0 新增\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"类型：\")]),e(\"code\",[this._v(\"NumberFormats\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"只读\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"missing-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#missing-2\"}},[this._v(\"#\")]),this._v(\" missing\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"类型：\")]),e(\"code\",[this._v(\"MissingHandler\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"可读/可写\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"formatter-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#formatter-2\"}},[this._v(\"#\")]),this._v(\" formatter\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"类型：\")]),e(\"code\",[this._v(\"Formatter\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"可读/可写\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"使用 \"),e(\"code\",[this._v(\"Formatter\")]),this._v(\" 接口实现的格式化。\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"silenttranslationwarn-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#silenttranslationwarn-2\"}},[this._v(\"#\")]),this._v(\" silentTranslationWarn\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"6.1 新增\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"类型：\")]),e(\"code\",[this._v(\"boolean\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"可读/可写\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"preservedirectivecontent-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#preservedirectivecontent-2\"}},[this._v(\"#\")]),this._v(\" preserveDirectiveContent\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"8.7 新增\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"类型：\")]),e(\"code\",[this._v(\"boolean\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"可读/可写\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"在指令解除绑定后，\"),e(\"code\",[this._v(\"v-t\")]),this._v(\" 指令的元素是否应该保留 \"),e(\"code\",[this._v(\"textContent\")]),this._v(\"。\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"方法\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#方法\"}},[this._v(\"#\")]),this._v(\" 方法\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"getchoiceindex\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#getchoiceindex\"}},[this._v(\"#\")]),this._v(\" getChoiceIndex\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"参数：\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{number} choice\")])]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{number} choicesLength\")])])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"返回值：\")]),s(\"code\",[t._v(\"finalChoice {number}\")])])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"div\",{staticClass:\"language-js extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"prototype\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"getChoiceIndex \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"/* 自定义实现 */\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"getlocalemessage-locale\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#getlocalemessage-locale\"}},[this._v(\"#\")]),this._v(\" getLocaleMessage( locale )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"参数：\")])]),this._v(\" \"),e(\"ul\",[e(\"li\",[e(\"code\",[this._v(\"{Locale} locale\")])])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"返回值：\")]),e(\"code\",[this._v(\"LocaleMessageObject\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"获取语言环境的 \"),e(\"code\",[this._v(\"locale\")]),this._v(\" 信息。\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"setlocalemessage-locale-message\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#setlocalemessage-locale-message\"}},[this._v(\"#\")]),this._v(\" setLocaleMessage( locale, message )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"参数：\")])]),this._v(\" \"),e(\"ul\",[e(\"li\",[e(\"code\",[this._v(\"{Locale} locale\")])]),this._v(\" \"),e(\"li\",[e(\"code\",[this._v(\"{LocaleMessageObject} message\")])])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"设置语言环境的 \"),e(\"code\",[this._v(\"locale\")]),this._v(\" 信息。\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"mergelocalemessage-locale-message\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#mergelocalemessage-locale-message\"}},[this._v(\"#\")]),this._v(\" mergeLocaleMessage( locale, message )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"6.1 新增\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"参数：\")])]),this._v(\" \"),e(\"ul\",[e(\"li\",[e(\"code\",[this._v(\"{Locale} locale\")])]),this._v(\" \"),e(\"li\",[e(\"code\",[this._v(\"{LocaleMessageObject} message\")])])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"将语言环境信息 \"),e(\"code\",[this._v(\"locale\")]),this._v(\" 合并到已注册的语言环境信息中。\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"t-key-locale-values\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#t-key-locale-values\"}},[this._v(\"#\")]),this._v(\" t( key, [locale], [values] )\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"参数：\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{Path} key\")]),t._v(\"：必填\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Locale} locale\")]),t._v(\"：可选\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Array | Object} values\")]),t._v(\"：可选\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"返回值：\")]),t._v(\"：\"),s(\"code\",[t._v(\"TranslateResult\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"这与 \"),e(\"code\",[this._v(\"$t\")]),this._v(\" 方法返回的 \"),e(\"code\",[this._v(\"Function\")]),this._v(\" 相同。更多细节见\"),e(\"a\",{attrs:{href:\"#t\"}},[this._v(\"$t\")]),this._v(\"。\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"tc-key-choice-values\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#tc-key-choice-values\"}},[this._v(\"#\")]),this._v(\" tc( key, [choice], [values] )\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"参数：\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{Path} key\")]),t._v(\"：必填\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{number} choice\")]),t._v(\"：可选，默认为 1\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{string | Array | Object} values\")]),t._v(\"：可选\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"返回值：\")]),s(\"code\",[t._v(\"TranslateResult\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"这与 \"),e(\"code\",[this._v(\"$tc\")]),this._v(\" 方法返回的 \"),e(\"code\",[this._v(\"Function\")]),this._v(\" 相同。更多细节见\"),e(\"a\",{attrs:{href:\"#tc\"}},[this._v(\"$tc\")]),this._v(\"。\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"te-key-locale\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#te-key-locale\"}},[this._v(\"#\")]),this._v(\" te( key, [locale] )\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"参数：\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{string} key\")]),t._v(\"：必填\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Locale} locale\")]),t._v(\"：可选\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"返回值：\")]),s(\"code\",[t._v(\"boolean\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"检查全局语言环境信息中是否存在键名路径。如果指定了 \"),e(\"code\",[this._v(\"locale\")]),this._v(\"，请检查语言环境信息 \"),e(\"code\",[this._v(\"locale\")]),this._v(\"。\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"getdatetimeformat-locale\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#getdatetimeformat-locale\"}},[this._v(\"#\")]),this._v(\" getDateTimeFormat ( locale )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.0 新增\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"参数：\")])]),this._v(\" \"),e(\"ul\",[e(\"li\",[e(\"code\",[this._v(\"{Locale} locale\")])])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"返回值：\")]),e(\"code\",[this._v(\"DateTimeFormat\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"setdatetimeformat-locale-format\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#setdatetimeformat-locale-format\"}},[this._v(\"#\")]),this._v(\" setDateTimeFormat ( locale, format )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.0 新增\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"参数：\")])]),this._v(\" \"),e(\"ul\",[e(\"li\",[e(\"code\",[this._v(\"{Locale} locale\")])]),this._v(\" \"),e(\"li\",[e(\"code\",[this._v(\"{DateTimeFormat} format\")])])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"mergedatetimeformat-locale-format\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#mergedatetimeformat-locale-format\"}},[this._v(\"#\")]),this._v(\" mergeDateTimeFormat ( locale, format )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.0 新增\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"参数：\")])]),this._v(\" \"),e(\"ul\",[e(\"li\",[e(\"code\",[this._v(\"{Locale} locale\")])]),this._v(\" \"),e(\"li\",[e(\"code\",[this._v(\"{DateTimeFormat} format\")])])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"d-value-key-locale\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#d-value-key-locale\"}},[this._v(\"#\")]),this._v(\" d( value, [key], [locale] )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.0 新增\")])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"参数：\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{number | Date} value\")]),t._v(\"：必填\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Path | Object} key\")]),t._v(\"：可选\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Locale | Object} locale\")]),t._v(\"：可选\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"返回值：\")]),s(\"code\",[t._v(\"DateTimeFormatResult\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"这与 Vue 实例方法的 \"),e(\"code\",[this._v(\"$d\")]),this._v(\" 方法相同。更多细节见\"),e(\"a\",{attrs:{href:\"#d\"}},[this._v(\"$d\")]),this._v(\"。\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"getnumberformat-locale\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#getnumberformat-locale\"}},[this._v(\"#\")]),this._v(\" getNumberFormat ( locale )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.0 新增\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"参数：\")])]),this._v(\" \"),e(\"ul\",[e(\"li\",[e(\"code\",[this._v(\"{Locale} locale\")])])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"返回值：\")]),e(\"code\",[this._v(\"NumberFormat\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"setnumberformat-locale-format\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#setnumberformat-locale-format\"}},[this._v(\"#\")]),this._v(\" setNumberFormat ( locale, format )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.0 新增\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"参数：\")])]),this._v(\" \"),e(\"ul\",[e(\"li\",[e(\"code\",[this._v(\"{Locale} locale\")])]),this._v(\" \"),e(\"li\",[e(\"code\",[this._v(\"{NumberFormat} format\")])])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"mergenumberformat-locale-format\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#mergenumberformat-locale-format\"}},[this._v(\"#\")]),this._v(\" mergeNumberFormat ( locale, format )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.0 新增\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"参数：\")])]),this._v(\" \"),e(\"ul\",[e(\"li\",[e(\"code\",[this._v(\"{Locale} locale\")])]),this._v(\" \"),e(\"li\",[e(\"code\",[this._v(\"{NumberFormat} format\")])])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"n-value-key-locale\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#n-value-key-locale\"}},[this._v(\"#\")]),this._v(\" n( value, [key], [locale] )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.0 新增\")])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"参数：\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{number} value\")]),t._v(\"：必填\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Path | Object} key\")]),t._v(\"：可选\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Locale} locale\")]),t._v(\"：可选\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"返回值：\")]),s(\"code\",[t._v(\"NumberFormatResult\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"这与 Vue 实例方法的 \"),e(\"code\",[this._v(\"$n\")]),this._v(\" 方法相同。更多细节见\"),e(\"a\",{attrs:{href:\"#n\"}},[this._v(\"$n\")]),this._v(\"。\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"指令\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#指令\"}},[this._v(\"#\")]),this._v(\" 指令\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.3 新增\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"v-t\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#v-t\"}},[this._v(\"#\")]),this._v(\" v-t\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"预期：\")]),s(\"code\",[t._v(\"string | Object\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"修饰符：\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\".preserve\")]),t._v(\"：(8.7.0 新增) 当指令解除绑定时，保留元素 \"),s(\"code\",[t._v(\"textContent\")]),t._v(\"。\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"详细：\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"更新使用语言环境信息进行本地化的元素 \"),e(\"code\",[this._v(\"textContent\")]),this._v(\"。你可以使用字符串语法或对象语法。字符串语法可以指定为语言环境信息的关键字路径。如果可以使用对象语法，则需要将以下参数指定为对象键：\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"pre\",[e(\"code\",[this._v(\"* `path`：必填，语言环境信息的关键字\\n* `locale`：可选，语言环境\\n* `args`：可选，用于列表或命名格式\\n\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"a\",{attrs:{href:\"#preservedirectivecontent\"}},[e(\"code\",[this._v(\"preserveDirectiveContent\")]),this._v(\" 选项\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"strong\",[this._v(\"示例：\")])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- 字符串语法：字面量 --\\x3e\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"'\")]),t._v(\"foo.bar'\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- 字符串语法：通过数据或计算属性绑定 --\\x3e\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"msg\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- 对象语法： 字面量 --\\x3e\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"{ path: 'hi', locale: 'ja', args: { name: 'kazupon' } }\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- 对象语法： 通过数据或计算属性绑定 --\\x3e\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"{ path: greeting, args: { name: fullName } }\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- `preserve` 修饰符 --\\x3e\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t.preserve\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"'\")]),t._v(\"foo.bar'\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"组件\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#组件\"}},[this._v(\"#\")]),this._v(\" 组件\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"i18n-函数式组件\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#i18n-函数式组件\"}},[this._v(\"#\")]),this._v(\" i18n 函数式组件\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.0 新增\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"参数：\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#参数：\"}},[this._v(\"#\")]),this._v(\" 参数：\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"path {Path}\")]),t._v(\"：必填，关于语言环境信息的键名路径\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"locale {Locale}\")]),t._v(\"：可选，语言环境\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"tag {string}\")]),t._v(\"：可选，默认值 \"),s(\"code\",[t._v(\"span\")])]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"places {Array | Object}\")]),t._v(\"：可选 (7.2 新增)\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"用法：\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#用法：\"}},[this._v(\"#\")]),this._v(\" 用法：\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"path\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"term\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"tag\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"label\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"for\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"tos\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":href\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"url\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"target\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"_blank\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('tos') }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"div\",{staticClass:\"language-js extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    tos\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Term of Service'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    term\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'I accept xxx {0}.'\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  ja\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    tos\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'利用規約'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    term\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'私は xxx の{0}に同意します。'\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  data\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    url\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'/term'\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),s(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"请参阅：\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#请参阅：\"}},[this._v(\"#\")]),this._v(\" 请参阅：\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"特殊属性\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#特殊属性\"}},[this._v(\"#\")]),this._v(\" 特殊属性\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"地区\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#地区\"}},[this._v(\"#\")]),this._v(\" 地区\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.2 新增\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"预期：-number-string\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#预期：-number-string\"}},[this._v(\"#\")]),this._v(\" 预期：\"),e(\"code\",[this._v(\"{number | string}\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"请参阅：-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#请参阅：-2\"}},[this._v(\"#\")]),this._v(\" 请参阅：\")])}],!1,null,null,null);e.default=r.exports}}]);"
  },
  {
    "path": "docs/assets/js/48.185bface.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[48],{280:function(t,a,s){\"use strict\";s.r(a);var n=s(0),e=Object(n.a)({},(function(){var t=this.$createElement;this._self._c;return this._m(0)}),[function(){var t=this,a=t.$createElement,s=t._self._c||a;return s(\"div\",{staticClass:\"content\"},[s(\"h1\",{attrs:{id:\"基于组件的本地化\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#基于组件的本地化\"}},[t._v(\"#\")]),t._v(\" 基于组件的本地化\")]),t._v(\" \"),s(\"p\",[t._v(\"通常语言环境信息 (例如：\"),s(\"code\",[t._v(\"locale\")]),t._v(\"、\"),s(\"code\",[t._v(\"messages\")]),t._v(\" 等) 会被设置为 \"),s(\"code\",[t._v(\"VueI18n\")]),t._v(\" 实例的构造函数选项，并且该实例会被作为 \"),s(\"code\",[t._v(\"i18n\")]),t._v(\" 选项设置在 Vue 的根实例上。\")]),t._v(\" \"),s(\"p\",[t._v(\"因此你可以全局地在 Vue 的根实例以及任何被组合的组件中使用 \"),s(\"code\",[t._v(\"$t\")]),t._v(\" 或者 \"),s(\"code\",[t._v(\"$tc\")]),t._v(\" 进行翻译。当然面向 Vue 组件的设计，你也可以更方便的分别控制每个组件的语言环境信息。\")]),t._v(\" \"),s(\"p\",[t._v(\"基于组件的本地化示例：\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-js extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 为 Vue 的根实例设置语言环境信息\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ja'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    en\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      message\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        hello\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hello world'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        greeting\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'good morning'\")]),t._v(\"\\n      \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    ja\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      message\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        hello\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'こんにちは、世界'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        greeting\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'おはようございます'\")]),t._v(\"\\n      \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 定义组件\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" Component1 \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  template\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token template-string\"}},[s(\"span\",{pre:!0,attrs:{class:\"token template-punctuation string\"}},[t._v(\"`\")]),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\\n    <div class=\"container\">\\n     <p>Component1 locale messages: {{ $t(\"message.hello\") }}</p>\\n     <p>Fallback global locale messages: {{ $t(\"message.greeting\") }}</p>\\n   </div>')]),s(\"span\",{pre:!0,attrs:{class:\"token template-punctuation string\"}},[t._v(\"`\")])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  i18n\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// `i18n` 选项，为组件设置语言环境信息\")]),t._v(\"\\n    messages\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      en\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" message\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" hello\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hello component1'\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      ja\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" message\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" hello\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'こんにちは、component1'\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  components\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    Component1\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),s(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])]),s(\"p\",[t._v(\"模板：\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v('{{ $t(\"message.hello\") }}'),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"component1\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"component1\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),s(\"p\",[t._v(\"输出如下：\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"こんにちは、世界\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"class\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"container\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Component1 locale messages: こんにちは、component1\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Fallback global locale messages: おはようございます\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),s(\"p\",[t._v(\"在上面的例子中，如果组件没有语言环境信息，它将回退到全局定义的本地化信息。组件使用根实例中设置的语言 (在上面的例子中：\"),s(\"code\",[t._v(\"locale: 'ja'\")]),t._v(\")。\")]),t._v(\" \"),s(\"p\",[t._v(\"注意，在默认情况下，回退到根语言环境会在控制台中生成两个警告：\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-console extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-text\"}},[s(\"code\",[t._v(\"[vue-i18n] Value of key 'message.greeting' is not a string!\\n[vue-i18n] Fall back to translate the keypath 'message.greeting' with root locale.\\n\")])])]),s(\"p\",[t._v(\"为避免以上警告 (同时保留那些完全没有翻译给定关键字的警告) 需初始化 \"),s(\"code\",[t._v(\"VueI18n\")]),t._v(\" 实例时设置 \"),s(\"code\",[t._v(\"silentFallbackWarn：true\")]),t._v(\"。\")]),t._v(\" \"),s(\"p\",[t._v(\"如果你希望在组件语言环境中进行本地化，可以在 \"),s(\"code\",[t._v(\"i18n\")]),t._v(\" 选项中用 \"),s(\"code\",[t._v(\"sync: false\")]),t._v(\" 和 \"),s(\"code\",[t._v(\"locale\")]),t._v(\"。\")]),t._v(\" \"),s(\"h2\",{attrs:{id:\"函数式组件的翻译\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#函数式组件的翻译\"}},[t._v(\"#\")]),t._v(\" 函数式组件的翻译\")]),t._v(\" \"),s(\"p\",[t._v(\"使用函数式组件时，所有数据 (包括 prop、子内容、插槽、父级内容等) 都通过包含属性的 \"),s(\"code\",[t._v(\"context\")]),t._v(\" 传递，并且它无法识别 \"),s(\"code\",[t._v(\"this\")]),t._v(\" 的范围，因此在函数式组件上使用 vue-i18n 时，你必须将 \"),s(\"code\",[t._v(\"$t\")]),t._v(\" 称为 \"),s(\"code\",[t._v(\"parent.$t\")]),t._v(\"，请查看以下示例：\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[t._v(\"...\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"href\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"#\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"target\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"_blank\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"rel\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"noopener noreferrer\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"img\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"src\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":alt\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"parent.$t('message.hello')\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n...\\n\")])])])])}],!1,null,null,null);a.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/49.1570bc72.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[49],{281:function(t,s,a){\"use strict\";a.r(s);var n=a(0),r=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),t._m(1),t._v(\" \"),a(\"p\",[t._v(\"你可以使用你定义的格式来本地化日期时间。\")]),t._v(\" \"),a(\"p\",[t._v(\"日期时间格式如下：\")]),t._v(\" \"),t._m(2),a(\"p\",[t._v(\"如上，你可以定义具名的 (例如：\"),a(\"code\",[t._v(\"short\")]),t._v(\"、\"),a(\"code\",[t._v(\"long\")]),t._v(\" 等) 日期时间格式，并需要使用 \"),a(\"a\",{attrs:{href:\"http://www.ecma-international.org/ecma-402/2.0/#sec-intl-datetimeformat-constructor\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"ECMA-402 Intl.DateTimeFormat 的选项\"),a(\"OutboundLink\")],1),t._v(\"。\")]),t._v(\" \"),t._m(3),t._v(\" \"),t._m(4),a(\"p\",[t._v(\"模板如下：\")]),t._v(\" \"),t._m(5),a(\"p\",[t._v(\"输出如下：\")]),t._v(\" \"),t._m(6)])}),[function(){var t=this.$createElement,s=this._self._c||t;return s(\"h1\",{attrs:{id:\"日期时间本地化\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#日期时间本地化\"}},[this._v(\"#\")]),this._v(\" 日期时间本地化\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"tip custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"支持版本\")]),this._v(\" \"),s(\"p\",[this._v(\"🆕 7.0 新增\")])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" dateTimeFormats \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en-US'\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    short\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      year\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'numeric'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" month\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'short'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" day\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'numeric'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    long\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      year\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'numeric'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" month\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'short'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" day\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'numeric'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      weekday\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'short'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" hour\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'numeric'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" minute\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'numeric'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ja-JP'\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    short\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      year\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'numeric'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" month\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'short'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" day\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'numeric'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    long\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      year\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'numeric'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" month\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'short'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" day\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'numeric'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      weekday\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'short'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" hour\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'numeric'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" minute\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'numeric'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" hour12\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token boolean\"}},[t._v(\"true\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"之后就像语言环境信息一样，你需要指定 \"),s(\"code\",[this._v(\"VueI18n\")]),this._v(\" 构造函数的 \"),s(\"code\",[this._v(\"dateTimeFormats\")]),this._v(\" 选项：\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  dateTimeFormats\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $d(new Date(), 'short') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $d(new Date(), 'long', 'ja-JP') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Apr 19, 2017\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"2017年4月19日(水) 午前2:19\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])}],!1,null,null,null);s.default=r.exports}}]);"
  },
  {
    "path": "docs/assets/js/5.0b14e886.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{237:function(t,e,s){\"use strict\";s.r(e);var a=s(0),n=Object(a.a)({},(function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),t._m(1),t._v(\" \"),t._m(2),t._v(\" \"),t._m(3),t._v(\" \"),t._m(4),t._v(\" \"),s(\"p\",[t._v(\"Component based localization option.\")]),t._v(\" \"),t._m(5),t._v(\" \"),t._m(6),t._v(\" \"),t._m(7),t._v(\" \"),t._m(8),t._v(\" \"),s(\"p\",[t._v(\"Localize the locale message of \"),s(\"code\",[t._v(\"key\")]),t._v(\". Localize in preferentially component locale messages than global locale messages. If not specified component locale messages, localize with global locale messages. If you specified \"),s(\"code\",[t._v(\"locale\")]),t._v(\", localize the locale messages of \"),s(\"code\",[t._v(\"locale\")]),t._v(\". If you specified \"),s(\"code\",[t._v(\"key\")]),t._v(\" of list / named formatting local messages, you must specify \"),s(\"code\",[t._v(\"values\")]),t._v(\" too. For \"),s(\"code\",[t._v(\"values\")]),t._v(\" more details see \"),s(\"router-link\",{attrs:{to:\"./../guide/formatting.html\"}},[t._v(\"Formatting\")]),t._v(\".\")],1),t._v(\" \"),t._m(9),t._v(\" \"),t._m(10),t._v(\" \"),t._m(11),t._v(\" \"),t._m(12),t._v(\" \"),t._m(13),t._v(\" \"),t._m(14),t._v(\" \"),t._m(15),t._v(\" \"),t._m(16),t._v(\" \"),t._m(17),t._v(\" \"),t._m(18),t._v(\" \"),t._m(19),t._v(\" \"),t._m(20),t._v(\" \"),t._m(21),t._v(\" \"),t._m(22),t._v(\" \"),t._m(23),t._v(\" \"),t._m(24),t._v(\" \"),t._m(25),t._v(\" \"),t._m(26),t._v(\" \"),t._m(27),t._v(\" \"),t._m(28),t._v(\" \"),t._m(29),t._v(\" \"),t._m(30),t._v(\" \"),t._m(31),t._v(\" \"),t._m(32),t._v(\" \"),t._m(33),t._v(\" \"),t._m(34),t._v(\" \"),t._m(35),t._v(\" \"),t._m(36),t._v(\" \"),t._m(37),t._v(\" \"),t._m(38),t._v(\" \"),s(\"p\",[s(\"code\",[t._v(\"VueI18n\")]),t._v(\" class implement \"),s(\"code\",[t._v(\"I18n\")]),t._v(\" interface of \"),s(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"flowtype definitions\"),s(\"OutboundLink\")],1)]),t._v(\" \"),t._m(39),t._v(\" \"),t._m(40),t._v(\" \"),t._m(41),t._v(\" \"),s(\"p\",[t._v(\"vue-i18n version.\")]),t._v(\" \"),t._m(42),t._v(\" \"),t._m(43),t._v(\" \"),t._m(44),t._v(\" \"),s(\"p\",[t._v(\"Whether the following internationalization features are available:\")]),t._v(\" \"),t._m(45),t._v(\" \"),s(\"p\",[t._v(\"The above internationalization features are depends on \"),s(\"a\",{attrs:{href:\"http://kangax.github.io/compat-table/esintl/\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"the browser environments\"),s(\"OutboundLink\")],1),t._v(\", due to implement with ECMAScript Internationalization API (ECMA-402).\")]),t._v(\" \"),t._m(46),t._v(\" \"),s(\"p\",[t._v(\"You can specify the below some options of \"),s(\"code\",[t._v(\"I18nOptions\")]),t._v(\" constructor options of \"),s(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"flowtype definitions\"),s(\"OutboundLink\")],1)]),t._v(\" \"),t._m(47),t._v(\" \"),t._m(48),t._v(\" \"),s(\"p\",[t._v(\"The locale of localization. If the locale contains a territory and a dialect, this locale contains an implicit fallback.\")]),t._v(\" \"),t._m(49),t._v(\" \"),t._m(50),t._v(\" \"),s(\"p\",[t._v(\"The locale of fallback localization. For more complex fallback definitions see \"),s(\"router-link\",{attrs:{to:\"./../guide/fallback.html\"}},[t._v(\"fallback\")]),t._v(\".\")],1),t._v(\" \"),t._m(51),t._v(\" \"),t._m(52),t._v(\" \"),s(\"p\",[t._v(\"The locale messages of localization.\")]),t._v(\" \"),t._m(53),t._v(\" \"),t._m(54),t._v(\" \"),t._m(55),t._v(\" \"),s(\"p\",[t._v(\"The datetime formats of localization.\")]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"strong\",[t._v(\"See also:\")]),t._v(\" \"),s(\"code\",[t._v(\"DateTimeFormats\")]),t._v(\" type of \"),s(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"flowtype definitions\"),s(\"OutboundLink\")],1)])]),t._v(\" \"),t._m(56),t._v(\" \"),t._m(57),t._v(\" \"),t._m(58),t._v(\" \"),s(\"p\",[t._v(\"The number formats of localization.\")]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"strong\",[t._v(\"See also:\")]),t._v(\" \"),s(\"code\",[t._v(\"NumberFormats\")]),t._v(\" type of \"),s(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"flowtype definitions\"),s(\"OutboundLink\")],1)])]),t._v(\" \"),t._m(59),t._v(\" \"),t._m(60),t._v(\" \"),t._m(61),t._v(\" \"),t._m(62),t._v(\" \"),t._m(63),t._v(\" \"),t._m(64),t._v(\" \"),t._m(65),t._v(\" \"),t._m(66),t._v(\" \"),t._m(67),t._v(\" \"),t._m(68),t._v(\" \"),s(\"p\",[t._v(\"Modifiers functions for linked messages\")]),t._v(\" \"),t._m(69),t._v(\" \"),t._m(70),t._v(\" \"),s(\"p\",[t._v(\"A handler for localization missing. The handler gets called with the localization target locale, localization path key, the Vue instance and values.\")]),t._v(\" \"),s(\"p\",[t._v(\"If missing handler is assigned, and occurred localization missing, it's not warned.\")]),t._v(\" \"),t._m(71),t._v(\" \"),t._m(72),t._v(\" \"),s(\"p\",[t._v(\"In the component localization, whether to fall back to root level (global) localization when localization fails.\")]),t._v(\" \"),t._m(73),t._v(\" \"),t._m(74),t._v(\" \"),t._m(75),t._v(\" \"),s(\"p\",[t._v(\"Whether synchronize the root level locale to the component localization locale.\")]),t._v(\" \"),t._m(76),t._v(\" \"),t._m(77),t._v(\" \"),t._m(78),t._v(\" \"),t._m(79),t._v(\" \"),s(\"p\",[t._v(\"Whether suppress warnings outputted when localization fails.\")]),t._v(\" \"),t._m(80),t._v(\" \"),t._m(81),t._v(\" \"),t._m(82),t._v(\" \"),t._m(83),t._v(\" \"),t._m(84),t._v(\" \"),t._m(85),t._v(\" \"),t._m(86),t._v(\" \"),t._m(87),t._v(\" \"),t._m(88),t._v(\" \"),t._m(89),t._v(\" \"),t._m(90),t._v(\" \"),t._m(91),t._v(\" \"),t._m(92),t._v(\" \"),t._m(93),t._v(\" \"),t._m(94),t._v(\" \"),t._m(95),t._v(\" \"),t._m(96),t._v(\" \"),t._m(97),t._v(\" \"),s(\"p\",[t._v(\"The shared locale messages of localization for components. More detail see \"),s(\"router-link\",{attrs:{to:\"./../guide/component.html#shared-locale-messages-for-components\"}},[t._v(\"Component based localization\")]),t._v(\".\")],1),t._v(\" \"),t._m(98),t._v(\" \"),t._m(99),t._v(\" \"),t._m(100),t._v(\" \"),t._m(101),t._v(\" \"),s(\"p\",[t._v(\"This handler is useful if you want to filter on translated text such as space trimming.\")]),t._v(\" \"),t._m(102),t._v(\" \"),t._m(103),t._v(\" \"),t._m(104),t._v(\" \"),s(\"p\",[t._v(\"The locale of localization. If the locale contains a territory and a dialect, this locale contains an implicit fallback.\")]),t._v(\" \"),t._m(105),t._v(\" \"),t._m(106),t._v(\" \"),s(\"p\",[t._v(\"The locale of fallback localization. For more complex fallback definitions see \"),s(\"router-link\",{attrs:{to:\"./../guide/fallback.html\"}},[t._v(\"fallback\")]),t._v(\".\")],1),t._v(\" \"),t._m(107),t._v(\" \"),t._m(108),t._v(\" \"),s(\"p\",[t._v(\"The locale messages of localization.\")]),t._v(\" \"),t._m(109),t._v(\" \"),t._m(110),t._v(\" \"),t._m(111),t._v(\" \"),s(\"p\",[t._v(\"The datetime formats of localization.\")]),t._v(\" \"),t._m(112),t._v(\" \"),t._m(113),t._v(\" \"),t._m(114),t._v(\" \"),s(\"p\",[t._v(\"The number formats of localization.\")]),t._v(\" \"),t._m(115),t._v(\" \"),t._m(116),t._v(\" \"),s(\"p\",[t._v(\"A handler for localization missing.\")]),t._v(\" \"),t._m(117),t._v(\" \"),t._m(118),t._v(\" \"),t._m(119),t._v(\" \"),t._m(120),t._v(\" \"),t._m(121),t._v(\" \"),t._m(122),t._v(\" \"),s(\"p\",[t._v(\"Whether suppress warnings outputted when localization fails.\")]),t._v(\" \"),t._m(123),t._v(\" \"),t._m(124),t._v(\" \"),t._m(125),t._v(\" \"),s(\"p\",[t._v(\"Whether suppress fallback warnings when localization fails.\")]),t._v(\" \"),t._m(126),t._v(\" \"),t._m(127),t._v(\" \"),t._m(128),t._v(\" \"),t._m(129),t._v(\" \"),t._m(130),t._v(\" \"),t._m(131),t._v(\" \"),t._m(132),t._v(\" \"),s(\"p\",[t._v(\"Whether to allow the use locale messages of HTML formatting.\")]),t._v(\" \"),t._m(133),t._v(\" \"),t._m(134),t._v(\" \"),t._m(135),t._v(\" \"),t._m(136),t._v(\" \"),t._m(137),t._v(\" \"),t._m(138),t._v(\" \"),s(\"p\",[t._v(\"A handler for post processing of translation.\")]),t._v(\" \"),t._m(139),t._v(\" \"),t._m(140),t._v(\" \"),t._m(141),t._v(\" \"),s(\"p\",[t._v(\"Get pluralization index for current pluralizing number and a given amount of choices. Can be overridden through prototype mutation:\")]),t._v(\" \"),t._m(142),t._m(143),t._v(\" \"),t._m(144),t._v(\" \"),s(\"p\",[t._v(\"Get the locale message of locale.\")]),t._v(\" \"),t._m(145),t._v(\" \"),t._m(146),t._v(\" \"),s(\"p\",[t._v(\"Set the locale message of locale.\")]),t._v(\" \"),t._m(147),t._v(\" \"),t._m(148),t._v(\" \"),t._m(149),t._v(\" \"),t._m(150),t._v(\" \"),s(\"p\",[t._v(\"Merge the registered locale messages with the locale message of locale.\")]),t._v(\" \"),t._m(151),t._v(\" \"),t._m(152),t._v(\" \"),t._m(153),t._v(\" \"),t._m(154),t._v(\" \"),t._m(155),t._v(\" \"),t._m(156),t._v(\" \"),t._m(157),t._v(\" \"),t._m(158),t._v(\" \"),t._m(159),t._v(\" \"),t._m(160),t._v(\" \"),t._m(161),t._v(\" \"),t._m(162),t._v(\" \"),t._m(163),t._v(\" \"),s(\"p\",[t._v(\"Get the datetime format of locale.\")]),t._v(\" \"),t._m(164),t._v(\" \"),t._m(165),t._v(\" \"),t._m(166),t._v(\" \"),s(\"p\",[t._v(\"Set the datetime format of locale.\")]),t._v(\" \"),t._m(167),t._v(\" \"),t._m(168),t._v(\" \"),t._m(169),t._v(\" \"),s(\"p\",[t._v(\"Merge the registered datetime formats with the datetime format of locale.\")]),t._v(\" \"),t._m(170),t._v(\" \"),t._m(171),t._v(\" \"),t._m(172),t._v(\" \"),t._m(173),t._v(\" \"),t._m(174),t._v(\" \"),t._m(175),t._v(\" \"),t._m(176),t._v(\" \"),s(\"p\",[t._v(\"Get the number format of locale.\")]),t._v(\" \"),t._m(177),t._v(\" \"),t._m(178),t._v(\" \"),t._m(179),t._v(\" \"),s(\"p\",[t._v(\"Set the number format of locale.\")]),t._v(\" \"),t._m(180),t._v(\" \"),t._m(181),t._v(\" \"),t._m(182),t._v(\" \"),s(\"p\",[t._v(\"Merge the registered number formats with the number format of locale.\")]),t._v(\" \"),t._m(183),t._v(\" \"),t._m(184),t._v(\" \"),t._m(185),t._v(\" \"),t._m(186),t._v(\" \"),t._m(187),t._v(\" \"),t._m(188),t._v(\" \"),t._m(189),t._v(\" \"),t._m(190),t._v(\" \"),t._m(191),t._v(\" \"),t._m(192),t._v(\" \"),s(\"div\",{staticClass:\"tip custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[t._v(\"NOTE\")]),t._v(\" \"),s(\"p\",[t._v(\"The element \"),s(\"code\",[t._v(\"textContent\")]),t._v(\" will be cleared by default when \"),s(\"code\",[t._v(\"v-t\")]),t._v(\" directive is unbinded. This might be undesirable situation when used inside \"),s(\"a\",{attrs:{href:\"https://vuejs.org/v2/guide/transitions.html\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"transitions\"),s(\"OutboundLink\")],1),t._v(\". To preserve \"),s(\"code\",[t._v(\"textContent\")]),t._v(\" data after directive unbind use \"),s(\"code\",[t._v(\".preserve\")]),t._v(\" modifier or global \"),t._m(193),t._v(\".\")])]),t._v(\" \"),t._m(194),t._v(\" \"),t._m(195),s(\"ul\",[s(\"li\",[s(\"strong\",[t._v(\"See also:\")]),t._v(\" \"),s(\"router-link\",{attrs:{to:\"./../guide/directive.html\"}},[t._v(\"Custom directive localization\")])],1)]),t._v(\" \"),t._m(196),t._v(\" \"),t._m(197),t._v(\" \"),t._m(198),t._v(\" \"),t._m(199),t._v(\" \"),t._m(200),t._v(\" \"),t._m(201),t._v(\" \"),t._m(202),t._v(\" \"),t._m(203),t._m(204),t._m(205),t._v(\" \"),s(\"p\",[s(\"router-link\",{attrs:{to:\"./../guide/interpolation.html\"}},[t._v(\"Component interpolation\")])],1),t._v(\" \"),t._m(206),t._v(\" \"),t._m(207),t._v(\" \"),t._m(208),t._v(\" \"),t._m(209),t._v(\" \"),t._m(210),t._v(\" \"),t._m(211),t._m(212),t._m(213),t._v(\" \"),s(\"p\",[s(\"code\",[t._v(\"<i18n-n>\")]),t._v(\" functional component can accept a number of named scoped slots. List of supported slot names is based on \"),s(\"a\",{attrs:{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/formatToParts\",target:\"_blank\",rel:\"noopener noreferrer\"}},[s(\"code\",[t._v(\"Intl.NumberFormat.formatToParts()\")]),t._v(\" output types\"),s(\"OutboundLink\")],1),t._v(\":\")]),t._v(\" \"),t._m(214),t._v(\" \"),s(\"p\",[t._v(\"Each of these named scoped slots will accept three scope parameters:\")]),t._v(\" \"),t._m(215),t._v(\" \"),t._m(216),t._v(\" \"),s(\"p\",[s(\"router-link\",{attrs:{to:\"./../guide/number.html#custom-formatting\"}},[t._v(\"Number custom formatting\")])],1),t._v(\" \"),t._m(217),t._v(\" \"),t._m(218),t._v(\" \"),t._m(219),t._v(\" \"),t._m(220),t._v(\" \"),s(\"p\",[t._v(\"Used on component interpolation to indicate which index of list formatting or key of named formatting.\")]),t._v(\" \"),s(\"p\",[t._v(\"For detailed usage, see the guide section linked below.\")]),t._v(\" \"),t._m(221),t._v(\" \"),s(\"p\",[s(\"router-link\",{attrs:{to:\"./../guide/interpolation.html\"}},[t._v(\"Component interpolation\")])],1)])}),[function(){var t=this.$createElement,e=this._self._c||t;return e(\"h1\",{attrs:{id:\"api-references\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#api-references\"}},[this._v(\"#\")]),this._v(\" API references\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"extension-of-vue\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#extension-of-vue\"}},[this._v(\"#\")]),this._v(\" Extension of Vue\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"vue-constructor-options\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#vue-constructor-options\"}},[this._v(\"#\")]),this._v(\" Vue constructor options\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"i18n\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#i18n\"}},[this._v(\"#\")]),this._v(\" i18n\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"strong\",[this._v(\"Type:\")]),this._v(\" \"),e(\"code\",[this._v(\"I18nOptions\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"strong\",[this._v(\"See also:\")]),this._v(\" \"),e(\"code\",[this._v(\"VueI18n\")]),this._v(\" class constructor options\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"vue-injected-methods\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#vue-injected-methods\"}},[this._v(\"#\")]),this._v(\" Vue injected methods\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"t\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#t\"}},[this._v(\"#\")]),this._v(\" $t\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Arguments:\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{Path} key\")]),t._v(\": required\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Locale} locale\")]),t._v(\": optional\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Array | Object} values\")]),t._v(\": optional\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Return:\")]),t._v(\" \"),s(\"code\",[t._v(\"TranslateResult\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"div\",{staticClass:\"danger custom-block\"},[e(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Tip\")]),this._v(\" \"),e(\"p\",[this._v(\"Note that you need to guarantee this context equal to component instance in lifecycle methods (e.g. in \"),e(\"code\",[this._v(\"data\")]),this._v(\" options, \"),e(\"code\",[this._v(\"const $t = this.$t.bind(this)\")]),this._v(\").\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"tc\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#tc\"}},[this._v(\"#\")]),this._v(\" $tc\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Arguments:\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{Path} key\")]),t._v(\": required\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{number} choice\")]),t._v(\": optional, default 1\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Locale} locale\")]),t._v(\": optional\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{string | Array | Object} values\")]),t._v(\": optional\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Return:\")]),t._v(\" \"),s(\"code\",[t._v(\"TranslateResult\")])])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"p\",[t._v(\"Localize the locale message of \"),s(\"code\",[t._v(\"key\")]),t._v(\" with pluralization. Localize in preferentially component locale messages than global locale messages. If not specified component locale messages, localize with global locale messages. If you specified \"),s(\"code\",[t._v(\"locale\")]),t._v(\", localize the locale messages of \"),s(\"code\",[t._v(\"locale\")]),t._v(\". If you will specify string value to \"),s(\"code\",[t._v(\"values\")]),t._v(\", localize the locale messages of value. If you will specify Array or Object value to \"),s(\"code\",[t._v(\"values\")]),t._v(\", you must specify with \"),s(\"code\",[t._v(\"values\")]),t._v(\" of $t.\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"div\",{staticClass:\"danger custom-block\"},[e(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Tip\")]),this._v(\" \"),e(\"p\",[this._v(\"Note that you need to guarantee this context equal to component instance in lifecycle methods (e.g. in \"),e(\"code\",[this._v(\"data\")]),this._v(\" options, \"),e(\"code\",[this._v(\"const $tc = this.$tc.bind(this)\")]),this._v(\").\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"te\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#te\"}},[this._v(\"#\")]),this._v(\" $te\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Arguments:\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{Path} key\")]),t._v(\": required\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Locale} locale\")]),t._v(\": optional\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Return:\")]),t._v(\" \"),s(\"code\",[t._v(\"boolean\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"Check whether key exists. In Vue instance, If not specified component locale messages, check with global locale messages. If you specified \"),e(\"code\",[this._v(\"locale\")]),this._v(\", check the locale messages of \"),e(\"code\",[this._v(\"locale\")]),this._v(\".\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"div\",{staticClass:\"danger custom-block\"},[e(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Tip\")]),this._v(\" \"),e(\"p\",[this._v(\"Note that you need to guarantee this context equal to component instance in lifecycle methods (e.g. in \"),e(\"code\",[this._v(\"data\")]),this._v(\" options, \"),e(\"code\",[this._v(\"const $te = this.$te.bind(this)\")]),this._v(\").\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"d\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#d\"}},[this._v(\"#\")]),this._v(\" $d\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.0+\")])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Arguments:\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{number | Date} value\")]),t._v(\": required\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Path | Object} key\")]),t._v(\": optional\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Locale | Object} locale\")]),t._v(\": optional\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Return:\")]),t._v(\" \"),s(\"code\",[t._v(\"DateTimeFormatResult\")])])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"p\",[t._v(\"Localize the datetime of \"),s(\"code\",[t._v(\"value\")]),t._v(\" with datetime format of \"),s(\"code\",[t._v(\"key\")]),t._v(\". The datetime format of \"),s(\"code\",[t._v(\"key\")]),t._v(\" need to register to \"),s(\"code\",[t._v(\"dateTimeFormats\")]),t._v(\" option of \"),s(\"code\",[t._v(\"VueI18n\")]),t._v(\" class, and depend on \"),s(\"code\",[t._v(\"locale\")]),t._v(\" option of \"),s(\"code\",[t._v(\"VueI18n\")]),t._v(\" constructor. If you will specify \"),s(\"code\",[t._v(\"locale\")]),t._v(\" argument, it will have priority over \"),s(\"code\",[t._v(\"locale\")]),t._v(\" option of \"),s(\"code\",[t._v(\"VueI18n\")]),t._v(\" constructor.\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"p\",[t._v(\"If the datetime format of \"),s(\"code\",[t._v(\"key\")]),t._v(\" not exist in \"),s(\"code\",[t._v(\"dateTimeFormats\")]),t._v(\" option, fallback to depend on \"),s(\"code\",[t._v(\"fallbackLocale\")]),t._v(\" option of \"),s(\"code\",[t._v(\"VueI18n\")]),t._v(\" constructor.\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"div\",{staticClass:\"danger custom-block\"},[e(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Tip\")]),this._v(\" \"),e(\"p\",[this._v(\"Note that you need to guarantee this context equal to component instance in lifecycle methods (e.g. in \"),e(\"code\",[this._v(\"data\")]),this._v(\" options, \"),e(\"code\",[this._v(\"const $d = this.$d.bind(this)\")]),this._v(\").\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"n\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#n\"}},[this._v(\"#\")]),this._v(\" $n\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.0+\")])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Arguments:\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{number} value\")]),t._v(\": required\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Path | Object} format\")]),t._v(\": optional\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Locale} locale\")]),t._v(\": optional\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Return:\")]),t._v(\" \"),s(\"code\",[t._v(\"NumberFormatResult\")])])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"p\",[t._v(\"Localize the number of \"),s(\"code\",[t._v(\"value\")]),t._v(\" with number format of \"),s(\"code\",[t._v(\"format\")]),t._v(\". The number format of \"),s(\"code\",[t._v(\"format\")]),t._v(\" need to register to \"),s(\"code\",[t._v(\"numberFormats\")]),t._v(\" option of \"),s(\"code\",[t._v(\"VueI18n\")]),t._v(\" class, and depend on \"),s(\"code\",[t._v(\"locale\")]),t._v(\" option of \"),s(\"code\",[t._v(\"VueI18n\")]),t._v(\" constructor. If you will specify \"),s(\"code\",[t._v(\"locale\")]),t._v(\" argument, it will have priority over \"),s(\"code\",[t._v(\"locale\")]),t._v(\" option of \"),s(\"code\",[t._v(\"VueI18n\")]),t._v(\" constructor.\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"p\",[t._v(\"If the number format of \"),s(\"code\",[t._v(\"format\")]),t._v(\" not exist in \"),s(\"code\",[t._v(\"numberFormats\")]),t._v(\" option, fallback to depend on \"),s(\"code\",[t._v(\"fallbackLocale\")]),t._v(\" option of \"),s(\"code\",[t._v(\"VueI18n\")]),t._v(\" constructor.\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"If the second \"),e(\"code\",[this._v(\"format\")]),this._v(\" argument specified as an object, it should have the following properties:\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"key {Path}\")]),t._v(\": optional, number format\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"locale {Locale}\")]),t._v(\": optional, locale\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"style {string}\")]),t._v(\": optional, number format option\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"currency {string}\")]),t._v(\": optional, number format option\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"currencyDisplay {string}\")]),t._v(\": optional, number format option\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"useGrouping {string}\")]),t._v(\": optional, number format option\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"minimumIntegerDigits {string}\")]),t._v(\": optional, number format option\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"minimumFractionDigits {string}\")]),t._v(\": optional, number format option\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"maximumFractionDigits {string}\")]),t._v(\": optional, number format option\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"minimumSignificantDigits {string}\")]),t._v(\": optional, number format option\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"maximumSignificantDigits {string}\")]),t._v(\": optional, number format option\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"localeMatcher {string}\")]),t._v(\": optional, number format option\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"formatMatcher {string}\")]),t._v(\": optional, number format option\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"Any specified number format options will have priority over \"),e(\"code\",[this._v(\"numberFormats\")]),this._v(\" of \"),e(\"code\",[this._v(\"VueI18n\")]),this._v(\" constructor.\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"div\",{staticClass:\"danger custom-block\"},[e(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Tip\")]),this._v(\" \"),e(\"p\",[this._v(\"Note that you need to guarantee this context equal to component instance in lifecycle methods (e.g. in \"),e(\"code\",[this._v(\"data\")]),this._v(\" options, \"),e(\"code\",[this._v(\"const $n = this.$n.bind(this)\")]),this._v(\").\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"injected-properties\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#injected-properties\"}},[this._v(\"#\")]),this._v(\" Injected properties\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"i18n-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#i18n-2\"}},[this._v(\"#\")]),this._v(\" $i18n\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Type:\")]),this._v(\" \"),e(\"code\",[this._v(\"I18n\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Read only\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"Get a \"),e(\"code\",[this._v(\"VueI18n\")]),this._v(\" instance. If you are specify.\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"If you have specified an \"),e(\"code\",[this._v(\"i18n\")]),this._v(\" option at component options, you will be able to get a \"),e(\"code\",[this._v(\"VueI18n\")]),this._v(\" instance at the component, Otherwise, you will be able get root \"),e(\"code\",[this._v(\"VueI18n\")]),this._v(\" instance.\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"vuei18n-class\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#vuei18n-class\"}},[this._v(\"#\")]),this._v(\" \"),e(\"code\",[this._v(\"VueI18n\")]),this._v(\" class\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"static-properties\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#static-properties\"}},[this._v(\"#\")]),this._v(\" Static properties\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"version\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#version\"}},[this._v(\"#\")]),this._v(\" version\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"strong\",[this._v(\"Type:\")]),this._v(\" \"),e(\"code\",[this._v(\"string\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"availabilities\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#availabilities\"}},[this._v(\"#\")]),this._v(\" availabilities\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.0+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"strong\",[this._v(\"Type:\")]),this._v(\" \"),e(\"code\",[this._v(\"IntlAvailability\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"code\",[this._v(\"{boolean} dateTimeFormat\")]),this._v(\": locale sensitive datetime formatting\")])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"code\",[this._v(\"{boolean} numberFormat\")]),this._v(\": locale sensitive number formatting\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"constructor-options\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#constructor-options\"}},[this._v(\"#\")]),this._v(\" Constructor options\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"locale\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#locale\"}},[this._v(\"#\")]),this._v(\" locale\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Type:\")]),this._v(\" \"),e(\"code\",[this._v(\"Locale\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Default:\")]),this._v(\" \"),e(\"code\",[this._v(\"'en-US'\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"fallbacklocale\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#fallbacklocale\"}},[this._v(\"#\")]),this._v(\" fallbackLocale\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Type:\")]),this._v(\" \"),e(\"code\",[this._v(\"FallbackLocale\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Default:\")]),this._v(\" \"),e(\"code\",[this._v(\"false\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"messages\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#messages\"}},[this._v(\"#\")]),this._v(\" messages\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Type:\")]),this._v(\" \"),e(\"code\",[this._v(\"LocaleMessages\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Default:\")]),this._v(\" \"),e(\"code\",[this._v(\"{}\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"datetimeformats\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#datetimeformats\"}},[this._v(\"#\")]),this._v(\" dateTimeFormats\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.0+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Type:\")]),this._v(\" \"),e(\"code\",[this._v(\"DateTimeFormats\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Default:\")]),this._v(\" \"),e(\"code\",[this._v(\"{}\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"numberformats\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#numberformats\"}},[this._v(\"#\")]),this._v(\" numberFormats\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.0+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Type:\")]),this._v(\" \"),e(\"code\",[this._v(\"NumberFormats\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Default:\")]),this._v(\" \"),e(\"code\",[this._v(\"{}\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"availablelocales\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#availablelocales\"}},[this._v(\"#\")]),this._v(\" availableLocales\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 8.9.0+\")])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Type:\")]),t._v(\" \"),s(\"code\",[t._v(\"Locale[]\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Default:\")]),t._v(\" \"),s(\"code\",[t._v(\"[]\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Examples:\")]),t._v(\" \"),s(\"code\",[t._v('[\"en\", \"ja\"]')])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"The list of available locales in \"),e(\"code\",[this._v(\"messages\")]),this._v(\" in lexical order.\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"formatter\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#formatter\"}},[this._v(\"#\")]),this._v(\" formatter\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Type:\")]),this._v(\" \"),e(\"code\",[this._v(\"Formatter\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Default:\")]),this._v(\" Built in formatter\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"The formatter that implemented with \"),e(\"code\",[this._v(\"Formatter\")]),this._v(\" interface.\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"modifiers\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#modifiers\"}},[this._v(\"#\")]),this._v(\" modifiers\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 8.15.0+\")])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Type:\")]),t._v(\" \"),s(\"code\",[t._v(\"Modifier\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Default:\")]),t._v(\" \"),s(\"code\",[t._v(\"lower\")]),t._v(\" and \"),s(\"code\",[t._v(\"upper\")]),t._v(\" modifiers\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"missing\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#missing\"}},[this._v(\"#\")]),this._v(\" missing\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Type:\")]),this._v(\" \"),e(\"code\",[this._v(\"MissingHandler\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Default:\")]),this._v(\" \"),e(\"code\",[this._v(\"null\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"fallbackroot\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#fallbackroot\"}},[this._v(\"#\")]),this._v(\" fallbackRoot\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Type:\")]),this._v(\" \"),e(\"code\",[this._v(\"Boolean\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Default:\")]),this._v(\" \"),e(\"code\",[this._v(\"true\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"If \"),e(\"code\",[this._v(\"false\")]),this._v(\", it's warned, and is returned the key.\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"sync\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#sync\"}},[this._v(\"#\")]),this._v(\" sync\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Type:\")]),this._v(\" \"),e(\"code\",[this._v(\"Boolean\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Default:\")]),this._v(\" \"),e(\"code\",[this._v(\"true\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"If \"),e(\"code\",[this._v(\"false\")]),this._v(\", regardless of the root level locale, localize for each component locale.\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"silenttranslationwarn\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#silenttranslationwarn\"}},[this._v(\"#\")]),this._v(\" silentTranslationWarn\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"6.1+, 🆙 8.13\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Type:\")]),this._v(\" \"),e(\"code\",[this._v(\"Boolean | RegExp\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Default:\")]),this._v(\" \"),e(\"code\",[this._v(\"false\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"If \"),e(\"code\",[this._v(\"true\")]),this._v(\", suppress localization fail warnings.\\nIf you use regular expression, you can suppress localization fail warnings that it match with translation \"),e(\"code\",[this._v(\"key\")]),this._v(\" (e.g. \"),e(\"code\",[this._v(\"$t\")]),this._v(\").\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"silentfallbackwarn\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#silentfallbackwarn\"}},[this._v(\"#\")]),this._v(\" silentFallbackWarn\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 8.8+, 🆙 8.13\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"strong\",[this._v(\"Type:\")]),this._v(\" \"),e(\"code\",[this._v(\"Boolean | RegExp\")])]),this._v(\" \"),e(\"li\",[e(\"strong\",[this._v(\"Default:\")]),this._v(\" \"),e(\"code\",[this._v(\"false\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"Whether suppress warnings when falling back to either \"),e(\"code\",[this._v(\"fallbackLocale\")]),this._v(\" or \"),e(\"code\",[this._v(\"root\")]),this._v(\".\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"If \"),e(\"code\",[this._v(\"true\")]),this._v(\", warnings will be generated only when no translation is available at all, and not for fallbacks.\\nIf you use regular expression, you can suppress the fallback warnings that it match \"),e(\"code\",[this._v(\"key\")]),this._v(\" (e.g. \"),e(\"code\",[this._v(\"$t\")]),this._v(\").\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"preservedirectivecontent\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#preservedirectivecontent\"}},[this._v(\"#\")]),this._v(\" preserveDirectiveContent\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"8.7+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Type:\")]),this._v(\" \"),e(\"code\",[this._v(\"Boolean\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Default:\")]),this._v(\" \"),e(\"code\",[this._v(\"false\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"Whether \"),e(\"code\",[this._v(\"v-t\")]),this._v(\" directive's element should preserve \"),e(\"code\",[this._v(\"textContent\")]),this._v(\" after directive is unbinded.\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"warnhtmlinmessage\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#warnhtmlinmessage\"}},[this._v(\"#\")]),this._v(\" warnHtmlInMessage\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"8.11+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Type:\")]),this._v(\" \"),e(\"code\",[this._v(\"WarnHtmlInMessageLevel\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Default:\")]),this._v(\" \"),e(\"code\",[this._v(\"off\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"Whether to allow the use locale messages of HTML formatting. See the \"),e(\"code\",[this._v(\"warnHtmlInMessage\")]),this._v(\" property.\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"div\",{staticClass:\"danger custom-block\"},[e(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Important!!\")]),this._v(\" \"),e(\"p\",[this._v(\"In next major version, \"),e(\"code\",[this._v(\"warnHtmlInMessage\")]),this._v(\" option is \"),e(\"code\",[this._v(\"warn\")]),this._v(\" as default.\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"sharedmessages\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#sharedmessages\"}},[this._v(\"#\")]),this._v(\" sharedMessages\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"8.12+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Type:\")]),this._v(\" \"),e(\"code\",[this._v(\"LocaleMessages\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Default:\")]),this._v(\" \"),e(\"code\",[this._v(\"undefined\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"posttranslation\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#posttranslation\"}},[this._v(\"#\")]),this._v(\" postTranslation\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"8.16+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Type:\")]),this._v(\" \"),e(\"code\",[this._v(\"PostTranslationHandler\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Default:\")]),this._v(\" \"),e(\"code\",[this._v(\"null\")])])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"p\",[t._v(\"A handler for post processing of translation. The handler gets after being called with the \"),s(\"code\",[t._v(\"$t\")]),t._v(\", \"),s(\"code\",[t._v(\"t\")]),t._v(\", \"),s(\"code\",[t._v(\"$tc\")]),t._v(\", and \"),s(\"code\",[t._v(\"tc\")]),t._v(\".\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"properties\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#properties\"}},[this._v(\"#\")]),this._v(\" Properties\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"locale-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#locale-2\"}},[this._v(\"#\")]),this._v(\" locale\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Type:\")]),this._v(\" \"),e(\"code\",[this._v(\"Locale\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Read/Write\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"fallbacklocale-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#fallbacklocale-2\"}},[this._v(\"#\")]),this._v(\" fallbackLocale\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Type:\")]),this._v(\" \"),e(\"code\",[this._v(\"FallbackLocale\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Read/Write\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"messages-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#messages-2\"}},[this._v(\"#\")]),this._v(\" messages\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Type:\")]),this._v(\" \"),e(\"code\",[this._v(\"LocaleMessages\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Read only\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"datetimeformats-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#datetimeformats-2\"}},[this._v(\"#\")]),this._v(\" dateTimeFormats\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.0+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Type:\")]),this._v(\" \"),e(\"code\",[this._v(\"DateTimeFormats\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Read only\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"numberformats-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#numberformats-2\"}},[this._v(\"#\")]),this._v(\" numberFormats\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.0+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Type:\")]),this._v(\" \"),e(\"code\",[this._v(\"NumberFormats\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Read only\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"missing-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#missing-2\"}},[this._v(\"#\")]),this._v(\" missing\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Type:\")]),this._v(\" \"),e(\"code\",[this._v(\"MissingHandler\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Read/Write\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"formatter-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#formatter-2\"}},[this._v(\"#\")]),this._v(\" formatter\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Type:\")]),this._v(\" \"),e(\"code\",[this._v(\"Formatter\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Read/Write\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"The formatter that implemented with \"),e(\"code\",[this._v(\"Formatter\")]),this._v(\" interface.\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"silenttranslationwarn-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#silenttranslationwarn-2\"}},[this._v(\"#\")]),this._v(\" silentTranslationWarn\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"6.1+, 🆙 8.13\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Type:\")]),this._v(\" \"),e(\"code\",[this._v(\"Boolean | RegExp\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Read/Write\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"silentfallbackwarn-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#silentfallbackwarn-2\"}},[this._v(\"#\")]),this._v(\" silentFallbackWarn\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 8.8+, 🆙 8.13\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Type:\")]),this._v(\" \"),e(\"code\",[this._v(\"Boolean | RegExp\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Read/Write\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"preservedirectivecontent-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#preservedirectivecontent-2\"}},[this._v(\"#\")]),this._v(\" preserveDirectiveContent\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"8.7+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Type:\")]),this._v(\" \"),e(\"code\",[this._v(\"Boolean\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Read/Write\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"Whether \"),e(\"code\",[this._v(\"v-t\")]),this._v(\" directive's element should preserve \"),e(\"code\",[this._v(\"textContent\")]),this._v(\" after directive is unbinded.\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"warnhtmlinmessage-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#warnhtmlinmessage-2\"}},[this._v(\"#\")]),this._v(\" warnHtmlInMessage\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"8.11+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Type:\")]),this._v(\" \"),e(\"code\",[this._v(\"WarnHtmlInMessageLevel\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Read/Write\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"If you set \"),e(\"code\",[this._v(\"warn\")]),this._v(\" or\"),e(\"code\",[this._v(\"error\")]),this._v(\", will check the locale messages on the VueI18n instance.\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"If you are specified \"),e(\"code\",[this._v(\"warn\")]),this._v(\", a warning will be output at console.\\nIf you are specified \"),e(\"code\",[this._v(\"error\")]),this._v(\" will occurred an Error.\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"In VueI18n instance, set the \"),e(\"code\",[this._v(\"off\")]),this._v(\" as default.\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"posttranslation-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#posttranslation-2\"}},[this._v(\"#\")]),this._v(\" postTranslation\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"8.16+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Type:\")]),this._v(\" \"),e(\"code\",[this._v(\"PostTranslationHandler\")])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Read/Write\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"methods\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#methods\"}},[this._v(\"#\")]),this._v(\" Methods\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"getchoiceindex\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#getchoiceindex\"}},[this._v(\"#\")]),this._v(\" getChoiceIndex\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Arguments:\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{number} choice\")])]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{number} choicesLength\")])])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Return:\")]),t._v(\" \"),s(\"code\",[t._v(\"finalChoice {number}\")])])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"div\",{staticClass:\"language-js extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"prototype\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"getChoiceIndex \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"/* custom implementation */\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"getlocalemessage-locale\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#getlocalemessage-locale\"}},[this._v(\"#\")]),this._v(\" getLocaleMessage( locale )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Arguments:\")])]),this._v(\" \"),e(\"ul\",[e(\"li\",[e(\"code\",[this._v(\"{Locale} locale\")])])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Return:\")]),this._v(\" \"),e(\"code\",[this._v(\"LocaleMessageObject\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"setlocalemessage-locale-message\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#setlocalemessage-locale-message\"}},[this._v(\"#\")]),this._v(\" setLocaleMessage( locale, message )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Arguments:\")])]),this._v(\" \"),e(\"ul\",[e(\"li\",[e(\"code\",[this._v(\"{Locale} locale\")])]),this._v(\" \"),e(\"li\",[e(\"code\",[this._v(\"{LocaleMessageObject} message\")])])])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"div\",{staticClass:\"tip custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[t._v(\"NOTE\")]),t._v(\" \"),s(\"blockquote\",[s(\"p\",[t._v(\"8.11+\")])]),t._v(\" \"),s(\"p\",[t._v(\"If you set \"),s(\"code\",[t._v(\"warn\")]),t._v(\" or\"),s(\"code\",[t._v(\"error\")]),t._v(\" in the \"),s(\"code\",[t._v(\"warnHtmlInMessage\")]),t._v(\" property, when this method is executed, it will check if HTML formatting is used for locale message.\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"mergelocalemessage-locale-message\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#mergelocalemessage-locale-message\"}},[this._v(\"#\")]),this._v(\" mergeLocaleMessage( locale, message )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"6.1+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Arguments:\")])]),this._v(\" \"),e(\"ul\",[e(\"li\",[e(\"code\",[this._v(\"{Locale} locale\")])]),this._v(\" \"),e(\"li\",[e(\"code\",[this._v(\"{LocaleMessageObject} message\")])])])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"div\",{staticClass:\"tip custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[t._v(\"NOTE\")]),t._v(\" \"),s(\"blockquote\",[s(\"p\",[t._v(\"8.11+\")])]),t._v(\" \"),s(\"p\",[t._v(\"If you set \"),s(\"code\",[t._v(\"warn\")]),t._v(\" or\"),s(\"code\",[t._v(\"error\")]),t._v(\" in the \"),s(\"code\",[t._v(\"warnHtmlInMessage\")]),t._v(\" property, when this method is executed, it will check if HTML formatting is used for locale message.\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"t-key-locale-values\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#t-key-locale-values\"}},[this._v(\"#\")]),this._v(\" t( key, [locale], [values] )\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Arguments:\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{Path} key\")]),t._v(\": required\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Locale} locale\")]),t._v(\": optional\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Array | Object} values\")]),t._v(\": optional\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Return:\")]),t._v(\" : \"),s(\"code\",[t._v(\"TranslateResult\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"This is the same as the \"),e(\"code\",[this._v(\"Function\")]),this._v(\" returned with \"),e(\"code\",[this._v(\"$t\")]),this._v(\" method. More detail see \"),e(\"a\",{attrs:{href:\"#t\"}},[this._v(\"$t\")]),this._v(\".\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"tc-key-choice-values\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#tc-key-choice-values\"}},[this._v(\"#\")]),this._v(\" tc( key, [choice], [values] )\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Arguments:\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{Path} key\")]),t._v(\": required\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{number} choice\")]),t._v(\": optional, default \"),s(\"code\",[t._v(\"1\")])]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{string | Array | Object} values\")]),t._v(\": optional\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Return:\")]),t._v(\" \"),s(\"code\",[t._v(\"TranslateResult\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"This is the same as the \"),e(\"code\",[this._v(\"Function\")]),this._v(\" returned \"),e(\"code\",[this._v(\"$tc\")]),this._v(\" method. More detail see \"),e(\"a\",{attrs:{href:\"#tc\"}},[this._v(\"$tc\")]),this._v(\".\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"te-key-locale\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#te-key-locale\"}},[this._v(\"#\")]),this._v(\" te( key, [locale] )\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Arguments:\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{string} key\")]),t._v(\": required\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Locale} locale\")]),t._v(\": optional\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Return:\")]),t._v(\" \"),s(\"code\",[t._v(\"boolean\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"Check whether key path exists in global locale message. If you specified \"),e(\"code\",[this._v(\"locale\")]),this._v(\", check the locale message of \"),e(\"code\",[this._v(\"locale\")]),this._v(\".\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"getdatetimeformat-locale\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#getdatetimeformat-locale\"}},[this._v(\"#\")]),this._v(\" getDateTimeFormat ( locale )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.0+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Arguments:\")])]),this._v(\" \"),e(\"ul\",[e(\"li\",[e(\"code\",[this._v(\"{Locale} locale\")])])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Return:\")]),this._v(\" \"),e(\"code\",[this._v(\"DateTimeFormat\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"setdatetimeformat-locale-format\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#setdatetimeformat-locale-format\"}},[this._v(\"#\")]),this._v(\" setDateTimeFormat ( locale, format )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.0+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Arguments:\")])]),this._v(\" \"),e(\"ul\",[e(\"li\",[e(\"code\",[this._v(\"{Locale} locale\")])]),this._v(\" \"),e(\"li\",[e(\"code\",[this._v(\"{DateTimeFormat} format\")])])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"mergedatetimeformat-locale-format\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#mergedatetimeformat-locale-format\"}},[this._v(\"#\")]),this._v(\" mergeDateTimeFormat ( locale, format )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.0+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Arguments:\")])]),this._v(\" \"),e(\"ul\",[e(\"li\",[e(\"code\",[this._v(\"{Locale} locale\")])]),this._v(\" \"),e(\"li\",[e(\"code\",[this._v(\"{DateTimeFormat} format\")])])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"d-value-key-locale\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#d-value-key-locale\"}},[this._v(\"#\")]),this._v(\" d( value, [key], [locale] )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.0+\")])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Arguments:\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{number | Date} value\")]),t._v(\": required\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Path | Object} key\")]),t._v(\": optional\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Locale | Object} locale\")]),t._v(\": optional\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Return:\")]),t._v(\" \"),s(\"code\",[t._v(\"DateTimeFormatResult\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"This is the same as \"),e(\"code\",[this._v(\"$d\")]),this._v(\" method of Vue instance method. More detail see \"),e(\"a\",{attrs:{href:\"#d\"}},[this._v(\"$d\")]),this._v(\".\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"getnumberformat-locale\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#getnumberformat-locale\"}},[this._v(\"#\")]),this._v(\" getNumberFormat ( locale )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.0+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Arguments:\")])]),this._v(\" \"),e(\"ul\",[e(\"li\",[e(\"code\",[this._v(\"{Locale} locale\")])])])]),this._v(\" \"),e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Return:\")]),this._v(\" \"),e(\"code\",[this._v(\"NumberFormat\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"setnumberformat-locale-format\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#setnumberformat-locale-format\"}},[this._v(\"#\")]),this._v(\" setNumberFormat ( locale, format )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.0+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Arguments:\")])]),this._v(\" \"),e(\"ul\",[e(\"li\",[e(\"code\",[this._v(\"{Locale} locale\")])]),this._v(\" \"),e(\"li\",[e(\"code\",[this._v(\"{NumberFormat} format\")])])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"mergenumberformat-locale-format\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#mergenumberformat-locale-format\"}},[this._v(\"#\")]),this._v(\" mergeNumberFormat ( locale, format )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.0+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"p\",[e(\"strong\",[this._v(\"Arguments:\")])]),this._v(\" \"),e(\"ul\",[e(\"li\",[e(\"code\",[this._v(\"{Locale} locale\")])]),this._v(\" \"),e(\"li\",[e(\"code\",[this._v(\"{NumberFormat} format\")])])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"n-value-format-locale\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#n-value-format-locale\"}},[this._v(\"#\")]),this._v(\" n( value, [format], [locale] )\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.0+\")])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Arguments:\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"{number} value\")]),t._v(\": required\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Path | Object} format\")]),t._v(\": optional\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"{Locale} locale\")]),t._v(\": optional\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Return:\")]),t._v(\" \"),s(\"code\",[t._v(\"NumberFormatResult\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"This is the same as \"),e(\"code\",[this._v(\"$n\")]),this._v(\" method of Vue instance method. More detail see \"),e(\"a\",{attrs:{href:\"#n\"}},[this._v(\"$n\")]),this._v(\".\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"directives\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#directives\"}},[this._v(\"#\")]),this._v(\" Directives\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.3+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"v-t\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#v-t\"}},[this._v(\"#\")]),this._v(\" v-t\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Expects:\")]),t._v(\" \"),s(\"code\",[t._v(\"string | Object\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Modifiers:\")])]),t._v(\" \"),s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\".preserve\")]),t._v(\": (8.7.0+) preserves element \"),s(\"code\",[t._v(\"textContent\")]),t._v(\" when directive is unbinded.\")])])]),t._v(\" \"),s(\"li\",[s(\"p\",[s(\"strong\",[t._v(\"Details:\")])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"Update the element \"),e(\"code\",[this._v(\"textContent\")]),this._v(\" that localized with locale messages. You can use string syntax or object syntax. string syntax can be specified as a keypath of locale messages. If you can be used object syntax, you need to specify as the object key the following params:\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"pre\",[e(\"code\",[this._v(\"* path: required, key of locale messages\\n* locale: optional, locale\\n* args: optional, for list or named formatting\\n\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"a\",{attrs:{href:\"#preservedirectivecontent\"}},[e(\"code\",[this._v(\"preserveDirectiveContent\")]),this._v(\" option\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"ul\",[e(\"li\",[e(\"strong\",[this._v(\"Examples:\")])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- string syntax: literal --\\x3e\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"'\")]),t._v(\"foo.bar'\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- string syntax: binding via data or computed props --\\x3e\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"msg\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- object syntax: literal --\\x3e\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"{ path: 'hi', locale: 'ja', args: { name: 'kazupon' } }\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- object syntax: binding via data or computed props --\\x3e\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"{ path: greeting, args: { name: fullName } }\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- with preserve modifier --\\x3e\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t.preserve\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"'\")]),t._v(\"foo.bar'\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"components\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#components\"}},[this._v(\"#\")]),this._v(\" Components\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"i18n-functional-component\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#i18n-functional-component\"}},[this._v(\"#\")]),this._v(\" i18n functional component\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.0+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"props\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#props\"}},[this._v(\"#\")]),this._v(\" Props:\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"path {Path}\")]),t._v(\": required, keypath of locale messages\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"locale {Locale}\")]),t._v(\": optional, locale\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"tag {string|boolean}\")]),t._v(\": optional, default \"),s(\"code\",[t._v(\"'span'\")])]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"places {Array | Object}\")]),t._v(\": optional (7.2+)\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"div\",{staticClass:\"danger custom-block\"},[e(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Important!!\")]),this._v(\" \"),e(\"p\",[this._v(\"In next major version, \"),e(\"code\",[this._v(\"places\")]),this._v(\" prop is deprecated. Please switch to slots syntax.\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"usage\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#usage\"}},[this._v(\"#\")]),this._v(\" Usage:\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"path\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"term\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"tag\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"label\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"for\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"tos\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":href\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"url\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"target\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"_blank\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('tos') }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"div\",{staticClass:\"language-js extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    tos\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Term of Service'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    term\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'I accept xxx {0}.'\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  ja\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    tos\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'利用規約'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    term\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'私は xxx の{0}に同意します。'\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  data\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    url\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'/term'\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),s(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"see-also\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#see-also\"}},[this._v(\"#\")]),this._v(\" See also:\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"i18n-n-functional-component\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#i18n-n-functional-component\"}},[this._v(\"#\")]),this._v(\" i18n-n functional component\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 8.10+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"props-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#props-2\"}},[this._v(\"#\")]),this._v(\" Props:\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"value {number}\")]),t._v(\": required, number to format\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"format {string | NumberFormatOptions}\")]),t._v(\": optional, number format name or object with explicit format options\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"locale {Locale}\")]),t._v(\": optional, locale\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"tag {string|boolean}\")]),t._v(\": optional, default \"),s(\"code\",[t._v(\"'span'\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"usage-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#usage-2\"}},[this._v(\"#\")]),this._v(\" Usage:\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n-n\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":value\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"money\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"format\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"currency\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"tag\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"label\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[s(\"span\",{pre:!0,attrs:{class:\"token namespace\"}},[t._v(\"v-slot:\")]),t._v(\"currency\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"slotProps\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"class\")]),s(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"font-weight: bold\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ slotProps.currency }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n-n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"div\",{staticClass:\"language-js extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"var\")]),t._v(\" numberFormats \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en-US'\")]),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    currency\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      style\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'currency'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" currency\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'USD'\")]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ja-JP'\")]),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    currency\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      style\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'currency'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" currency\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'JPY'\")]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en-US'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  numberFormats\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  data\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    money\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"10234\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),s(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"scoped-slots\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#scoped-slots\"}},[this._v(\"#\")]),this._v(\" Scoped slots\")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"currency\")])]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"decimal\")])]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"fraction\")])]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"group\")])]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"infinity\")])]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"integer\")])]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"literal\")])]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"minusSign\")])]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"nan\")])]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"plusSign\")])]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"percentSign\")])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s(\"ul\",[s(\"li\",[s(\"code\",[t._v(\"[slotName] {FormattedNumberPartType}\")]),t._v(\": parameter of the same name as actual slot name (like \"),s(\"code\",[t._v(\"integer\")]),t._v(\")\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"index {Number}\")]),t._v(\": index of the specific part in the array of number parts\")]),t._v(\" \"),s(\"li\",[s(\"code\",[t._v(\"parts {Array}\")]),t._v(\": array of all formatted number parts\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"see-also-2\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#see-also-2\"}},[this._v(\"#\")]),this._v(\" See also:\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"special-attributes\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#special-attributes\"}},[this._v(\"#\")]),this._v(\" Special Attributes\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"place\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#place\"}},[this._v(\"#\")]),this._v(\" place\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"blockquote\",[e(\"p\",[this._v(\"🆕 7.2+\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"expects-number-string\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#expects-number-string\"}},[this._v(\"#\")]),this._v(\" Expects: \"),e(\"code\",[this._v(\"{number | string}\")])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h4\",{attrs:{id:\"see-also-3\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#see-also-3\"}},[this._v(\"#\")]),this._v(\" See also:\")])}],!1,null,null,null);e.default=n.exports}}]);"
  },
  {
    "path": "docs/assets/js/50.0e187269.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[50],{282:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),t._m(1),t._v(\" \"),t._m(2),t._v(\" \"),t._m(3),t._v(\" \"),a(\"p\",[t._v(\"你可以使用字符串语法传递语言环境信息的键名路径。\")]),t._v(\" \"),a(\"p\",[t._v(\"JavaScript：\")]),t._v(\" \"),t._m(4),a(\"p\",[t._v(\"模板：\")]),t._v(\" \"),t._m(5),a(\"p\",[t._v(\"输出：\")]),t._v(\" \"),t._m(6),t._m(7),t._v(\" \"),a(\"p\",[t._v(\"你可以使用对象语法。\")]),t._v(\" \"),a(\"p\",[t._v(\"Javascript：\")]),t._v(\" \"),t._m(8),a(\"p\",[t._v(\"模板：\")]),t._v(\" \"),t._m(9),a(\"p\",[t._v(\"输出：\")]),t._v(\" \"),t._m(10),t._m(11),t._v(\" \"),t._m(12),t._v(\" \"),a(\"p\",[t._v(\"当 \"),a(\"code\",[t._v(\"v-t\")]),t._v(\" 指令应用于 \"),a(\"a\",{attrs:{href:\"https://cn.vuejs.org/v2/api/#transition\",target:\"_blank\",rel:\"noopener noreferrer\"}},[a(\"code\",[t._v(\"<transition>\")]),t._v(\" 组件\"),a(\"OutboundLink\")],1),t._v(\"内的元素时，你可能会注意到过渡动画之后的翻译过的信息会消失。这与 \"),a(\"code\",[t._v(\"<transition>\")]),t._v(\" 组件实现的方式有关——\"),a(\"strong\",[t._v(\"在过渡开始之前\")]),t._v(\" ，\"),a(\"code\",[t._v(\"<transition>\")]),t._v(\" 组件内消失元素中的所有指令都将被销毁。此行为可能导致内容在短过渡时闪烁，但在长过渡时最明显。\")]),t._v(\" \"),a(\"p\",[t._v(\"为了确保在转换期间指令内容不会被触及，只需将\"),a(\"router-link\",{attrs:{to:\"./../api/#v-t\"}},[a(\"code\",[t._v(\".preserve\")]),t._v(\" 修饰符\")]),t._v(\"添加到 \"),a(\"code\",[t._v(\"v-t\")]),t._v(\" 指令定义中。\")],1),t._v(\" \"),a(\"p\",[t._v(\"Javascript：\")]),t._v(\" \"),t._m(13),a(\"p\",[t._v(\"模板：\")]),t._v(\" \"),t._m(14),t._m(15),t._v(\" \"),a(\"p\",[t._v(\"Javascript：\")]),t._v(\" \"),t._m(16),a(\"p\",[t._v(\"模板：\")]),t._v(\" \"),t._m(17),a(\"p\",[t._v(\"关于上面的例子，请参阅\"),a(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/dev/examples/directive\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"示例\"),a(\"OutboundLink\")],1)]),t._v(\" \"),t._m(18),t._v(\" \"),t._m(19),t._v(\" \"),t._m(20),t._v(\" \"),t._m(21),t._v(\" \"),t._m(22),t._v(\" \"),t._m(23),t._v(\" \"),t._m(24),t._v(\" \"),t._m(25),t._v(\" \"),t._m(26),t._v(\" \"),t._m(27),t._v(\" \"),a(\"p\",[a(\"code\",[t._v(\"v-t\")]),t._v(\" 比 \"),a(\"code\",[t._v(\"$t\")]),t._v(\" 方法具有\"),a(\"strong\",[t._v(\"更好的\")]),t._v(\"性能，因为在一次翻译时自定义指令会进行缓存。此外可以使用由 \"),a(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n-extensions\",target:\"_blank\",rel:\"noopener noreferrer\"}},[a(\"code\",[t._v(\"vue-i18n-extensions\")]),a(\"OutboundLink\")],1),t._v(\" 提供的 Vue 编译器模块进行预翻译。\")]),t._v(\" \"),t._m(28),t._v(\" \"),t._m(29),t._v(\" \"),a(\"p\",[a(\"code\",[t._v(\"v-t\")]),t._v(\" 不能像 \"),a(\"code\",[t._v(\"$t\")]),t._v(\" 一样灵活使用，它更\"),a(\"strong\",[t._v(\"复杂\")]),t._v(\"。带有 \"),a(\"code\",[t._v(\"v-t\")]),t._v(\" 的翻译内容会被插入到元素的 \"),a(\"code\",[t._v(\"textContent\")]),t._v(\" 中。此外，当你使用服务器渲染时，你需要设置\"),a(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n-extensions#directive-v-t-custom-directive-for-server-side\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"自定义指令\"),a(\"OutboundLink\")],1),t._v(\"到 \"),a(\"code\",[t._v(\"createRenderer\")]),t._v(\" 函数的 \"),a(\"code\",[t._v(\"directives\")]),t._v(\" 选项。\")])])}),[function(){var t=this.$createElement,s=this._self._c||t;return s(\"h1\",{attrs:{id:\"自定义指令本地化\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#自定义指令本地化\"}},[this._v(\"#\")]),this._v(\" 自定义指令本地化\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"tip custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"支持的版本\")]),this._v(\" \"),s(\"p\",[this._v(\"🆕 7.3 新增\")])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"你不仅可以使用 \"),s(\"code\",[this._v(\"$t\")]),this._v(\" 方法进行翻译，还可以使用 \"),s(\"code\",[this._v(\"v-t\")]),this._v(\" 自定义指令。\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"字符串语法\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#字符串语法\"}},[this._v(\"#\")]),this._v(\" 字符串语法\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hi there!'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      ja\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'こんにちは！'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  data\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" path\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hello'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#string-syntax'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"string-syntax\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- 字符串 --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"'\")]),t._v(\"hello'\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- 通过数据进行键名路径绑定 --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"path\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"string-syntax\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"hi there!\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"hi there!\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"对象语法\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#对象语法\"}},[this._v(\"#\")]),this._v(\" 对象语法\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hi {name}!'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      ja\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'こんにちは、{name}！'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  computed\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"nickName\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'kazupon'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  data\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" path\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hello'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#object-syntax'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"object-syntax\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- 文字 --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"{ path: 'hello', locale: 'ja', args: { name: 'kazupon' } }\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- 通过 `data` 绑定数据 --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"{ path: path, args: { name: nickName } }\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"object-syntax\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"こんにちは、kazupon！\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"hi kazupon!\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"使用翻译\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#使用翻译\"}},[this._v(\"#\")]),this._v(\" 使用翻译\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"tip custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"支持版本\")]),this._v(\" \"),s(\"p\",[this._v(\"🆕 8.7 新增\")])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" preserve\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'with preserve'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  data\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" toggle\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token boolean\"}},[t._v(\"true\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#in-transitions'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"in-transitions\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"transition\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"name\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"fade\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-if\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"toggle\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t.preserve\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"'\")]),t._v(\"preserve'\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"transition\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"button\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"@click\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"toggle = !toggle\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Toggle\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"button\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"也可以在 \"),s(\"code\",[this._v(\"VueI18n\")]),this._v(\" 实例本身设置全局设置，这将对没有修饰符的所有 \"),s(\"code\",[this._v(\"v-t\")]),this._v(\" 指令产生影响。\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" preserve\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'with preserve'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    preserveDirectiveContent\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token boolean\"}},[t._v(\"true\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  data\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" toggle\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token boolean\"}},[t._v(\"true\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#in-transitions'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"in-transitions\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"transition\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"name\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"fade\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-if\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"toggle\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"'\")]),t._v(\"preserve'\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"transition\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"button\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"@click\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"toggle = !toggle\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Toggle\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"button\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"t-vs-v-t\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#t-vs-v-t\"}},[this._v(\"#\")]),this._v(\" \"),s(\"code\",[this._v(\"$t\")]),this._v(\" vs \"),s(\"code\",[this._v(\"v-t\")])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h3\",{attrs:{id:\"t\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#t\"}},[this._v(\"#\")]),this._v(\" \"),s(\"code\",[this._v(\"$t\")])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[s(\"code\",[this._v(\"$t\")]),this._v(\" 是扩展的 Vue 实例方法， 它有以下优点和缺点：\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h4\",{attrs:{id:\"优点\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#优点\"}},[this._v(\"#\")]),this._v(\" 优点\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"你可以\"),s(\"strong\",[this._v(\"灵活地\")]),this._v(\"在模板以及 Vue 实例的计算属性和方法中使用 mustash 语法 \"),s(\"code\",[this._v(\"{{}}\")]),this._v(\"。\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h4\",{attrs:{id:\"缺点\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#缺点\"}},[this._v(\"#\")]),this._v(\" 缺点\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[s(\"code\",[this._v(\"$t\")]),this._v(\" 在\"),s(\"strong\",[this._v(\"每次\")]),this._v(\"重新渲染时都会被执行，因此它确实有翻译成本。\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h3\",{attrs:{id:\"v-t\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#v-t\"}},[this._v(\"#\")]),this._v(\" \"),s(\"code\",[this._v(\"v-t\")])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[s(\"code\",[this._v(\"v-t\")]),this._v(\" 是一个自定义指令，它有以下优点和缺点：\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h4\",{attrs:{id:\"优点-2\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#优点-2\"}},[this._v(\"#\")]),this._v(\" 优点\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"因此，可以进行\"),s(\"strong\",[this._v(\"更多性能优化\")]),this._v(\"。\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h4\",{attrs:{id:\"缺点-2\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#缺点-2\"}},[this._v(\"#\")]),this._v(\" 缺点\")])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/51.c993f5c3.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[51],{283:function(a,t,s){\"use strict\";s.r(t);var n=s(0),e=Object(n.a)({},(function(){var a=this.$createElement;this._self._c;return this._m(0)}),[function(){var a=this,t=a.$createElement,s=a._self._c||t;return s(\"div\",{staticClass:\"content\"},[s(\"h1\",{attrs:{id:\"回退本地化\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#回退本地化\"}},[a._v(\"#\")]),a._v(\" 回退本地化\")]),a._v(\" \"),s(\"p\",[a._v(\"以下语言环境信息的 \"),s(\"code\",[a._v(\"ja\")]),a._v(\" 语言环境中不存在 \"),s(\"code\",[a._v(\"message\")]),a._v(\" 键：\")]),a._v(\" \"),s(\"div\",{staticClass:\"language-js extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[a._v(\"const\")]),a._v(\" messages \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\"=\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"{\")]),a._v(\"\\n  en\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\":\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"{\")]),a._v(\"\\n    message\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\":\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'hello world'\")]),a._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\",\")]),a._v(\"\\n  ja\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\":\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"{\")]),a._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"}\")]),a._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"}\")]),a._v(\"\\n\")])])]),s(\"p\",[a._v(\"当为 VueI18n 构造函数选项指定 \"),s(\"code\",[a._v(\"fallbackLocale\")]),a._v(\" 选项时，\"),s(\"code\",[a._v(\"message\")]),a._v(\" 键使用 \"),s(\"code\",[a._v(\"en\")]),a._v(\" 语言环境进行本地化：\")]),a._v(\" \"),s(\"div\",{staticClass:\"language-js extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[a._v(\"const\")]),a._v(\" i18n \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\"=\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[a._v(\"new\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[a._v(\"VueI18n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"{\")]),a._v(\"\\n  locale\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\":\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'ja'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\",\")]),a._v(\"\\n  fallbackLocale\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\":\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'en'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\",\")]),a._v(\"\\n  messages\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\")\")]),a._v(\"\\n\")])])]),s(\"p\",[a._v(\"模板如下：\")]),a._v(\" \"),s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"<\")]),a._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\">\")])]),a._v(\"{{ $t('message') }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"</\")]),a._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\">\")])]),a._v(\"\\n\")])])]),s(\"p\",[a._v(\"输出如下：\")]),a._v(\" \"),s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"<\")]),a._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\">\")])]),a._v(\"hello world\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"</\")]),a._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\">\")])]),a._v(\"\\n\")])])]),s(\"p\",[a._v(\"注意，默认情况下回退到 \"),s(\"code\",[a._v(\"fallbackLocale\")]),a._v(\" 会产生两个控制台警告：\")]),a._v(\" \"),s(\"div\",{staticClass:\"language-console extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-text\"}},[s(\"code\",[a._v(\"[vue-i18n] Value of key 'message' is not a string!\\n[vue-i18n] Fall back to translate the keypath 'message' with 'en' locale.\\n\")])])]),s(\"p\",[a._v(\"为了避免这些警告 (同时保留那些完全没有翻译给定关键字的警告)，需初始化 \"),s(\"code\",[a._v(\"VueI18n\")]),a._v(\" 实例时设置 \"),s(\"code\",[a._v(\"silentFallbackWarn：true\")]),a._v(\"。\")]),a._v(\" \"),s(\"h2\",{attrs:{id:\"回退插值\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#回退插值\"}},[a._v(\"#\")]),a._v(\" 回退插值\")]),a._v(\" \"),s(\"p\",[a._v(\"由于翻译的键值是字符串，因此也可以作为翻译的值：\")]),a._v(\" \"),s(\"div\",{staticClass:\"language-javascript extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-javascript\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[a._v(\"const\")]),a._v(\" messages \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\"=\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"{\")]),a._v(\"\\n  ja\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\":\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"{\")]),a._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'Hello world'\")]),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\":\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'こんにちは、世界'\")]),a._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"}\")]),a._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"}\")]),a._v(\"\\n\")])])]),s(\"p\",[a._v(\"这是一种很自然的书写方式，如果在\"),s(\"code\",[a._v(\"message\")]),a._v(\"中找不到相应的键值将回退到原本的语言：\")]),a._v(\" \"),s(\"p\",[s(\"em\",[a._v(\"注意: \"),s(\"code\",[a._v(\"fallbackRoot\")]),a._v(\"的优先级高于\"),s(\"code\",[a._v(\"formatFallbackMessages\")])])]),a._v(\" \"),s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"<\")]),a._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\">\")])]),a._v(\"{{ $t('Hello world') }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"</\")]),a._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\">\")])]),a._v(\"\\n\")])])]),s(\"p\",[a._v(\"为了实现此功能，可以通过设置\"),s(\"code\",[a._v(\"formatFallbackMessages\")]),a._v(\"为\"),s(\"code\",[a._v(\"true\")]),a._v(\"：\")]),a._v(\" \"),s(\"div\",{staticClass:\"language-javascript extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-javascript\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[a._v(\"const\")]),a._v(\" messages \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\"=\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"{\")]),a._v(\"\\n  ru\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\":\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"{\")]),a._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'Hello {name}'\")]),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\":\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'Здравствуйте {name}'\")]),a._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"}\")]),a._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"}\")]),a._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[a._v(\"const\")]),a._v(\" i18n \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\"=\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[a._v(\"new\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[a._v(\"VueI18n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"{\")]),a._v(\"\\n  locale\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\":\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'ru'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\",\")]),a._v(\"\\n  fallbackLocale\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\":\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'en'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\",\")]),a._v(\"\\n  formatFallbackMessages\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\":\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token boolean\"}},[a._v(\"true\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\",\")]),a._v(\"\\n  messages\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\")\")]),a._v(\"\\n\")])])]),s(\"p\",[a._v(\"当模板\"),s(\"code\",[a._v(\"template\")]),a._v(\"如下时：\")]),a._v(\" \"),s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"<\")]),a._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\">\")])]),a._v(\"{{ $t('Hello {name}', { name: 'John' }}) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"</\")]),a._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\">\")])]),a._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"<\")]),a._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\">\")])]),a._v(\"{{ $t('The weather today is {condition}!', { condition: 'sunny' }) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"</\")]),a._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\">\")])]),a._v(\"\\n\")])])]),s(\"p\",[a._v(\"将会输出：\")]),a._v(\" \"),s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"<\")]),a._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\">\")])]),a._v(\"Здравствуйте John\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"</\")]),a._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\">\")])]),a._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"<\")]),a._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\">\")])]),a._v(\"The weather today is sunny!\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"</\")]),a._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\">\")])]),a._v(\"\\n\")])])])])}],!1,null,null,null);t.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/52.d66b2adb.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[52],{284:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),t._m(1),t._v(\" \"),a(\"p\",[t._v(\"语言环境信息如下：\")]),t._v(\" \"),t._m(2),a(\"p\",[t._v(\"模板如下：\")]),t._v(\" \"),t._m(3),a(\"p\",[t._v(\"输出如下：\")]),t._v(\" \"),t._m(4),t._m(5),t._v(\" \"),a(\"p\",[t._v(\"语言环境信息如下：\")]),t._v(\" \"),t._m(6),a(\"p\",[t._v(\"模板如下：\")]),t._v(\" \"),t._m(7),a(\"p\",[t._v(\"输出如下：\")]),t._v(\" \"),t._m(8),a(\"p\",[t._v(\"列表格式也接受类似数组的对象：\")]),t._v(\" \"),t._m(9),a(\"p\",[t._v(\"输出如下：\")]),t._v(\" \"),t._m(10),t._m(11),t._v(\" \"),a(\"div\",{staticClass:\"warning custom-block\"},[a(\"p\",{staticClass:\"custom-block-title\"},[t._v(\"提示\")]),t._v(\" \"),a(\"p\",[t._v(\"⚠️ 在你的网站上动态插入任意 HTML 可能非常危险，因为它很容易导致 XSS 攻击。仅对可信内容使用 HTML 插值，而不对用户提供的内容使用。\")]),t._v(\" \"),a(\"p\",[t._v(\"我们建议使用\"),a(\"router-link\",{attrs:{to:\"./interpolation.html\"}},[t._v(\"组件插值\")]),t._v(\" 功能。\")],1)]),t._v(\" \"),a(\"p\",[t._v(\"在某些情况下，你可能希望将翻译呈现为 HTML 信息而不是静态字符串。\")]),t._v(\" \"),t._m(12),a(\"p\",[t._v(\"模板如下：\")]),t._v(\" \"),t._m(13),a(\"p\",[t._v(\"输出如下 (取代预先格式化的信息)\")]),t._v(\" \"),t._m(14),t._m(15),t._v(\" \"),a(\"p\",[t._v(\"语言环境信息如下：\")]),t._v(\" \"),t._m(16),a(\"p\",[t._v(\"模板如下：\")]),t._v(\" \"),t._m(17),a(\"p\",[t._v(\"输出如下：\")]),t._v(\" \"),t._m(18),t._m(19),t._v(\" \"),a(\"p\",[t._v(\"有时，你可能需要使用自定义格式进行翻译 (例如：\"),a(\"a\",{attrs:{href:\"http://userguide.icu-project.org/formatparse/messages\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"ICU 信息语法\"),a(\"OutboundLink\")],1),t._v(\")。\")]),t._v(\" \"),a(\"p\",[t._v(\"你可以使用实现\"),a(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js#L41-L43\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"格式化接口\"),a(\"OutboundLink\")],1),t._v(\" 的自定义格式化函数来实现。\")]),t._v(\" \"),a(\"p\",[t._v(\"以下使用 ES2015 class 语法的自定义格式化函数：\")]),t._v(\" \"),t._m(20),a(\"p\",[t._v(\"你可以查看\"),a(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/dev/examples/formatting/custom\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"自定义格式化函数的官方示例\"),a(\"OutboundLink\")],1),t._v(\"。\")])])}),[function(){var t=this.$createElement,s=this._self._c||t;return s(\"h1\",{attrs:{id:\"格式化\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#格式化\"}},[this._v(\"#\")]),this._v(\" 格式化\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"具名格式\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#具名格式\"}},[this._v(\"#\")]),this._v(\" 具名格式\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'{msg} world'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('message.hello', { msg: 'hello' }) }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"hello world\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"列表格式\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#列表格式\"}},[this._v(\"#\")]),this._v(\" 列表格式\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'{0} world'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('message.hello', ['hello']) }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"hello world\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('message.hello', {'0': 'hello'}) }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"hello world\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"html-格式化\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#html-格式化\"}},[this._v(\"#\")]),this._v(\" HTML 格式化\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hello <br> world'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-html\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"$t('message.hello')\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"hello\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!--<br> 存在，但呈现为 html 而不是字符串--\\x3e\")]),t._v(\"\\nworld\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"支持-ruby-on-rails-的-i18n-格式\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#支持-ruby-on-rails-的-i18n-格式\"}},[this._v(\"#\")]),this._v(\" 支持 ruby on rails 的 i18n 格式\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'%{msg} world'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('message.hello', { msg: 'hello' }) }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"hello world\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"自定义格式\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#自定义格式\"}},[this._v(\"#\")]),this._v(\" 自定义格式\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 实现自定义格式\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"class\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"CustomFormatter\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"constructor\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"options\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n       \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 插值\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// @param {string} 信息\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   列表或具名格式的字符串。\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   例如：\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   - 具名格式：'Hi {name}'\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   - 列表格式：'Hi {0}'\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// @param {Object | Array} 值\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   `message` 插值的值\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   使用 `$t`， `$tc` 和 `i18n` 函数式组件传递值。\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   e.g.\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   - $t('hello', { name: 'kazupon' }) -> 传递值：Object `{ name: 'kazupon' }`\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   - $t('hello', ['kazupon']) -> 传递值：Array `['kazupon']`\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   - `i18n` 函数式组件 (组件插值)\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v('//     <i18n path=\"hello\">')]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//       <p>kazupon</p>\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//       <p>how are you?</p>\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//     </i18n>\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//     -> 传递值：Array (included VNode):\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//        `[VNode{ tag: 'p', text: 'kazupon', ...}, VNode{ tag: 'p', text: 'how are you?', ...}]`\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// @return {Array<any>}\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   插值，你需要返回以下内容：\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   - 当使用 `$t` 或 `$tc` 数组中应该是字符串。\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//   - 当使用 `i18n` 函数式组件时 数组中应包含 VNode 对象。\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"interpolate\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"message\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" values\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n       \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 在这里实现插值逻辑\")]),t._v(\"\\n       \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\\n       \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 返回插值数组\")]),t._v(\"\\n       \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'resolved message string'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\"\\n     \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 注册 `formatter` 选项\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en-US'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  formatter\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"CustomFormatter\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"/* 这里是构造函数选项 */\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en-US'\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 启动!\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/53.21ae73c5.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[53],{285:function(t,s,n){\"use strict\";n.r(s);var a=n(0),e=Object(a.a)({},(function(){var t=this.$createElement;this._self._c;return this._m(0)}),[function(){var t=this,s=t.$createElement,n=t._self._c||s;return n(\"div\",{staticClass:\"content\"},[n(\"h1\",{attrs:{id:\"热重载\"}},[n(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#热重载\"}},[t._v(\"#\")]),t._v(\" 热重载\")]),t._v(\" \"),n(\"p\",[t._v(\"你可以监视本地化文件中的更改，并将更改热重载到应用程序中。\")]),t._v(\" \"),n(\"div\",{staticClass:\"language-js extra-class\"},[n(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[n(\"code\",[n(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 语言环境信息\")]),t._v(\"\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),n(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),n(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// VueI18n 实例\")]),t._v(\"\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),n(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),n(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 运行程序\")]),t._v(\"\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" app \"),n(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),n(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 热更新\")]),t._v(\"\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"if\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"module\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"hot\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  module\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"hot\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"accept\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),n(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'./en'\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'./ja'\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"function\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    i18n\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setLocaleMessage\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"require\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'./en'\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"default\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n    i18n\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setLocaleMessage\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ja'\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"require\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'./ja'\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"default\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n    \"),n(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 同样可以通过 $i18n 属性进行热更新\")]),t._v(\"\\n    \"),n(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// app.$i18n.setLocaleMessage('en', require('./en').default)\")]),t._v(\"\\n    \"),n(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// app.$i18n.setLocaleMessage('ja', require('./ja').default)\")]),t._v(\"\\n  \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/54.cd4c9ca8.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[54],{286:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),t._m(1),t._v(\" \"),t._m(2),t._v(\" \"),a(\"p\",[t._v(\"有时，我们需要使用包含 HTML 标签或组件的语言环境信息进行本地化。例如：\")]),t._v(\" \"),t._m(3),t._m(4),t._v(\" \"),t._m(5),a(\"p\",[t._v(\"你可能会尝试在以下模板中实现：\")]),t._v(\" \"),t._m(6),a(\"p\",[t._v(\"输出：\")]),t._v(\" \"),t._m(7),t._m(8),t._v(\" \"),t._m(9),t._v(\" \"),t._m(10),t._m(11),a(\"p\",[t._v(\"输出如下：\")]),t._v(\" \"),t._m(12),a(\"p\",[t._v(\"关于上面的例子，见\"),a(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/dev/examples/interpolation\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"示例\"),a(\"OutboundLink\")],1)]),t._v(\" \"),t._m(13),t._v(\" \"),t._m(14),t._v(\" \"),t._m(15),t._v(\" \"),t._m(16),t._v(\" \"),t._m(17),t._v(\" \"),t._m(18),t._v(\" \"),t._m(19),t._v(\" \"),t._m(20),t._v(\" \"),t._m(21),t._m(22),a(\"p\",[t._v(\"输出：\")]),t._v(\" \"),t._m(23),t._m(24),t._v(\" \"),t._m(25),t._v(\" \"),t._m(26),a(\"p\",[t._v(\"输出：\")]),t._v(\" \"),t._m(27)])}),[function(){var t=this.$createElement,s=this._self._c||t;return s(\"h1\",{attrs:{id:\"组件插值\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#组件插值\"}},[this._v(\"#\")]),this._v(\" 组件插值\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"基本用法\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#基本用法\"}},[this._v(\"#\")]),this._v(\" 基本用法\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"tip custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"支持版本\")]),this._v(\" \"),s(\"p\",[this._v(\"🆕 7.0 新增\")])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"I accept xxx \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"href\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"/term\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Terms of Service Agreement\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"在上面的信息中，如果你使用 \"),s(\"code\",[this._v(\"$t\")]),this._v(\"，可能你会尝试编写以下语言环境信息：\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    term1\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'I Accept xxx\\\\'s'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    term2\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Terms of Service Agreement'\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('term1') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"href\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"/term\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('term2') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"I accept xxx \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"href\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"/term\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Terms of Service Agreement\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"这是非常麻烦的，如果在语言环境信息中配置 \"),s(\"code\",[this._v(\"<a>\")]),this._v(\" 标签，则可能由于使用了 \"),s(\"code\",[this._v(\"v-html=\\\"$t('term')\\\"\")]),this._v(\" 进行本地化而存在被 XSS 攻击的可能性。\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"你可以使用 \"),s(\"code\",[this._v(\"i18n\")]),this._v(\" 函数式组件来避免它。例如：\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"path\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"term\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"tag\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"label\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"for\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"tos\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":href\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"url\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"target\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"_blank\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('tos') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    tos\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Term of Service'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    term\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'I accept xxx {0}.'\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  ja\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    tos\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'利用規約'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    term\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'私は xxx の{0}に同意します。'\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  data\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    url\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'/term'\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"label\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"for\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"tos\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    I accept xxx \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"href\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"/term\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"target\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"_blank\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Term of Service\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\".\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"label\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[s(\"code\",[this._v(\"i18n\")]),this._v(\" 函数式组件的子元素用 \"),s(\"code\",[this._v(\"path\")]),this._v(\" 属性的语言环境信息进行插值。在上面的例子中，\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{pre:!0},[s(\"p\",[s(\"code\",[this._v('<a :href=\"url\" target=\"_blank\">{{ $t(\\'tos\\') }}</a>')])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"被插入了语言环境信息 \"),s(\"code\",[this._v(\"term\")]),this._v(\"。\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"在上面的示例中，组件插值遵循\"),s(\"strong\",[this._v(\"列表格式\")]),this._v(\"。\"),s(\"code\",[this._v(\"i18n\")]),this._v(\" 函数式组件的子项按其出现顺序进行插值。\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"高级用法\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#高级用法\"}},[this._v(\"#\")]),this._v(\" 高级用法\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"tip custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"支持版本\")]),this._v(\" \"),s(\"p\",[this._v(\"🆕 7.2 新增\")])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"warning custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"提示\")]),this._v(\" \"),s(\"p\",[this._v(\"⚠️ 在 \"),s(\"code\",[this._v(\"i18n\")]),this._v(\" 组件中，仅包含空格的文本内容将被省略。\")])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"在 \"),s(\"code\",[this._v(\"place\")]),this._v(\" 特性的帮助下支持具名格式。例如：\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"path\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"info\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"tag\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"p\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"place\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"limit\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ changeLimit }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"place\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"action\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":href\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"changeUrl\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('change') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    info\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'You can {action} until {limit} minutes from departure.'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    change\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'change your flight'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    refund\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'refund the ticket'\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  data\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    changeUrl\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'/change'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    refundUrl\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'/refund'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    changeLimit\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"15\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    refundLimit\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"30\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    You can \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"href\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"/change\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"change your flight\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\" until \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"15\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\" minutes from departure.\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"warning custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"提示\")]),this._v(\" \"),s(\"p\",[this._v(\"⚠️ \"),s(\"code\",[this._v(\"i18n\")]),this._v(\" 组件的所有子项都必须设置 \"),s(\"code\",[this._v(\"place\")]),this._v(\" 属性。否则它将回退到列表格式。\")])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"如果你仍想在命名格式中插入文本内容，可以在 \"),s(\"code\",[this._v(\"i18n\")]),this._v(\" 组件上定义 \"),s(\"code\",[this._v(\"places\")]),this._v(\" 属性。例如：\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"path\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"info\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"tag\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"p\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":places\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"{ limit: refundLimit }\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"place\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"action\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":href\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"refundUrl\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('refund') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    You can \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"href\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"/refund\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"refund your ticket\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\" until 30 minutes from departure.\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- ... --\\x3e\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/55.caa71074.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[55],{287:function(t,s,n){\"use strict\";n.r(s);var a=n(0),e=Object(a.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),n(\"p\",[t._v(\"一次加载所有翻译文件是过度和不必要的。\")]),t._v(\" \"),n(\"p\",[t._v(\"使用 Webpack 时，延迟加载或异步加载转换文件非常简单。\")]),t._v(\" \"),n(\"p\",[t._v(\"让我们假设我们有一个类似于下面的项目目录\")]),t._v(\" \"),t._m(1),t._m(2),t._v(\" \"),t._m(3),t._m(4),t._v(\" \"),t._m(5),t._v(\" \"),n(\"p\",[t._v(\"你可以在 \"),n(\"a\",{attrs:{href:\"https://webpack.js.org/guides/code-splitting/#dynamic-imports\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Webpack 文档\"),n(\"OutboundLink\")],1),t._v(\" 中了解有关导入功能的更多信息。\")]),t._v(\" \"),t._m(6),t._v(\" \"),t._m(7),t._m(8)])}),[function(){var t=this.$createElement,s=this._self._c||t;return s(\"h1\",{attrs:{id:\"延迟加载翻译\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#延迟加载翻译\"}},[this._v(\"#\")]),this._v(\" 延迟加载翻译\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"language- extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-text\"}},[s(\"code\",[this._v(\"our-cool-project\\n-dist\\n-src\\n--routes\\n--store\\n--setup\\n---i18n-setup.js\\n--lang\\n---en.js\\n---it.js\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[s(\"code\",[this._v(\"lang\")]),this._v(\" 文件夹是我们所有翻译文件所在的位置。\"),s(\"code\",[this._v(\"setup\")]),this._v(\" 文件夹是我们的任意设置的文件，如 i18n-setup，全局组件 inits，插件 inits 和其他位置。\")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n(\"div\",{staticClass:\"language-js extra-class\"},[n(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[n(\"code\",[n(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//i18n-setup.js\")]),t._v(\"\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),t._v(\" Vue \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'vue'\")]),t._v(\"\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),t._v(\" VueI18n \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'vue-i18n'\")]),t._v(\"\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),t._v(\" messages \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'@/lang/en'\")]),t._v(\"\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),t._v(\" axios \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'axios'\")]),t._v(\"\\n\\nVue\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"use\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"VueI18n\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"export\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),n(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),n(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 设置语言环境\")]),t._v(\"\\n  fallbackLocale\"),n(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages \"),n(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 设置语言环境信息\")]),t._v(\"\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" loadedLanguages \"),n(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),n(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 我们的预装默认语言\")]),t._v(\"\\n\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"function\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setI18nLanguage\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"lang\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"locale \"),n(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" lang\\n  axios\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"defaults\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"headers\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"common\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),n(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Accept-Language'\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" lang\\n  document\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"querySelector\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'html'\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setAttribute\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'lang'\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" lang\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" lang\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"export\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"function\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"loadLanguageAsync\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"lang\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"if\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"i18n\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"locale \"),n(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"!==\")]),t._v(\" lang\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"if\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"!\")]),t._v(\"loadedLanguages\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"includes\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"lang\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v('/* webpackChunkName: \"lang-[request]\" */')]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token template-string\"}},[n(\"span\",{pre:!0,attrs:{class:\"token template-punctuation string\"}},[t._v(\"`\")]),n(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"@/lang/\")]),n(\"span\",{pre:!0,attrs:{class:\"token interpolation\"}},[n(\"span\",{pre:!0,attrs:{class:\"token interpolation-punctuation punctuation\"}},[t._v(\"${\")]),t._v(\"lang\"),n(\"span\",{pre:!0,attrs:{class:\"token interpolation-punctuation punctuation\"}},[t._v(\"}\")])]),n(\"span\",{pre:!0,attrs:{class:\"token template-punctuation string\"}},[t._v(\"`\")])]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"then\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"msgs\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        i18n\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setLocaleMessage\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"lang\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" msgs\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"default\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n        loadedLanguages\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"push\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"lang\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n        \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setI18nLanguage\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"lang\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n    \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n    \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" Promise\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"resolve\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setI18nLanguage\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"lang\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" Promise\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"resolve\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"lang\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"简而言之，我们正在创建一个新的 VueI18n 实例。然后我们创建一个 \"),s(\"code\",[this._v(\"loadedLanguages\")]),this._v(\" 数组，它将跟踪我们加载的语言。接下来是 \"),s(\"code\",[this._v(\"setI18nLanguage\")]),this._v(\" 函数，它将实际更改 vueI18n 实例、axios 以及其它需要本地化的地方。\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[s(\"code\",[this._v(\"loadLanguageAsync\")]),this._v(\" 是实际用于更改语言的函数。加载新文件是通过import功能完成的，\"),s(\"code\",[this._v(\"import\")]),this._v(\" 功能由 Webpack 慷慨提供，它允许我们动态加载文件，并且因为它使用 promise，我们可以轻松地等待加载完成。\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"使用 \"),s(\"code\",[this._v(\"loadLanguageAsync\")]),this._v(\" 函数很简单。一个常见的用例是在 vue-router beforeEach 钩子里面。\")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n(\"div\",{staticClass:\"language-js extra-class\"},[n(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[n(\"code\",[t._v(\"router\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"beforeEach\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"to\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" next\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),n(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" lang \"),n(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" to\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"params\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"lang\\n  \"),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"loadLanguageAsync\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"lang\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"then\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),n(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"next\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),n(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"我们可以通过检查 \"),s(\"code\",[this._v(\"lang\")]),this._v(\" 实际上是否支持来改进这一点，调用 \"),s(\"code\",[this._v(\"reject\")]),this._v(\" 这样我们就可以在 beforeEach 捕获路由转换。\")])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/56.c8f906b3.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[56],{288:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this.$createElement;this._self._c;return this._m(0)}),[function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[a(\"h1\",{attrs:{id:\"语言环境变更\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#语言环境变更\"}},[t._v(\"#\")]),t._v(\" 语言环境变更\")]),t._v(\" \"),a(\"p\",[t._v(\"通常，使用 Vue 根实例作为起点，使用 \"),a(\"code\",[t._v(\"VueI18n\")]),t._v(\" 类的 \"),a(\"code\",[t._v(\"locale\")]),t._v(\" 属性作为参考来本地化所有子组件。\")]),t._v(\" \"),a(\"p\",[t._v(\"有时你可能希望动态更改语言环境。在这种情况下，你可以更改 \"),a(\"code\",[t._v(\"VueI18n\")]),t._v(\" 实例的 \"),a(\"code\",[t._v(\"locale\")]),t._v(\" 属性的值。\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ja'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 设置语言环境\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 创建 Vue 根实例\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 更改为其它的 locale\")]),t._v(\"\\ni18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"locale \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"每个组件都包含一个引用为 \"),a(\"code\",[t._v(\"$i18n\")]),t._v(\" 属性的 \"),a(\"code\",[t._v(\"VueI18n\")]),t._v(\" 实例，该实例也可用于更改语言环境。\")]),t._v(\" \"),a(\"p\",[t._v(\"示例：\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"template\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"class\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"locale-changer\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"select\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-model\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"$i18n.locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"option\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-for\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"(lang, i) in langs\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":key\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"`Lang${i}`\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":value\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"lang\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ lang }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"option\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"select\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"template\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"script\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token script\"}},[a(\"span\",{pre:!0,attrs:{class:\"token language-javascript\"}},[t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"export\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"default\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  name\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'locale-changer'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"data\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" langs\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ja'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"script\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),a(\"div\",{staticClass:\"warning custom-block\"},[a(\"p\",{staticClass:\"custom-block-title\"},[t._v(\"警告\")]),t._v(\" \"),a(\"p\",[t._v(\"⚠️ 对于使用了 \"),a(\"code\",[t._v(\"sync: false\")]),t._v(\" 的组件，语言环境的更改将被忽略。\")])])])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/57.388c89dc.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[57],{289:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this.$createElement;this._self._c;return this._m(0)}),[function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[a(\"h1\",{attrs:{id:\"语言环境信息的语法\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#语言环境信息的语法\"}},[t._v(\"#\")]),t._v(\" 语言环境信息的语法\")]),t._v(\" \"),a(\"h2\",{attrs:{id:\"结构\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#结构\"}},[t._v(\"#\")]),t._v(\" 结构\")]),t._v(\" \"),a(\"p\",[t._v(\"语言环境信息的语法如下：\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-typescript extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-typescript\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 作为 Flowtype 定义，语言环境信息的语法类似于 BNF 注释\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"type\")]),t._v(\" LocaleMessages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"key\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" Locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" LocaleMessageObject \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"type\")]),t._v(\" LocaleMessageObject \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"key\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" Path\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" LocaleMessage \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"type\")]),t._v(\" LocaleMessageArray \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" LocaleMessage\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"type\")]),t._v(\" LocaleMessage \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token builtin\"}},[t._v(\"string\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"|\")]),t._v(\" LocaleMessageObject \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"|\")]),t._v(\" LocaleMessageArray\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"type\")]),t._v(\" Locale \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token builtin\"}},[t._v(\"string\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"type\")]),t._v(\" Path \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token builtin\"}},[t._v(\"string\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"基于以上语法，你可以配置以下结构的 Locale 信息：\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-json extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-json\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v('\"en\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 'en' Locale\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v('\"key1\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"this is message1\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 基本的\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v('\"nested\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 嵌套\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v('\"message1\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"this is nested message1\"')]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v('\"errors\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 数组\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"this is 0 error code message\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 数组嵌套对象\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v('\"internal1\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"this is internal 1 error message\"')]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 数组嵌套数组\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"this is nested array error 1\"')]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v('\"ja\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 'ja' Locale\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"在上面的语言环境信息的结构中，你可以使用以下键名路径进行翻译。\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- 基本的 --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('key1') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- 嵌套 --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('nested.message1') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- 数组 --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('errors[0]') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- 数组嵌套对象 --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('errors[1].internal1') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- 数组嵌套数组 --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('errors[2][0]') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"输出以下内容：\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- 基本的 --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"this is message1\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- 嵌套 --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"this is nested message1\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- 数组 --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"this is 0 error code message\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- 数组嵌套对象 --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"this is internal 1 error message\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- 数组嵌套数组 --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"this is nested array error 1\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),a(\"h2\",{attrs:{id:\"linked-locale-messages\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#linked-locale-messages\"}},[t._v(\"#\")]),t._v(\" Linked locale messages\")]),t._v(\" \"),a(\"p\",[t._v(\"如果有一个翻译关键字总是与另一个具有相同的具体文本，你可以链接到它。要链接到另一个翻译关键字，你所要做的就是在其内容前加上一个 \"),a(\"code\",[t._v(\"@:\")]),t._v(\" 符号后跟完整的翻译键名，包括你要链接到的命名空间。\")]),t._v(\" \"),a(\"p\",[t._v(\"语言环境信息如下：\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      the_world\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'the world'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      dio\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'DIO:'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      linked\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'@:message.dio @:message.the_world !!!!'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"模板如下：\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('message.linked') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"输出如下：\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"DIO: the world !!!!\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),a(\"h3\",{attrs:{id:\"按括号分组\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#按括号分组\"}},[t._v(\"#\")]),t._v(\" 按括号分组\")]),t._v(\" \"),a(\"p\",[t._v(\"链接到的语言环境信息的键名也可以形如 \"),a(\"code\",[t._v(\"@:(message.foo.bar.baz)\")]),t._v(\"，其中链接到另一段翻译的键名在括号 \"),a(\"code\",[t._v(\"()\")]),t._v(\" 里。\")]),t._v(\" \"),a(\"p\",[t._v(\"如果链接 \"),a(\"code\",[t._v(\"@:message.something\")]),t._v(\" 后紧跟着一个点 \"),a(\"code\",[t._v(\".\")]),t._v(\"，则此选项非常有用，因为它本不该成为但却成为了链接的一部分。\")]),t._v(\" \"),a(\"p\",[t._v(\"语言环境信息如下：\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      dio\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'DIO'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      linked\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'There\\\\'s a reason, you lost, @:(message.dio).'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"模板如下：\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $t('message.linked') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"输出如下：\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"There's a reason, you lost, DIO.\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/58.ad6e14bc.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[58],{290:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),t._m(1),t._v(\" \"),a(\"p\",[t._v(\"你可以使用你定义的格式来本地化数字。\")]),t._v(\" \"),a(\"p\",[t._v(\"数字格式如下：\")]),t._v(\" \"),t._m(2),a(\"p\",[t._v(\"如上，你可以指定具名的 (例如：\"),a(\"code\",[t._v(\"currency\")]),t._v(\" 等) 的数字格式，并且需要使用 \"),a(\"a\",{attrs:{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"ECMA-402 Intl.NumberFormat 的选项\"),a(\"OutboundLink\")],1),t._v(\"。\")]),t._v(\" \"),t._m(3),t._v(\" \"),t._m(4),a(\"p\",[t._v(\"模板如下：\")]),t._v(\" \"),t._m(5),a(\"p\",[t._v(\"输出如下：\")]),t._v(\" \"),t._m(6)])}),[function(){var t=this.$createElement,s=this._self._c||t;return s(\"h1\",{attrs:{id:\"数字本地化\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#数字本地化\"}},[this._v(\"#\")]),this._v(\" 数字本地化\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"tip custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"支持版本\")]),this._v(\" \"),s(\"p\",[this._v(\"🆕 7.0 新增\")])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" numberFormats \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en-US'\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    currency\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      style\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'currency'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" currency\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'USD'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ja-JP'\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    currency\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      style\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'currency'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" currency\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'JPY'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" currencyDisplay\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'symbol'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"之后就像语言环境信息一样，你需要指定 \"),s(\"code\",[this._v(\"VueI18n\")]),this._v(\" 构造函数的 \"),s(\"code\",[this._v(\"numberFormats\")]),this._v(\" 选项：\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  numberFormats\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $n(100, 'currency') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $n(100, 'currency', 'ja-JP') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"$100.00\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"￥100\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/59.3d64068b.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[59],{291:function(t,a,s){\"use strict\";s.r(a);var n=s(0),p=Object(n.a)({},(function(){var t=this.$createElement;this._self._c;return this._m(0)}),[function(){var t=this,a=t.$createElement,s=t._self._c||a;return s(\"div\",{staticClass:\"content\"},[s(\"h1\",{attrs:{id:\"复数\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#复数\"}},[t._v(\"#\")]),t._v(\" 复数\")]),t._v(\" \"),s(\"p\",[t._v(\"你可以使用复数进行翻译。你必须定义具有管道 \"),s(\"code\",[t._v(\"|\")]),t._v(\" 分隔符的语言环境，并在管道分隔符中定义复数。\")]),t._v(\" \"),s(\"p\",[t._v(\"语言环境信息如下：\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-js extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    car\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'car | cars'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    apple\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'no apples | one apple | {count} apples'\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),s(\"p\",[t._v(\"模板如下：\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('car', 1) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('car', 2) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('apple', 0) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('apple', 1) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('apple', 10, { count: 10 }) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),s(\"p\",[t._v(\"输出如下：\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"car\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"cars\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"no apples\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"one apple\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"10 apples\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),s(\"h2\",{attrs:{id:\"通过预定义的参数访问该数字\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#通过预定义的参数访问该数字\"}},[t._v(\"#\")]),t._v(\" 通过预定义的参数访问该数字\")]),t._v(\" \"),s(\"p\",[t._v(\"你无需明确指定复数的数字。可以通过预定义的命名参数 \"),s(\"code\",[t._v(\"{count}\")]),t._v(\" 和/或 \"),s(\"code\",[t._v(\"{n}\")]),t._v(\" 在语言环境信息中访问该数字。如有必要，你可以覆盖这些预定义的命名参数。\")]),t._v(\" \"),s(\"p\",[t._v(\"语言环境信息如下：\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-js extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    apple\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'no apples | one apple | {count} apples'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    banana\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'no bananas | {n} banana | {n} bananas'\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),s(\"p\",[t._v(\"模板如下：\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('apple', 10, { count: 10 }) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('apple', 10) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('banana', 1, { n: 1 }) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('banana', 1) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('banana', 100, { n: 'too many' }) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),s(\"p\",[t._v(\"输出如下：\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"10 apples\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"10 apples\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"1 banana\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"1 banana\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"too many bananas\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),s(\"h2\",{attrs:{id:\"自定义复数\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#自定义复数\"}},[t._v(\"#\")]),t._v(\" 自定义复数\")]),t._v(\" \"),s(\"p\",[t._v(\"然而，这种复数并不适用于所有语言 (例如，斯拉夫语言具有不同的复数规则)。\")]),t._v(\" \"),s(\"p\",[t._v(\"为了实现这些规则，你可以覆盖 \"),s(\"code\",[t._v(\"VueI18n.prototype.getChoiceIndex\")]),t._v(\" 函数。\")]),t._v(\" \"),s(\"p\",[t._v(\"使用斯拉夫语言规则的简化示例 (俄语、乌克兰语等)：\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-js extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[s(\"code\",[t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" defaultImpl \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"prototype\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"getChoiceIndex\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"/**\\n * @param choice {number} 由 $tc 输入的选择索引：`$tc('path.to.rule', choiceIndex)`\\n * @param choicesLength {number} 总体可用选择\\n * @returns 选择复数单词的最终选择索引\\n**/\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"prototype\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),s(\"span\",{pre:!0,attrs:{class:\"token function-variable function\"}},[t._v(\"getChoiceIndex\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"function\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"choice\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" choicesLength\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// this === VueI18n 实例，所以语言环境属性也存在于此处\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"if\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"this\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"locale \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"!==\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ru'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 继续执行默认实现\")]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"defaultImpl\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),s(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"apply\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"this\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" arguments\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"if\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"choice \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"===\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"0\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"0\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" teen \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" choice \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"10\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"&&\")]),t._v(\" choice \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"20\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" endsWithOne \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" choice \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"%\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"10\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"===\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"1\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"if\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"!\")]),t._v(\"teen \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"&&\")]),t._v(\" endsWithOne\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"1\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"if\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"!\")]),t._v(\"teen \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"&&\")]),t._v(\" choice \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"%\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"10\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"2\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"&&\")]),t._v(\" choice \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"%\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"10\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"4\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"2\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"choicesLength \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"4\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"?\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"2\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"3\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),s(\"p\",[t._v(\"这将有效地实现这一目标：\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-javascript extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-javascript\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  ru\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    car\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'0 машин | 1 машина | {n} машины | {n} машин'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    banana\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'нет бананов | 1 банан | {n} банана | {n} бананов'\")]),t._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),s(\"p\",[t._v(\"格式为 \"),s(\"code\",[t._v(\"0 things | 1 thing | few things | multiple things\")]),t._v(\".\")]),t._v(\" \"),s(\"p\",[t._v(\"你的模板仍然需要使用 \"),s(\"code\",[t._v(\"$tc()\")]),t._v(\"，而不是 \"),s(\"code\",[t._v(\"$t()\")]),t._v(\" ：\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('car', 1) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('car', 2) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('car', 4) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('car', 12) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('car', 21) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('banana', 0) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('banana', 4) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('banana', 11) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $tc('banana', 31) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),s(\"p\",[t._v(\"结果如下：\")]),t._v(\" \"),s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"1 машина\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"2 машины\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"4 машины\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"12 машин\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"21 машина\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"нет бананов\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"4 банана\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"11 бананов\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"31 банан\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])])}],!1,null,null,null);a.default=p.exports}}]);"
  },
  {
    "path": "docs/assets/js/6.b88753f1.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{238:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this.$createElement;this._self._c;return this._m(0)}),[function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[a(\"h1\",{attrs:{id:\"component-based-localization\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#component-based-localization\"}},[t._v(\"#\")]),t._v(\" Component based localization\")]),t._v(\" \"),a(\"p\",[t._v(\"In general, locale info (e.g. \"),a(\"code\",[t._v(\"locale\")]),t._v(\",\"),a(\"code\",[t._v(\"messages\")]),t._v(\", etc) is set as constructor option of \"),a(\"code\",[t._v(\"VueI18n\")]),t._v(\" instance and it sets \"),a(\"code\",[t._v(\"i18n\")]),t._v(\" option as root Vue instance.\")]),t._v(\" \"),a(\"p\",[t._v(\"Therefore you can globally translate using \"),a(\"code\",[t._v(\"$t\")]),t._v(\" or \"),a(\"code\",[t._v(\"$tc\")]),t._v(\" in the root Vue instance and any composed component. You can also manage locale info for each component separately, which might be more convenient due to Vue components oriented design.\")]),t._v(\" \"),a(\"p\",[t._v(\"Component based localization example:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// setup locale info for root Vue instance\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ja'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hello world'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        greeting\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'good morning'\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    ja\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'こんにちは、世界'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        greeting\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'おはようございます'\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Define component\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" Component1 \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  template\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token template-string\"}},[a(\"span\",{pre:!0,attrs:{class:\"token template-punctuation string\"}},[t._v(\"`\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\\n    <div class=\"container\">\\n     <p>Component1 locale messages: {{ $t(\"message.hello\") }}</p>\\n     <p>Fallback global locale messages: {{ $t(\"message.greeting\") }}</p>\\n   </div>')]),a(\"span\",{pre:!0,attrs:{class:\"token template-punctuation string\"}},[t._v(\"`\")])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// `i18n` option, setup locale info for component\")]),t._v(\"\\n    messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hello component1'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      ja\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'こんにちは、component1'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  components\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    Component1\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"Template:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v('{{ $t(\"message.hello\") }}'),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"component1\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"component1\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"Outputs the following:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"こんにちは、世界\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"class\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"container\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Component1 locale messages: こんにちは、component1\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Fallback global locale messages: おはようございます\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"As in the example above, if the component doesn't have the locale message, it falls back to globally defined localization info. The component uses the language set in the root instance (in the above example: \"),a(\"code\",[t._v(\"locale: 'ja'\")]),t._v(\").\")]),t._v(\" \"),a(\"p\",[t._v(\"Note that, by default, falling back to root locale generates two warnings in the console:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-console extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-text\"}},[a(\"code\",[t._v(\"[vue-i18n] Value of key 'message.greeting' is not a string!\\n[vue-i18n] Fall back to translate the keypath 'message.greeting' with root locale.\\n\")])])]),a(\"p\",[t._v(\"To suppress these warnings (while keeping those which warn of the total absence of translation for the given key) set \"),a(\"code\",[t._v(\"silentFallbackWarn: true\")]),t._v(\" when initializing the \"),a(\"code\",[t._v(\"VueI18n\")]),t._v(\" instance.\")]),t._v(\" \"),a(\"p\",[t._v(\"If you want to localize using the component locale, you can do that with \"),a(\"code\",[t._v(\"sync: false\")]),t._v(\" and \"),a(\"code\",[t._v(\"locale\")]),t._v(\" in the \"),a(\"code\",[t._v(\"i18n\")]),t._v(\" option.\")]),t._v(\" \"),a(\"h2\",{attrs:{id:\"shared-locale-messages-for-components\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#shared-locale-messages-for-components\"}},[t._v(\"#\")]),t._v(\" Shared locale messages for components\")]),t._v(\" \"),a(\"p\",[t._v(\"Sometimes you may want to import shared locale messages for certain components, not fallback from global locale messages (e.g. common messages of certain feature for components.\")]),t._v(\" \"),a(\"p\",[t._v(\"You can use \"),a(\"code\",[t._v(\"sharedMessages\")]),t._v(\" options of \"),a(\"code\",[t._v(\"i18n\")]),t._v(\".\")]),t._v(\" \"),a(\"p\",[t._v(\"Common Locale Messages example:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"export\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"default\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    buttons\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      save\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"Save\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  ja\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    buttons\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      save\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"保存\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"Components:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),t._v(\" commonMessage \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'./locales/common'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// import common locale messages\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"export\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"default\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  name\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ServiceModal'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  template\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token template-string\"}},[a(\"span\",{pre:!0,attrs:{class:\"token template-punctuation string\"}},[t._v(\"`\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\\n    <div class=\"modal\">\\n      <div class=\"body\">\\n        <p>This is good service</p>\\n      </div>\\n      <div class=\"footer\">\\n        <button type=\"button\">{{ $t(\\'buttons.save\\') }}</button>\\n      </div>\\n    </div>\\n  ')]),a(\"span\",{pre:!0,attrs:{class:\"token template-punctuation string\"}},[t._v(\"`\")])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"...\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    sharedMessages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" commonMessages\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),a(\"p\",[t._v(\"If \"),a(\"code\",[t._v(\"sharedMessages\")]),t._v(\" option is specified along with the \"),a(\"code\",[t._v(\"messages\")]),t._v(\" option, those messages will be merged into locale messages into the VueI18n instance of the target component.\")]),t._v(\" \"),a(\"h2\",{attrs:{id:\"translation-in-functional-component\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#translation-in-functional-component\"}},[t._v(\"#\")]),t._v(\" Translation in functional component\")]),t._v(\" \"),a(\"p\",[t._v(\"When using a functional component, all data (including props, children, slots, parent, etc.) is passed through the \"),a(\"code\",[t._v(\"context\")]),t._v(\" containing the attributes, and it doesn't recognize the \"),a(\"code\",[t._v(\"this\")]),t._v(\" scope, so when using the vue-i18n on functional components, you must refer to \"),a(\"code\",[t._v(\"$t\")]),t._v(\" as \"),a(\"code\",[t._v(\"parent.$t\")]),t._v(\", check the example below:\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[t._v(\"...\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"a\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"href\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"#\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"target\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"_blank\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"rel\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"noopener noreferrer\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"img\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"src\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\":alt\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"parent.$t('message.hello')\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"a\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n...\\n\")])])])])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/60.12bfe8e9.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[60],{292:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),t._m(1),t._v(\" \"),t._m(2),t._v(\" \"),a(\"p\",[t._v(\"以下是\"),a(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/dev/examples/sfc\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"单文件组件示例\"),a(\"OutboundLink\")],1),t._v(\":\")]),t._v(\" \"),t._m(3),t._m(4),t._v(\" \"),a(\"p\",[t._v(\"为了使用 \"),a(\"code\",[t._v(\"<i18n>\")]),t._v(\" 自定义块，你需要安装 \"),a(\"code\",[t._v(\"vue-loader\")]),t._v(\" 和 \"),a(\"code\",[t._v(\"vue-i18n-loader\")]),t._v(\"。如果你使用了单文件组件，\"),a(\"a\",{attrs:{href:\"https://github.com/vuejs/vue-loader\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"vue-loader\"),a(\"OutboundLink\")],1),t._v(\" 很可能已在项目中使用了，那么 \"),a(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n-loader\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"vue-i18n-loader\"),a(\"OutboundLink\")],1),t._v(\" 必须另外安装：\")]),t._v(\" \"),t._m(5),t._m(6),t._v(\" \"),a(\"p\",[t._v(\"需要对 Webpack 进行以下配置：\")]),t._v(\" \"),a(\"p\",[t._v(\"对于 vue-loader v15 或更高版本：\")]),t._v(\" \"),t._m(7),a(\"p\",[t._v(\"对于 vue-loader v14：\")]),t._v(\" \"),t._m(8),t._m(9),t._v(\" \"),a(\"p\",[a(\"a\",{attrs:{href:\"https://github.com/vuejs/vue-cli\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Vue CLI 3.0\"),a(\"OutboundLink\")],1),t._v(\" 隐藏了 webpack 配置，因此，如果我们想在单文件组件中添加对 \"),a(\"code\",[t._v(\"<i18n>\")]),t._v(\" 标记的支持，我们需要修改现有配置。\")]),t._v(\" \"),t._m(10),t._v(\" \"),a(\"p\",[t._v(\"对于 vue-loader v15 或更高版本：\")]),t._v(\" \"),t._m(11),a(\"p\",[t._v(\"对于 vue-loader v14：\")]),t._v(\" \"),t._m(12),a(\"p\",[a(\"em\",[t._v(\"别忘了安装\"),a(\"a\",{attrs:{href:\"https://github.com/KyleAMathews/deepmerge\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"deepmerge\"),a(\"OutboundLink\")],1),t._v(\"! (\"),a(\"code\",[t._v(\"npm i deepmerge -D\")]),t._v(\" 或 \"),a(\"code\",[t._v(\"yarn add deepmerge -D\")]),t._v(\")\")])]),t._v(\" \"),a(\"p\",[t._v(\"如果你想了解有关修改现有配置的更多信息\"),a(\"a\",{attrs:{href:\"https://cli.vuejs.org/guide/webpack.html\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"点击这里\"),a(\"OutboundLink\")],1),t._v(\"。\")]),t._v(\" \"),t._m(13),t._v(\" \"),a(\"p\",[t._v(\"对于带有 vue-loader v15 或更高版本的 Laravel-mix 4：\")]),t._v(\" \"),t._m(14),a(\"p\",[t._v(\"对于带有 vue-loader v14 的 Laravel-mix 2：\")]),t._v(\" \"),a(\"p\",[t._v(\"从 Laravel-mix 的 \"),a(\"a\",{attrs:{href:\"https://github.com/JeffreyWay/laravel-mix/releases/tag/v2.1\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"V2.1\"),a(\"OutboundLink\")],1),t._v(\" 开始，你可以通过 \"),a(\"code\",[t._v(\"mix.extend()\")]),t._v(\" 添加自定义规则。Laravel mix 已经有了处理 .vue 文件的规则。要添加 \"),a(\"code\",[t._v(\"vue-i18n-loader\")]),t._v(\"，请将以下内容添加到 \"),a(\"code\",[t._v(\"webpack.mix.js\")]),t._v(\"：\")]),t._v(\" \"),t._m(15),t._m(16),t._v(\" \"),t._m(17),t._v(\" \"),t._m(18),t._v(\" \"),t._m(19),a(\"p\",[t._v(\"Webpack 配置如下：\")]),t._v(\" \"),a(\"p\",[t._v(\"对于 vue-loader v15 或更高版本：\")]),t._v(\" \"),t._m(20),a(\"p\",[t._v(\"对于 vue-loader v14：\")]),t._v(\" \"),t._m(21),t._m(22),t._v(\" \"),t._m(23),t._v(\" \"),t._m(24),t._m(25),t._v(\" \"),a(\"p\",[t._v(\"这样，多个自定义块在想要用作模块时非常有用。\")]),t._v(\" \"),t._m(26),t._v(\" \"),a(\"p\",[t._v(\"当使用带有 \"),a(\"code\",[t._v(\"scoped style\")]),t._v(\" \"),a(\"code\",[t._v(\"vue-i18n\")]),t._v(\" 时，重要的是要记住使用\"),a(\"a\",{attrs:{href:\"https://vue-loader.vuejs.org/zh/guide/scoped-css.html#%E6%B7%B1%E5%BA%A6%E4%BD%9C%E7%94%A8%E9%80%89%E6%8B%A9%E5%99%A8\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"深度选择器\"),a(\"OutboundLink\")],1),t._v(\" 来设置嵌套转换的样式。例如：\")]),t._v(\" \"),t._m(27),t._m(28),t._v(\" \"),t._m(29),t._v(\" \"),t._m(30),t._v(\" \"),t._m(31)])}),[function(){var t=this.$createElement,s=this._self._c||t;return s(\"h1\",{attrs:{id:\"单文件组件\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#单文件组件\"}},[this._v(\"#\")]),this._v(\" 单文件组件\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"基本用法\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#基本用法\"}},[this._v(\"#\")]),this._v(\" 基本用法\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"如果使用单文件组件构建 Vue 组件或 Vue 应用程序，则可以管理 \"),s(\"code\",[this._v(\"i18n\")]),this._v(\" 自定义块的语言环境信息。\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),t._v(\"i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"en\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"hello\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"hello world!\"')]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"ja\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"hello\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"こんにちは、世界！\"')]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"/\")]),t._v(\"i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),t._v(\"template\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),t._v(\"div id\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"app\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),t._v(\"label \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"for\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"locale\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"/\")]),t._v(\"label\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),t._v(\"select v\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"-\")]),t._v(\"model\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"locale\"')]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),t._v(\"option\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"/\")]),t._v(\"option\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),t._v(\"option\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"ja\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"/\")]),t._v(\"option\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"/\")]),t._v(\"select\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),t._v(\"p\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$t\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hello'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"/\")]),t._v(\"p\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"/\")]),t._v(\"div\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"/\")]),t._v(\"template\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),t._v(\"script\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"export\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"default\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  name\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"data\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  watch\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"locale\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"val\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"this\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"$i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"locale \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" val\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"<\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"/\")]),t._v(\"script\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\">\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"安装-vue-i18n-loader\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#安装-vue-i18n-loader\"}},[this._v(\"#\")]),this._v(\" 安装 vue-i18n-loader\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"language-sh extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-text\"}},[s(\"code\",[this._v(\"npm i --save-dev @kazupon/vue-i18n-loader\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"webpack\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#webpack\"}},[this._v(\"#\")]),this._v(\" Webpack\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[t._v(\"module\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"exports \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n  module\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    rules\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        test\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token regex\"}},[t._v(\"/\\\\.vue$/\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        loader\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'vue-loader'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        resourceQuery\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token regex\"}},[t._v(\"/blockType=i18n/\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        type\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'javascript/auto'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        loader\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'@kazupon/vue-i18n-loader'\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[t._v(\"module\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"exports \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n  module\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    rules\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        test\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token regex\"}},[t._v(\"/\\\\.vue$/\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        loader\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'vue-loader'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        options\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n          loaders\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n            \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 你需要指定 `i18n` 的值为 `vue-i18n-loader`\")]),t._v(\"\\n            i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'@kazupon/vue-i18n-loader'\")]),t._v(\"\\n          \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"vue-cli-3-0\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#vue-cli-3-0\"}},[this._v(\"#\")]),this._v(\" Vue CLI 3.0\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"为此，我们必须在项目的根目录下创建一个 \"),s(\"code\",[this._v(\"vue.config.js\")]),this._v(\"。完成后，我们必须包括以下内容：\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[t._v(\"module\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"exports \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token function-variable function\"}},[t._v(\"chainWebpack\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"config\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    config\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"module\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"rule\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"i18n\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"resourceQuery\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token regex\"}},[t._v(\"/blockType=i18n/\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"type\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'javascript/auto'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"use\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"i18n\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"loader\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"@kazupon/vue-i18n-loader\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"end\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" merge \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"require\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'deepmerge'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\nmodule\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"exports \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token function-variable function\"}},[t._v(\"chainWebpack\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"config\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    config\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"module\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"rule\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'vue'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"use\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'vue-loader'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"tap\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"options\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"merge\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"options\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n          loaders\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n            i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'@kazupon/vue-i18n-loader'\")]),t._v(\"\\n          \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"laravel-mix\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#laravel-mix\"}},[this._v(\"#\")]),this._v(\" Laravel-Mix\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 使用 “i18n” 方法扩展 Mix ，加载 vue-i18n-loader\")]),t._v(\"\\nmix\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"extend\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'i18n'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"class\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"webpackRules\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n            \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"\\n                \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n                    resourceQuery\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token regex\"}},[t._v(\"/blockType=i18n/\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n                    type\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\"          \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'javascript/auto'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n                    loader\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\"        \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'@kazupon/vue-i18n-loader'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n                \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n            \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 确保在 `.js(..., ...)` 之前调用 `.i18n()` (来加载加载器)\")]),t._v(\"\\nmix\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n   \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"js\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'resources/js/App.js'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'public/js/app.js'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n   \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"...\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 下面的代码将注入 i18n Kazupon/vue-18-loader 作为 .vue 文件的加载器。\")]),t._v(\"\\nmix\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"extend\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'i18n'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"function\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"webpackConfig\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"...\")]),t._v(\"args\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    webpackConfig\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"module\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"rules\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"forEach\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"module\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 搜索处理 .vue 文件的 “vue-loader” 组件。\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"if\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\" module\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"loader \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"!==\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'vue-loader'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n            \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 在此模块中，为 i18n 标记添加 vue-i18n-loader。\")]),t._v(\"\\n        module\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"options\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"loaders\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'@kazupon/vue-i18n-loader'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 确保在 `.js(...，...)` 之前调用 `.i18n()`\")]),t._v(\"\\nmix\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n   \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"js\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'resources/assets/js/App.js'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'public/js/app.js'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n   \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"...\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"加载-yaml\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#加载-yaml\"}},[this._v(\"#\")]),this._v(\" 加载 YAML\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[s(\"code\",[this._v(\"i18n\")]),this._v(\" 自定义块需要指定为 JSON 格式，你也可以通过使用 \"),s(\"code\",[this._v(\"vue-loader\")]),this._v(\" 预加载器功能来使用 \"),s(\"code\",[this._v(\"YAML\")]),this._v(\" 格式。\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"以下是 \"),s(\"code\",[this._v(\"YAML\")]),this._v(\" 格式的 \"),s(\"code\",[this._v(\"i18n\")]),this._v(\" 自定义块：\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v('\\nen:\\n  hello: \"hello world!\"\\nja:\\n  hello: \"こんにちは、世界！\"\\n'),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Vue CLI 3.0\")]),t._v(\"\\nmodule\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"exports \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token function-variable function\"}},[t._v(\"chainWebpack\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"config\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    config\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"module\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"rule\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"i18n\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"resourceQuery\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token regex\"}},[t._v(\"/blockType=i18n/\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"type\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'javascript/auto'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"use\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"i18n\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"loader\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v('\"@kazupon/vue-i18n-loader\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"end\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"use\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'yaml'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"loader\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'yaml-loader'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"end\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[t._v(\"module\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"exports \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n  module\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    rules\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"[\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        test\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token regex\"}},[t._v(\"/\\\\.vue$/\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        loader\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'vue-loader'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        options\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n          preLoaders\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n            i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'yaml-loader'\")]),t._v(\"\\n          \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n          loaders\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n            i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'@kazupon/vue-i18n-loader'\")]),t._v(\"\\n          \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"]\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"多个自定义块\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#多个自定义块\"}},[this._v(\"#\")]),this._v(\" 多个自定义块\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"你可以使用具有多个 \"),s(\"code\",[this._v(\"i18n\")]),this._v(\" 自定义块的语言环境信息。\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"src\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"./common/locales.json\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v('\\n  {\\n    \"en\": {\\n      \"hello\": \"hello world!\"\\n    },\\n    \"ja\": {\\n      \"hello\": \"こんにちは、世界！\"\\n    }\\n  }\\n'),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"如上所见，第一个自定义块使用 \"),s(\"code\",[this._v(\"src\")]),this._v(\" 特性加载常用的语言环境信息，第二个自定义块加载仅在该单文件组件中定义的语言环境信息。这些语言环境信息将合并为组件的语言环境信息。\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"scoped-风格\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#scoped-风格\"}},[this._v(\"#\")]),this._v(\" Scoped 风格\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[t._v(\"...\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"template\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"class\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"parent\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"message: {{ $t('hello') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"template\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n...\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- 不可行--\\x3e\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"style\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"scoped\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token style\"}},[a(\"span\",{pre:!0,attrs:{class:\"token language-css\"}},[t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token selector\"}},[t._v(\".parent p\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v(\"color\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\":\")]),t._v(\" #42b883\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"style\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- 可行 --\\x3e\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"style\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token style\"}},[a(\"span\",{pre:!0,attrs:{class:\"token language-css\"}},[t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token selector\"}},[t._v(\".parent >>> p\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token property\"}},[t._v(\"color\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\":\")]),t._v(\" #42b883\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\";\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"style\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"函数式组件中的自定义块\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#函数式组件中的自定义块\"}},[this._v(\"#\")]),this._v(\" 函数式组件中的自定义块\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"如果单个文件组件具有使用函数式组件的模板，并且你已经定义了 \"),s(\"code\",[this._v(\"i18n\")]),this._v(\" 自定义块，请注意你无法使用语言环境信息进行本地化。\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"例如，以下代码无法使用 \"),s(\"code\",[this._v(\"i18n\")]),this._v(\" 自定义块的语言环境信息进行本地化。\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v('\\n{\\n  \"en\": {\\n    \"hello\": \"hello world\"\\n  },\\n  \"ja\": {\\n    \"hello\": \"こんにちは、世界\"\\n  }\\n}\\n'),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"i18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"template\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"functional\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- 'hello' 的父实例的语言环境信息 --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ parent.$t('hello') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"template\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/61.446dac92.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[61],{293:function(t,e,r){\"use strict\";r.r(e);var n=r(0),a=Object(n.a)({},(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),r(\"p\",[t._v(\"为了支持开发，我们官方提供了一些工具。\")]),t._v(\" \"),r(\"p\",[t._v(\"此外，还有第三方供应商提供的集成了 Vue I18n 的工具。\")]),t._v(\" \"),t._m(1),t._v(\" \"),t._m(2),t._v(\" \"),r(\"p\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-cli-plugin-i18n\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"vue-cli-plugin-i18n\"),r(\"OutboundLink\")],1),t._v(\" 是官方提供的 Vue Cli 插件。\")]),t._v(\" \"),r(\"p\",[t._v(\"使用此插件，您可以为Vue应用程序设置 i18n 环境，并支持 i18n 开发环境。\")]),t._v(\" \"),t._m(3),t._v(\" \"),r(\"p\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n-loader\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"vue-i18n-loader\"),r(\"OutboundLink\")],1),t._v(\" 是官方提供的 Webpack Loader。\\n使用此加载程序，您可以在单个文件组件中使用 \"),r(\"code\",[t._v(\"i18n\")]),t._v(\" 自定义块。\")]),t._v(\" \"),r(\"p\",[t._v(\"关于 \"),r(\"code\",[t._v(\"i18n\")]),t._v(\" 自定义块，请参见 \"),r(\"router-link\",{attrs:{to:\"./sfc.html\"}},[t._v(\"单文件组件\")])],1),t._v(\" \"),t._m(4),t._v(\" \"),r(\"p\",[r(\"a\",{attrs:{href:\"https://intlify.github.io/eslint-plugin-vue-i18n/\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"eslint-plugin-vue-i18n\"),r(\"OutboundLink\")],1),t._v(\" 是为 Vue I18n 编写的 ESLint 插件。\")]),t._v(\" \"),r(\"p\",[t._v(\"它可以轻松地将一些本地化 lint 功能集成到 Vue.js 应用程序中。\")]),t._v(\" \"),t._m(5),t._v(\" \"),r(\"p\",[t._v(\"在\"),r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n-extensions\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"vue-i18n-extensions\"),r(\"OutboundLink\")],1),t._v(\" 你可以找到为 Vue I18n 编写的插件。\")]),t._v(\" \"),r(\"p\",[t._v(\"您可以使用此扩展来启用 SSR 并提高 Vue I18n 的性能。\")]),t._v(\" \"),t._m(6),t._v(\" \"),t._m(7),t._v(\" \"),r(\"p\",[r(\"a\",{attrs:{href:\"https://www.codeandweb.com/babeledit\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"BabelEdit\"),r(\"OutboundLink\")],1),t._v(\" 是 Web 应用程序的翻译编辑器。\")]),t._v(\" \"),t._m(8),t._v(\" \"),r(\"p\",[t._v(\"欲了解更多，请看\"),r(\"a\",{attrs:{href:\"https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-vue-app-with-vue-i18n\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"教程\"),r(\"OutboundLink\")],1)])])}),[function(){var t=this.$createElement,e=this._self._c||t;return e(\"h1\",{attrs:{id:\"工具\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#工具\"}},[this._v(\"#\")]),this._v(\" 工具\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"官方工具\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#官方工具\"}},[this._v(\"#\")]),this._v(\" 官方工具\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"vue-cli-插件\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#vue-cli-插件\"}},[this._v(\"#\")]),this._v(\" Vue Cli 插件\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"webpack-loader\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#webpack-loader\"}},[this._v(\"#\")]),this._v(\" Webpack Loader\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"eslint-插件\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#eslint-插件\"}},[this._v(\"#\")]),this._v(\" ESLint 插件\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"extensions\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#extensions\"}},[this._v(\"#\")]),this._v(\" Extensions\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"第三方工具\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#第三方工具\"}},[this._v(\"#\")]),this._v(\" 第三方工具\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"babeledit\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#babeledit\"}},[this._v(\"#\")]),this._v(\" BabelEdit\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",[this._v(\"BabelEdit可以翻译 \"),e(\"code\",[this._v(\"json\")]),this._v(\" 文件，也可以翻译单文件组件的 \"),e(\"code\",[this._v(\"i18n\")]),this._v(\" 自定义块。\")])}],!1,null,null,null);e.default=a.exports}}]);"
  },
  {
    "path": "docs/assets/js/62.88ef088f.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[62],{294:function(t,s,a){\"use strict\";a.r(s);var e=a(0),n=Object(e.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),t._m(1),t._v(\" \"),t._m(2),t._v(\" \"),t._m(3),t._v(\" \"),a(\"p\",[a(\"a\",{attrs:{href:\"https://unpkg.com/vue-i18n/dist/vue-i18n\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"https://unpkg.com/vue-i18n/dist/vue-i18n\"),a(\"OutboundLink\")],1)]),t._v(\" \"),a(\"p\",[a(\"a\",{attrs:{href:\"https://unpkg.com\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"unpkg.com\"),a(\"OutboundLink\")],1),t._v(\" 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以通过 \"),a(\"a\",{attrs:{href:\"https://unpkg.com/vue-i18n@8.9.0/dist/vue-i18n.js\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"https://unpkg.com/vue-i18n@8.9.0/dist/vue-i18n.js\"),a(\"OutboundLink\")],1),t._v(\" 这样的 URL 指定版本号或者 tag。\")]),t._v(\" \"),a(\"p\",[t._v(\"在 Vue 之后引入 vue-i18n，它会自动安装：\")]),t._v(\" \"),t._m(4),t._m(5),t._v(\" \"),t._m(6),t._m(7),t._v(\" \"),t._m(8),t._m(9),t._v(\" \"),t._m(10),a(\"p\",[t._v(\"如果使用全局的 script 标签，则无须如此 (手动安装)。\")]),t._v(\" \"),t._m(11),t._v(\" \"),t._m(12),a(\"p\",[t._v(\"你需要 Vue cli 3.x 作为先决条件，你可以在命令行上使用下面的命令来安装：\")]),t._v(\" \"),t._m(13),t._m(14),t._v(\" \"),t._m(15),t._v(\" \"),t._m(16)])}),[function(){var t=this.$createElement,s=this._self._c||t;return s(\"h1\",{attrs:{id:\"安装\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#安装\"}},[this._v(\"#\")]),this._v(\" 安装\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"兼容性说明\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#兼容性说明\"}},[this._v(\"#\")]),this._v(\" 兼容性说明\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"ul\",[s(\"li\",[this._v(\"Vue.js \"),s(\"code\",[this._v(\"2.0.0\")]),this._v(\"+\")])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"直接下载-cdn\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#直接下载-cdn\"}},[this._v(\"#\")]),this._v(\" 直接下载 / CDN\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"script\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"src\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"https://unpkg.com/vue/dist/vue.js\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token script\"}}),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"script\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"script\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"src\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"https://unpkg.com/vue-i18n/dist/vue-i18n.js\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token script\"}}),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"script\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"npm\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#npm\"}},[this._v(\"#\")]),this._v(\" NPM\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"language-sh extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-text\"}},[s(\"code\",[this._v(\"npm install vue-i18n\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"yarn\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#yarn\"}},[this._v(\"#\")]),this._v(\" Yarn\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"language-sh extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-text\"}},[s(\"code\",[this._v(\"yarn add vue-i18n\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"如果在一个模块系统中使用它，你必须通过 \"),s(\"code\",[this._v(\"Vue.use()\")]),this._v(\" 明确地安装 \"),s(\"code\",[this._v(\"vue-i18n\")]),this._v(\"：\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-javascript extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-javascript\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),t._v(\" Vue \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'vue'\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"import\")]),t._v(\" VueI18n \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"from\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'vue-i18n'\")]),t._v(\"\\n\\nVue\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"use\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"VueI18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"vue-cli-3-x\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#vue-cli-3-x\"}},[this._v(\"#\")]),this._v(\" Vue Cli 3.x\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"language-sh extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-text\"}},[s(\"code\",[this._v(\"vue add i18n\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"language-sh extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-text\"}},[s(\"code\",[this._v(\"npm install @vue/cli -g\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"开发版构建\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#开发版构建\"}},[this._v(\"#\")]),this._v(\" 开发版构建\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"如果你想使用最新的开发版构建，就得从 GitHub 上直接 clone，然后自己构建一个 \"),s(\"code\",[this._v(\"vue-i18n\")]),this._v(\"。\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"language-sh extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-text\"}},[s(\"code\",[this._v(\"git clone https://github.com/kazupon/vue-i18n.git node_modules/vue-i18n\\ncd node_modules/vue-i18n\\nnpm install # or `yarn`\\nnpm run build  # or `yarn run build`\\n\")])])])}],!1,null,null,null);s.default=n.exports}}]);"
  },
  {
    "path": "docs/assets/js/63.b6e0a846.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[63],{295:function(t,e,a){\"use strict\";a.r(e);var r=a(0),s=Object(r.a)({},(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),a(\"div\",{staticClass:\"warning custom-block\"},[a(\"p\",{staticClass:\"custom-block-title\"},[t._v(\"说明\")]),t._v(\" \"),a(\"p\",[t._v(\"⚠️ 本文档适用于 Vue I18n v6.0 或更高版本. 如果你使用 v5.x，请参阅\"),a(\"router-link\",{attrs:{to:\"./legacy/\"}},[t._v(\"旧版\")]),t._v(\"部分。\")],1)]),t._v(\" \"),a(\"p\",[t._v(\"Vue I18n 是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。\")]),t._v(\" \"),a(\"p\",[t._v(\"让我们\"),a(\"router-link\",{attrs:{to:\"./started.html\"}},[t._v(\"开始吧\")])],1),t._v(\" \"),t._m(1),t._v(\" \"),t._m(2),t._v(\" \"),t._m(3),t._v(\" \"),t._m(4),t._v(\" \"),a(\"p\",[t._v(\"贵公司是否使用 vue-i18n 或 vue-cli-plugin-i18n 来构建出色的应用程序？ 加入其他会员并成为赞助商，在此文档中添加你的徽标！在 Patreon 上支持我使我能够更少地完成工作并在免费开源软件上工作，例如 vue-i18n！ 谢谢！\")]),t._v(\" \"),t._m(5)])}),[function(){var t=this.$createElement,e=this._self._c||t;return e(\"h1\",{attrs:{id:\"介绍\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#介绍\"}},[this._v(\"#\")]),this._v(\" 介绍\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"赞助商\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#赞助商\"}},[this._v(\"#\")]),this._v(\" 赞助商\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h3\",{attrs:{id:\"白银赞助商\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#白银赞助商\"}},[this._v(\"#\")]),this._v(\" 白银赞助商\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",{staticStyle:{\"text-align\":\"center\"}},[e(\"a\",{attrs:{href:\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\",target:\"_blank\"}},[e(\"img\",{attrs:{src:\"/vue-i18n/patrons/babeledit.png\"}})])])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"h2\",{attrs:{id:\"成为一名-patreon-赞助商\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#成为一名-patreon-赞助商\"}},[this._v(\"#\")]),this._v(\" 成为一名 Patreon 赞助商\")])},function(){var t=this.$createElement,e=this._self._c||t;return e(\"p\",{staticStyle:{\"text-align\":\"center\"}},[e(\"a\",{attrs:{href:\"https://www.patreon.com/kazupon\",target:\"_blank\"}},[e(\"img\",{attrs:{src:\"https://c5.patreon.com/external/logo/become_a_patron_button.png\",alt:\"Become a Patreon\"}})])])}],!1,null,null,null);e.default=s.exports}}]);"
  },
  {
    "path": "docs/assets/js/64.f3210fad.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[64],{296:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this.$createElement;this._self._c;return this._m(0)}),[function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[a(\"h1\",{attrs:{id:\"从-v5-x-迁移\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#从-v5-x-迁移\"}},[t._v(\"#\")]),t._v(\" 从 v5.x 迁移\")]),t._v(\" \"),a(\"h2\",{attrs:{id:\"全局配置\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#全局配置\"}},[t._v(\"#\")]),t._v(\" 全局配置\")]),t._v(\" \"),a(\"h3\",{attrs:{id:\"lang-已被替换\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#lang-已被替换\"}},[t._v(\"#\")]),t._v(\" lang 已被替换\")]),t._v(\" \"),a(\"p\",[t._v(\"使用 \"),a(\"code\",[t._v(\"VueI18n\")]),t._v(\" 类构造函数 \"),a(\"code\",[t._v(\"locale\")]),t._v(\" 选项或 \"),a(\"code\",[t._v(\"VueI18n#locale\")]),t._v(\" 属性：\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[t._v(\"  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" app \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 更改 locale\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"locale \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ja'\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 或者\")]),t._v(\"\\n  app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"$i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"locale \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ja'\")]),t._v(\"\\n\")])])]),a(\"h3\",{attrs:{id:\"fallbacklang-已被替换\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#fallbacklang-已被替换\"}},[t._v(\"#\")]),t._v(\" fallbackLang 已被替换\")]),t._v(\" \"),a(\"p\",[t._v(\"使用 \"),a(\"code\",[t._v(\"VueI18n\")]),t._v(\" 类构造函数 \"),a(\"code\",[t._v(\"fallbackLocale\")]),t._v(\" 选项或 \"),a(\"code\",[t._v(\"VueI18n#fallbackLocale\")]),t._v(\" 属性：\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[t._v(\"  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ja'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    fallbackLocale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" app \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 更改 fallback locale\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"fallbackLocale \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'zh'\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 或者\")]),t._v(\"\\n  app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"$i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"fallbackLocale \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'zh'\")]),t._v(\"\\n\")])])]),a(\"h3\",{attrs:{id:\"missinghandler-已被替换\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#missinghandler-已被替换\"}},[t._v(\"#\")]),t._v(\" missingHandler 已被替换\")]),t._v(\" \"),a(\"p\",[t._v(\"使用 \"),a(\"code\",[t._v(\"VueI18n\")]),t._v(\" 类构造函数 \"),a(\"code\",[t._v(\"missing\")]),t._v(\" 选项或 \"),a(\"code\",[t._v(\"VueI18n#missing\")]),t._v(\" 属性：\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token function-variable function\"}},[t._v(\"missing\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" key\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" vm\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 处理翻译缺失\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" app \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 改变丢失的处理函数\")]),t._v(\"\\ni18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function-variable function\"}},[t._v(\"missing\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" key\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" vm\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 处理翻译缺失\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// or\")]),t._v(\"\\napp\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"$i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function-variable function\"}},[t._v(\"missing\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" key\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" vm\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 处理翻译缺失\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),a(\"h3\",{attrs:{id:\"i18nformatter-已被替换\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#i18nformatter-已被替换\"}},[t._v(\"#\")]),t._v(\" i18nFormatter 已被替换\")]),t._v(\" \"),a(\"p\",[t._v(\"使用 \"),a(\"code\",[t._v(\"VueI18n\")]),t._v(\" 类构造函数 \"),a(\"code\",[t._v(\"formatter\")]),t._v(\" 选项或 \"),a(\"code\",[t._v(\"VueI18n#formatter\")]),t._v(\" 属性：\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[t._v(\"  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"class\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"CustomFormatter\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"format\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"message\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"...\")]),t._v(\"values\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 一些渲染逻辑\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'something string'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n    formatter\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"CustomFormatter\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" app \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 更改自定义格式化程序\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"formatter \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token function-variable function\"}},[t._v(\"format\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"message\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"...\")]),t._v(\"values\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 一些渲染逻辑\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'something string'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// or\")]),t._v(\"\\n  app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"$i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"formatter \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token function-variable function\"}},[t._v(\"format\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"message\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"...\")]),t._v(\"values\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 一些渲染逻辑\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'something string'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),a(\"h2\",{attrs:{id:\"全局方法\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#全局方法\"}},[t._v(\"#\")]),t._v(\" 全局方法\")]),t._v(\" \"),a(\"h3\",{attrs:{id:\"vue-locale-已被替换\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#vue-locale-已被替换\"}},[t._v(\"#\")]),t._v(\" Vue.locale 已被替换\")]),t._v(\" \"),a(\"p\",[t._v(\"使用 \"),a(\"code\",[t._v(\"VueI18n\")]),t._v(\" 类构造函数 \"),a(\"code\",[t._v(\"messages\")]),t._v(\" 选项，或者使用 \"),a(\"code\",[t._v(\"VueI18n#GetLocaleMessage\")]),t._v(\" / \"),a(\"code\",[t._v(\"VueI18n#setLocaleMessage\")]),t._v(\" 方法：\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[t._v(\"  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n    messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hello world'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      ja\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'こんにちは、世界'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n        \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" app \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 获取 locale message\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" en \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"getLocaleMessage\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"greeting \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hi!'\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 设置 locale message\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setLocaleMessage\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" en\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 或者\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" ja \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"$i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"getLocaleMessage\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ja'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  ja\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"greeting \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'やあ！'\")]),t._v(\"\\n  app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"$i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setLocaleMessage\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ja'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" ja\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])]),a(\"h3\",{attrs:{id:\"vue-t-已被替换\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#vue-t-已被替换\"}},[t._v(\"#\")]),t._v(\" Vue.t 已被替换\")]),t._v(\" \"),a(\"p\",[t._v(\"使用 \"),a(\"code\",[t._v(\"VueI18n#t\")]),t._v(\" 方法：\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      greeting\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hi {name}'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\ni18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"t\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'greeting'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" name\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'kazupon'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// -> hi kazupon\")]),t._v(\"\\n\")])])]),a(\"h3\",{attrs:{id:\"vue-tc-已被替换\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#vue-tc-已被替换\"}},[t._v(\"#\")]),t._v(\" Vue.tc 已被替换\")]),t._v(\" \"),a(\"p\",[t._v(\"使用 \"),a(\"code\",[t._v(\"VueI18n#tc\")]),t._v(\" 方法：\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      apple\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'no apples | one apple | {count} apples'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" count \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"10\")]),t._v(\"\\ni18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"tc\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'apple'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" count\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" count \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// -> 10 apples\")]),t._v(\"\\n\")])])]),a(\"h3\",{attrs:{id:\"vue-te-已被替换\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#vue-te-已被替换\"}},[t._v(\"#\")]),t._v(\" Vue.te 已被替换\")]),t._v(\" \"),a(\"p\",[t._v(\"使用 \"),a(\"code\",[t._v(\"VueI18n#te\")]),t._v(\" 方法：\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hello world'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\ni18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"te\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hello'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// -> true\")]),t._v(\"\\ni18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"te\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hallo'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ja'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// -> false\")]),t._v(\"\\ni18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"te\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hello'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// -> true\")]),t._v(\"\\n\")])])]),a(\"h2\",{attrs:{id:\"构造函数选项\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#构造函数选项\"}},[t._v(\"#\")]),t._v(\" 构造函数选项\")]),t._v(\" \"),a(\"h3\",{attrs:{id:\"locales-已被替换\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#locales-已被替换\"}},[t._v(\"#\")]),t._v(\" locales 已被替换\")]),t._v(\" \"),a(\"p\",[t._v(\"使用 \"),a(\"code\",[t._v(\"messages\")]),t._v(\" 的 \"),a(\"code\",[t._v(\"VueI18n\")]),t._v(\" 类的构造函数的选项，或 \"),a(\"code\",[t._v(\"messages\")]),t._v(\" 的 \"),a(\"code\",[t._v(\"i18n\")]),t._v(\" 选项 (针对组件选项)：\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      greeting\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hi {name}'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 针对组件选项\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" Component1 \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n        title\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Title1'\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])]),a(\"h2\",{attrs:{id:\"实例属性\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#实例属性\"}},[t._v(\"#\")]),t._v(\" 实例属性\")]),t._v(\" \"),a(\"h3\",{attrs:{id:\"lang-已被替换-2\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#lang-已被替换-2\"}},[t._v(\"#\")]),t._v(\" $lang 已被替换\")]),t._v(\" \"),a(\"p\",[t._v(\"使用 \"),a(\"code\",[t._v(\"VueI18n#locale\")]),t._v(\" 属性：\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// ...\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" app \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 更改 locale\")]),t._v(\"\\ni18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"locale \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ja'\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 或者\")]),t._v(\"\\napp\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"$i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"locale \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ja'\")]),t._v(\"\\n\")])])]),a(\"h2\",{attrs:{id:\"特性\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#特性\"}},[t._v(\"#\")]),t._v(\" 特性\")]),t._v(\" \"),a(\"h3\",{attrs:{id:\"已删除动态语言环境\"}},[a(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#已删除动态语言环境\"}},[t._v(\"#\")]),t._v(\" 已删除动态语言环境\")]),t._v(\" \"),a(\"p\",[t._v(\"如果需要动态设置语言环境信息，则应实现以下内容：\")]),t._v(\" \"),a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" app \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  data\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" loading\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"''\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"function\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"loadLocaleMessage\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" cb\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"fetch\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'/locales/'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"+\")]),t._v(\" locale\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    method\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'get'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    headers\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Accept'\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'application/json'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'Content-Type'\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'application/json'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"then\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"res\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" res\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"json\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"then\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"json\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"if\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"Object\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"keys\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"json\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"length \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"===\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token number\"}},[t._v(\"0\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" Promise\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"reject\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Error\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'locale empty !!'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"else\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" Promise\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"resolve\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"json\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"then\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"message\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"cb\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"null\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" message\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"catch\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"error\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"cb\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"error\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\napp\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"loading \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'loading ...'\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"loadLocaleMessage\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token parameter\"}},[t._v(\"err\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" message\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=>\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"if\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"err\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"loading \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"''\")]),t._v(\"\\n    console\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"error\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),t._v(\"err\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"setLocaleMessage\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" message\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n  app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),t._v(\"loading \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"''\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/65.afac79e3.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[65],{297:function(t,e,r){\"use strict\";r.r(e);var n=r(0),o=Object(n.a)({},(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),r(\"ul\",[r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/installation.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Installation\"),r(\"OutboundLink\")],1)]),t._v(\" \"),r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/started.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Getting Started\"),r(\"OutboundLink\")],1)]),t._v(\" \"),r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/formatting.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Formatting\"),r(\"OutboundLink\")],1)]),t._v(\" \"),r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/pluralization.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Pluralization\"),r(\"OutboundLink\")],1)]),t._v(\" \"),r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/syntax.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Locale and Keypath Syntax\"),r(\"OutboundLink\")],1)]),t._v(\" \"),r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/linked.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Linked Translation\"),r(\"OutboundLink\")],1)]),t._v(\" \"),r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/fallback.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Fallback Translation\"),r(\"OutboundLink\")],1)]),t._v(\" \"),r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/component.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Component Locale\"),r(\"OutboundLink\")],1)]),t._v(\" \"),r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/dynamic.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Dynamic Locale\"),r(\"OutboundLink\")],1)]),t._v(\" \"),r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/hot-reload.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"Hot reload\"),r(\"OutboundLink\")],1)]),t._v(\" \"),r(\"li\",[r(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/api.md\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"API References\"),r(\"OutboundLink\")],1)])])])}),[function(){var t=this.$createElement,e=this._self._c||t;return e(\"h1\",{attrs:{id:\"v5-x-版本的文档\"}},[e(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#v5-x-版本的文档\"}},[this._v(\"#\")]),this._v(\" v5.x 版本的文档\")])}],!1,null,null,null);e.default=o.exports}}]);"
  },
  {
    "path": "docs/assets/js/66.d403fc3a.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[66],{298:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),a(\"div\",{staticClass:\"tip custom-block\"},[a(\"p\",{staticClass:\"custom-block-title\"},[t._v(\"说明\")]),t._v(\" \"),a(\"p\",[t._v(\"我们将在指南中的代码示例中使用 \"),a(\"a\",{attrs:{href:\"https://github.com/lukehoban/es6features\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"ES2015\"),a(\"OutboundLink\")],1),t._v(\" 语法。\")])]),t._v(\" \"),t._m(1),t._v(\" \"),t._m(2),t._m(3),t._v(\" \"),t._m(4),a(\"p\",[t._v(\"输出如下：\")]),t._v(\" \"),t._m(5)])}),[function(){var t=this.$createElement,s=this._self._c||t;return s(\"h1\",{attrs:{id:\"开始\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#开始\"}},[this._v(\"#\")]),this._v(\" 开始\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"html\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#html\"}},[this._v(\"#\")]),this._v(\" HTML\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"script\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"src\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"https://unpkg.com/vue/dist/vue.js\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token script\"}}),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"script\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"script\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"src\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"https://unpkg.com/vue-i18n/dist/vue-i18n.js\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token script\"}}),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"script\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v('{{ $t(\"message.hello\") }}'),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"javascript\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#javascript\"}},[this._v(\"#\")]),this._v(\" JavaScript\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 如果使用模块系统 (例如通过 vue-cli)，则需要导入 Vue 和 VueI18n ，然后调用 Vue.use(VueI18n)。\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// import Vue from 'vue'\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// import VueI18n from 'vue-i18n'\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"//\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// Vue.use(VueI18n)\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 准备翻译的语言环境信息\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" messages \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hello world'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  ja\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    message\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'こんにちは、世界'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 通过选项创建 VueI18n 实例\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ja'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 设置地区\")]),t._v(\"\\n  messages\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 设置地区信息\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 通过 `i18n` 选项创建 Vue 实例\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"// 现在应用程序已经准备好了！\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"#app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"こんにちは、世界\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/67.0bffd98a.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[67],{233:function(n,w,o){}}]);"
  },
  {
    "path": "docs/assets/js/7.eaeacaf7.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{239:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),t._m(1),t._v(\" \"),a(\"p\",[t._v(\"You can localize the datetime with your definition formats.\")]),t._v(\" \"),a(\"p\",[t._v(\"DateTime formats the below:\")]),t._v(\" \"),t._m(2),a(\"p\",[t._v(\"As seen above, you can define named datetime format (e.g. \"),a(\"code\",[t._v(\"short\")]),t._v(\", \"),a(\"code\",[t._v(\"long\")]),t._v(\", etc), and you need to use \"),a(\"a\",{attrs:{href:\"http://www.ecma-international.org/ecma-402/2.0/#sec-intl-datetimeformat-constructor\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"the options with ECMA-402 Intl.DateTimeFormat\"),a(\"OutboundLink\")],1)]),t._v(\" \"),t._m(3),t._v(\" \"),t._m(4),a(\"p\",[t._v(\"Template the below:\")]),t._v(\" \"),t._m(5),a(\"p\",[t._v(\"Output the below:\")]),t._v(\" \"),t._m(6)])}),[function(){var t=this.$createElement,s=this._self._c||t;return s(\"h1\",{attrs:{id:\"datetime-localization\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#datetime-localization\"}},[this._v(\"#\")]),this._v(\" DateTime localization\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"tip custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Support Version\")]),this._v(\" \"),s(\"p\",[this._v(\"🆕 7.0+\")])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" dateTimeFormats \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en-US'\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    short\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      year\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'numeric'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" month\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'short'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" day\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'numeric'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    long\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      year\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'numeric'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" month\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'short'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" day\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'numeric'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      weekday\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'short'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" hour\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'numeric'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" minute\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'numeric'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'ja-JP'\")]),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    short\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      year\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'numeric'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" month\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'short'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" day\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'numeric'\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    long\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      year\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'numeric'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" month\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'short'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" day\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'numeric'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      weekday\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'short'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" hour\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'numeric'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" minute\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'numeric'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\" hour12\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token boolean\"}},[t._v(\"true\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"After that, when using the locale messages, you need to specify the \"),s(\"code\",[this._v(\"dateTimeFormats\")]),this._v(\" option of the \"),s(\"code\",[this._v(\"VueI18n\")]),this._v(\" constructor:\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"const\")]),t._v(\" i18n \"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\"=\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  dateTimeFormats\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#app'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $d(new Date(), 'short') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"{{ $d(new Date(), 'long', 'ja-JP') }}\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"app\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Apr 19, 2017\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"2017年4月19日(水) 午前2:19\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/8.344bd519.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{240:function(t,s,a){\"use strict\";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"content\"},[t._m(0),t._v(\" \"),t._m(1),t._v(\" \"),t._m(2),t._v(\" \"),t._m(3),t._v(\" \"),a(\"p\",[t._v(\"You can pass the keypath of locale messages with string syntax.\")]),t._v(\" \"),a(\"p\",[t._v(\"Javascript:\")]),t._v(\" \"),t._m(4),a(\"p\",[t._v(\"Templates:\")]),t._v(\" \"),t._m(5),a(\"p\",[t._v(\"Outputs:\")]),t._v(\" \"),t._m(6),t._m(7),t._v(\" \"),a(\"p\",[t._v(\"You can use object syntax.\")]),t._v(\" \"),a(\"p\",[t._v(\"Javascript:\")]),t._v(\" \"),t._m(8),a(\"p\",[t._v(\"Templates:\")]),t._v(\" \"),t._m(9),a(\"p\",[t._v(\"Outputs:\")]),t._v(\" \"),t._m(10),t._m(11),t._v(\" \"),t._m(12),t._v(\" \"),a(\"p\",[t._v(\"When \"),a(\"code\",[t._v(\"v-t\")]),t._v(\" directive is applied to an element inside \"),a(\"a\",{attrs:{href:\"https://vuejs.org/v2/api/#transition\",target:\"_blank\",rel:\"noopener noreferrer\"}},[a(\"code\",[t._v(\"<transition>\")]),t._v(\" component\"),a(\"OutboundLink\")],1),t._v(\", you may notice that the translated message disappears during the transition. This behavior is related to the nature of the \"),a(\"code\",[t._v(\"<transition>\")]),t._v(\" component implementation – all directives in the disappearing element inside the \"),a(\"code\",[t._v(\"<transition>\")]),t._v(\" component will be destroyed \"),a(\"strong\",[t._v(\"before the transition starts\")]),t._v(\". This behavior may result in content flickering on short animations, but is most noticeable on long transitions.\")]),t._v(\" \"),a(\"p\",[t._v(\"To make sure directive content stays un-touched during a transition, just add the \"),a(\"router-link\",{attrs:{to:\"./../api/#v-t\"}},[a(\"code\",[t._v(\".preserve\")]),t._v(\" modifier\")]),t._v(\" to the \"),a(\"code\",[t._v(\"v-t\")]),t._v(\" directive definition.\")],1),t._v(\" \"),a(\"p\",[t._v(\"Javascript:\")]),t._v(\" \"),t._m(13),a(\"p\",[t._v(\"Templates:\")]),t._v(\" \"),t._m(14),t._m(15),t._v(\" \"),a(\"p\",[t._v(\"Javascript:\")]),t._v(\" \"),t._m(16),a(\"p\",[t._v(\"Templates:\")]),t._v(\" \"),t._m(17),a(\"p\",[t._v(\"About the above examples, see the \"),a(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n/tree/dev/examples/directive\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"example\"),a(\"OutboundLink\")],1)]),t._v(\" \"),t._m(18),t._v(\" \"),t._m(19),t._v(\" \"),t._m(20),t._v(\" \"),t._m(21),t._v(\" \"),t._m(22),t._v(\" \"),t._m(23),t._v(\" \"),t._m(24),t._v(\" \"),t._m(25),t._v(\" \"),t._m(26),t._v(\" \"),t._m(27),t._v(\" \"),a(\"p\",[a(\"code\",[t._v(\"v-t\")]),t._v(\" has \"),a(\"strong\",[t._v(\"better performance\")]),t._v(\" than the \"),a(\"code\",[t._v(\"$t\")]),t._v(\" method due to its cache with the custom directive, when translated once. Also, pre-translation is possible with the Vue compiler module which was provided by \"),a(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n-extensions\",target:\"_blank\",rel:\"noopener noreferrer\"}},[a(\"code\",[t._v(\"vue-i18n-extensions\")]),a(\"OutboundLink\")],1),t._v(\".\")]),t._v(\" \"),t._m(28),t._v(\" \"),t._m(29),t._v(\" \"),a(\"p\",[a(\"code\",[t._v(\"v-t\")]),t._v(\" cannot be flexibly used like \"),a(\"code\",[t._v(\"$t\")]),t._v(\", it's rather \"),a(\"strong\",[t._v(\"complex\")]),t._v(\". The translated content with \"),a(\"code\",[t._v(\"v-t\")]),t._v(\" is inserted into the \"),a(\"code\",[t._v(\"textContent\")]),t._v(\" of the element. Also, when you use server-side rendering, you need to set the \"),a(\"a\",{attrs:{href:\"https://github.com/kazupon/vue-i18n-extensions#directive-v-t-custom-directive-for-server-side\",target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"custom directive\"),a(\"OutboundLink\")],1),t._v(\" to \"),a(\"code\",[t._v(\"directives\")]),t._v(\" option of the \"),a(\"code\",[t._v(\"createRenderer\")]),t._v(\" function.\")])])}),[function(){var t=this.$createElement,s=this._self._c||t;return s(\"h1\",{attrs:{id:\"custom-directive-localization\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#custom-directive-localization\"}},[this._v(\"#\")]),this._v(\" Custom directive localization\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"tip custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Support Version\")]),this._v(\" \"),s(\"p\",[this._v(\"🆕 7.3+\")])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"You can translate not only with \"),s(\"code\",[this._v(\"v-t\")]),this._v(\" custom directive, but also with the \"),s(\"code\",[this._v(\"$t\")]),this._v(\"\\nmethod.\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"string-syntax\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#string-syntax\"}},[this._v(\"#\")]),this._v(\" String syntax\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hi there!'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      ja\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'こんにちは！'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  data\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" path\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hello'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#string-syntax'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"string-syntax\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- string literal --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"'\")]),t._v(\"hello'\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- keypath binding via data --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"path\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"string-syntax\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"hi there!\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"hi there!\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"object-syntax\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#object-syntax\"}},[this._v(\"#\")]),this._v(\" Object syntax\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hi {name}!'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n      ja\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" hello\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'こんにちは、{name}！'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  computed\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"nickName\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"return\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'kazupon'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  data\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" path\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'hello'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#object-syntax'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"object-syntax\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- literal --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"{ path: 'hello', locale: 'ja', args: { name: 'kazupon' } }\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[t._v(\"\\x3c!-- data binding via data --\\x3e\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"{ path: path, args: { name: nickName } }\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"object-syntax\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"こんにちは、kazupon！\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"hi kazupon!\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"p\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"use-with-transitions\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#use-with-transitions\"}},[this._v(\"#\")]),this._v(\" Use with transitions\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"div\",{staticClass:\"tip custom-block\"},[s(\"p\",{staticClass:\"custom-block-title\"},[this._v(\"Support Version\")]),this._v(\" \"),s(\"p\",[this._v(\"🆕 8.7+\")])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" preserve\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'with preserve'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  data\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" toggle\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token boolean\"}},[t._v(\"true\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#in-transitions'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"in-transitions\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"transition\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"name\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"fade\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-if\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"toggle\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t.preserve\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"'\")]),t._v(\"preserve'\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"transition\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"button\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"@click\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"toggle = !toggle\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Toggle\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"button\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"It is also possible to set global settings on the \"),s(\"code\",[this._v(\"VueI18n\")]),this._v(\" instance itself, which will affect all \"),s(\"code\",[this._v(\"v-t\")]),this._v(\" directives without modifier.\")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-js extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"Vue\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n  i18n\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[t._v(\"new\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[t._v(\"VueI18n\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n    locale\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'en'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    messages\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\"\\n      en\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" preserve\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'with preserve'\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n    preserveDirectiveContent\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token boolean\"}},[t._v(\"true\")]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\",\")]),t._v(\"\\n  data\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"{\")]),t._v(\" toggle\"),a(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[t._v(\":\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token boolean\"}},[t._v(\"true\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"}\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\".\")]),a(\"span\",{pre:!0,attrs:{class:\"token function\"}},[t._v(\"$mount\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"(\")]),a(\"span\",{pre:!0,attrs:{class:\"token string\"}},[t._v(\"'#in-transitions'\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\")\")]),t._v(\"\\n\")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a(\"div\",{staticClass:\"language-html extra-class\"},[a(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[a(\"code\",[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"div\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"id\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"in-transitions\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"transition\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"name\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"fade\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n    \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"span\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-if\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"toggle\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"v-t\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"'\")]),t._v(\"preserve'\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"span\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"transition\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n  \"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"<\")]),t._v(\"button\")]),t._v(\" \"),a(\"span\",{pre:!0,attrs:{class:\"token attr-name\"}},[t._v(\"@click\")]),a(\"span\",{pre:!0,attrs:{class:\"token attr-value\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"=\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')]),t._v(\"toggle = !toggle\"),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v('\"')])]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"Toggle\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"button\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\"),a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\"</\")]),t._v(\"div\")]),a(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[t._v(\">\")])]),t._v(\"\\n\")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h2\",{attrs:{id:\"t-vs-v-t\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#t-vs-v-t\"}},[this._v(\"#\")]),this._v(\" \"),s(\"code\",[this._v(\"$t\")]),this._v(\" vs \"),s(\"code\",[this._v(\"v-t\")])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h3\",{attrs:{id:\"t\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#t\"}},[this._v(\"#\")]),this._v(\" \"),s(\"code\",[this._v(\"$t\")])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[s(\"code\",[this._v(\"$t\")]),this._v(\" is an extended Vue instance method. It has the following pros and cons:\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h4\",{attrs:{id:\"pros\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#pros\"}},[this._v(\"#\")]),this._v(\" Pros\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"You can \"),s(\"strong\",[this._v(\"flexibly\")]),this._v(\" use mustache syntax \"),s(\"code\",[this._v(\"{{}}\")]),this._v(\" in templates and also computed props and methods in Vue instance.\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h4\",{attrs:{id:\"cons\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#cons\"}},[this._v(\"#\")]),this._v(\" Cons\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[s(\"code\",[this._v(\"$t\")]),this._v(\" is executed \"),s(\"strong\",[this._v(\"every time\")]),this._v(\" when re-render occurs, so it does have translation costs.\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h3\",{attrs:{id:\"v-t\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#v-t\"}},[this._v(\"#\")]),this._v(\" \"),s(\"code\",[this._v(\"v-t\")])])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[s(\"code\",[this._v(\"v-t\")]),this._v(\" is a custom directive. It has the following pros and cons:\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h4\",{attrs:{id:\"pros-2\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#pros-2\"}},[this._v(\"#\")]),this._v(\" Pros\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"p\",[this._v(\"Therefore it's possible to make \"),s(\"strong\",[this._v(\"more performance optimizations\")]),this._v(\".\")])},function(){var t=this.$createElement,s=this._self._c||t;return s(\"h4\",{attrs:{id:\"cons-2\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#cons-2\"}},[this._v(\"#\")]),this._v(\" Cons\")])}],!1,null,null,null);s.default=e.exports}}]);"
  },
  {
    "path": "docs/assets/js/9.ec02aae8.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[9],{241:function(a,t,s){\"use strict\";s.r(t);var e=s(0),n=Object(e.a)({},(function(){var a=this.$createElement;this._self._c;return this._m(0)}),[function(){var a=this,t=a.$createElement,s=a._self._c||t;return s(\"div\",{staticClass:\"content\"},[s(\"h1\",{attrs:{id:\"fallback-localization\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#fallback-localization\"}},[a._v(\"#\")]),a._v(\" Fallback localization\")]),a._v(\" \"),s(\"p\",[s(\"em\",[a._v(\"Summary: Use \"),s(\"code\",[a._v(\"fallbackLocale: '<lang>'\")]),a._v(\" to choose which language to use when your preferred language lacks a translation.\")])]),a._v(\" \"),s(\"h2\",{attrs:{id:\"implicit-fallback-using-locales\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#implicit-fallback-using-locales\"}},[a._v(\"#\")]),a._v(\" Implicit fallback using locales\")]),a._v(\" \"),s(\"p\",[a._v(\"If a \"),s(\"code\",[a._v(\"locale\")]),a._v(\" is given containing a territory and an optional dialect, the implicit fallback is activated automatically.\")]),a._v(\" \"),s(\"p\",[a._v(\"For example \"),s(\"code\",[a._v(\"de-DE-bavarian\")]),a._v(\" would fallback\")]),a._v(\" \"),s(\"ol\",[s(\"li\",[s(\"code\",[a._v(\"de-DE-bavarian\")])]),a._v(\" \"),s(\"li\",[s(\"code\",[a._v(\"de-DE\")])]),a._v(\" \"),s(\"li\",[s(\"code\",[a._v(\"de\")])])]),a._v(\" \"),s(\"p\",[a._v(\"To suppress the automatic fallback, add the postfix exclamation mark \"),s(\"code\",[a._v(\"!\")]),a._v(\", for example \"),s(\"code\",[a._v(\"de-DE!\")])]),a._v(\" \"),s(\"h2\",{attrs:{id:\"explicit-fallback-with-one-locale\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#explicit-fallback-with-one-locale\"}},[a._v(\"#\")]),a._v(\" Explicit fallback with one locale\")]),a._v(\" \"),s(\"p\",[a._v(\"Sometimes some items will not be translated into some languages. In this example, the item \"),s(\"code\",[a._v(\"hello\")]),a._v(\" is available in English but not Japanese:\")]),a._v(\" \"),s(\"div\",{staticClass:\"language-js extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[a._v(\"const\")]),a._v(\" messages \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\"=\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"{\")]),a._v(\"\\n  en\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\":\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"{\")]),a._v(\"\\n    hello\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\":\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'Hello, world!'\")]),a._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\",\")]),a._v(\"\\n  ja\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\":\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"{\")]),a._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"}\")]),a._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"}\")]),a._v(\"\\n\")])])]),s(\"p\",[a._v(\"If you want to use (say) \"),s(\"code\",[a._v(\"en\")]),a._v(\" items when an item is not available in your desired locale, set the \"),s(\"code\",[a._v(\"fallbackLocale\")]),a._v(\" option in the VueI18n constructor:\")]),a._v(\" \"),s(\"div\",{staticClass:\"language-js extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-js\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[a._v(\"const\")]),a._v(\" i18n \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\"=\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[a._v(\"new\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[a._v(\"VueI18n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"{\")]),a._v(\"\\n  locale\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\":\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'ja'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\",\")]),a._v(\"\\n  fallbackLocale\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\":\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'en'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\",\")]),a._v(\"\\n  messages\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\")\")]),a._v(\"\\n\")])])]),s(\"p\",[a._v(\"Template:\")]),a._v(\" \"),s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"<\")]),a._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\">\")])]),a._v(\"{{ $t('hello') }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"</\")]),a._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\">\")])]),a._v(\"\\n\")])])]),s(\"p\",[a._v(\"Output:\")]),a._v(\" \"),s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"<\")]),a._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\">\")])]),a._v(\"Hello, world!\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"</\")]),a._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\">\")])]),a._v(\"\\n\")])])]),s(\"p\",[a._v(\"By default, falling back to \"),s(\"code\",[a._v(\"fallbackLocale\")]),a._v(\" generates two console warnings:\")]),a._v(\" \"),s(\"div\",{staticClass:\"language-console extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-text\"}},[s(\"code\",[a._v(\"[vue-i18n] Value of key 'hello' is not a string!\\n[vue-i18n] Fall back to translate the keypath 'hello' with 'en' locale.\\n\")])])]),s(\"p\",[a._v(\"To suppress these warnings (while keeping those which warn of the total absence of translation for the given key) set \"),s(\"code\",[a._v(\"silentFallbackWarn: true\")]),a._v(\" when initializing the \"),s(\"code\",[a._v(\"VueI18n\")]),a._v(\" instance.\")]),a._v(\" \"),s(\"h2\",{attrs:{id:\"explicit-fallback-with-an-array-of-locales\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#explicit-fallback-with-an-array-of-locales\"}},[a._v(\"#\")]),a._v(\" Explicit fallback with an array of locales\")]),a._v(\" \"),s(\"p\",[a._v(\"It is possible to set more than one fallback locale by using an array of locales. For example\")]),a._v(\" \"),s(\"div\",{staticClass:\"language-javascript extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-javascript\"}},[s(\"code\",[a._v(\"fallbackLocale\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\":\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"[\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'fr'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\",\")]),a._v(\" en' \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"]\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\",\")]),a._v(\"\\n\")])])]),s(\"h2\",{attrs:{id:\"explicit-fallback-with-decision-maps\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#explicit-fallback-with-decision-maps\"}},[a._v(\"#\")]),a._v(\" Explicit fallback with decision maps\")]),a._v(\" \"),s(\"p\",[a._v(\"If more complex decision maps for fallback locales are required, it is possible to define decision maps with according fallback locales.\\nUsing the following decision map\")]),a._v(\" \"),s(\"div\",{staticClass:\"language-javascript extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-javascript\"}},[s(\"code\",[a._v(\"fallbackLocale\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\":\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"{\")]),a._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[a._v(\"/* 1 */\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'de-CH'\")]),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\":\")]),a._v(\"   \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"[\")]),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'fr'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\",\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'it'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"]\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\",\")]),a._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[a._v(\"/* 2 */\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'zh-Hant'\")]),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\":\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"[\")]),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'zh-Hans'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"]\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\",\")]),a._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[a._v(\"/* 3 */\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'es-CL'\")]),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\":\")]),a._v(\"   \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"[\")]),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'es-AR'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"]\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\",\")]),a._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[a._v(\"/* 4 */\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'es'\")]),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\":\")]),a._v(\"      \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"[\")]),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'en-GB'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"]\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\",\")]),a._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[a._v(\"/* 5 */\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'pt'\")]),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\":\")]),a._v(\"      \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"[\")]),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'es-AR'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"]\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\",\")]),a._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token comment\"}},[a._v(\"/* 6 */\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'default'\")]),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\":\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"[\")]),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'en'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\",\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'da'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"]\")]),a._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\",\")]),a._v(\"\\n\")])])]),s(\"p\",[a._v(\"will result in the following fallback chains\")]),a._v(\" \"),s(\"table\",[s(\"thead\",[s(\"tr\",[s(\"th\",[a._v(\"locale\")]),a._v(\" \"),s(\"th\",[a._v(\"fallback chains\")])])]),a._v(\" \"),s(\"tbody\",[s(\"tr\",[s(\"td\",[s(\"code\",[a._v(\"'de-CH'\")])]),a._v(\" \"),s(\"td\",[a._v(\"de-CH > fr > it > en > da\")])]),a._v(\" \"),s(\"tr\",[s(\"td\",[s(\"code\",[a._v(\"'de'\")])]),a._v(\" \"),s(\"td\",[a._v(\"de > en > da\")])]),a._v(\" \"),s(\"tr\",[s(\"td\",[s(\"code\",[a._v(\"'zh-Hant'\")])]),a._v(\" \"),s(\"td\",[a._v(\"zh-Hant > zh-Hans > zh > en > da\")])]),a._v(\" \"),s(\"tr\",[s(\"td\",[s(\"code\",[a._v(\"'es-SP'\")])]),a._v(\" \"),s(\"td\",[a._v(\"es-SP > es > en-GB > en > da\")])]),a._v(\" \"),s(\"tr\",[s(\"td\",[s(\"code\",[a._v(\"'es-SP!'\")])]),a._v(\" \"),s(\"td\",[a._v(\"es-SP > en > da\")])]),a._v(\" \"),s(\"tr\",[s(\"td\",[s(\"code\",[a._v(\"'fr'\")])]),a._v(\" \"),s(\"td\",[a._v(\"fr > en > da\")])]),a._v(\" \"),s(\"tr\",[s(\"td\",[s(\"code\",[a._v(\"'pt-BR'\")])]),a._v(\" \"),s(\"td\",[a._v(\"pt-BR > pt > es-AR > es > en-GB > en > da\")])]),a._v(\" \"),s(\"tr\",[s(\"td\",[s(\"code\",[a._v(\"'es-CL'\")])]),a._v(\" \"),s(\"td\",[a._v(\"es-CL > es-AR > es > en-GB > en > da\")])])])]),a._v(\" \"),s(\"h2\",{attrs:{id:\"fallback-interpolation\"}},[s(\"a\",{staticClass:\"header-anchor\",attrs:{href:\"#fallback-interpolation\"}},[a._v(\"#\")]),a._v(\" Fallback interpolation\")]),a._v(\" \"),s(\"p\",[s(\"em\",[a._v(\"Summary: Set \"),s(\"code\",[a._v(\"formatFallbackMessages: true\")]),a._v(\" to do template interpolation on translation keys when your language lacks a translation for a key.\")])]),a._v(\" \"),s(\"p\",[a._v(\"Since the keys to the translations are strings, you can use a user-readable message (for a particular language) as a key.\\nE.g.\")]),a._v(\" \"),s(\"div\",{staticClass:\"language-javascript extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-javascript\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[a._v(\"const\")]),a._v(\" messages \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\"=\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"{\")]),a._v(\"\\n  ja\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\":\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"{\")]),a._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'Hello, world!'\")]),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\":\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'こんにちは、世界!'\")]),a._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"}\")]),a._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"}\")]),a._v(\"\\n\")])])]),s(\"p\",[a._v('This is useful because you don\\'t have to specify a translation for the string \"Hello, world!\" into English.')]),a._v(\" \"),s(\"p\",[a._v(\"In fact, you can even include template parameters in a key. Together with \"),s(\"code\",[a._v(\"formatFallbackMessages: true\")]),a._v(', this lets you skip writing templates for your \"base\" language; the keys '),s(\"em\",[a._v(\"are\")]),a._v(\" your templates.\")]),a._v(\" \"),s(\"div\",{staticClass:\"language-javascript extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-javascript\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[a._v(\"const\")]),a._v(\" messages \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\"=\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"{\")]),a._v(\"\\n  ru\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\":\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"{\")]),a._v(\"\\n    \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'Hello {name}'\")]),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\":\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'Здравствуйте {name}'\")]),a._v(\"\\n  \"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"}\")]),a._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"}\")]),a._v(\"\\n\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[a._v(\"const\")]),a._v(\" i18n \"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\"=\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token keyword\"}},[a._v(\"new\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token class-name\"}},[a._v(\"VueI18n\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"(\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"{\")]),a._v(\"\\n  locale\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\":\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'ru'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\",\")]),a._v(\"\\n  fallbackLocale\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\":\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token string\"}},[a._v(\"'en'\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\",\")]),a._v(\"\\n  formatFallbackMessages\"),s(\"span\",{pre:!0,attrs:{class:\"token operator\"}},[a._v(\":\")]),a._v(\" \"),s(\"span\",{pre:!0,attrs:{class:\"token boolean\"}},[a._v(\"true\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\",\")]),a._v(\"\\n  messages\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"}\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\")\")]),a._v(\"\\n\")])])]),s(\"p\",[a._v(\"When the template is as below:\")]),a._v(\" \"),s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"<\")]),a._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\">\")])]),a._v(\"{{ $t('Hello {name}', { name: 'John' }}) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"</\")]),a._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\">\")])]),a._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"<\")]),a._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\">\")])]),a._v(\"{{ $t('The weather today is {condition}!', { condition: 'sunny' }) }}\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"</\")]),a._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\">\")])]),a._v(\"\\n\")])])]),s(\"p\",[a._v(\"The following will be output:\")]),a._v(\" \"),s(\"div\",{staticClass:\"language-html extra-class\"},[s(\"pre\",{pre:!0,attrs:{class:\"language-html\"}},[s(\"code\",[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"<\")]),a._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\">\")])]),a._v(\"Здравствуйте, John\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"</\")]),a._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\">\")])]),a._v(\"\\n\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"<\")]),a._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\">\")])]),a._v(\"The weather today is sunny!\"),s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token tag\"}},[s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\"</\")]),a._v(\"p\")]),s(\"span\",{pre:!0,attrs:{class:\"token punctuation\"}},[a._v(\">\")])]),a._v(\"\\n\")])])])])}],!1,null,null,null);t.default=n.exports}}]);"
  },
  {
    "path": "docs/assets/js/app.5b04e7b0.js",
    "content": "(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[]]);!function(t){function e(e){for(var r,a,l=e[0],s=e[1],u=e[2],f=0,p=[];f<l.length;f++)a=l[f],Object.prototype.hasOwnProperty.call(i,a)&&i[a]&&p.push(i[a][0]),i[a]=0;for(r in s)Object.prototype.hasOwnProperty.call(s,r)&&(t[r]=s[r]);for(c&&c(e);p.length;)p.shift()();return o.push.apply(o,u||[]),n()}function n(){for(var t,e=0;e<o.length;e++){for(var n=o[e],r=!0,l=1;l<n.length;l++){var s=n[l];0!==i[s]&&(r=!1)}r&&(o.splice(e--,1),t=a(a.s=n[0]))}return t}var r={},i={1:0},o=[];function a(e){if(r[e])return r[e].exports;var n=r[e]={i:e,l:!1,exports:{}};return t[e].call(n.exports,n,n.exports,a),n.l=!0,n.exports}a.e=function(t){var e=[],n=i[t];if(0!==n)if(n)e.push(n[2]);else{var r=new Promise((function(e,r){n=i[t]=[e,r]}));e.push(n[2]=r);var o,l=document.createElement(\"script\");l.charset=\"utf-8\",l.timeout=120,a.nc&&l.setAttribute(\"nonce\",a.nc),l.src=function(t){return a.p+\"assets/js/\"+({}[t]||t)+\".\"+{2:\"aa910774\",3:\"5e63523d\",4:\"9735c0af\",5:\"0b14e886\",6:\"b88753f1\",7:\"eaeacaf7\",8:\"344bd519\",9:\"ec02aae8\",10:\"13689381\",11:\"aa13f293\",12:\"2b21ead8\",13:\"b3706367\",14:\"1819508a\",15:\"12152ec7\",16:\"c251473e\",17:\"311179bd\",18:\"a9d0f1d4\",19:\"d0288f09\",20:\"9de38e10\",21:\"65715f7c\",22:\"7b59f449\",23:\"11ece4c3\",24:\"dffd1071\",25:\"97b69148\",26:\"616f0814\",27:\"adf21b94\",28:\"6bf6d42b\",29:\"e8b42909\",30:\"24889fb9\",31:\"57bd94a5\",32:\"14dc9bdc\",33:\"4d59e7bf\",34:\"adc9b2af\",35:\"4e6e5ad7\",36:\"7b1eb244\",37:\"6584773d\",38:\"7879de31\",39:\"f7496f35\",40:\"b5b5dc72\",41:\"638a9c02\",42:\"222a2780\",43:\"b28cd4fc\",44:\"67f64685\",45:\"550cbef0\",46:\"5ab1c570\",47:\"d7b6ca42\",48:\"185bface\",49:\"1570bc72\",50:\"0e187269\",51:\"c993f5c3\",52:\"d66b2adb\",53:\"21ae73c5\",54:\"cd4c9ca8\",55:\"caa71074\",56:\"c8f906b3\",57:\"388c89dc\",58:\"ad6e14bc\",59:\"3d64068b\",60:\"12bfe8e9\",61:\"446dac92\",62:\"88ef088f\",63:\"b6e0a846\",64:\"f3210fad\",65:\"afac79e3\",66:\"d403fc3a\",67:\"0bffd98a\"}[t]+\".js\"}(t);var s=new Error;o=function(e){l.onerror=l.onload=null,clearTimeout(u);var n=i[t];if(0!==n){if(n){var r=e&&(\"load\"===e.type?\"missing\":e.type),o=e&&e.target&&e.target.src;s.message=\"Loading chunk \"+t+\" failed.\\n(\"+r+\": \"+o+\")\",s.name=\"ChunkLoadError\",s.type=r,s.request=o,n[1](s)}i[t]=void 0}};var u=setTimeout((function(){o({type:\"timeout\",target:l})}),12e4);l.onerror=l.onload=o,document.head.appendChild(l)}return Promise.all(e)},a.m=t,a.c=r,a.d=function(t,e,n){a.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},a.r=function(t){\"undefined\"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:\"Module\"}),Object.defineProperty(t,\"__esModule\",{value:!0})},a.t=function(t,e){if(1&e&&(t=a(t)),8&e)return t;if(4&e&&\"object\"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(a.r(n),Object.defineProperty(n,\"default\",{enumerable:!0,value:t}),2&e&&\"string\"!=typeof t)for(var r in t)a.d(n,r,function(e){return t[e]}.bind(null,r));return n},a.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return a.d(e,\"a\",e),e},a.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},a.p=\"/vue-i18n/\",a.oe=function(t){throw console.error(t),t};var l=window.webpackJsonp=window.webpackJsonp||[],s=l.push.bind(l);l.push=e,l=l.slice();for(var u=0;u<l.length;u++)e(l[u]);var c=s;o.push([94,0]),n()}([function(t,e,n){\"use strict\";function r(t,e,n,r,i,o,a,l){var s,u=\"function\"==typeof t?t.options:t;if(e&&(u.render=e,u.staticRenderFns=n,u._compiled=!0),r&&(u.functional=!0),o&&(u._scopeId=\"data-v-\"+o),a?(s=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||\"undefined\"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},u._ssrRegister=s):i&&(s=l?function(){i.call(this,this.$root.$options.shadowRoot)}:i),s)if(u.functional){u._injectStyles=s;var c=u.render;u.render=function(t,e){return s.call(e),c(t,e)}}else{var f=u.beforeCreate;u.beforeCreate=f?[].concat(f,s):[s]}return{exports:t,options:u}}n.d(e,\"a\",(function(){return r}))},function(t,e,n){var r=n(54)(\"wks\"),i=n(24),o=n(3).Symbol,a=\"function\"==typeof o;(t.exports=function(t){return r[t]||(r[t]=a&&o[t]||(a?o:i)(\"Symbol.\"+t))}).store=r},function(t,e,n){var r=n(3),i=n(13),o=n(10),a=n(11),l=n(9),s=function(t,e,n){var u,c,f,p,d=t&s.F,h=t&s.G,v=t&s.S,m=t&s.P,g=t&s.B,y=h?r:v?r[e]||(r[e]={}):(r[e]||{}).prototype,b=h?i:i[e]||(i[e]={}),_=b.prototype||(b.prototype={});for(u in h&&(n=e),n)f=((c=!d&&y&&void 0!==y[u])?y:n)[u],p=g&&c?l(f,r):m&&\"function\"==typeof f?l(Function.call,f):f,y&&a(y,u,f,t&s.U),b[u]!=f&&o(b,u,p),m&&_[u]!=f&&(_[u]=f)};r.core=i,s.F=1,s.G=2,s.S=4,s.P=8,s.B=16,s.W=32,s.U=64,s.R=128,t.exports=s},function(t,e){var n=t.exports=\"undefined\"!=typeof window&&window.Math==Math?window:\"undefined\"!=typeof self&&self.Math==Math?self:Function(\"return this\")();\"number\"==typeof __g&&(__g=n)},function(t,e){t.exports=function(t){return\"object\"==typeof t?null!==t:\"function\"==typeof t}},function(t,e,n){var r=n(4);t.exports=function(t){if(!r(t))throw TypeError(t+\" is not an object!\");return t}},function(t,e){t.exports=function(t){try{return!!t()}catch(t){return!0}}},function(t,e,n){t.exports=!n(6)((function(){return 7!=Object.defineProperty({},\"a\",{get:function(){return 7}}).a}))},function(t,e,n){var r=n(5),i=n(73),o=n(74),a=Object.defineProperty;e.f=n(7)?Object.defineProperty:function(t,e,n){if(r(t),e=o(e,!0),r(n),i)try{return a(t,e,n)}catch(t){}if(\"get\"in n||\"set\"in n)throw TypeError(\"Accessors not supported!\");return\"value\"in n&&(t[e]=n.value),t}},function(t,e,n){var r=n(23);t.exports=function(t,e,n){if(r(t),void 0===e)return t;switch(n){case 1:return function(n){return t.call(e,n)};case 2:return function(n,r){return t.call(e,n,r)};case 3:return function(n,r,i){return t.call(e,n,r,i)}}return function(){return t.apply(e,arguments)}}},function(t,e,n){var r=n(8),i=n(56);t.exports=n(7)?function(t,e,n){return r.f(t,e,i(1,n))}:function(t,e,n){return t[e]=n,t}},function(t,e,n){var r=n(3),i=n(10),o=n(14),a=n(24)(\"src\"),l=n(95),s=(\"\"+l).split(\"toString\");n(13).inspectSource=function(t){return l.call(t)},(t.exports=function(t,e,n,l){var u=\"function\"==typeof n;u&&(o(n,\"name\")||i(n,\"name\",e)),t[e]!==n&&(u&&(o(n,a)||i(n,a,t[e]?\"\"+t[e]:s.join(String(e)))),t===r?t[e]=n:l?t[e]?t[e]=n:i(t,e,n):(delete t[e],i(t,e,n)))})(Function.prototype,\"toString\",(function(){return\"function\"==typeof this&&this[a]||l.call(this)}))},function(t,e){var n={}.toString;t.exports=function(t){return n.call(t).slice(8,-1)}},function(t,e){var n=t.exports={version:\"2.6.11\"};\"number\"==typeof __e&&(__e=n)},function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},function(t,e,n){var r=n(25),i=Math.min;t.exports=function(t){return t>0?i(r(t),9007199254740991):0}},function(t,e){t.exports=function(t){if(null==t)throw TypeError(\"Can't call method on  \"+t);return t}},function(t,e,n){for(var r=n(20),i=n(28),o=n(11),a=n(3),l=n(10),s=n(18),u=n(1),c=u(\"iterator\"),f=u(\"toStringTag\"),p=s.Array,d={CSSRuleList:!0,CSSStyleDeclaration:!1,CSSValueList:!1,ClientRectList:!1,DOMRectList:!1,DOMStringList:!1,DOMTokenList:!0,DataTransferItemList:!1,FileList:!1,HTMLAllCollection:!1,HTMLCollection:!1,HTMLFormElement:!1,HTMLSelectElement:!1,MediaList:!0,MimeTypeArray:!1,NamedNodeMap:!1,NodeList:!0,PaintRequestList:!1,Plugin:!1,PluginArray:!1,SVGLengthList:!1,SVGNumberList:!1,SVGPathSegList:!1,SVGPointList:!1,SVGStringList:!1,SVGTransformList:!1,SourceBufferList:!1,StyleSheetList:!0,TextTrackCueList:!1,TextTrackList:!1,TouchList:!1},h=i(d),v=0;v<h.length;v++){var m,g=h[v],y=d[g],b=a[g],_=b&&b.prototype;if(_&&(_[c]||l(_,c,p),_[f]||l(_,f,g),s[g]=p,y))for(m in r)_[m]||o(_,m,r[m],!0)}},function(t,e){t.exports={}},function(t,e,n){var r=n(16);t.exports=function(t){return Object(r(t))}},function(t,e,n){\"use strict\";var r=n(108),i=n(84),o=n(18),a=n(29);t.exports=n(65)(Array,\"Array\",(function(t,e){this._t=a(t),this._i=0,this._k=e}),(function(){var t=this._t,e=this._k,n=this._i++;return!t||n>=t.length?(this._t=void 0,i(1)):i(0,\"keys\"==e?n:\"values\"==e?t[n]:[n,t[n]])}),\"values\"),o.Arguments=o.Array,r(\"keys\"),r(\"values\"),r(\"entries\")},function(t,e,n){\"use strict\";var r=n(6);t.exports=function(t,e){return!!t&&r((function(){e?t.call(null,(function(){}),1):t.call(null)}))}},function(t,e,n){\"use strict\";var r=n(2),i=n(32)(3);r(r.P+r.F*!n(21)([].some,!0),\"Array\",{some:function(t){return i(this,t,arguments[1])}})},function(t,e){t.exports=function(t){if(\"function\"!=typeof t)throw TypeError(t+\" is not a function!\");return t}},function(t,e){var n=0,r=Math.random();t.exports=function(t){return\"Symbol(\".concat(void 0===t?\"\":t,\")_\",(++n+r).toString(36))}},function(t,e){var n=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:n)(t)}},function(t,e,n){var r=n(8).f,i=n(14),o=n(1)(\"toStringTag\");t.exports=function(t,e,n){t&&!i(t=n?t:t.prototype,o)&&r(t,o,{configurable:!0,value:e})}},function(t,e,n){var r=n(2);r(r.S+r.F,\"Object\",{assign:n(104)})},function(t,e,n){var r=n(80),i=n(63);t.exports=Object.keys||function(t){return r(t,i)}},function(t,e,n){var r=n(61),i=n(16);t.exports=function(t){return r(i(t))}},function(t,e,n){var r=n(19),i=n(28);n(83)(\"keys\",(function(){return function(t){return i(r(t))}}))},function(t,e,n){\"use strict\";var r=n(2),i=n(32)(0),o=n(21)([].forEach,!0);r(r.P+r.F*!o,\"Array\",{forEach:function(t){return i(this,t,arguments[1])}})},function(t,e,n){var r=n(9),i=n(61),o=n(19),a=n(15),l=n(112);t.exports=function(t,e){var n=1==t,s=2==t,u=3==t,c=4==t,f=6==t,p=5==t||f,d=e||l;return function(e,l,h){for(var v,m,g=o(e),y=i(g),b=r(l,h,3),_=a(y.length),x=0,k=n?d(e,_):s?d(e,0):void 0;_>x;x++)if((p||x in y)&&(m=b(v=y[x],x,g),t))if(n)k[x]=m;else if(m)switch(t){case 3:return!0;case 5:return v;case 6:return x;case 2:k.push(v)}else if(c)return!1;return f?-1:u||c?c:k}}},function(t,e,n){\"use strict\";var r=n(2),i=n(32)(2);r(r.P+r.F*!n(21)([].filter,!0),\"Array\",{filter:function(t){return i(this,t,arguments[1])}})},function(t,e,n){\"use strict\";var r=n(2),i=n(32)(1);r(r.P+r.F*!n(21)([].map,!0),\"Array\",{map:function(t){return i(this,t,arguments[1])}})},function(t,e,n){\"use strict\";var r=n(5),i=n(19),o=n(15),a=n(25),l=n(68),s=n(69),u=Math.max,c=Math.min,f=Math.floor,p=/\\$([$&`']|\\d\\d?|<[^>]*>)/g,d=/\\$([$&`']|\\d\\d?)/g;n(71)(\"replace\",2,(function(t,e,n,h){return[function(r,i){var o=t(this),a=null==r?void 0:r[e];return void 0!==a?a.call(r,o,i):n.call(String(o),r,i)},function(t,e){var i=h(n,t,this,e);if(i.done)return i.value;var f=r(t),p=String(this),d=\"function\"==typeof e;d||(e=String(e));var m=f.global;if(m){var g=f.unicode;f.lastIndex=0}for(var y=[];;){var b=s(f,p);if(null===b)break;if(y.push(b),!m)break;\"\"===String(b[0])&&(f.lastIndex=l(p,o(f.lastIndex),g))}for(var _,x=\"\",k=0,w=0;w<y.length;w++){b=y[w];for(var C=String(b[0]),$=u(c(a(b.index),p.length),0),S=[],E=1;E<b.length;E++)S.push(void 0===(_=b[E])?_:String(_));var O=b.groups;if(d){var A=[C].concat(S,$,p);void 0!==O&&A.push(O);var j=String(e.apply(void 0,A))}else j=v(C,p,$,S,O,e);$>=k&&(x+=p.slice(k,$)+j,k=$+C.length)}return x+p.slice(k)}];function v(t,e,r,o,a,l){var s=r+t.length,u=o.length,c=d;return void 0!==a&&(a=i(a),c=p),n.call(l,c,(function(n,i){var l;switch(i.charAt(0)){case\"$\":return\"$\";case\"&\":return t;case\"`\":return e.slice(0,r);case\"'\":return e.slice(s);case\"<\":l=a[i.slice(1,-1)];break;default:var c=+i;if(0===c)return n;if(c>u){var p=f(c/10);return 0===p?n:p<=u?void 0===o[p-1]?i.charAt(1):o[p-1]+i.charAt(1):n}l=o[c-1]}return void 0===l?\"\":l}))}}))},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){var r,i;\n/* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress\n * @license MIT */void 0===(i=\"function\"==typeof(r=function(){var t,e,n={version:\"0.2.0\"},r=n.settings={minimum:.08,easing:\"ease\",positionUsing:\"\",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role=\"bar\"]',spinnerSelector:'[role=\"spinner\"]',parent:\"body\",template:'<div class=\"bar\" role=\"bar\"><div class=\"peg\"></div></div><div class=\"spinner\" role=\"spinner\"><div class=\"spinner-icon\"></div></div>'};function i(t,e,n){return t<e?e:t>n?n:t}function o(t){return 100*(-1+t)}n.configure=function(t){var e,n;for(e in t)void 0!==(n=t[e])&&t.hasOwnProperty(e)&&(r[e]=n);return this},n.status=null,n.set=function(t){var e=n.isStarted();t=i(t,r.minimum,1),n.status=1===t?null:t;var s=n.render(!e),u=s.querySelector(r.barSelector),c=r.speed,f=r.easing;return s.offsetWidth,a((function(e){\"\"===r.positionUsing&&(r.positionUsing=n.getPositioningCSS()),l(u,function(t,e,n){var i;return(i=\"translate3d\"===r.positionUsing?{transform:\"translate3d(\"+o(t)+\"%,0,0)\"}:\"translate\"===r.positionUsing?{transform:\"translate(\"+o(t)+\"%,0)\"}:{\"margin-left\":o(t)+\"%\"}).transition=\"all \"+e+\"ms \"+n,i}(t,c,f)),1===t?(l(s,{transition:\"none\",opacity:1}),s.offsetWidth,setTimeout((function(){l(s,{transition:\"all \"+c+\"ms linear\",opacity:0}),setTimeout((function(){n.remove(),e()}),c)}),c)):setTimeout(e,c)})),this},n.isStarted=function(){return\"number\"==typeof n.status},n.start=function(){n.status||n.set(0);var t=function(){setTimeout((function(){n.status&&(n.trickle(),t())}),r.trickleSpeed)};return r.trickle&&t(),this},n.done=function(t){return t||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(t){var e=n.status;return e?(\"number\"!=typeof t&&(t=(1-e)*i(Math.random()*e,.1,.95)),e=i(e+t,0,.994),n.set(e)):n.start()},n.trickle=function(){return n.inc(Math.random()*r.trickleRate)},t=0,e=0,n.promise=function(r){return r&&\"resolved\"!==r.state()?(0===e&&n.start(),t++,e++,r.always((function(){0==--e?(t=0,n.done()):n.set((t-e)/t)})),this):this},n.render=function(t){if(n.isRendered())return document.getElementById(\"nprogress\");u(document.documentElement,\"nprogress-busy\");var e=document.createElement(\"div\");e.id=\"nprogress\",e.innerHTML=r.template;var i,a=e.querySelector(r.barSelector),s=t?\"-100\":o(n.status||0),c=document.querySelector(r.parent);return l(a,{transition:\"all 0 linear\",transform:\"translate3d(\"+s+\"%,0,0)\"}),r.showSpinner||(i=e.querySelector(r.spinnerSelector))&&p(i),c!=document.body&&u(c,\"nprogress-custom-parent\"),c.appendChild(e),e},n.remove=function(){c(document.documentElement,\"nprogress-busy\"),c(document.querySelector(r.parent),\"nprogress-custom-parent\");var t=document.getElementById(\"nprogress\");t&&p(t)},n.isRendered=function(){return!!document.getElementById(\"nprogress\")},n.getPositioningCSS=function(){var t=document.body.style,e=\"WebkitTransform\"in t?\"Webkit\":\"MozTransform\"in t?\"Moz\":\"msTransform\"in t?\"ms\":\"OTransform\"in t?\"O\":\"\";return e+\"Perspective\"in t?\"translate3d\":e+\"Transform\"in t?\"translate\":\"margin\"};var a=function(){var t=[];function e(){var n=t.shift();n&&n(e)}return function(n){t.push(n),1==t.length&&e()}}(),l=function(){var t=[\"Webkit\",\"O\",\"Moz\",\"ms\"],e={};function n(n){return n=n.replace(/^-ms-/,\"ms-\").replace(/-([\\da-z])/gi,(function(t,e){return e.toUpperCase()})),e[n]||(e[n]=function(e){var n=document.body.style;if(e in n)return e;for(var r,i=t.length,o=e.charAt(0).toUpperCase()+e.slice(1);i--;)if((r=t[i]+o)in n)return r;return e}(n))}function r(t,e,r){e=n(e),t.style[e]=r}return function(t,e){var n,i,o=arguments;if(2==o.length)for(n in e)void 0!==(i=e[n])&&e.hasOwnProperty(n)&&r(t,n,i);else r(t,o[1],o[2])}}();function s(t,e){return(\"string\"==typeof t?t:f(t)).indexOf(\" \"+e+\" \")>=0}function u(t,e){var n=f(t),r=n+e;s(n,e)||(t.className=r.substring(1))}function c(t,e){var n,r=f(t);s(t,e)&&(n=r.replace(\" \"+e+\" \",\" \"),t.className=n.substring(1,n.length-1))}function f(t){return(\" \"+(t.className||\"\")+\" \").replace(/\\s+/gi,\" \")}function p(t){t&&t.parentNode&&t.parentNode.removeChild(t)}return n})?r.call(e,n,e,t):r)||(t.exports=i)},function(t,e){t.exports=!1},function(t,e,n){var r=n(12),i=n(1)(\"toStringTag\"),o=\"Arguments\"==r(function(){return arguments}());t.exports=function(t){var e,n,a;return void 0===t?\"Undefined\":null===t?\"Null\":\"string\"==typeof(n=function(t,e){try{return t[e]}catch(t){}}(e=Object(t),i))?n:o?r(e):\"Object\"==(a=r(e))&&\"function\"==typeof e.callee?\"Arguments\":a}},function(t,e,n){var r=n(13),i=n(3),o=i[\"__core-js_shared__\"]||(i[\"__core-js_shared__\"]={});(t.exports=function(t,e){return o[t]||(o[t]=void 0!==e?e:{})})(\"versions\",[]).push({version:r.version,mode:n(52)?\"pure\":\"global\",copyright:\"© 2019 Denis Pushkarev (zloirock.ru)\"})},function(t,e,n){var r=n(4),i=n(3).document,o=r(i)&&r(i.createElement);t.exports=function(t){return o?i.createElement(t):{}}},function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},function(t,e){t.exports=function(t,e,n,r){if(!(t instanceof e)||void 0!==r&&r in t)throw TypeError(n+\": incorrect invocation!\");return t}},function(t,e,n){var r=n(9),i=n(96),o=n(97),a=n(5),l=n(15),s=n(98),u={},c={};(e=t.exports=function(t,e,n,f,p){var d,h,v,m,g=p?function(){return t}:s(t),y=r(n,f,e?2:1),b=0;if(\"function\"!=typeof g)throw TypeError(t+\" is not iterable!\");if(o(g)){for(d=l(t.length);d>b;b++)if((m=e?y(a(h=t[b])[0],h[1]):y(t[b]))===u||m===c)return m}else for(v=g.call(t);!(h=v.next()).done;)if((m=i(v,y,h.value,e))===u||m===c)return m}).BREAK=u,e.RETURN=c},function(t,e,n){var r=n(11);t.exports=function(t,e,n){for(var i in e)r(t,i,e[i],n);return t}},function(t,e,n){\"use strict\";var r=n(3),i=n(8),o=n(7),a=n(1)(\"species\");t.exports=function(t){var e=r[t];o&&e&&!e[a]&&i.f(e,a,{configurable:!0,get:function(){return this}})}},function(t,e,n){var r=n(12);t.exports=Object(\"z\").propertyIsEnumerable(0)?Object:function(t){return\"String\"==r(t)?t.split(\"\"):Object(t)}},function(t,e,n){var r=n(54)(\"keys\"),i=n(24);t.exports=function(t){return r[t]||(r[t]=i(t))}},function(t,e){t.exports=\"constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf\".split(\",\")},function(t,e,n){var r=n(24)(\"meta\"),i=n(4),o=n(14),a=n(8).f,l=0,s=Object.isExtensible||function(){return!0},u=!n(6)((function(){return s(Object.preventExtensions({}))})),c=function(t){a(t,r,{value:{i:\"O\"+ ++l,w:{}}})},f=t.exports={KEY:r,NEED:!1,fastKey:function(t,e){if(!i(t))return\"symbol\"==typeof t?t:(\"string\"==typeof t?\"S\":\"P\")+t;if(!o(t,r)){if(!s(t))return\"F\";if(!e)return\"E\";c(t)}return t[r].i},getWeak:function(t,e){if(!o(t,r)){if(!s(t))return!0;if(!e)return!1;c(t)}return t[r].w},onFreeze:function(t){return u&&f.NEED&&s(t)&&!o(t,r)&&c(t),t}}},function(t,e,n){\"use strict\";var r=n(52),i=n(2),o=n(11),a=n(10),l=n(18),s=n(109),u=n(26),c=n(111),f=n(1)(\"iterator\"),p=!([].keys&&\"next\"in[].keys()),d=function(){return this};t.exports=function(t,e,n,h,v,m,g){s(n,e,h);var y,b,_,x=function(t){if(!p&&t in $)return $[t];switch(t){case\"keys\":case\"values\":return function(){return new n(this,t)}}return function(){return new n(this,t)}},k=e+\" Iterator\",w=\"values\"==v,C=!1,$=t.prototype,S=$[f]||$[\"@@iterator\"]||v&&$[v],E=S||x(v),O=v?w?x(\"entries\"):E:void 0,A=\"Array\"==e&&$.entries||S;if(A&&(_=c(A.call(new t)))!==Object.prototype&&_.next&&(u(_,k,!0),r||\"function\"==typeof _[f]||a(_,f,d)),w&&S&&\"values\"!==S.name&&(C=!0,E=function(){return S.call(this)}),r&&!g||!p&&!C&&$[f]||a($,f,E),l[e]=E,l[k]=d,v)if(y={values:w?E:x(\"values\"),keys:m?E:x(\"keys\"),entries:O},g)for(b in y)b in $||o($,b,y[b]);else i(i.P+i.F*(p||C),e,y);return y}},function(t,e,n){var r=n(8).f,i=Function.prototype,o=/^\\s*function ([^ (]*)/;\"name\"in i||n(7)&&r(i,\"name\",{configurable:!0,get:function(){try{return(\"\"+this).match(o)[1]}catch(t){return\"\"}}})},function(t,e,n){\"use strict\";var r=n(2),i=n(81)(!1),o=[].indexOf,a=!!o&&1/[1].indexOf(1,-0)<0;r(r.P+r.F*(a||!n(21)(o)),\"Array\",{indexOf:function(t){return a?o.apply(this,arguments)||0:i(this,t,arguments[1])}})},function(t,e,n){\"use strict\";var r=n(88)(!0);t.exports=function(t,e,n){return e+(n?r(t,e).length:1)}},function(t,e,n){\"use strict\";var r=n(53),i=RegExp.prototype.exec;t.exports=function(t,e){var n=t.exec;if(\"function\"==typeof n){var o=n.call(t,e);if(\"object\"!=typeof o)throw new TypeError(\"RegExp exec method returned something other than an Object or null\");return o}if(\"RegExp\"!==r(t))throw new TypeError(\"RegExp#exec called on incompatible receiver\");return i.call(t,e)}},function(t,e,n){\"use strict\";var r,i,o=n(89),a=RegExp.prototype.exec,l=String.prototype.replace,s=a,u=(r=/a/,i=/b*/g,a.call(r,\"a\"),a.call(i,\"a\"),0!==r.lastIndex||0!==i.lastIndex),c=void 0!==/()??/.exec(\"\")[1];(u||c)&&(s=function(t){var e,n,r,i,s=this;return c&&(n=new RegExp(\"^\"+s.source+\"$(?!\\\\s)\",o.call(s))),u&&(e=s.lastIndex),r=a.call(s,t),u&&r&&(s.lastIndex=s.global?r.index+r[0].length:e),c&&r&&r.length>1&&l.call(r[0],n,(function(){for(i=1;i<arguments.length-2;i++)void 0===arguments[i]&&(r[i]=void 0)})),r}),t.exports=s},function(t,e,n){\"use strict\";n(118);var r=n(11),i=n(10),o=n(6),a=n(16),l=n(1),s=n(70),u=l(\"species\"),c=!o((function(){var t=/./;return t.exec=function(){var t=[];return t.groups={a:\"7\"},t},\"7\"!==\"\".replace(t,\"$<a>\")})),f=function(){var t=/(?:)/,e=t.exec;t.exec=function(){return e.apply(this,arguments)};var n=\"ab\".split(t);return 2===n.length&&\"a\"===n[0]&&\"b\"===n[1]}();t.exports=function(t,e,n){var p=l(t),d=!o((function(){var e={};return e[p]=function(){return 7},7!=\"\"[t](e)})),h=d?!o((function(){var e=!1,n=/a/;return n.exec=function(){return e=!0,null},\"split\"===t&&(n.constructor={},n.constructor[u]=function(){return n}),n[p](\"\"),!e})):void 0;if(!d||!h||\"replace\"===t&&!c||\"split\"===t&&!f){var v=/./[p],m=n(a,p,\"\"[t],(function(t,e,n,r,i){return e.exec===s?d&&!i?{done:!0,value:v.call(e,n,r)}:{done:!0,value:t.call(n,e,r)}:{done:!1}})),g=m[0],y=m[1];r(String.prototype,t,g),i(RegExp.prototype,p,2==e?function(t,e){return y.call(t,this,e)}:function(t){return y.call(t,this)})}}},function(t,e,n){\"use strict\";var r,i,o,a,l=n(52),s=n(3),u=n(9),c=n(53),f=n(2),p=n(4),d=n(23),h=n(57),v=n(58),m=n(75),g=n(76).set,y=n(100)(),b=n(78),_=n(101),x=n(102),k=n(103),w=s.TypeError,C=s.process,$=C&&C.versions,S=$&&$.v8||\"\",E=s.Promise,O=\"process\"==c(C),A=function(){},j=i=b.f,T=!!function(){try{var t=E.resolve(1),e=(t.constructor={})[n(1)(\"species\")]=function(t){t(A,A)};return(O||\"function\"==typeof PromiseRejectionEvent)&&t.then(A)instanceof e&&0!==S.indexOf(\"6.6\")&&-1===x.indexOf(\"Chrome/66\")}catch(t){}}(),L=function(t){var e;return!(!p(t)||\"function\"!=typeof(e=t.then))&&e},I=function(t,e){if(!t._n){t._n=!0;var n=t._c;y((function(){for(var r=t._v,i=1==t._s,o=0,a=function(e){var n,o,a,l=i?e.ok:e.fail,s=e.resolve,u=e.reject,c=e.domain;try{l?(i||(2==t._h&&U(t),t._h=1),!0===l?n=r:(c&&c.enter(),n=l(r),c&&(c.exit(),a=!0)),n===e.promise?u(w(\"Promise-chain cycle\")):(o=L(n))?o.call(n,s,u):s(n)):u(r)}catch(t){c&&!a&&c.exit(),u(t)}};n.length>o;)a(n[o++]);t._c=[],t._n=!1,e&&!t._h&&P(t)}))}},P=function(t){g.call(s,(function(){var e,n,r,i=t._v,o=z(t);if(o&&(e=_((function(){O?C.emit(\"unhandledRejection\",i,t):(n=s.onunhandledrejection)?n({promise:t,reason:i}):(r=s.console)&&r.error&&r.error(\"Unhandled promise rejection\",i)})),t._h=O||z(t)?2:1),t._a=void 0,o&&e.e)throw e.v}))},z=function(t){return 1!==t._h&&0===(t._a||t._c).length},U=function(t){g.call(s,(function(){var e;O?C.emit(\"rejectionHandled\",t):(e=s.onrejectionhandled)&&e({promise:t,reason:t._v})}))},M=function(t){var e=this;e._d||(e._d=!0,(e=e._w||e)._v=t,e._s=2,e._a||(e._a=e._c.slice()),I(e,!0))},R=function(t){var e,n=this;if(!n._d){n._d=!0,n=n._w||n;try{if(n===t)throw w(\"Promise can't be resolved itself\");(e=L(t))?y((function(){var r={_w:n,_d:!1};try{e.call(t,u(R,r,1),u(M,r,1))}catch(t){M.call(r,t)}})):(n._v=t,n._s=1,I(n,!1))}catch(t){M.call({_w:n,_d:!1},t)}}};T||(E=function(t){h(this,E,\"Promise\",\"_h\"),d(t),r.call(this);try{t(u(R,this,1),u(M,this,1))}catch(t){M.call(this,t)}},(r=function(t){this._c=[],this._a=void 0,this._s=0,this._d=!1,this._v=void 0,this._h=0,this._n=!1}).prototype=n(59)(E.prototype,{then:function(t,e){var n=j(m(this,E));return n.ok=\"function\"!=typeof t||t,n.fail=\"function\"==typeof e&&e,n.domain=O?C.domain:void 0,this._c.push(n),this._a&&this._a.push(n),this._s&&I(this,!1),n.promise},catch:function(t){return this.then(void 0,t)}}),o=function(){var t=new r;this.promise=t,this.resolve=u(R,t,1),this.reject=u(M,t,1)},b.f=j=function(t){return t===E||t===a?new o(t):i(t)}),f(f.G+f.W+f.F*!T,{Promise:E}),n(26)(E,\"Promise\"),n(60)(\"Promise\"),a=n(13).Promise,f(f.S+f.F*!T,\"Promise\",{reject:function(t){var e=j(this);return(0,e.reject)(t),e.promise}}),f(f.S+f.F*(l||!T),\"Promise\",{resolve:function(t){return k(l&&this===a?E:this,t)}}),f(f.S+f.F*!(T&&n(79)((function(t){E.all(t).catch(A)}))),\"Promise\",{all:function(t){var e=this,n=j(e),r=n.resolve,i=n.reject,o=_((function(){var n=[],o=0,a=1;v(t,!1,(function(t){var l=o++,s=!1;n.push(void 0),a++,e.resolve(t).then((function(t){s||(s=!0,n[l]=t,--a||r(n))}),i)})),--a||r(n)}));return o.e&&i(o.v),n.promise},race:function(t){var e=this,n=j(e),r=n.reject,i=_((function(){v(t,!1,(function(t){e.resolve(t).then(n.resolve,r)}))}));return i.e&&r(i.v),n.promise}})},function(t,e,n){t.exports=!n(7)&&!n(6)((function(){return 7!=Object.defineProperty(n(55)(\"div\"),\"a\",{get:function(){return 7}}).a}))},function(t,e,n){var r=n(4);t.exports=function(t,e){if(!r(t))return t;var n,i;if(e&&\"function\"==typeof(n=t.toString)&&!r(i=n.call(t)))return i;if(\"function\"==typeof(n=t.valueOf)&&!r(i=n.call(t)))return i;if(!e&&\"function\"==typeof(n=t.toString)&&!r(i=n.call(t)))return i;throw TypeError(\"Can't convert object to primitive value\")}},function(t,e,n){var r=n(5),i=n(23),o=n(1)(\"species\");t.exports=function(t,e){var n,a=r(t).constructor;return void 0===a||null==(n=r(a)[o])?e:i(n)}},function(t,e,n){var r,i,o,a=n(9),l=n(99),s=n(77),u=n(55),c=n(3),f=c.process,p=c.setImmediate,d=c.clearImmediate,h=c.MessageChannel,v=c.Dispatch,m=0,g={},y=function(){var t=+this;if(g.hasOwnProperty(t)){var e=g[t];delete g[t],e()}},b=function(t){y.call(t.data)};p&&d||(p=function(t){for(var e=[],n=1;arguments.length>n;)e.push(arguments[n++]);return g[++m]=function(){l(\"function\"==typeof t?t:Function(t),e)},r(m),m},d=function(t){delete g[t]},\"process\"==n(12)(f)?r=function(t){f.nextTick(a(y,t,1))}:v&&v.now?r=function(t){v.now(a(y,t,1))}:h?(o=(i=new h).port2,i.port1.onmessage=b,r=a(o.postMessage,o,1)):c.addEventListener&&\"function\"==typeof postMessage&&!c.importScripts?(r=function(t){c.postMessage(t+\"\",\"*\")},c.addEventListener(\"message\",b,!1)):r=\"onreadystatechange\"in u(\"script\")?function(t){s.appendChild(u(\"script\")).onreadystatechange=function(){s.removeChild(this),y.call(t)}}:function(t){setTimeout(a(y,t,1),0)}),t.exports={set:p,clear:d}},function(t,e,n){var r=n(3).document;t.exports=r&&r.documentElement},function(t,e,n){\"use strict\";var r=n(23);function i(t){var e,n;this.promise=new t((function(t,r){if(void 0!==e||void 0!==n)throw TypeError(\"Bad Promise constructor\");e=t,n=r})),this.resolve=r(e),this.reject=r(n)}t.exports.f=function(t){return new i(t)}},function(t,e,n){var r=n(1)(\"iterator\"),i=!1;try{var o=[7][r]();o.return=function(){i=!0},Array.from(o,(function(){throw 2}))}catch(t){}t.exports=function(t,e){if(!e&&!i)return!1;var n=!1;try{var o=[7],a=o[r]();a.next=function(){return{done:n=!0}},o[r]=function(){return a},t(o)}catch(t){}return n}},function(t,e,n){var r=n(14),i=n(29),o=n(81)(!1),a=n(62)(\"IE_PROTO\");t.exports=function(t,e){var n,l=i(t),s=0,u=[];for(n in l)n!=a&&r(l,n)&&u.push(n);for(;e.length>s;)r(l,n=e[s++])&&(~o(u,n)||u.push(n));return u}},function(t,e,n){var r=n(29),i=n(15),o=n(105);t.exports=function(t){return function(e,n,a){var l,s=r(e),u=i(s.length),c=o(a,u);if(t&&n!=n){for(;u>c;)if((l=s[c++])!=l)return!0}else for(;u>c;c++)if((t||c in s)&&s[c]===n)return t||c||0;return!t&&-1}}},function(t,e){e.f={}.propertyIsEnumerable},function(t,e,n){var r=n(2),i=n(13),o=n(6);t.exports=function(t,e){var n=(i.Object||{})[t]||Object[t],a={};a[t]=e(n),r(r.S+r.F*o((function(){n(1)})),\"Object\",a)}},function(t,e){t.exports=function(t,e){return{value:e,done:!!t}}},function(t,e,n){var r=n(5),i=n(110),o=n(63),a=n(62)(\"IE_PROTO\"),l=function(){},s=function(){var t,e=n(55)(\"iframe\"),r=o.length;for(e.style.display=\"none\",n(77).appendChild(e),e.src=\"javascript:\",(t=e.contentWindow.document).open(),t.write(\"<script>document.F=Object<\\/script>\"),t.close(),s=t.F;r--;)delete s.prototype[o[r]];return s()};t.exports=Object.create||function(t,e){var n;return null!==t?(l.prototype=r(t),n=new l,l.prototype=null,n[a]=t):n=s(),void 0===e?n:i(n,e)}},function(t,e,n){var r=n(12);t.exports=Array.isArray||function(t){return\"Array\"==r(t)}},function(t,e,n){var r=n(4),i=n(12),o=n(1)(\"match\");t.exports=function(t){var e;return r(t)&&(void 0!==(e=t[o])?!!e:\"RegExp\"==i(t))}},function(t,e,n){var r=n(25),i=n(16);t.exports=function(t){return function(e,n){var o,a,l=String(i(e)),s=r(n),u=l.length;return s<0||s>=u?t?\"\":void 0:(o=l.charCodeAt(s))<55296||o>56319||s+1===u||(a=l.charCodeAt(s+1))<56320||a>57343?t?l.charAt(s):o:t?l.slice(s,s+2):a-56320+(o-55296<<10)+65536}}},function(t,e,n){\"use strict\";var r=n(5);t.exports=function(){var t=r(this),e=\"\";return t.global&&(e+=\"g\"),t.ignoreCase&&(e+=\"i\"),t.multiline&&(e+=\"m\"),t.unicode&&(e+=\"u\"),t.sticky&&(e+=\"y\"),e}},function(t,e,n){\"use strict\";var r=n(5),i=n(15),o=n(68),a=n(69);n(71)(\"match\",1,(function(t,e,n,l){return[function(n){var r=t(this),i=null==n?void 0:n[e];return void 0!==i?i.call(n,r):new RegExp(n)[e](String(r))},function(t){var e=l(n,t,this);if(e.done)return e.value;var s=r(t),u=String(this);if(!s.global)return a(s,u);var c=s.unicode;s.lastIndex=0;for(var f,p=[],d=0;null!==(f=a(s,u));){var h=String(f[0]);p[d]=h,\"\"===h&&(s.lastIndex=o(u,i(s.lastIndex),c)),d++}return 0===d?null:p}]}))},function(t,e,n){var r=n(4),i=n(129).set;t.exports=function(t,e,n){var o,a=e.constructor;return a!==n&&\"function\"==typeof a&&(o=a.prototype)!==n.prototype&&r(o)&&i&&i(t,o),t}},function(t,e,n){var r=n(4);t.exports=function(t,e){if(!r(t)||t._t!==e)throw TypeError(\"Incompatible receiver, \"+e+\" required!\");return t}},function(t,e){var n=/^\\s+|\\s+$/g,r=/^[-+]0x[0-9a-f]+$/i,i=/^0b[01]+$/i,o=/^0o[0-7]+$/i,a=parseInt,l=\"object\"==typeof global&&global&&global.Object===Object&&global,s=\"object\"==typeof self&&self&&self.Object===Object&&self,u=l||s||Function(\"return this\")(),c=Object.prototype.toString,f=Math.max,p=Math.min,d=function(){return u.Date.now()};function h(t,e,n){var r,i,o,a,l,s,u=0,c=!1,h=!1,g=!0;if(\"function\"!=typeof t)throw new TypeError(\"Expected a function\");function y(e){var n=r,o=i;return r=i=void 0,u=e,a=t.apply(o,n)}function b(t){return u=t,l=setTimeout(x,e),c?y(t):a}function _(t){var n=t-s;return void 0===s||n>=e||n<0||h&&t-u>=o}function x(){var t=d();if(_(t))return k(t);l=setTimeout(x,function(t){var n=e-(t-s);return h?p(n,o-(t-u)):n}(t))}function k(t){return l=void 0,g&&r?y(t):(r=i=void 0,a)}function w(){var t=d(),n=_(t);if(r=arguments,i=this,s=t,n){if(void 0===l)return b(s);if(h)return l=setTimeout(x,e),y(s)}return void 0===l&&(l=setTimeout(x,e)),a}return e=m(e)||0,v(n)&&(c=!!n.leading,o=(h=\"maxWait\"in n)?f(m(n.maxWait)||0,e):o,g=\"trailing\"in n?!!n.trailing:g),w.cancel=function(){void 0!==l&&clearTimeout(l),u=0,r=s=i=l=void 0},w.flush=function(){return void 0===l?a:k(d())},w}function v(t){var e=typeof t;return!!t&&(\"object\"==e||\"function\"==e)}function m(t){if(\"number\"==typeof t)return t;if(function(t){return\"symbol\"==typeof t||function(t){return!!t&&\"object\"==typeof t}(t)&&\"[object Symbol]\"==c.call(t)}(t))return NaN;if(v(t)){var e=\"function\"==typeof t.valueOf?t.valueOf():t;t=v(e)?e+\"\":e}if(\"string\"!=typeof t)return 0===t?t:+t;t=t.replace(n,\"\");var l=i.test(t);return l||o.test(t)?a(t.slice(2),l?2:8):r.test(t)?NaN:+t}t.exports=function(t,e,n){var r=!0,i=!0;if(\"function\"!=typeof t)throw new TypeError(\"Expected a function\");return v(n)&&(r=\"leading\"in n?!!n.leading:r,i=\"trailing\"in n?!!n.trailing:i),h(t,e,{leading:r,maxWait:e,trailing:i})}},function(t,e,n){t.exports=n(161)},function(t,e,n){t.exports=n(54)(\"native-function-to-string\",Function.toString)},function(t,e,n){var r=n(5);t.exports=function(t,e,n,i){try{return i?e(r(n)[0],n[1]):e(n)}catch(e){var o=t.return;throw void 0!==o&&r(o.call(t)),e}}},function(t,e,n){var r=n(18),i=n(1)(\"iterator\"),o=Array.prototype;t.exports=function(t){return void 0!==t&&(r.Array===t||o[i]===t)}},function(t,e,n){var r=n(53),i=n(1)(\"iterator\"),o=n(18);t.exports=n(13).getIteratorMethod=function(t){if(null!=t)return t[i]||t[\"@@iterator\"]||o[r(t)]}},function(t,e){t.exports=function(t,e,n){var r=void 0===n;switch(e.length){case 0:return r?t():t.call(n);case 1:return r?t(e[0]):t.call(n,e[0]);case 2:return r?t(e[0],e[1]):t.call(n,e[0],e[1]);case 3:return r?t(e[0],e[1],e[2]):t.call(n,e[0],e[1],e[2]);case 4:return r?t(e[0],e[1],e[2],e[3]):t.call(n,e[0],e[1],e[2],e[3])}return t.apply(n,e)}},function(t,e,n){var r=n(3),i=n(76).set,o=r.MutationObserver||r.WebKitMutationObserver,a=r.process,l=r.Promise,s=\"process\"==n(12)(a);t.exports=function(){var t,e,n,u=function(){var r,i;for(s&&(r=a.domain)&&r.exit();t;){i=t.fn,t=t.next;try{i()}catch(r){throw t?n():e=void 0,r}}e=void 0,r&&r.enter()};if(s)n=function(){a.nextTick(u)};else if(!o||r.navigator&&r.navigator.standalone)if(l&&l.resolve){var c=l.resolve(void 0);n=function(){c.then(u)}}else n=function(){i.call(r,u)};else{var f=!0,p=document.createTextNode(\"\");new o(u).observe(p,{characterData:!0}),n=function(){p.data=f=!f}}return function(r){var i={fn:r,next:void 0};e&&(e.next=i),t||(t=i,n()),e=i}}},function(t,e){t.exports=function(t){try{return{e:!1,v:t()}}catch(t){return{e:!0,v:t}}}},function(t,e,n){var r=n(3).navigator;t.exports=r&&r.userAgent||\"\"},function(t,e,n){var r=n(5),i=n(4),o=n(78);t.exports=function(t,e){if(r(t),i(e)&&e.constructor===t)return e;var n=o.f(t);return(0,n.resolve)(e),n.promise}},function(t,e,n){\"use strict\";var r=n(7),i=n(28),o=n(106),a=n(82),l=n(19),s=n(61),u=Object.assign;t.exports=!u||n(6)((function(){var t={},e={},n=Symbol(),r=\"abcdefghijklmnopqrst\";return t[n]=7,r.split(\"\").forEach((function(t){e[t]=t})),7!=u({},t)[n]||Object.keys(u({},e)).join(\"\")!=r}))?function(t,e){for(var n=l(t),u=arguments.length,c=1,f=o.f,p=a.f;u>c;)for(var d,h=s(arguments[c++]),v=f?i(h).concat(f(h)):i(h),m=v.length,g=0;m>g;)d=v[g++],r&&!p.call(h,d)||(n[d]=h[d]);return n}:u},function(t,e,n){var r=n(25),i=Math.max,o=Math.min;t.exports=function(t,e){return(t=r(t))<0?i(t+e,0):o(t,e)}},function(t,e){e.f=Object.getOwnPropertySymbols},function(t,e,n){var r=n(4),i=n(64).onFreeze;n(83)(\"freeze\",(function(t){return function(e){return t&&r(e)?t(i(e)):e}}))},function(t,e,n){var r=n(1)(\"unscopables\"),i=Array.prototype;null==i[r]&&n(10)(i,r,{}),t.exports=function(t){i[r][t]=!0}},function(t,e,n){\"use strict\";var r=n(85),i=n(56),o=n(26),a={};n(10)(a,n(1)(\"iterator\"),(function(){return this})),t.exports=function(t,e,n){t.prototype=r(a,{next:i(1,n)}),o(t,e+\" Iterator\")}},function(t,e,n){var r=n(8),i=n(5),o=n(28);t.exports=n(7)?Object.defineProperties:function(t,e){i(t);for(var n,a=o(e),l=a.length,s=0;l>s;)r.f(t,n=a[s++],e[n]);return t}},function(t,e,n){var r=n(14),i=n(19),o=n(62)(\"IE_PROTO\"),a=Object.prototype;t.exports=Object.getPrototypeOf||function(t){return t=i(t),r(t,o)?t[o]:\"function\"==typeof t.constructor&&t instanceof t.constructor?t.constructor.prototype:t instanceof Object?a:null}},function(t,e,n){var r=n(113);t.exports=function(t,e){return new(r(t))(e)}},function(t,e,n){var r=n(4),i=n(86),o=n(1)(\"species\");t.exports=function(t){var e;return i(t)&&(\"function\"!=typeof(e=t.constructor)||e!==Array&&!i(e.prototype)||(e=void 0),r(e)&&null===(e=e[o])&&(e=void 0)),void 0===e?Array:e}},function(t,e,n){\"use strict\";n(115)(\"link\",(function(t){return function(e){return t(this,\"a\",\"href\",e)}}))},function(t,e,n){var r=n(2),i=n(6),o=n(16),a=/\"/g,l=function(t,e,n,r){var i=String(o(t)),l=\"<\"+e;return\"\"!==n&&(l+=\" \"+n+'=\"'+String(r).replace(a,\"&quot;\")+'\"'),l+\">\"+i+\"</\"+e+\">\"};t.exports=function(t,e){var n={};n[t]=e(l),r(r.P+r.F*i((function(){var e=\"\"[t]('\"');return e!==e.toLowerCase()||e.split('\"').length>3})),\"String\",n)}},function(t,e,n){var r=n(2);r(r.S,\"Array\",{isArray:n(86)})},function(t,e,n){\"use strict\";var r=n(87),i=n(5),o=n(75),a=n(68),l=n(15),s=n(69),u=n(70),c=n(6),f=Math.min,p=[].push,d=!c((function(){RegExp(4294967295,\"y\")}));n(71)(\"split\",2,(function(t,e,n,c){var h;return h=\"c\"==\"abbc\".split(/(b)*/)[1]||4!=\"test\".split(/(?:)/,-1).length||2!=\"ab\".split(/(?:ab)*/).length||4!=\".\".split(/(.?)(.?)/).length||\".\".split(/()()/).length>1||\"\".split(/.?/).length?function(t,e){var i=String(this);if(void 0===t&&0===e)return[];if(!r(t))return n.call(i,t,e);for(var o,a,l,s=[],c=(t.ignoreCase?\"i\":\"\")+(t.multiline?\"m\":\"\")+(t.unicode?\"u\":\"\")+(t.sticky?\"y\":\"\"),f=0,d=void 0===e?4294967295:e>>>0,h=new RegExp(t.source,c+\"g\");(o=u.call(h,i))&&!((a=h.lastIndex)>f&&(s.push(i.slice(f,o.index)),o.length>1&&o.index<i.length&&p.apply(s,o.slice(1)),l=o[0].length,f=a,s.length>=d));)h.lastIndex===o.index&&h.lastIndex++;return f===i.length?!l&&h.test(\"\")||s.push(\"\"):s.push(i.slice(f)),s.length>d?s.slice(0,d):s}:\"0\".split(void 0,0).length?function(t,e){return void 0===t&&0===e?[]:n.call(this,t,e)}:n,[function(n,r){var i=t(this),o=null==n?void 0:n[e];return void 0!==o?o.call(n,i,r):h.call(String(i),n,r)},function(t,e){var r=c(h,t,this,e,h!==n);if(r.done)return r.value;var u=i(t),p=String(this),v=o(u,RegExp),m=u.unicode,g=(u.ignoreCase?\"i\":\"\")+(u.multiline?\"m\":\"\")+(u.unicode?\"u\":\"\")+(d?\"y\":\"g\"),y=new v(d?u:\"^(?:\"+u.source+\")\",g),b=void 0===e?4294967295:e>>>0;if(0===b)return[];if(0===p.length)return null===s(y,p)?[p]:[];for(var _=0,x=0,k=[];x<p.length;){y.lastIndex=d?x:0;var w,C=s(y,d?p:p.slice(x));if(null===C||(w=f(l(y.lastIndex+(d?0:x)),p.length))===_)x=a(p,x,m);else{if(k.push(p.slice(_,x)),k.length===b)return k;for(var $=1;$<=C.length-1;$++)if(k.push(C[$]),k.length===b)return k;x=_=w}}return k.push(p.slice(_)),k}]}))},function(t,e,n){\"use strict\";var r=n(70);n(2)({target:\"RegExp\",proto:!0,forced:r!==/./.exec},{exec:r})},function(t,e,n){\"use strict\";var r=n(36);n.n(r).a},,function(t,e,n){\"use strict\";var r=n(37);n.n(r).a},,function(t,e,n){\"use strict\";n(124)(\"trim\",(function(t){return function(){return t(this,3)}}))},function(t,e,n){var r=n(2),i=n(16),o=n(6),a=n(125),l=\"[\"+a+\"]\",s=RegExp(\"^\"+l+l+\"*\"),u=RegExp(l+l+\"*$\"),c=function(t,e,n){var i={},l=o((function(){return!!a[t]()||\"​…\"!=\"​…\"[t]()})),s=i[t]=l?e(f):a[t];n&&(i[n]=s),r(r.P+r.F*l,\"String\",i)},f=c.trim=function(t,e){return t=String(i(t)),1&e&&(t=t.replace(s,\"\")),2&e&&(t=t.replace(u,\"\")),t};t.exports=c},function(t,e){t.exports=\"\\t\\n\\v\\f\\r   ᠎             　\\u2028\\u2029\\ufeff\"},function(t,e,n){\"use strict\";var r=n(38);n.n(r).a},,function(t,e,n){var r=n(3),i=n(91),o=n(8).f,a=n(131).f,l=n(87),s=n(89),u=r.RegExp,c=u,f=u.prototype,p=/a/g,d=/a/g,h=new u(p)!==p;if(n(7)&&(!h||n(6)((function(){return d[n(1)(\"match\")]=!1,u(p)!=p||u(d)==d||\"/a/i\"!=u(p,\"i\")})))){u=function(t,e){var n=this instanceof u,r=l(t),o=void 0===e;return!n&&r&&t.constructor===u&&o?t:i(h?new c(r&&!o?t.source:t,e):c((r=t instanceof u)?t.source:t,r&&o?s.call(t):e),n?this:f,u)};for(var v=function(t){t in u||o(u,t,{configurable:!0,get:function(){return c[t]},set:function(e){c[t]=e}})},m=a(c),g=0;m.length>g;)v(m[g++]);f.constructor=u,u.prototype=f,n(11)(r,\"RegExp\",u)}n(60)(\"RegExp\")},function(t,e,n){var r=n(4),i=n(5),o=function(t,e){if(i(t),!r(e)&&null!==e)throw TypeError(e+\": can't set as prototype!\")};t.exports={set:Object.setPrototypeOf||(\"__proto__\"in{}?function(t,e,r){try{(r=n(9)(Function.call,n(130).f(Object.prototype,\"__proto__\").set,2))(t,[]),e=!(t instanceof Array)}catch(t){e=!0}return function(t,n){return o(t,n),e?t.__proto__=n:r(t,n),t}}({},!1):void 0),check:o}},function(t,e,n){var r=n(82),i=n(56),o=n(29),a=n(74),l=n(14),s=n(73),u=Object.getOwnPropertyDescriptor;e.f=n(7)?u:function(t,e){if(t=o(t),e=a(e,!0),s)try{return u(t,e)}catch(t){}if(l(t,e))return i(!r.f.call(t,e),t[e])}},function(t,e,n){var r=n(80),i=n(63).concat(\"length\",\"prototype\");e.f=Object.getOwnPropertyNames||function(t){return r(t,i)}},function(t,e,n){\"use strict\";var r=n(39);n.n(r).a},,function(t,e,n){\"use strict\";var r=n(40);n.n(r).a},,function(t,e,n){\"use strict\";var r=n(41);n.n(r).a},,function(t,e,n){\"use strict\";var r=n(42);n.n(r).a},,function(t,e,n){\"use strict\";var r=n(43);n.n(r).a},,function(t,e,n){\"use strict\";var r=n(44);n.n(r).a},,function(t,e,n){\"use strict\";var r=n(45);n.n(r).a},,function(t,e,n){\"use strict\";var r=n(46);n.n(r).a},,function(t,e,n){\"use strict\";var r=n(47);n.n(r).a},,function(t,e,n){\"use strict\";var r=n(48);n.n(r).a},,function(t,e,n){\"use strict\";var r=n(49);n.n(r).a},,function(t,e,n){\"use strict\";var r=n(88)(!0);n(65)(String,\"String\",(function(t){this._t=String(t),this._i=0}),(function(){var t,e=this._t,n=this._i;return n>=e.length?{value:void 0,done:!0}:(t=r(e,n),this._i+=t.length,{value:t,done:!1})}))},function(t,e,n){\"use strict\";var r=n(156),i=n(92);t.exports=n(157)(\"Set\",(function(t){return function(){return t(this,arguments.length>0?arguments[0]:void 0)}}),{add:function(t){return r.def(i(this,\"Set\"),t=0===t?0:t,t)}},r)},function(t,e,n){\"use strict\";var r=n(8).f,i=n(85),o=n(59),a=n(9),l=n(57),s=n(58),u=n(65),c=n(84),f=n(60),p=n(7),d=n(64).fastKey,h=n(92),v=p?\"_s\":\"size\",m=function(t,e){var n,r=d(e);if(\"F\"!==r)return t._i[r];for(n=t._f;n;n=n.n)if(n.k==e)return n};t.exports={getConstructor:function(t,e,n,u){var c=t((function(t,r){l(t,c,e,\"_i\"),t._t=e,t._i=i(null),t._f=void 0,t._l=void 0,t[v]=0,null!=r&&s(r,n,t[u],t)}));return o(c.prototype,{clear:function(){for(var t=h(this,e),n=t._i,r=t._f;r;r=r.n)r.r=!0,r.p&&(r.p=r.p.n=void 0),delete n[r.i];t._f=t._l=void 0,t[v]=0},delete:function(t){var n=h(this,e),r=m(n,t);if(r){var i=r.n,o=r.p;delete n._i[r.i],r.r=!0,o&&(o.n=i),i&&(i.p=o),n._f==r&&(n._f=i),n._l==r&&(n._l=o),n[v]--}return!!r},forEach:function(t){h(this,e);for(var n,r=a(t,arguments.length>1?arguments[1]:void 0,3);n=n?n.n:this._f;)for(r(n.v,n.k,this);n&&n.r;)n=n.p},has:function(t){return!!m(h(this,e),t)}}),p&&r(c.prototype,\"size\",{get:function(){return h(this,e)[v]}}),c},def:function(t,e,n){var r,i,o=m(t,e);return o?o.v=n:(t._l=o={i:i=d(e,!0),k:e,v:n,p:r=t._l,n:void 0,r:!1},t._f||(t._f=o),r&&(r.n=o),t[v]++,\"F\"!==i&&(t._i[i]=o)),t},getEntry:m,setStrong:function(t,e,n){u(t,e,(function(t,n){this._t=h(t,e),this._k=n,this._l=void 0}),(function(){for(var t=this._k,e=this._l;e&&e.r;)e=e.p;return this._t&&(this._l=e=e?e.n:this._t._f)?c(0,\"keys\"==t?e.k:\"values\"==t?e.v:[e.k,e.v]):(this._t=void 0,c(1))}),n?\"entries\":\"values\",!n,!0),f(e)}}},function(t,e,n){\"use strict\";var r=n(3),i=n(2),o=n(11),a=n(59),l=n(64),s=n(58),u=n(57),c=n(4),f=n(6),p=n(79),d=n(26),h=n(91);t.exports=function(t,e,n,v,m,g){var y=r[t],b=y,_=m?\"set\":\"add\",x=b&&b.prototype,k={},w=function(t){var e=x[t];o(x,t,\"delete\"==t||\"has\"==t?function(t){return!(g&&!c(t))&&e.call(this,0===t?0:t)}:\"get\"==t?function(t){return g&&!c(t)?void 0:e.call(this,0===t?0:t)}:\"add\"==t?function(t){return e.call(this,0===t?0:t),this}:function(t,n){return e.call(this,0===t?0:t,n),this})};if(\"function\"==typeof b&&(g||x.forEach&&!f((function(){(new b).entries().next()})))){var C=new b,$=C[_](g?{}:-0,1)!=C,S=f((function(){C.has(1)})),E=p((function(t){new b(t)})),O=!g&&f((function(){for(var t=new b,e=5;e--;)t[_](e,e);return!t.has(-0)}));E||((b=e((function(e,n){u(e,b,t);var r=h(new y,e,b);return null!=n&&s(n,m,r[_],r),r}))).prototype=x,x.constructor=b),(S||O)&&(w(\"delete\"),w(\"has\"),m&&w(\"get\")),(O||$)&&w(_),g&&x.clear&&delete x.clear}else b=v.getConstructor(e,t,m,_),a(b.prototype,n),l.NEED=!0;return d(b,t),k[t]=b,i(i.G+i.W+i.F*(b!=y),k),g||v.setStrong(b,t,m),b}},function(t,e,n){\"use strict\";var r=n(50);n.n(r).a},,function(t,e,n){var r=n(2);r(r.S+r.F*!n(7),\"Object\",{defineProperty:n(8).f})},function(t,e,n){\"use strict\";n.r(e);n(72),n(27);var r=Object.freeze({});function i(t){return null==t}function o(t){return null!=t}function a(t){return!0===t}function l(t){return\"string\"==typeof t||\"number\"==typeof t||\"symbol\"==typeof t||\"boolean\"==typeof t}function s(t){return null!==t&&\"object\"==typeof t}var u=Object.prototype.toString;function c(t){return\"[object Object]\"===u.call(t)}function f(t){return\"[object RegExp]\"===u.call(t)}function p(t){var e=parseFloat(String(t));return e>=0&&Math.floor(e)===e&&isFinite(t)}function d(t){return o(t)&&\"function\"==typeof t.then&&\"function\"==typeof t.catch}function h(t){return null==t?\"\":Array.isArray(t)||c(t)&&t.toString===u?JSON.stringify(t,null,2):String(t)}function v(t){var e=parseFloat(t);return isNaN(e)?t:e}function m(t,e){for(var n=Object.create(null),r=t.split(\",\"),i=0;i<r.length;i++)n[r[i]]=!0;return e?function(t){return n[t.toLowerCase()]}:function(t){return n[t]}}m(\"slot,component\",!0);var g=m(\"key,ref,slot,slot-scope,is\");function y(t,e){if(t.length){var n=t.indexOf(e);if(n>-1)return t.splice(n,1)}}var b=Object.prototype.hasOwnProperty;function _(t,e){return b.call(t,e)}function x(t){var e=Object.create(null);return function(n){return e[n]||(e[n]=t(n))}}var k=/-(\\w)/g,w=x((function(t){return t.replace(k,(function(t,e){return e?e.toUpperCase():\"\"}))})),C=x((function(t){return t.charAt(0).toUpperCase()+t.slice(1)})),$=/\\B([A-Z])/g,S=x((function(t){return t.replace($,\"-$1\").toLowerCase()}));var E=Function.prototype.bind?function(t,e){return t.bind(e)}:function(t,e){function n(n){var r=arguments.length;return r?r>1?t.apply(e,arguments):t.call(e,n):t.call(e)}return n._length=t.length,n};function O(t,e){e=e||0;for(var n=t.length-e,r=new Array(n);n--;)r[n]=t[n+e];return r}function A(t,e){for(var n in e)t[n]=e[n];return t}function j(t){for(var e={},n=0;n<t.length;n++)t[n]&&A(e,t[n]);return e}function T(t,e,n){}var L=function(t,e,n){return!1},I=function(t){return t};function P(t,e){if(t===e)return!0;var n=s(t),r=s(e);if(!n||!r)return!n&&!r&&String(t)===String(e);try{var i=Array.isArray(t),o=Array.isArray(e);if(i&&o)return t.length===e.length&&t.every((function(t,n){return P(t,e[n])}));if(t instanceof Date&&e instanceof Date)return t.getTime()===e.getTime();if(i||o)return!1;var a=Object.keys(t),l=Object.keys(e);return a.length===l.length&&a.every((function(n){return P(t[n],e[n])}))}catch(t){return!1}}function z(t,e){for(var n=0;n<t.length;n++)if(P(t[n],e))return n;return-1}function U(t){var e=!1;return function(){e||(e=!0,t.apply(this,arguments))}}var M=[\"component\",\"directive\",\"filter\"],R=[\"beforeCreate\",\"created\",\"beforeMount\",\"mounted\",\"beforeUpdate\",\"updated\",\"beforeDestroy\",\"destroyed\",\"activated\",\"deactivated\",\"errorCaptured\",\"serverPrefetch\"],N={optionMergeStrategies:Object.create(null),silent:!1,productionTip:!1,devtools:!1,performance:!1,errorHandler:null,warnHandler:null,ignoredElements:[],keyCodes:Object.create(null),isReservedTag:L,isReservedAttr:L,isUnknownElement:L,getTagNamespace:T,parsePlatformTagName:I,mustUseProp:L,async:!0,_lifecycleHooks:R},D=/a-zA-Z\\u00B7\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u203F-\\u2040\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD/;function F(t,e,n,r){Object.defineProperty(t,e,{value:n,enumerable:!!r,writable:!0,configurable:!0})}var V=new RegExp(\"[^\"+D.source+\".$_\\\\d]\");var B,H=\"__proto__\"in{},W=\"undefined\"!=typeof window,q=\"undefined\"!=typeof WXEnvironment&&!!WXEnvironment.platform,G=q&&WXEnvironment.platform.toLowerCase(),K=W&&window.navigator.userAgent.toLowerCase(),Y=K&&/msie|trident/.test(K),X=K&&K.indexOf(\"msie 9.0\")>0,J=K&&K.indexOf(\"edge/\")>0,Q=(K&&K.indexOf(\"android\"),K&&/iphone|ipad|ipod|ios/.test(K)||\"ios\"===G),Z=(K&&/chrome\\/\\d+/.test(K),K&&/phantomjs/.test(K),K&&K.match(/firefox\\/(\\d+)/)),tt={}.watch,et=!1;if(W)try{var nt={};Object.defineProperty(nt,\"passive\",{get:function(){et=!0}}),window.addEventListener(\"test-passive\",null,nt)}catch(t){}var rt=function(){return void 0===B&&(B=!W&&!q&&\"undefined\"!=typeof global&&(global.process&&\"server\"===global.process.env.VUE_ENV)),B},it=W&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__;function ot(t){return\"function\"==typeof t&&/native code/.test(t.toString())}var at,lt=\"undefined\"!=typeof Symbol&&ot(Symbol)&&\"undefined\"!=typeof Reflect&&ot(Reflect.ownKeys);at=\"undefined\"!=typeof Set&&ot(Set)?Set:function(){function t(){this.set=Object.create(null)}return t.prototype.has=function(t){return!0===this.set[t]},t.prototype.add=function(t){this.set[t]=!0},t.prototype.clear=function(){this.set=Object.create(null)},t}();var st=T,ut=0,ct=function(){this.id=ut++,this.subs=[]};ct.prototype.addSub=function(t){this.subs.push(t)},ct.prototype.removeSub=function(t){y(this.subs,t)},ct.prototype.depend=function(){ct.target&&ct.target.addDep(this)},ct.prototype.notify=function(){var t=this.subs.slice();for(var e=0,n=t.length;e<n;e++)t[e].update()},ct.target=null;var ft=[];function pt(t){ft.push(t),ct.target=t}function dt(){ft.pop(),ct.target=ft[ft.length-1]}var ht=function(t,e,n,r,i,o,a,l){this.tag=t,this.data=e,this.children=n,this.text=r,this.elm=i,this.ns=void 0,this.context=o,this.fnContext=void 0,this.fnOptions=void 0,this.fnScopeId=void 0,this.key=e&&e.key,this.componentOptions=a,this.componentInstance=void 0,this.parent=void 0,this.raw=!1,this.isStatic=!1,this.isRootInsert=!0,this.isComment=!1,this.isCloned=!1,this.isOnce=!1,this.asyncFactory=l,this.asyncMeta=void 0,this.isAsyncPlaceholder=!1},vt={child:{configurable:!0}};vt.child.get=function(){return this.componentInstance},Object.defineProperties(ht.prototype,vt);var mt=function(t){void 0===t&&(t=\"\");var e=new ht;return e.text=t,e.isComment=!0,e};function gt(t){return new ht(void 0,void 0,void 0,String(t))}function yt(t){var e=new ht(t.tag,t.data,t.children&&t.children.slice(),t.text,t.elm,t.context,t.componentOptions,t.asyncFactory);return e.ns=t.ns,e.isStatic=t.isStatic,e.key=t.key,e.isComment=t.isComment,e.fnContext=t.fnContext,e.fnOptions=t.fnOptions,e.fnScopeId=t.fnScopeId,e.asyncMeta=t.asyncMeta,e.isCloned=!0,e}var bt=Array.prototype,_t=Object.create(bt);[\"push\",\"pop\",\"shift\",\"unshift\",\"splice\",\"sort\",\"reverse\"].forEach((function(t){var e=bt[t];F(_t,t,(function(){for(var n=[],r=arguments.length;r--;)n[r]=arguments[r];var i,o=e.apply(this,n),a=this.__ob__;switch(t){case\"push\":case\"unshift\":i=n;break;case\"splice\":i=n.slice(2)}return i&&a.observeArray(i),a.dep.notify(),o}))}));var xt=Object.getOwnPropertyNames(_t),kt=!0;function wt(t){kt=t}var Ct=function(t){this.value=t,this.dep=new ct,this.vmCount=0,F(t,\"__ob__\",this),Array.isArray(t)?(H?function(t,e){t.__proto__=e}(t,_t):function(t,e,n){for(var r=0,i=n.length;r<i;r++){var o=n[r];F(t,o,e[o])}}(t,_t,xt),this.observeArray(t)):this.walk(t)};function $t(t,e){var n;if(s(t)&&!(t instanceof ht))return _(t,\"__ob__\")&&t.__ob__ instanceof Ct?n=t.__ob__:kt&&!rt()&&(Array.isArray(t)||c(t))&&Object.isExtensible(t)&&!t._isVue&&(n=new Ct(t)),e&&n&&n.vmCount++,n}function St(t,e,n,r,i){var o=new ct,a=Object.getOwnPropertyDescriptor(t,e);if(!a||!1!==a.configurable){var l=a&&a.get,s=a&&a.set;l&&!s||2!==arguments.length||(n=t[e]);var u=!i&&$t(n);Object.defineProperty(t,e,{enumerable:!0,configurable:!0,get:function(){var e=l?l.call(t):n;return ct.target&&(o.depend(),u&&(u.dep.depend(),Array.isArray(e)&&At(e))),e},set:function(e){var r=l?l.call(t):n;e===r||e!=e&&r!=r||l&&!s||(s?s.call(t,e):n=e,u=!i&&$t(e),o.notify())}})}}function Et(t,e,n){if(Array.isArray(t)&&p(e))return t.length=Math.max(t.length,e),t.splice(e,1,n),n;if(e in t&&!(e in Object.prototype))return t[e]=n,n;var r=t.__ob__;return t._isVue||r&&r.vmCount?n:r?(St(r.value,e,n),r.dep.notify(),n):(t[e]=n,n)}function Ot(t,e){if(Array.isArray(t)&&p(e))t.splice(e,1);else{var n=t.__ob__;t._isVue||n&&n.vmCount||_(t,e)&&(delete t[e],n&&n.dep.notify())}}function At(t){for(var e=void 0,n=0,r=t.length;n<r;n++)(e=t[n])&&e.__ob__&&e.__ob__.dep.depend(),Array.isArray(e)&&At(e)}Ct.prototype.walk=function(t){for(var e=Object.keys(t),n=0;n<e.length;n++)St(t,e[n])},Ct.prototype.observeArray=function(t){for(var e=0,n=t.length;e<n;e++)$t(t[e])};var jt=N.optionMergeStrategies;function Tt(t,e){if(!e)return t;for(var n,r,i,o=lt?Reflect.ownKeys(e):Object.keys(e),a=0;a<o.length;a++)\"__ob__\"!==(n=o[a])&&(r=t[n],i=e[n],_(t,n)?r!==i&&c(r)&&c(i)&&Tt(r,i):Et(t,n,i));return t}function Lt(t,e,n){return n?function(){var r=\"function\"==typeof e?e.call(n,n):e,i=\"function\"==typeof t?t.call(n,n):t;return r?Tt(r,i):i}:e?t?function(){return Tt(\"function\"==typeof e?e.call(this,this):e,\"function\"==typeof t?t.call(this,this):t)}:e:t}function It(t,e){var n=e?t?t.concat(e):Array.isArray(e)?e:[e]:t;return n?function(t){for(var e=[],n=0;n<t.length;n++)-1===e.indexOf(t[n])&&e.push(t[n]);return e}(n):n}function Pt(t,e,n,r){var i=Object.create(t||null);return e?A(i,e):i}jt.data=function(t,e,n){return n?Lt(t,e,n):e&&\"function\"!=typeof e?t:Lt(t,e)},R.forEach((function(t){jt[t]=It})),M.forEach((function(t){jt[t+\"s\"]=Pt})),jt.watch=function(t,e,n,r){if(t===tt&&(t=void 0),e===tt&&(e=void 0),!e)return Object.create(t||null);if(!t)return e;var i={};for(var o in A(i,t),e){var a=i[o],l=e[o];a&&!Array.isArray(a)&&(a=[a]),i[o]=a?a.concat(l):Array.isArray(l)?l:[l]}return i},jt.props=jt.methods=jt.inject=jt.computed=function(t,e,n,r){if(!t)return e;var i=Object.create(null);return A(i,t),e&&A(i,e),i},jt.provide=Lt;var zt=function(t,e){return void 0===e?t:e};function Ut(t,e,n){if(\"function\"==typeof e&&(e=e.options),function(t,e){var n=t.props;if(n){var r,i,o={};if(Array.isArray(n))for(r=n.length;r--;)\"string\"==typeof(i=n[r])&&(o[w(i)]={type:null});else if(c(n))for(var a in n)i=n[a],o[w(a)]=c(i)?i:{type:i};else 0;t.props=o}}(e),function(t,e){var n=t.inject;if(n){var r=t.inject={};if(Array.isArray(n))for(var i=0;i<n.length;i++)r[n[i]]={from:n[i]};else if(c(n))for(var o in n){var a=n[o];r[o]=c(a)?A({from:o},a):{from:a}}else 0}}(e),function(t){var e=t.directives;if(e)for(var n in e){var r=e[n];\"function\"==typeof r&&(e[n]={bind:r,update:r})}}(e),!e._base&&(e.extends&&(t=Ut(t,e.extends,n)),e.mixins))for(var r=0,i=e.mixins.length;r<i;r++)t=Ut(t,e.mixins[r],n);var o,a={};for(o in t)l(o);for(o in e)_(t,o)||l(o);function l(r){var i=jt[r]||zt;a[r]=i(t[r],e[r],n,r)}return a}function Mt(t,e,n,r){if(\"string\"==typeof n){var i=t[e];if(_(i,n))return i[n];var o=w(n);if(_(i,o))return i[o];var a=C(o);return _(i,a)?i[a]:i[n]||i[o]||i[a]}}function Rt(t,e,n,r){var i=e[t],o=!_(n,t),a=n[t],l=Ft(Boolean,i.type);if(l>-1)if(o&&!_(i,\"default\"))a=!1;else if(\"\"===a||a===S(t)){var s=Ft(String,i.type);(s<0||l<s)&&(a=!0)}if(void 0===a){a=function(t,e,n){if(!_(e,\"default\"))return;var r=e.default;0;if(t&&t.$options.propsData&&void 0===t.$options.propsData[n]&&void 0!==t._props[n])return t._props[n];return\"function\"==typeof r&&\"Function\"!==Nt(e.type)?r.call(t):r}(r,i,t);var u=kt;wt(!0),$t(a),wt(u)}return a}function Nt(t){var e=t&&t.toString().match(/^\\s*function (\\w+)/);return e?e[1]:\"\"}function Dt(t,e){return Nt(t)===Nt(e)}function Ft(t,e){if(!Array.isArray(e))return Dt(e,t)?0:-1;for(var n=0,r=e.length;n<r;n++)if(Dt(e[n],t))return n;return-1}function Vt(t,e,n){pt();try{if(e)for(var r=e;r=r.$parent;){var i=r.$options.errorCaptured;if(i)for(var o=0;o<i.length;o++)try{if(!1===i[o].call(r,t,e,n))return}catch(t){Ht(t,r,\"errorCaptured hook\")}}Ht(t,e,n)}finally{dt()}}function Bt(t,e,n,r,i){var o;try{(o=n?t.apply(e,n):t.call(e))&&!o._isVue&&d(o)&&!o._handled&&(o.catch((function(t){return Vt(t,r,i+\" (Promise/async)\")})),o._handled=!0)}catch(t){Vt(t,r,i)}return o}function Ht(t,e,n){if(N.errorHandler)try{return N.errorHandler.call(null,t,e,n)}catch(e){e!==t&&Wt(e,null,\"config.errorHandler\")}Wt(t,e,n)}function Wt(t,e,n){if(!W&&!q||\"undefined\"==typeof console)throw t;console.error(t)}var qt,Gt=!1,Kt=[],Yt=!1;function Xt(){Yt=!1;var t=Kt.slice(0);Kt.length=0;for(var e=0;e<t.length;e++)t[e]()}if(\"undefined\"!=typeof Promise&&ot(Promise)){var Jt=Promise.resolve();qt=function(){Jt.then(Xt),Q&&setTimeout(T)},Gt=!0}else if(Y||\"undefined\"==typeof MutationObserver||!ot(MutationObserver)&&\"[object MutationObserverConstructor]\"!==MutationObserver.toString())qt=\"undefined\"!=typeof setImmediate&&ot(setImmediate)?function(){setImmediate(Xt)}:function(){setTimeout(Xt,0)};else{var Qt=1,Zt=new MutationObserver(Xt),te=document.createTextNode(String(Qt));Zt.observe(te,{characterData:!0}),qt=function(){Qt=(Qt+1)%2,te.data=String(Qt)},Gt=!0}function ee(t,e){var n;if(Kt.push((function(){if(t)try{t.call(e)}catch(t){Vt(t,e,\"nextTick\")}else n&&n(e)})),Yt||(Yt=!0,qt()),!t&&\"undefined\"!=typeof Promise)return new Promise((function(t){n=t}))}var ne=new at;function re(t){!function t(e,n){var r,i,o=Array.isArray(e);if(!o&&!s(e)||Object.isFrozen(e)||e instanceof ht)return;if(e.__ob__){var a=e.__ob__.dep.id;if(n.has(a))return;n.add(a)}if(o)for(r=e.length;r--;)t(e[r],n);else for(i=Object.keys(e),r=i.length;r--;)t(e[i[r]],n)}(t,ne),ne.clear()}var ie=x((function(t){var e=\"&\"===t.charAt(0),n=\"~\"===(t=e?t.slice(1):t).charAt(0),r=\"!\"===(t=n?t.slice(1):t).charAt(0);return{name:t=r?t.slice(1):t,once:n,capture:r,passive:e}}));function oe(t,e){function n(){var t=arguments,r=n.fns;if(!Array.isArray(r))return Bt(r,null,arguments,e,\"v-on handler\");for(var i=r.slice(),o=0;o<i.length;o++)Bt(i[o],null,t,e,\"v-on handler\")}return n.fns=t,n}function ae(t,e,n,r,o,l){var s,u,c,f;for(s in t)u=t[s],c=e[s],f=ie(s),i(u)||(i(c)?(i(u.fns)&&(u=t[s]=oe(u,l)),a(f.once)&&(u=t[s]=o(f.name,u,f.capture)),n(f.name,u,f.capture,f.passive,f.params)):u!==c&&(c.fns=u,t[s]=c));for(s in e)i(t[s])&&r((f=ie(s)).name,e[s],f.capture)}function le(t,e,n){var r;t instanceof ht&&(t=t.data.hook||(t.data.hook={}));var l=t[e];function s(){n.apply(this,arguments),y(r.fns,s)}i(l)?r=oe([s]):o(l.fns)&&a(l.merged)?(r=l).fns.push(s):r=oe([l,s]),r.merged=!0,t[e]=r}function se(t,e,n,r,i){if(o(e)){if(_(e,n))return t[n]=e[n],i||delete e[n],!0;if(_(e,r))return t[n]=e[r],i||delete e[r],!0}return!1}function ue(t){return l(t)?[gt(t)]:Array.isArray(t)?function t(e,n){var r,s,u,c,f=[];for(r=0;r<e.length;r++)i(s=e[r])||\"boolean\"==typeof s||(u=f.length-1,c=f[u],Array.isArray(s)?s.length>0&&(ce((s=t(s,(n||\"\")+\"_\"+r))[0])&&ce(c)&&(f[u]=gt(c.text+s[0].text),s.shift()),f.push.apply(f,s)):l(s)?ce(c)?f[u]=gt(c.text+s):\"\"!==s&&f.push(gt(s)):ce(s)&&ce(c)?f[u]=gt(c.text+s.text):(a(e._isVList)&&o(s.tag)&&i(s.key)&&o(n)&&(s.key=\"__vlist\"+n+\"_\"+r+\"__\"),f.push(s)));return f}(t):void 0}function ce(t){return o(t)&&o(t.text)&&!1===t.isComment}function fe(t,e){if(t){for(var n=Object.create(null),r=lt?Reflect.ownKeys(t):Object.keys(t),i=0;i<r.length;i++){var o=r[i];if(\"__ob__\"!==o){for(var a=t[o].from,l=e;l;){if(l._provided&&_(l._provided,a)){n[o]=l._provided[a];break}l=l.$parent}if(!l)if(\"default\"in t[o]){var s=t[o].default;n[o]=\"function\"==typeof s?s.call(e):s}else 0}}return n}}function pe(t,e){if(!t||!t.length)return{};for(var n={},r=0,i=t.length;r<i;r++){var o=t[r],a=o.data;if(a&&a.attrs&&a.attrs.slot&&delete a.attrs.slot,o.context!==e&&o.fnContext!==e||!a||null==a.slot)(n.default||(n.default=[])).push(o);else{var l=a.slot,s=n[l]||(n[l]=[]);\"template\"===o.tag?s.push.apply(s,o.children||[]):s.push(o)}}for(var u in n)n[u].every(de)&&delete n[u];return n}function de(t){return t.isComment&&!t.asyncFactory||\" \"===t.text}function he(t,e,n){var i,o=Object.keys(e).length>0,a=t?!!t.$stable:!o,l=t&&t.$key;if(t){if(t._normalized)return t._normalized;if(a&&n&&n!==r&&l===n.$key&&!o&&!n.$hasNormal)return n;for(var s in i={},t)t[s]&&\"$\"!==s[0]&&(i[s]=ve(e,s,t[s]))}else i={};for(var u in e)u in i||(i[u]=me(e,u));return t&&Object.isExtensible(t)&&(t._normalized=i),F(i,\"$stable\",a),F(i,\"$key\",l),F(i,\"$hasNormal\",o),i}function ve(t,e,n){var r=function(){var t=arguments.length?n.apply(null,arguments):n({});return(t=t&&\"object\"==typeof t&&!Array.isArray(t)?[t]:ue(t))&&(0===t.length||1===t.length&&t[0].isComment)?void 0:t};return n.proxy&&Object.defineProperty(t,e,{get:r,enumerable:!0,configurable:!0}),r}function me(t,e){return function(){return t[e]}}function ge(t,e){var n,r,i,a,l;if(Array.isArray(t)||\"string\"==typeof t)for(n=new Array(t.length),r=0,i=t.length;r<i;r++)n[r]=e(t[r],r);else if(\"number\"==typeof t)for(n=new Array(t),r=0;r<t;r++)n[r]=e(r+1,r);else if(s(t))if(lt&&t[Symbol.iterator]){n=[];for(var u=t[Symbol.iterator](),c=u.next();!c.done;)n.push(e(c.value,n.length)),c=u.next()}else for(a=Object.keys(t),n=new Array(a.length),r=0,i=a.length;r<i;r++)l=a[r],n[r]=e(t[l],l,r);return o(n)||(n=[]),n._isVList=!0,n}function ye(t,e,n,r){var i,o=this.$scopedSlots[t];o?(n=n||{},r&&(n=A(A({},r),n)),i=o(n)||e):i=this.$slots[t]||e;var a=n&&n.slot;return a?this.$createElement(\"template\",{slot:a},i):i}function be(t){return Mt(this.$options,\"filters\",t)||I}function _e(t,e){return Array.isArray(t)?-1===t.indexOf(e):t!==e}function xe(t,e,n,r,i){var o=N.keyCodes[e]||n;return i&&r&&!N.keyCodes[e]?_e(i,r):o?_e(o,t):r?S(r)!==e:void 0}function ke(t,e,n,r,i){if(n)if(s(n)){var o;Array.isArray(n)&&(n=j(n));var a=function(a){if(\"class\"===a||\"style\"===a||g(a))o=t;else{var l=t.attrs&&t.attrs.type;o=r||N.mustUseProp(e,l,a)?t.domProps||(t.domProps={}):t.attrs||(t.attrs={})}var s=w(a),u=S(a);s in o||u in o||(o[a]=n[a],i&&((t.on||(t.on={}))[\"update:\"+a]=function(t){n[a]=t}))};for(var l in n)a(l)}else;return t}function we(t,e){var n=this._staticTrees||(this._staticTrees=[]),r=n[t];return r&&!e||$e(r=n[t]=this.$options.staticRenderFns[t].call(this._renderProxy,null,this),\"__static__\"+t,!1),r}function Ce(t,e,n){return $e(t,\"__once__\"+e+(n?\"_\"+n:\"\"),!0),t}function $e(t,e,n){if(Array.isArray(t))for(var r=0;r<t.length;r++)t[r]&&\"string\"!=typeof t[r]&&Se(t[r],e+\"_\"+r,n);else Se(t,e,n)}function Se(t,e,n){t.isStatic=!0,t.key=e,t.isOnce=n}function Ee(t,e){if(e)if(c(e)){var n=t.on=t.on?A({},t.on):{};for(var r in e){var i=n[r],o=e[r];n[r]=i?[].concat(i,o):o}}else;return t}function Oe(t,e,n,r){e=e||{$stable:!n};for(var i=0;i<t.length;i++){var o=t[i];Array.isArray(o)?Oe(o,e,n):o&&(o.proxy&&(o.fn.proxy=!0),e[o.key]=o.fn)}return r&&(e.$key=r),e}function Ae(t,e){for(var n=0;n<e.length;n+=2){var r=e[n];\"string\"==typeof r&&r&&(t[e[n]]=e[n+1])}return t}function je(t,e){return\"string\"==typeof t?e+t:t}function Te(t){t._o=Ce,t._n=v,t._s=h,t._l=ge,t._t=ye,t._q=P,t._i=z,t._m=we,t._f=be,t._k=xe,t._b=ke,t._v=gt,t._e=mt,t._u=Oe,t._g=Ee,t._d=Ae,t._p=je}function Le(t,e,n,i,o){var l,s=this,u=o.options;_(i,\"_uid\")?(l=Object.create(i))._original=i:(l=i,i=i._original);var c=a(u._compiled),f=!c;this.data=t,this.props=e,this.children=n,this.parent=i,this.listeners=t.on||r,this.injections=fe(u.inject,i),this.slots=function(){return s.$slots||he(t.scopedSlots,s.$slots=pe(n,i)),s.$slots},Object.defineProperty(this,\"scopedSlots\",{enumerable:!0,get:function(){return he(t.scopedSlots,this.slots())}}),c&&(this.$options=u,this.$slots=this.slots(),this.$scopedSlots=he(t.scopedSlots,this.$slots)),u._scopeId?this._c=function(t,e,n,r){var o=Ne(l,t,e,n,r,f);return o&&!Array.isArray(o)&&(o.fnScopeId=u._scopeId,o.fnContext=i),o}:this._c=function(t,e,n,r){return Ne(l,t,e,n,r,f)}}function Ie(t,e,n,r,i){var o=yt(t);return o.fnContext=n,o.fnOptions=r,e.slot&&((o.data||(o.data={})).slot=e.slot),o}function Pe(t,e){for(var n in e)t[w(n)]=e[n]}Te(Le.prototype);var ze={init:function(t,e){if(t.componentInstance&&!t.componentInstance._isDestroyed&&t.data.keepAlive){var n=t;ze.prepatch(n,n)}else{(t.componentInstance=function(t,e){var n={_isComponent:!0,_parentVnode:t,parent:e},r=t.data.inlineTemplate;o(r)&&(n.render=r.render,n.staticRenderFns=r.staticRenderFns);return new t.componentOptions.Ctor(n)}(t,Ye)).$mount(e?t.elm:void 0,e)}},prepatch:function(t,e){var n=e.componentOptions;!function(t,e,n,i,o){0;var a=i.data.scopedSlots,l=t.$scopedSlots,s=!!(a&&!a.$stable||l!==r&&!l.$stable||a&&t.$scopedSlots.$key!==a.$key),u=!!(o||t.$options._renderChildren||s);t.$options._parentVnode=i,t.$vnode=i,t._vnode&&(t._vnode.parent=i);if(t.$options._renderChildren=o,t.$attrs=i.data.attrs||r,t.$listeners=n||r,e&&t.$options.props){wt(!1);for(var c=t._props,f=t.$options._propKeys||[],p=0;p<f.length;p++){var d=f[p],h=t.$options.props;c[d]=Rt(d,h,e,t)}wt(!0),t.$options.propsData=e}n=n||r;var v=t.$options._parentListeners;t.$options._parentListeners=n,Ke(t,n,v),u&&(t.$slots=pe(o,i.context),t.$forceUpdate());0}(e.componentInstance=t.componentInstance,n.propsData,n.listeners,e,n.children)},insert:function(t){var e,n=t.context,r=t.componentInstance;r._isMounted||(r._isMounted=!0,Ze(r,\"mounted\")),t.data.keepAlive&&(n._isMounted?((e=r)._inactive=!1,en.push(e)):Qe(r,!0))},destroy:function(t){var e=t.componentInstance;e._isDestroyed||(t.data.keepAlive?function t(e,n){if(n&&(e._directInactive=!0,Je(e)))return;if(!e._inactive){e._inactive=!0;for(var r=0;r<e.$children.length;r++)t(e.$children[r]);Ze(e,\"deactivated\")}}(e,!0):e.$destroy())}},Ue=Object.keys(ze);function Me(t,e,n,l,u){if(!i(t)){var c=n.$options._base;if(s(t)&&(t=c.extend(t)),\"function\"==typeof t){var f;if(i(t.cid)&&void 0===(t=function(t,e){if(a(t.error)&&o(t.errorComp))return t.errorComp;if(o(t.resolved))return t.resolved;var n=Fe;n&&o(t.owners)&&-1===t.owners.indexOf(n)&&t.owners.push(n);if(a(t.loading)&&o(t.loadingComp))return t.loadingComp;if(n&&!o(t.owners)){var r=t.owners=[n],l=!0,u=null,c=null;n.$on(\"hook:destroyed\",(function(){return y(r,n)}));var f=function(t){for(var e=0,n=r.length;e<n;e++)r[e].$forceUpdate();t&&(r.length=0,null!==u&&(clearTimeout(u),u=null),null!==c&&(clearTimeout(c),c=null))},p=U((function(n){t.resolved=Ve(n,e),l?r.length=0:f(!0)})),h=U((function(e){o(t.errorComp)&&(t.error=!0,f(!0))})),v=t(p,h);return s(v)&&(d(v)?i(t.resolved)&&v.then(p,h):d(v.component)&&(v.component.then(p,h),o(v.error)&&(t.errorComp=Ve(v.error,e)),o(v.loading)&&(t.loadingComp=Ve(v.loading,e),0===v.delay?t.loading=!0:u=setTimeout((function(){u=null,i(t.resolved)&&i(t.error)&&(t.loading=!0,f(!1))}),v.delay||200)),o(v.timeout)&&(c=setTimeout((function(){c=null,i(t.resolved)&&h(null)}),v.timeout)))),l=!1,t.loading?t.loadingComp:t.resolved}}(f=t,c)))return function(t,e,n,r,i){var o=mt();return o.asyncFactory=t,o.asyncMeta={data:e,context:n,children:r,tag:i},o}(f,e,n,l,u);e=e||{},kn(t),o(e.model)&&function(t,e){var n=t.model&&t.model.prop||\"value\",r=t.model&&t.model.event||\"input\";(e.attrs||(e.attrs={}))[n]=e.model.value;var i=e.on||(e.on={}),a=i[r],l=e.model.callback;o(a)?(Array.isArray(a)?-1===a.indexOf(l):a!==l)&&(i[r]=[l].concat(a)):i[r]=l}(t.options,e);var p=function(t,e,n){var r=e.options.props;if(!i(r)){var a={},l=t.attrs,s=t.props;if(o(l)||o(s))for(var u in r){var c=S(u);se(a,s,u,c,!0)||se(a,l,u,c,!1)}return a}}(e,t);if(a(t.options.functional))return function(t,e,n,i,a){var l=t.options,s={},u=l.props;if(o(u))for(var c in u)s[c]=Rt(c,u,e||r);else o(n.attrs)&&Pe(s,n.attrs),o(n.props)&&Pe(s,n.props);var f=new Le(n,s,a,i,t),p=l.render.call(null,f._c,f);if(p instanceof ht)return Ie(p,n,f.parent,l,f);if(Array.isArray(p)){for(var d=ue(p)||[],h=new Array(d.length),v=0;v<d.length;v++)h[v]=Ie(d[v],n,f.parent,l,f);return h}}(t,p,e,n,l);var h=e.on;if(e.on=e.nativeOn,a(t.options.abstract)){var v=e.slot;e={},v&&(e.slot=v)}!function(t){for(var e=t.hook||(t.hook={}),n=0;n<Ue.length;n++){var r=Ue[n],i=e[r],o=ze[r];i===o||i&&i._merged||(e[r]=i?Re(o,i):o)}}(e);var m=t.options.name||u;return new ht(\"vue-component-\"+t.cid+(m?\"-\"+m:\"\"),e,void 0,void 0,void 0,n,{Ctor:t,propsData:p,listeners:h,tag:u,children:l},f)}}}function Re(t,e){var n=function(n,r){t(n,r),e(n,r)};return n._merged=!0,n}function Ne(t,e,n,r,u,c){return(Array.isArray(n)||l(n))&&(u=r,r=n,n=void 0),a(c)&&(u=2),function(t,e,n,r,l){if(o(n)&&o(n.__ob__))return mt();o(n)&&o(n.is)&&(e=n.is);if(!e)return mt();0;Array.isArray(r)&&\"function\"==typeof r[0]&&((n=n||{}).scopedSlots={default:r[0]},r.length=0);2===l?r=ue(r):1===l&&(r=function(t){for(var e=0;e<t.length;e++)if(Array.isArray(t[e]))return Array.prototype.concat.apply([],t);return t}(r));var u,c;if(\"string\"==typeof e){var f;c=t.$vnode&&t.$vnode.ns||N.getTagNamespace(e),u=N.isReservedTag(e)?new ht(N.parsePlatformTagName(e),n,r,void 0,void 0,t):n&&n.pre||!o(f=Mt(t.$options,\"components\",e))?new ht(e,n,r,void 0,void 0,t):Me(f,n,t,r,e)}else u=Me(e,n,t,r);return Array.isArray(u)?u:o(u)?(o(c)&&function t(e,n,r){e.ns=n,\"foreignObject\"===e.tag&&(n=void 0,r=!0);if(o(e.children))for(var l=0,s=e.children.length;l<s;l++){var u=e.children[l];o(u.tag)&&(i(u.ns)||a(r)&&\"svg\"!==u.tag)&&t(u,n,r)}}(u,c),o(n)&&function(t){s(t.style)&&re(t.style);s(t.class)&&re(t.class)}(n),u):mt()}(t,e,n,r,u)}var De,Fe=null;function Ve(t,e){return(t.__esModule||lt&&\"Module\"===t[Symbol.toStringTag])&&(t=t.default),s(t)?e.extend(t):t}function Be(t){return t.isComment&&t.asyncFactory}function He(t){if(Array.isArray(t))for(var e=0;e<t.length;e++){var n=t[e];if(o(n)&&(o(n.componentOptions)||Be(n)))return n}}function We(t,e){De.$on(t,e)}function qe(t,e){De.$off(t,e)}function Ge(t,e){var n=De;return function r(){var i=e.apply(null,arguments);null!==i&&n.$off(t,r)}}function Ke(t,e,n){De=t,ae(e,n||{},We,qe,Ge,t),De=void 0}var Ye=null;function Xe(t){var e=Ye;return Ye=t,function(){Ye=e}}function Je(t){for(;t&&(t=t.$parent);)if(t._inactive)return!0;return!1}function Qe(t,e){if(e){if(t._directInactive=!1,Je(t))return}else if(t._directInactive)return;if(t._inactive||null===t._inactive){t._inactive=!1;for(var n=0;n<t.$children.length;n++)Qe(t.$children[n]);Ze(t,\"activated\")}}function Ze(t,e){pt();var n=t.$options[e],r=e+\" hook\";if(n)for(var i=0,o=n.length;i<o;i++)Bt(n[i],t,null,t,r);t._hasHookEvent&&t.$emit(\"hook:\"+e),dt()}var tn=[],en=[],nn={},rn=!1,on=!1,an=0;var ln=0,sn=Date.now;if(W&&!Y){var un=window.performance;un&&\"function\"==typeof un.now&&sn()>document.createEvent(\"Event\").timeStamp&&(sn=function(){return un.now()})}function cn(){var t,e;for(ln=sn(),on=!0,tn.sort((function(t,e){return t.id-e.id})),an=0;an<tn.length;an++)(t=tn[an]).before&&t.before(),e=t.id,nn[e]=null,t.run();var n=en.slice(),r=tn.slice();an=tn.length=en.length=0,nn={},rn=on=!1,function(t){for(var e=0;e<t.length;e++)t[e]._inactive=!0,Qe(t[e],!0)}(n),function(t){var e=t.length;for(;e--;){var n=t[e],r=n.vm;r._watcher===n&&r._isMounted&&!r._isDestroyed&&Ze(r,\"updated\")}}(r),it&&N.devtools&&it.emit(\"flush\")}var fn=0,pn=function(t,e,n,r,i){this.vm=t,i&&(t._watcher=this),t._watchers.push(this),r?(this.deep=!!r.deep,this.user=!!r.user,this.lazy=!!r.lazy,this.sync=!!r.sync,this.before=r.before):this.deep=this.user=this.lazy=this.sync=!1,this.cb=n,this.id=++fn,this.active=!0,this.dirty=this.lazy,this.deps=[],this.newDeps=[],this.depIds=new at,this.newDepIds=new at,this.expression=\"\",\"function\"==typeof e?this.getter=e:(this.getter=function(t){if(!V.test(t)){var e=t.split(\".\");return function(t){for(var n=0;n<e.length;n++){if(!t)return;t=t[e[n]]}return t}}}(e),this.getter||(this.getter=T)),this.value=this.lazy?void 0:this.get()};pn.prototype.get=function(){var t;pt(this);var e=this.vm;try{t=this.getter.call(e,e)}catch(t){if(!this.user)throw t;Vt(t,e,'getter for watcher \"'+this.expression+'\"')}finally{this.deep&&re(t),dt(),this.cleanupDeps()}return t},pn.prototype.addDep=function(t){var e=t.id;this.newDepIds.has(e)||(this.newDepIds.add(e),this.newDeps.push(t),this.depIds.has(e)||t.addSub(this))},pn.prototype.cleanupDeps=function(){for(var t=this.deps.length;t--;){var e=this.deps[t];this.newDepIds.has(e.id)||e.removeSub(this)}var n=this.depIds;this.depIds=this.newDepIds,this.newDepIds=n,this.newDepIds.clear(),n=this.deps,this.deps=this.newDeps,this.newDeps=n,this.newDeps.length=0},pn.prototype.update=function(){this.lazy?this.dirty=!0:this.sync?this.run():function(t){var e=t.id;if(null==nn[e]){if(nn[e]=!0,on){for(var n=tn.length-1;n>an&&tn[n].id>t.id;)n--;tn.splice(n+1,0,t)}else tn.push(t);rn||(rn=!0,ee(cn))}}(this)},pn.prototype.run=function(){if(this.active){var t=this.get();if(t!==this.value||s(t)||this.deep){var e=this.value;if(this.value=t,this.user)try{this.cb.call(this.vm,t,e)}catch(t){Vt(t,this.vm,'callback for watcher \"'+this.expression+'\"')}else this.cb.call(this.vm,t,e)}}},pn.prototype.evaluate=function(){this.value=this.get(),this.dirty=!1},pn.prototype.depend=function(){for(var t=this.deps.length;t--;)this.deps[t].depend()},pn.prototype.teardown=function(){if(this.active){this.vm._isBeingDestroyed||y(this.vm._watchers,this);for(var t=this.deps.length;t--;)this.deps[t].removeSub(this);this.active=!1}};var dn={enumerable:!0,configurable:!0,get:T,set:T};function hn(t,e,n){dn.get=function(){return this[e][n]},dn.set=function(t){this[e][n]=t},Object.defineProperty(t,n,dn)}function vn(t){t._watchers=[];var e=t.$options;e.props&&function(t,e){var n=t.$options.propsData||{},r=t._props={},i=t.$options._propKeys=[];t.$parent&&wt(!1);var o=function(o){i.push(o);var a=Rt(o,e,n,t);St(r,o,a),o in t||hn(t,\"_props\",o)};for(var a in e)o(a);wt(!0)}(t,e.props),e.methods&&function(t,e){t.$options.props;for(var n in e)t[n]=\"function\"!=typeof e[n]?T:E(e[n],t)}(t,e.methods),e.data?function(t){var e=t.$options.data;c(e=t._data=\"function\"==typeof e?function(t,e){pt();try{return t.call(e,e)}catch(t){return Vt(t,e,\"data()\"),{}}finally{dt()}}(e,t):e||{})||(e={});var n=Object.keys(e),r=t.$options.props,i=(t.$options.methods,n.length);for(;i--;){var o=n[i];0,r&&_(r,o)||(a=void 0,36!==(a=(o+\"\").charCodeAt(0))&&95!==a&&hn(t,\"_data\",o))}var a;$t(e,!0)}(t):$t(t._data={},!0),e.computed&&function(t,e){var n=t._computedWatchers=Object.create(null),r=rt();for(var i in e){var o=e[i],a=\"function\"==typeof o?o:o.get;0,r||(n[i]=new pn(t,a||T,T,mn)),i in t||gn(t,i,o)}}(t,e.computed),e.watch&&e.watch!==tt&&function(t,e){for(var n in e){var r=e[n];if(Array.isArray(r))for(var i=0;i<r.length;i++)_n(t,n,r[i]);else _n(t,n,r)}}(t,e.watch)}var mn={lazy:!0};function gn(t,e,n){var r=!rt();\"function\"==typeof n?(dn.get=r?yn(e):bn(n),dn.set=T):(dn.get=n.get?r&&!1!==n.cache?yn(e):bn(n.get):T,dn.set=n.set||T),Object.defineProperty(t,e,dn)}function yn(t){return function(){var e=this._computedWatchers&&this._computedWatchers[t];if(e)return e.dirty&&e.evaluate(),ct.target&&e.depend(),e.value}}function bn(t){return function(){return t.call(this,this)}}function _n(t,e,n,r){return c(n)&&(r=n,n=n.handler),\"string\"==typeof n&&(n=t[n]),t.$watch(e,n,r)}var xn=0;function kn(t){var e=t.options;if(t.super){var n=kn(t.super);if(n!==t.superOptions){t.superOptions=n;var r=function(t){var e,n=t.options,r=t.sealedOptions;for(var i in n)n[i]!==r[i]&&(e||(e={}),e[i]=n[i]);return e}(t);r&&A(t.extendOptions,r),(e=t.options=Ut(n,t.extendOptions)).name&&(e.components[e.name]=t)}}return e}function wn(t){this._init(t)}function Cn(t){t.cid=0;var e=1;t.extend=function(t){t=t||{};var n=this,r=n.cid,i=t._Ctor||(t._Ctor={});if(i[r])return i[r];var o=t.name||n.options.name;var a=function(t){this._init(t)};return(a.prototype=Object.create(n.prototype)).constructor=a,a.cid=e++,a.options=Ut(n.options,t),a.super=n,a.options.props&&function(t){var e=t.options.props;for(var n in e)hn(t.prototype,\"_props\",n)}(a),a.options.computed&&function(t){var e=t.options.computed;for(var n in e)gn(t.prototype,n,e[n])}(a),a.extend=n.extend,a.mixin=n.mixin,a.use=n.use,M.forEach((function(t){a[t]=n[t]})),o&&(a.options.components[o]=a),a.superOptions=n.options,a.extendOptions=t,a.sealedOptions=A({},a.options),i[r]=a,a}}function $n(t){return t&&(t.Ctor.options.name||t.tag)}function Sn(t,e){return Array.isArray(t)?t.indexOf(e)>-1:\"string\"==typeof t?t.split(\",\").indexOf(e)>-1:!!f(t)&&t.test(e)}function En(t,e){var n=t.cache,r=t.keys,i=t._vnode;for(var o in n){var a=n[o];if(a){var l=$n(a.componentOptions);l&&!e(l)&&On(n,o,r,i)}}}function On(t,e,n,r){var i=t[e];!i||r&&i.tag===r.tag||i.componentInstance.$destroy(),t[e]=null,y(n,e)}!function(t){t.prototype._init=function(t){var e=this;e._uid=xn++,e._isVue=!0,t&&t._isComponent?function(t,e){var n=t.$options=Object.create(t.constructor.options),r=e._parentVnode;n.parent=e.parent,n._parentVnode=r;var i=r.componentOptions;n.propsData=i.propsData,n._parentListeners=i.listeners,n._renderChildren=i.children,n._componentTag=i.tag,e.render&&(n.render=e.render,n.staticRenderFns=e.staticRenderFns)}(e,t):e.$options=Ut(kn(e.constructor),t||{},e),e._renderProxy=e,e._self=e,function(t){var e=t.$options,n=e.parent;if(n&&!e.abstract){for(;n.$options.abstract&&n.$parent;)n=n.$parent;n.$children.push(t)}t.$parent=n,t.$root=n?n.$root:t,t.$children=[],t.$refs={},t._watcher=null,t._inactive=null,t._directInactive=!1,t._isMounted=!1,t._isDestroyed=!1,t._isBeingDestroyed=!1}(e),function(t){t._events=Object.create(null),t._hasHookEvent=!1;var e=t.$options._parentListeners;e&&Ke(t,e)}(e),function(t){t._vnode=null,t._staticTrees=null;var e=t.$options,n=t.$vnode=e._parentVnode,i=n&&n.context;t.$slots=pe(e._renderChildren,i),t.$scopedSlots=r,t._c=function(e,n,r,i){return Ne(t,e,n,r,i,!1)},t.$createElement=function(e,n,r,i){return Ne(t,e,n,r,i,!0)};var o=n&&n.data;St(t,\"$attrs\",o&&o.attrs||r,null,!0),St(t,\"$listeners\",e._parentListeners||r,null,!0)}(e),Ze(e,\"beforeCreate\"),function(t){var e=fe(t.$options.inject,t);e&&(wt(!1),Object.keys(e).forEach((function(n){St(t,n,e[n])})),wt(!0))}(e),vn(e),function(t){var e=t.$options.provide;e&&(t._provided=\"function\"==typeof e?e.call(t):e)}(e),Ze(e,\"created\"),e.$options.el&&e.$mount(e.$options.el)}}(wn),function(t){var e={get:function(){return this._data}},n={get:function(){return this._props}};Object.defineProperty(t.prototype,\"$data\",e),Object.defineProperty(t.prototype,\"$props\",n),t.prototype.$set=Et,t.prototype.$delete=Ot,t.prototype.$watch=function(t,e,n){if(c(e))return _n(this,t,e,n);(n=n||{}).user=!0;var r=new pn(this,t,e,n);if(n.immediate)try{e.call(this,r.value)}catch(t){Vt(t,this,'callback for immediate watcher \"'+r.expression+'\"')}return function(){r.teardown()}}}(wn),function(t){var e=/^hook:/;t.prototype.$on=function(t,n){var r=this;if(Array.isArray(t))for(var i=0,o=t.length;i<o;i++)r.$on(t[i],n);else(r._events[t]||(r._events[t]=[])).push(n),e.test(t)&&(r._hasHookEvent=!0);return r},t.prototype.$once=function(t,e){var n=this;function r(){n.$off(t,r),e.apply(n,arguments)}return r.fn=e,n.$on(t,r),n},t.prototype.$off=function(t,e){var n=this;if(!arguments.length)return n._events=Object.create(null),n;if(Array.isArray(t)){for(var r=0,i=t.length;r<i;r++)n.$off(t[r],e);return n}var o,a=n._events[t];if(!a)return n;if(!e)return n._events[t]=null,n;for(var l=a.length;l--;)if((o=a[l])===e||o.fn===e){a.splice(l,1);break}return n},t.prototype.$emit=function(t){var e=this,n=e._events[t];if(n){n=n.length>1?O(n):n;for(var r=O(arguments,1),i='event handler for \"'+t+'\"',o=0,a=n.length;o<a;o++)Bt(n[o],e,r,e,i)}return e}}(wn),function(t){t.prototype._update=function(t,e){var n=this,r=n.$el,i=n._vnode,o=Xe(n);n._vnode=t,n.$el=i?n.__patch__(i,t):n.__patch__(n.$el,t,e,!1),o(),r&&(r.__vue__=null),n.$el&&(n.$el.__vue__=n),n.$vnode&&n.$parent&&n.$vnode===n.$parent._vnode&&(n.$parent.$el=n.$el)},t.prototype.$forceUpdate=function(){this._watcher&&this._watcher.update()},t.prototype.$destroy=function(){var t=this;if(!t._isBeingDestroyed){Ze(t,\"beforeDestroy\"),t._isBeingDestroyed=!0;var e=t.$parent;!e||e._isBeingDestroyed||t.$options.abstract||y(e.$children,t),t._watcher&&t._watcher.teardown();for(var n=t._watchers.length;n--;)t._watchers[n].teardown();t._data.__ob__&&t._data.__ob__.vmCount--,t._isDestroyed=!0,t.__patch__(t._vnode,null),Ze(t,\"destroyed\"),t.$off(),t.$el&&(t.$el.__vue__=null),t.$vnode&&(t.$vnode.parent=null)}}}(wn),function(t){Te(t.prototype),t.prototype.$nextTick=function(t){return ee(t,this)},t.prototype._render=function(){var t,e=this,n=e.$options,r=n.render,i=n._parentVnode;i&&(e.$scopedSlots=he(i.data.scopedSlots,e.$slots,e.$scopedSlots)),e.$vnode=i;try{Fe=e,t=r.call(e._renderProxy,e.$createElement)}catch(n){Vt(n,e,\"render\"),t=e._vnode}finally{Fe=null}return Array.isArray(t)&&1===t.length&&(t=t[0]),t instanceof ht||(t=mt()),t.parent=i,t}}(wn);var An=[String,RegExp,Array],jn={KeepAlive:{name:\"keep-alive\",abstract:!0,props:{include:An,exclude:An,max:[String,Number]},created:function(){this.cache=Object.create(null),this.keys=[]},destroyed:function(){for(var t in this.cache)On(this.cache,t,this.keys)},mounted:function(){var t=this;this.$watch(\"include\",(function(e){En(t,(function(t){return Sn(e,t)}))})),this.$watch(\"exclude\",(function(e){En(t,(function(t){return!Sn(e,t)}))}))},render:function(){var t=this.$slots.default,e=He(t),n=e&&e.componentOptions;if(n){var r=$n(n),i=this.include,o=this.exclude;if(i&&(!r||!Sn(i,r))||o&&r&&Sn(o,r))return e;var a=this.cache,l=this.keys,s=null==e.key?n.Ctor.cid+(n.tag?\"::\"+n.tag:\"\"):e.key;a[s]?(e.componentInstance=a[s].componentInstance,y(l,s),l.push(s)):(a[s]=e,l.push(s),this.max&&l.length>parseInt(this.max)&&On(a,l[0],l,this._vnode)),e.data.keepAlive=!0}return e||t&&t[0]}}};!function(t){var e={get:function(){return N}};Object.defineProperty(t,\"config\",e),t.util={warn:st,extend:A,mergeOptions:Ut,defineReactive:St},t.set=Et,t.delete=Ot,t.nextTick=ee,t.observable=function(t){return $t(t),t},t.options=Object.create(null),M.forEach((function(e){t.options[e+\"s\"]=Object.create(null)})),t.options._base=t,A(t.options.components,jn),function(t){t.use=function(t){var e=this._installedPlugins||(this._installedPlugins=[]);if(e.indexOf(t)>-1)return this;var n=O(arguments,1);return n.unshift(this),\"function\"==typeof t.install?t.install.apply(t,n):\"function\"==typeof t&&t.apply(null,n),e.push(t),this}}(t),function(t){t.mixin=function(t){return this.options=Ut(this.options,t),this}}(t),Cn(t),function(t){M.forEach((function(e){t[e]=function(t,n){return n?(\"component\"===e&&c(n)&&(n.name=n.name||t,n=this.options._base.extend(n)),\"directive\"===e&&\"function\"==typeof n&&(n={bind:n,update:n}),this.options[e+\"s\"][t]=n,n):this.options[e+\"s\"][t]}}))}(t)}(wn),Object.defineProperty(wn.prototype,\"$isServer\",{get:rt}),Object.defineProperty(wn.prototype,\"$ssrContext\",{get:function(){return this.$vnode&&this.$vnode.ssrContext}}),Object.defineProperty(wn,\"FunctionalRenderContext\",{value:Le}),wn.version=\"2.6.11\";var Tn=m(\"style,class\"),Ln=m(\"input,textarea,option,select,progress\"),In=m(\"contenteditable,draggable,spellcheck\"),Pn=m(\"events,caret,typing,plaintext-only\"),zn=m(\"allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,default,defaultchecked,defaultmuted,defaultselected,defer,disabled,enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,required,reversed,scoped,seamless,selected,sortable,translate,truespeed,typemustmatch,visible\"),Un=\"http://www.w3.org/1999/xlink\",Mn=function(t){return\":\"===t.charAt(5)&&\"xlink\"===t.slice(0,5)},Rn=function(t){return Mn(t)?t.slice(6,t.length):\"\"},Nn=function(t){return null==t||!1===t};function Dn(t){for(var e=t.data,n=t,r=t;o(r.componentInstance);)(r=r.componentInstance._vnode)&&r.data&&(e=Fn(r.data,e));for(;o(n=n.parent);)n&&n.data&&(e=Fn(e,n.data));return function(t,e){if(o(t)||o(e))return Vn(t,Bn(e));return\"\"}(e.staticClass,e.class)}function Fn(t,e){return{staticClass:Vn(t.staticClass,e.staticClass),class:o(t.class)?[t.class,e.class]:e.class}}function Vn(t,e){return t?e?t+\" \"+e:t:e||\"\"}function Bn(t){return Array.isArray(t)?function(t){for(var e,n=\"\",r=0,i=t.length;r<i;r++)o(e=Bn(t[r]))&&\"\"!==e&&(n&&(n+=\" \"),n+=e);return n}(t):s(t)?function(t){var e=\"\";for(var n in t)t[n]&&(e&&(e+=\" \"),e+=n);return e}(t):\"string\"==typeof t?t:\"\"}var Hn={svg:\"http://www.w3.org/2000/svg\",math:\"http://www.w3.org/1998/Math/MathML\"},Wn=m(\"html,body,base,head,link,meta,style,title,address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,menuitem,summary,content,element,shadow,template,blockquote,iframe,tfoot\"),qn=m(\"svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font-face,foreignObject,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view\",!0),Gn=function(t){return Wn(t)||qn(t)};var Kn=Object.create(null);var Yn=m(\"text,number,password,search,email,tel,url\");var Xn=Object.freeze({createElement:function(t,e){var n=document.createElement(t);return\"select\"!==t||e.data&&e.data.attrs&&void 0!==e.data.attrs.multiple&&n.setAttribute(\"multiple\",\"multiple\"),n},createElementNS:function(t,e){return document.createElementNS(Hn[t],e)},createTextNode:function(t){return document.createTextNode(t)},createComment:function(t){return document.createComment(t)},insertBefore:function(t,e,n){t.insertBefore(e,n)},removeChild:function(t,e){t.removeChild(e)},appendChild:function(t,e){t.appendChild(e)},parentNode:function(t){return t.parentNode},nextSibling:function(t){return t.nextSibling},tagName:function(t){return t.tagName},setTextContent:function(t,e){t.textContent=e},setStyleScope:function(t,e){t.setAttribute(e,\"\")}}),Jn={create:function(t,e){Qn(e)},update:function(t,e){t.data.ref!==e.data.ref&&(Qn(t,!0),Qn(e))},destroy:function(t){Qn(t,!0)}};function Qn(t,e){var n=t.data.ref;if(o(n)){var r=t.context,i=t.componentInstance||t.elm,a=r.$refs;e?Array.isArray(a[n])?y(a[n],i):a[n]===i&&(a[n]=void 0):t.data.refInFor?Array.isArray(a[n])?a[n].indexOf(i)<0&&a[n].push(i):a[n]=[i]:a[n]=i}}var Zn=new ht(\"\",{},[]),tr=[\"create\",\"activate\",\"update\",\"remove\",\"destroy\"];function er(t,e){return t.key===e.key&&(t.tag===e.tag&&t.isComment===e.isComment&&o(t.data)===o(e.data)&&function(t,e){if(\"input\"!==t.tag)return!0;var n,r=o(n=t.data)&&o(n=n.attrs)&&n.type,i=o(n=e.data)&&o(n=n.attrs)&&n.type;return r===i||Yn(r)&&Yn(i)}(t,e)||a(t.isAsyncPlaceholder)&&t.asyncFactory===e.asyncFactory&&i(e.asyncFactory.error))}function nr(t,e,n){var r,i,a={};for(r=e;r<=n;++r)o(i=t[r].key)&&(a[i]=r);return a}var rr={create:ir,update:ir,destroy:function(t){ir(t,Zn)}};function ir(t,e){(t.data.directives||e.data.directives)&&function(t,e){var n,r,i,o=t===Zn,a=e===Zn,l=ar(t.data.directives,t.context),s=ar(e.data.directives,e.context),u=[],c=[];for(n in s)r=l[n],i=s[n],r?(i.oldValue=r.value,i.oldArg=r.arg,sr(i,\"update\",e,t),i.def&&i.def.componentUpdated&&c.push(i)):(sr(i,\"bind\",e,t),i.def&&i.def.inserted&&u.push(i));if(u.length){var f=function(){for(var n=0;n<u.length;n++)sr(u[n],\"inserted\",e,t)};o?le(e,\"insert\",f):f()}c.length&&le(e,\"postpatch\",(function(){for(var n=0;n<c.length;n++)sr(c[n],\"componentUpdated\",e,t)}));if(!o)for(n in l)s[n]||sr(l[n],\"unbind\",t,t,a)}(t,e)}var or=Object.create(null);function ar(t,e){var n,r,i=Object.create(null);if(!t)return i;for(n=0;n<t.length;n++)(r=t[n]).modifiers||(r.modifiers=or),i[lr(r)]=r,r.def=Mt(e.$options,\"directives\",r.name);return i}function lr(t){return t.rawName||t.name+\".\"+Object.keys(t.modifiers||{}).join(\".\")}function sr(t,e,n,r,i){var o=t.def&&t.def[e];if(o)try{o(n.elm,t,n,r,i)}catch(r){Vt(r,n.context,\"directive \"+t.name+\" \"+e+\" hook\")}}var ur=[Jn,rr];function cr(t,e){var n=e.componentOptions;if(!(o(n)&&!1===n.Ctor.options.inheritAttrs||i(t.data.attrs)&&i(e.data.attrs))){var r,a,l=e.elm,s=t.data.attrs||{},u=e.data.attrs||{};for(r in o(u.__ob__)&&(u=e.data.attrs=A({},u)),u)a=u[r],s[r]!==a&&fr(l,r,a);for(r in(Y||J)&&u.value!==s.value&&fr(l,\"value\",u.value),s)i(u[r])&&(Mn(r)?l.removeAttributeNS(Un,Rn(r)):In(r)||l.removeAttribute(r))}}function fr(t,e,n){t.tagName.indexOf(\"-\")>-1?pr(t,e,n):zn(e)?Nn(n)?t.removeAttribute(e):(n=\"allowfullscreen\"===e&&\"EMBED\"===t.tagName?\"true\":e,t.setAttribute(e,n)):In(e)?t.setAttribute(e,function(t,e){return Nn(e)||\"false\"===e?\"false\":\"contenteditable\"===t&&Pn(e)?e:\"true\"}(e,n)):Mn(e)?Nn(n)?t.removeAttributeNS(Un,Rn(e)):t.setAttributeNS(Un,e,n):pr(t,e,n)}function pr(t,e,n){if(Nn(n))t.removeAttribute(e);else{if(Y&&!X&&\"TEXTAREA\"===t.tagName&&\"placeholder\"===e&&\"\"!==n&&!t.__ieph){var r=function(e){e.stopImmediatePropagation(),t.removeEventListener(\"input\",r)};t.addEventListener(\"input\",r),t.__ieph=!0}t.setAttribute(e,n)}}var dr={create:cr,update:cr};function hr(t,e){var n=e.elm,r=e.data,a=t.data;if(!(i(r.staticClass)&&i(r.class)&&(i(a)||i(a.staticClass)&&i(a.class)))){var l=Dn(e),s=n._transitionClasses;o(s)&&(l=Vn(l,Bn(s))),l!==n._prevClass&&(n.setAttribute(\"class\",l),n._prevClass=l)}}var vr,mr={create:hr,update:hr};function gr(t,e,n){var r=vr;return function i(){var o=e.apply(null,arguments);null!==o&&_r(t,i,n,r)}}var yr=Gt&&!(Z&&Number(Z[1])<=53);function br(t,e,n,r){if(yr){var i=ln,o=e;e=o._wrapper=function(t){if(t.target===t.currentTarget||t.timeStamp>=i||t.timeStamp<=0||t.target.ownerDocument!==document)return o.apply(this,arguments)}}vr.addEventListener(t,e,et?{capture:n,passive:r}:n)}function _r(t,e,n,r){(r||vr).removeEventListener(t,e._wrapper||e,n)}function xr(t,e){if(!i(t.data.on)||!i(e.data.on)){var n=e.data.on||{},r=t.data.on||{};vr=e.elm,function(t){if(o(t.__r)){var e=Y?\"change\":\"input\";t[e]=[].concat(t.__r,t[e]||[]),delete t.__r}o(t.__c)&&(t.change=[].concat(t.__c,t.change||[]),delete t.__c)}(n),ae(n,r,br,_r,gr,e.context),vr=void 0}}var kr,wr={create:xr,update:xr};function Cr(t,e){if(!i(t.data.domProps)||!i(e.data.domProps)){var n,r,a=e.elm,l=t.data.domProps||{},s=e.data.domProps||{};for(n in o(s.__ob__)&&(s=e.data.domProps=A({},s)),l)n in s||(a[n]=\"\");for(n in s){if(r=s[n],\"textContent\"===n||\"innerHTML\"===n){if(e.children&&(e.children.length=0),r===l[n])continue;1===a.childNodes.length&&a.removeChild(a.childNodes[0])}if(\"value\"===n&&\"PROGRESS\"!==a.tagName){a._value=r;var u=i(r)?\"\":String(r);$r(a,u)&&(a.value=u)}else if(\"innerHTML\"===n&&qn(a.tagName)&&i(a.innerHTML)){(kr=kr||document.createElement(\"div\")).innerHTML=\"<svg>\"+r+\"</svg>\";for(var c=kr.firstChild;a.firstChild;)a.removeChild(a.firstChild);for(;c.firstChild;)a.appendChild(c.firstChild)}else if(r!==l[n])try{a[n]=r}catch(t){}}}}function $r(t,e){return!t.composing&&(\"OPTION\"===t.tagName||function(t,e){var n=!0;try{n=document.activeElement!==t}catch(t){}return n&&t.value!==e}(t,e)||function(t,e){var n=t.value,r=t._vModifiers;if(o(r)){if(r.number)return v(n)!==v(e);if(r.trim)return n.trim()!==e.trim()}return n!==e}(t,e))}var Sr={create:Cr,update:Cr},Er=x((function(t){var e={},n=/:(.+)/;return t.split(/;(?![^(]*\\))/g).forEach((function(t){if(t){var r=t.split(n);r.length>1&&(e[r[0].trim()]=r[1].trim())}})),e}));function Or(t){var e=Ar(t.style);return t.staticStyle?A(t.staticStyle,e):e}function Ar(t){return Array.isArray(t)?j(t):\"string\"==typeof t?Er(t):t}var jr,Tr=/^--/,Lr=/\\s*!important$/,Ir=function(t,e,n){if(Tr.test(e))t.style.setProperty(e,n);else if(Lr.test(n))t.style.setProperty(S(e),n.replace(Lr,\"\"),\"important\");else{var r=zr(e);if(Array.isArray(n))for(var i=0,o=n.length;i<o;i++)t.style[r]=n[i];else t.style[r]=n}},Pr=[\"Webkit\",\"Moz\",\"ms\"],zr=x((function(t){if(jr=jr||document.createElement(\"div\").style,\"filter\"!==(t=w(t))&&t in jr)return t;for(var e=t.charAt(0).toUpperCase()+t.slice(1),n=0;n<Pr.length;n++){var r=Pr[n]+e;if(r in jr)return r}}));function Ur(t,e){var n=e.data,r=t.data;if(!(i(n.staticStyle)&&i(n.style)&&i(r.staticStyle)&&i(r.style))){var a,l,s=e.elm,u=r.staticStyle,c=r.normalizedStyle||r.style||{},f=u||c,p=Ar(e.data.style)||{};e.data.normalizedStyle=o(p.__ob__)?A({},p):p;var d=function(t,e){var n,r={};if(e)for(var i=t;i.componentInstance;)(i=i.componentInstance._vnode)&&i.data&&(n=Or(i.data))&&A(r,n);(n=Or(t.data))&&A(r,n);for(var o=t;o=o.parent;)o.data&&(n=Or(o.data))&&A(r,n);return r}(e,!0);for(l in f)i(d[l])&&Ir(s,l,\"\");for(l in d)(a=d[l])!==f[l]&&Ir(s,l,null==a?\"\":a)}}var Mr={create:Ur,update:Ur},Rr=/\\s+/;function Nr(t,e){if(e&&(e=e.trim()))if(t.classList)e.indexOf(\" \")>-1?e.split(Rr).forEach((function(e){return t.classList.add(e)})):t.classList.add(e);else{var n=\" \"+(t.getAttribute(\"class\")||\"\")+\" \";n.indexOf(\" \"+e+\" \")<0&&t.setAttribute(\"class\",(n+e).trim())}}function Dr(t,e){if(e&&(e=e.trim()))if(t.classList)e.indexOf(\" \")>-1?e.split(Rr).forEach((function(e){return t.classList.remove(e)})):t.classList.remove(e),t.classList.length||t.removeAttribute(\"class\");else{for(var n=\" \"+(t.getAttribute(\"class\")||\"\")+\" \",r=\" \"+e+\" \";n.indexOf(r)>=0;)n=n.replace(r,\" \");(n=n.trim())?t.setAttribute(\"class\",n):t.removeAttribute(\"class\")}}function Fr(t){if(t){if(\"object\"==typeof t){var e={};return!1!==t.css&&A(e,Vr(t.name||\"v\")),A(e,t),e}return\"string\"==typeof t?Vr(t):void 0}}var Vr=x((function(t){return{enterClass:t+\"-enter\",enterToClass:t+\"-enter-to\",enterActiveClass:t+\"-enter-active\",leaveClass:t+\"-leave\",leaveToClass:t+\"-leave-to\",leaveActiveClass:t+\"-leave-active\"}})),Br=W&&!X,Hr=\"transition\",Wr=\"transitionend\",qr=\"animation\",Gr=\"animationend\";Br&&(void 0===window.ontransitionend&&void 0!==window.onwebkittransitionend&&(Hr=\"WebkitTransition\",Wr=\"webkitTransitionEnd\"),void 0===window.onanimationend&&void 0!==window.onwebkitanimationend&&(qr=\"WebkitAnimation\",Gr=\"webkitAnimationEnd\"));var Kr=W?window.requestAnimationFrame?window.requestAnimationFrame.bind(window):setTimeout:function(t){return t()};function Yr(t){Kr((function(){Kr(t)}))}function Xr(t,e){var n=t._transitionClasses||(t._transitionClasses=[]);n.indexOf(e)<0&&(n.push(e),Nr(t,e))}function Jr(t,e){t._transitionClasses&&y(t._transitionClasses,e),Dr(t,e)}function Qr(t,e,n){var r=ti(t,e),i=r.type,o=r.timeout,a=r.propCount;if(!i)return n();var l=\"transition\"===i?Wr:Gr,s=0,u=function(){t.removeEventListener(l,c),n()},c=function(e){e.target===t&&++s>=a&&u()};setTimeout((function(){s<a&&u()}),o+1),t.addEventListener(l,c)}var Zr=/\\b(transform|all)(,|$)/;function ti(t,e){var n,r=window.getComputedStyle(t),i=(r[Hr+\"Delay\"]||\"\").split(\", \"),o=(r[Hr+\"Duration\"]||\"\").split(\", \"),a=ei(i,o),l=(r[qr+\"Delay\"]||\"\").split(\", \"),s=(r[qr+\"Duration\"]||\"\").split(\", \"),u=ei(l,s),c=0,f=0;return\"transition\"===e?a>0&&(n=\"transition\",c=a,f=o.length):\"animation\"===e?u>0&&(n=\"animation\",c=u,f=s.length):f=(n=(c=Math.max(a,u))>0?a>u?\"transition\":\"animation\":null)?\"transition\"===n?o.length:s.length:0,{type:n,timeout:c,propCount:f,hasTransform:\"transition\"===n&&Zr.test(r[Hr+\"Property\"])}}function ei(t,e){for(;t.length<e.length;)t=t.concat(t);return Math.max.apply(null,e.map((function(e,n){return ni(e)+ni(t[n])})))}function ni(t){return 1e3*Number(t.slice(0,-1).replace(\",\",\".\"))}function ri(t,e){var n=t.elm;o(n._leaveCb)&&(n._leaveCb.cancelled=!0,n._leaveCb());var r=Fr(t.data.transition);if(!i(r)&&!o(n._enterCb)&&1===n.nodeType){for(var a=r.css,l=r.type,u=r.enterClass,c=r.enterToClass,f=r.enterActiveClass,p=r.appearClass,d=r.appearToClass,h=r.appearActiveClass,m=r.beforeEnter,g=r.enter,y=r.afterEnter,b=r.enterCancelled,_=r.beforeAppear,x=r.appear,k=r.afterAppear,w=r.appearCancelled,C=r.duration,$=Ye,S=Ye.$vnode;S&&S.parent;)$=S.context,S=S.parent;var E=!$._isMounted||!t.isRootInsert;if(!E||x||\"\"===x){var O=E&&p?p:u,A=E&&h?h:f,j=E&&d?d:c,T=E&&_||m,L=E&&\"function\"==typeof x?x:g,I=E&&k||y,P=E&&w||b,z=v(s(C)?C.enter:C);0;var M=!1!==a&&!X,R=ai(L),N=n._enterCb=U((function(){M&&(Jr(n,j),Jr(n,A)),N.cancelled?(M&&Jr(n,O),P&&P(n)):I&&I(n),n._enterCb=null}));t.data.show||le(t,\"insert\",(function(){var e=n.parentNode,r=e&&e._pending&&e._pending[t.key];r&&r.tag===t.tag&&r.elm._leaveCb&&r.elm._leaveCb(),L&&L(n,N)})),T&&T(n),M&&(Xr(n,O),Xr(n,A),Yr((function(){Jr(n,O),N.cancelled||(Xr(n,j),R||(oi(z)?setTimeout(N,z):Qr(n,l,N)))}))),t.data.show&&(e&&e(),L&&L(n,N)),M||R||N()}}}function ii(t,e){var n=t.elm;o(n._enterCb)&&(n._enterCb.cancelled=!0,n._enterCb());var r=Fr(t.data.transition);if(i(r)||1!==n.nodeType)return e();if(!o(n._leaveCb)){var a=r.css,l=r.type,u=r.leaveClass,c=r.leaveToClass,f=r.leaveActiveClass,p=r.beforeLeave,d=r.leave,h=r.afterLeave,m=r.leaveCancelled,g=r.delayLeave,y=r.duration,b=!1!==a&&!X,_=ai(d),x=v(s(y)?y.leave:y);0;var k=n._leaveCb=U((function(){n.parentNode&&n.parentNode._pending&&(n.parentNode._pending[t.key]=null),b&&(Jr(n,c),Jr(n,f)),k.cancelled?(b&&Jr(n,u),m&&m(n)):(e(),h&&h(n)),n._leaveCb=null}));g?g(w):w()}function w(){k.cancelled||(!t.data.show&&n.parentNode&&((n.parentNode._pending||(n.parentNode._pending={}))[t.key]=t),p&&p(n),b&&(Xr(n,u),Xr(n,f),Yr((function(){Jr(n,u),k.cancelled||(Xr(n,c),_||(oi(x)?setTimeout(k,x):Qr(n,l,k)))}))),d&&d(n,k),b||_||k())}}function oi(t){return\"number\"==typeof t&&!isNaN(t)}function ai(t){if(i(t))return!1;var e=t.fns;return o(e)?ai(Array.isArray(e)?e[0]:e):(t._length||t.length)>1}function li(t,e){!0!==e.data.show&&ri(e)}var si=function(t){var e,n,r={},s=t.modules,u=t.nodeOps;for(e=0;e<tr.length;++e)for(r[tr[e]]=[],n=0;n<s.length;++n)o(s[n][tr[e]])&&r[tr[e]].push(s[n][tr[e]]);function c(t){var e=u.parentNode(t);o(e)&&u.removeChild(e,t)}function f(t,e,n,i,l,s,c){if(o(t.elm)&&o(s)&&(t=s[c]=yt(t)),t.isRootInsert=!l,!function(t,e,n,i){var l=t.data;if(o(l)){var s=o(t.componentInstance)&&l.keepAlive;if(o(l=l.hook)&&o(l=l.init)&&l(t,!1),o(t.componentInstance))return p(t,e),d(n,t.elm,i),a(s)&&function(t,e,n,i){var a,l=t;for(;l.componentInstance;)if(l=l.componentInstance._vnode,o(a=l.data)&&o(a=a.transition)){for(a=0;a<r.activate.length;++a)r.activate[a](Zn,l);e.push(l);break}d(n,t.elm,i)}(t,e,n,i),!0}}(t,e,n,i)){var f=t.data,v=t.children,m=t.tag;o(m)?(t.elm=t.ns?u.createElementNS(t.ns,m):u.createElement(m,t),y(t),h(t,v,e),o(f)&&g(t,e),d(n,t.elm,i)):a(t.isComment)?(t.elm=u.createComment(t.text),d(n,t.elm,i)):(t.elm=u.createTextNode(t.text),d(n,t.elm,i))}}function p(t,e){o(t.data.pendingInsert)&&(e.push.apply(e,t.data.pendingInsert),t.data.pendingInsert=null),t.elm=t.componentInstance.$el,v(t)?(g(t,e),y(t)):(Qn(t),e.push(t))}function d(t,e,n){o(t)&&(o(n)?u.parentNode(n)===t&&u.insertBefore(t,e,n):u.appendChild(t,e))}function h(t,e,n){if(Array.isArray(e)){0;for(var r=0;r<e.length;++r)f(e[r],n,t.elm,null,!0,e,r)}else l(t.text)&&u.appendChild(t.elm,u.createTextNode(String(t.text)))}function v(t){for(;t.componentInstance;)t=t.componentInstance._vnode;return o(t.tag)}function g(t,n){for(var i=0;i<r.create.length;++i)r.create[i](Zn,t);o(e=t.data.hook)&&(o(e.create)&&e.create(Zn,t),o(e.insert)&&n.push(t))}function y(t){var e;if(o(e=t.fnScopeId))u.setStyleScope(t.elm,e);else for(var n=t;n;)o(e=n.context)&&o(e=e.$options._scopeId)&&u.setStyleScope(t.elm,e),n=n.parent;o(e=Ye)&&e!==t.context&&e!==t.fnContext&&o(e=e.$options._scopeId)&&u.setStyleScope(t.elm,e)}function b(t,e,n,r,i,o){for(;r<=i;++r)f(n[r],o,t,e,!1,n,r)}function _(t){var e,n,i=t.data;if(o(i))for(o(e=i.hook)&&o(e=e.destroy)&&e(t),e=0;e<r.destroy.length;++e)r.destroy[e](t);if(o(e=t.children))for(n=0;n<t.children.length;++n)_(t.children[n])}function x(t,e,n){for(;e<=n;++e){var r=t[e];o(r)&&(o(r.tag)?(k(r),_(r)):c(r.elm))}}function k(t,e){if(o(e)||o(t.data)){var n,i=r.remove.length+1;for(o(e)?e.listeners+=i:e=function(t,e){function n(){0==--n.listeners&&c(t)}return n.listeners=e,n}(t.elm,i),o(n=t.componentInstance)&&o(n=n._vnode)&&o(n.data)&&k(n,e),n=0;n<r.remove.length;++n)r.remove[n](t,e);o(n=t.data.hook)&&o(n=n.remove)?n(t,e):e()}else c(t.elm)}function w(t,e,n,r){for(var i=n;i<r;i++){var a=e[i];if(o(a)&&er(t,a))return i}}function C(t,e,n,l,s,c){if(t!==e){o(e.elm)&&o(l)&&(e=l[s]=yt(e));var p=e.elm=t.elm;if(a(t.isAsyncPlaceholder))o(e.asyncFactory.resolved)?E(t.elm,e,n):e.isAsyncPlaceholder=!0;else if(a(e.isStatic)&&a(t.isStatic)&&e.key===t.key&&(a(e.isCloned)||a(e.isOnce)))e.componentInstance=t.componentInstance;else{var d,h=e.data;o(h)&&o(d=h.hook)&&o(d=d.prepatch)&&d(t,e);var m=t.children,g=e.children;if(o(h)&&v(e)){for(d=0;d<r.update.length;++d)r.update[d](t,e);o(d=h.hook)&&o(d=d.update)&&d(t,e)}i(e.text)?o(m)&&o(g)?m!==g&&function(t,e,n,r,a){var l,s,c,p=0,d=0,h=e.length-1,v=e[0],m=e[h],g=n.length-1,y=n[0],_=n[g],k=!a;for(0;p<=h&&d<=g;)i(v)?v=e[++p]:i(m)?m=e[--h]:er(v,y)?(C(v,y,r,n,d),v=e[++p],y=n[++d]):er(m,_)?(C(m,_,r,n,g),m=e[--h],_=n[--g]):er(v,_)?(C(v,_,r,n,g),k&&u.insertBefore(t,v.elm,u.nextSibling(m.elm)),v=e[++p],_=n[--g]):er(m,y)?(C(m,y,r,n,d),k&&u.insertBefore(t,m.elm,v.elm),m=e[--h],y=n[++d]):(i(l)&&(l=nr(e,p,h)),i(s=o(y.key)?l[y.key]:w(y,e,p,h))?f(y,r,t,v.elm,!1,n,d):er(c=e[s],y)?(C(c,y,r,n,d),e[s]=void 0,k&&u.insertBefore(t,c.elm,v.elm)):f(y,r,t,v.elm,!1,n,d),y=n[++d]);p>h?b(t,i(n[g+1])?null:n[g+1].elm,n,d,g,r):d>g&&x(e,p,h)}(p,m,g,n,c):o(g)?(o(t.text)&&u.setTextContent(p,\"\"),b(p,null,g,0,g.length-1,n)):o(m)?x(m,0,m.length-1):o(t.text)&&u.setTextContent(p,\"\"):t.text!==e.text&&u.setTextContent(p,e.text),o(h)&&o(d=h.hook)&&o(d=d.postpatch)&&d(t,e)}}}function $(t,e,n){if(a(n)&&o(t.parent))t.parent.data.pendingInsert=e;else for(var r=0;r<e.length;++r)e[r].data.hook.insert(e[r])}var S=m(\"attrs,class,staticClass,staticStyle,key\");function E(t,e,n,r){var i,l=e.tag,s=e.data,u=e.children;if(r=r||s&&s.pre,e.elm=t,a(e.isComment)&&o(e.asyncFactory))return e.isAsyncPlaceholder=!0,!0;if(o(s)&&(o(i=s.hook)&&o(i=i.init)&&i(e,!0),o(i=e.componentInstance)))return p(e,n),!0;if(o(l)){if(o(u))if(t.hasChildNodes())if(o(i=s)&&o(i=i.domProps)&&o(i=i.innerHTML)){if(i!==t.innerHTML)return!1}else{for(var c=!0,f=t.firstChild,d=0;d<u.length;d++){if(!f||!E(f,u[d],n,r)){c=!1;break}f=f.nextSibling}if(!c||f)return!1}else h(e,u,n);if(o(s)){var v=!1;for(var m in s)if(!S(m)){v=!0,g(e,n);break}!v&&s.class&&re(s.class)}}else t.data!==e.text&&(t.data=e.text);return!0}return function(t,e,n,l){if(!i(e)){var s,c=!1,p=[];if(i(t))c=!0,f(e,p);else{var d=o(t.nodeType);if(!d&&er(t,e))C(t,e,p,null,null,l);else{if(d){if(1===t.nodeType&&t.hasAttribute(\"data-server-rendered\")&&(t.removeAttribute(\"data-server-rendered\"),n=!0),a(n)&&E(t,e,p))return $(e,p,!0),t;s=t,t=new ht(u.tagName(s).toLowerCase(),{},[],void 0,s)}var h=t.elm,m=u.parentNode(h);if(f(e,p,h._leaveCb?null:m,u.nextSibling(h)),o(e.parent))for(var g=e.parent,y=v(e);g;){for(var b=0;b<r.destroy.length;++b)r.destroy[b](g);if(g.elm=e.elm,y){for(var k=0;k<r.create.length;++k)r.create[k](Zn,g);var w=g.data.hook.insert;if(w.merged)for(var S=1;S<w.fns.length;S++)w.fns[S]()}else Qn(g);g=g.parent}o(m)?x([t],0,0):o(t.tag)&&_(t)}}return $(e,p,c),e.elm}o(t)&&_(t)}}({nodeOps:Xn,modules:[dr,mr,wr,Sr,Mr,W?{create:li,activate:li,remove:function(t,e){!0!==t.data.show?ii(t,e):e()}}:{}].concat(ur)});X&&document.addEventListener(\"selectionchange\",(function(){var t=document.activeElement;t&&t.vmodel&&mi(t,\"input\")}));var ui={inserted:function(t,e,n,r){\"select\"===n.tag?(r.elm&&!r.elm._vOptions?le(n,\"postpatch\",(function(){ui.componentUpdated(t,e,n)})):ci(t,e,n.context),t._vOptions=[].map.call(t.options,di)):(\"textarea\"===n.tag||Yn(t.type))&&(t._vModifiers=e.modifiers,e.modifiers.lazy||(t.addEventListener(\"compositionstart\",hi),t.addEventListener(\"compositionend\",vi),t.addEventListener(\"change\",vi),X&&(t.vmodel=!0)))},componentUpdated:function(t,e,n){if(\"select\"===n.tag){ci(t,e,n.context);var r=t._vOptions,i=t._vOptions=[].map.call(t.options,di);if(i.some((function(t,e){return!P(t,r[e])})))(t.multiple?e.value.some((function(t){return pi(t,i)})):e.value!==e.oldValue&&pi(e.value,i))&&mi(t,\"change\")}}};function ci(t,e,n){fi(t,e,n),(Y||J)&&setTimeout((function(){fi(t,e,n)}),0)}function fi(t,e,n){var r=e.value,i=t.multiple;if(!i||Array.isArray(r)){for(var o,a,l=0,s=t.options.length;l<s;l++)if(a=t.options[l],i)o=z(r,di(a))>-1,a.selected!==o&&(a.selected=o);else if(P(di(a),r))return void(t.selectedIndex!==l&&(t.selectedIndex=l));i||(t.selectedIndex=-1)}}function pi(t,e){return e.every((function(e){return!P(e,t)}))}function di(t){return\"_value\"in t?t._value:t.value}function hi(t){t.target.composing=!0}function vi(t){t.target.composing&&(t.target.composing=!1,mi(t.target,\"input\"))}function mi(t,e){var n=document.createEvent(\"HTMLEvents\");n.initEvent(e,!0,!0),t.dispatchEvent(n)}function gi(t){return!t.componentInstance||t.data&&t.data.transition?t:gi(t.componentInstance._vnode)}var yi={model:ui,show:{bind:function(t,e,n){var r=e.value,i=(n=gi(n)).data&&n.data.transition,o=t.__vOriginalDisplay=\"none\"===t.style.display?\"\":t.style.display;r&&i?(n.data.show=!0,ri(n,(function(){t.style.display=o}))):t.style.display=r?o:\"none\"},update:function(t,e,n){var r=e.value;!r!=!e.oldValue&&((n=gi(n)).data&&n.data.transition?(n.data.show=!0,r?ri(n,(function(){t.style.display=t.__vOriginalDisplay})):ii(n,(function(){t.style.display=\"none\"}))):t.style.display=r?t.__vOriginalDisplay:\"none\")},unbind:function(t,e,n,r,i){i||(t.style.display=t.__vOriginalDisplay)}}},bi={name:String,appear:Boolean,css:Boolean,mode:String,type:String,enterClass:String,leaveClass:String,enterToClass:String,leaveToClass:String,enterActiveClass:String,leaveActiveClass:String,appearClass:String,appearActiveClass:String,appearToClass:String,duration:[Number,String,Object]};function _i(t){var e=t&&t.componentOptions;return e&&e.Ctor.options.abstract?_i(He(e.children)):t}function xi(t){var e={},n=t.$options;for(var r in n.propsData)e[r]=t[r];var i=n._parentListeners;for(var o in i)e[w(o)]=i[o];return e}function ki(t,e){if(/\\d-keep-alive$/.test(e.tag))return t(\"keep-alive\",{props:e.componentOptions.propsData})}var wi=function(t){return t.tag||Be(t)},Ci=function(t){return\"show\"===t.name},$i={name:\"transition\",props:bi,abstract:!0,render:function(t){var e=this,n=this.$slots.default;if(n&&(n=n.filter(wi)).length){0;var r=this.mode;0;var i=n[0];if(function(t){for(;t=t.parent;)if(t.data.transition)return!0}(this.$vnode))return i;var o=_i(i);if(!o)return i;if(this._leaving)return ki(t,i);var a=\"__transition-\"+this._uid+\"-\";o.key=null==o.key?o.isComment?a+\"comment\":a+o.tag:l(o.key)?0===String(o.key).indexOf(a)?o.key:a+o.key:o.key;var s=(o.data||(o.data={})).transition=xi(this),u=this._vnode,c=_i(u);if(o.data.directives&&o.data.directives.some(Ci)&&(o.data.show=!0),c&&c.data&&!function(t,e){return e.key===t.key&&e.tag===t.tag}(o,c)&&!Be(c)&&(!c.componentInstance||!c.componentInstance._vnode.isComment)){var f=c.data.transition=A({},s);if(\"out-in\"===r)return this._leaving=!0,le(f,\"afterLeave\",(function(){e._leaving=!1,e.$forceUpdate()})),ki(t,i);if(\"in-out\"===r){if(Be(o))return u;var p,d=function(){p()};le(s,\"afterEnter\",d),le(s,\"enterCancelled\",d),le(f,\"delayLeave\",(function(t){p=t}))}}return i}}},Si=A({tag:String,moveClass:String},bi);function Ei(t){t.elm._moveCb&&t.elm._moveCb(),t.elm._enterCb&&t.elm._enterCb()}function Oi(t){t.data.newPos=t.elm.getBoundingClientRect()}function Ai(t){var e=t.data.pos,n=t.data.newPos,r=e.left-n.left,i=e.top-n.top;if(r||i){t.data.moved=!0;var o=t.elm.style;o.transform=o.WebkitTransform=\"translate(\"+r+\"px,\"+i+\"px)\",o.transitionDuration=\"0s\"}}delete Si.mode;var ji={Transition:$i,TransitionGroup:{props:Si,beforeMount:function(){var t=this,e=this._update;this._update=function(n,r){var i=Xe(t);t.__patch__(t._vnode,t.kept,!1,!0),t._vnode=t.kept,i(),e.call(t,n,r)}},render:function(t){for(var e=this.tag||this.$vnode.data.tag||\"span\",n=Object.create(null),r=this.prevChildren=this.children,i=this.$slots.default||[],o=this.children=[],a=xi(this),l=0;l<i.length;l++){var s=i[l];if(s.tag)if(null!=s.key&&0!==String(s.key).indexOf(\"__vlist\"))o.push(s),n[s.key]=s,(s.data||(s.data={})).transition=a;else;}if(r){for(var u=[],c=[],f=0;f<r.length;f++){var p=r[f];p.data.transition=a,p.data.pos=p.elm.getBoundingClientRect(),n[p.key]?u.push(p):c.push(p)}this.kept=t(e,null,u),this.removed=c}return t(e,null,o)},updated:function(){var t=this.prevChildren,e=this.moveClass||(this.name||\"v\")+\"-move\";t.length&&this.hasMove(t[0].elm,e)&&(t.forEach(Ei),t.forEach(Oi),t.forEach(Ai),this._reflow=document.body.offsetHeight,t.forEach((function(t){if(t.data.moved){var n=t.elm,r=n.style;Xr(n,e),r.transform=r.WebkitTransform=r.transitionDuration=\"\",n.addEventListener(Wr,n._moveCb=function t(r){r&&r.target!==n||r&&!/transform$/.test(r.propertyName)||(n.removeEventListener(Wr,t),n._moveCb=null,Jr(n,e))})}})))},methods:{hasMove:function(t,e){if(!Br)return!1;if(this._hasMove)return this._hasMove;var n=t.cloneNode();t._transitionClasses&&t._transitionClasses.forEach((function(t){Dr(n,t)})),Nr(n,e),n.style.display=\"none\",this.$el.appendChild(n);var r=ti(n);return this.$el.removeChild(n),this._hasMove=r.hasTransform}}}};wn.config.mustUseProp=function(t,e,n){return\"value\"===n&&Ln(t)&&\"button\"!==e||\"selected\"===n&&\"option\"===t||\"checked\"===n&&\"input\"===t||\"muted\"===n&&\"video\"===t},wn.config.isReservedTag=Gn,wn.config.isReservedAttr=Tn,wn.config.getTagNamespace=function(t){return qn(t)?\"svg\":\"math\"===t?\"math\":void 0},wn.config.isUnknownElement=function(t){if(!W)return!0;if(Gn(t))return!1;if(t=t.toLowerCase(),null!=Kn[t])return Kn[t];var e=document.createElement(t);return t.indexOf(\"-\")>-1?Kn[t]=e.constructor===window.HTMLUnknownElement||e.constructor===window.HTMLElement:Kn[t]=/HTMLUnknownElement/.test(e.toString())},A(wn.options.directives,yi),A(wn.options.components,ji),wn.prototype.__patch__=W?si:T,wn.prototype.$mount=function(t,e){return function(t,e,n){var r;return t.$el=e,t.$options.render||(t.$options.render=mt),Ze(t,\"beforeMount\"),r=function(){t._update(t._render(),n)},new pn(t,r,T,{before:function(){t._isMounted&&!t._isDestroyed&&Ze(t,\"beforeUpdate\")}},!0),n=!1,null==t.$vnode&&(t._isMounted=!0,Ze(t,\"mounted\")),t}(this,t=t&&W?function(t){if(\"string\"==typeof t){var e=document.querySelector(t);return e||document.createElement(\"div\")}return t}(t):void 0,e)},W&&setTimeout((function(){N.devtools&&it&&it.emit(\"init\",wn)}),0);var Ti=wn;\n/*!\n  * vue-router v3.1.5\n  * (c) 2020 Evan You\n  * @license MIT\n  */function Li(t){return Object.prototype.toString.call(t).indexOf(\"Error\")>-1}function Ii(t,e){return e instanceof t||e&&(e.name===t.name||e._name===t._name)}function Pi(t,e){for(var n in e)t[n]=e[n];return t}var zi={name:\"RouterView\",functional:!0,props:{name:{type:String,default:\"default\"}},render:function(t,e){var n=e.props,r=e.children,i=e.parent,o=e.data;o.routerView=!0;for(var a=i.$createElement,l=n.name,s=i.$route,u=i._routerViewCache||(i._routerViewCache={}),c=0,f=!1;i&&i._routerRoot!==i;){var p=i.$vnode?i.$vnode.data:{};p.routerView&&c++,p.keepAlive&&i._directInactive&&i._inactive&&(f=!0),i=i.$parent}if(o.routerViewDepth=c,f){var d=u[l],h=d&&d.component;return h?(d.configProps&&Ui(h,o,d.route,d.configProps),a(h,o,r)):a()}var v=s.matched[c],m=v&&v.components[l];if(!v||!m)return u[l]=null,a();u[l]={component:m},o.registerRouteInstance=function(t,e){var n=v.instances[l];(e&&n!==t||!e&&n===t)&&(v.instances[l]=e)},(o.hook||(o.hook={})).prepatch=function(t,e){v.instances[l]=e.componentInstance},o.hook.init=function(t){t.data.keepAlive&&t.componentInstance&&t.componentInstance!==v.instances[l]&&(v.instances[l]=t.componentInstance)};var g=v.props&&v.props[l];return g&&(Pi(u[l],{route:s,configProps:g}),Ui(m,o,s,g)),a(m,o,r)}};function Ui(t,e,n,r){var i=e.props=function(t,e){switch(typeof e){case\"undefined\":return;case\"object\":return e;case\"function\":return e(t);case\"boolean\":return e?t.params:void 0;default:0}}(n,r);if(i){i=e.props=Pi({},i);var o=e.attrs=e.attrs||{};for(var a in i)t.props&&a in t.props||(o[a]=i[a],delete i[a])}}var Mi=/[!'()*]/g,Ri=function(t){return\"%\"+t.charCodeAt(0).toString(16)},Ni=/%2C/g,Di=function(t){return encodeURIComponent(t).replace(Mi,Ri).replace(Ni,\",\")},Fi=decodeURIComponent;function Vi(t){var e={};return(t=t.trim().replace(/^(\\?|#|&)/,\"\"))?(t.split(\"&\").forEach((function(t){var n=t.replace(/\\+/g,\" \").split(\"=\"),r=Fi(n.shift()),i=n.length>0?Fi(n.join(\"=\")):null;void 0===e[r]?e[r]=i:Array.isArray(e[r])?e[r].push(i):e[r]=[e[r],i]})),e):e}function Bi(t){var e=t?Object.keys(t).map((function(e){var n=t[e];if(void 0===n)return\"\";if(null===n)return Di(e);if(Array.isArray(n)){var r=[];return n.forEach((function(t){void 0!==t&&(null===t?r.push(Di(e)):r.push(Di(e)+\"=\"+Di(t)))})),r.join(\"&\")}return Di(e)+\"=\"+Di(n)})).filter((function(t){return t.length>0})).join(\"&\"):null;return e?\"?\"+e:\"\"}var Hi=/\\/?$/;function Wi(t,e,n,r){var i=r&&r.options.stringifyQuery,o=e.query||{};try{o=qi(o)}catch(t){}var a={name:e.name||t&&t.name,meta:t&&t.meta||{},path:e.path||\"/\",hash:e.hash||\"\",query:o,params:e.params||{},fullPath:Yi(e,i),matched:t?Ki(t):[]};return n&&(a.redirectedFrom=Yi(n,i)),Object.freeze(a)}function qi(t){if(Array.isArray(t))return t.map(qi);if(t&&\"object\"==typeof t){var e={};for(var n in t)e[n]=qi(t[n]);return e}return t}var Gi=Wi(null,{path:\"/\"});function Ki(t){for(var e=[];t;)e.unshift(t),t=t.parent;return e}function Yi(t,e){var n=t.path,r=t.query;void 0===r&&(r={});var i=t.hash;return void 0===i&&(i=\"\"),(n||\"/\")+(e||Bi)(r)+i}function Xi(t,e){return e===Gi?t===e:!!e&&(t.path&&e.path?t.path.replace(Hi,\"\")===e.path.replace(Hi,\"\")&&t.hash===e.hash&&Ji(t.query,e.query):!(!t.name||!e.name)&&(t.name===e.name&&t.hash===e.hash&&Ji(t.query,e.query)&&Ji(t.params,e.params)))}function Ji(t,e){if(void 0===t&&(t={}),void 0===e&&(e={}),!t||!e)return t===e;var n=Object.keys(t),r=Object.keys(e);return n.length===r.length&&n.every((function(n){var r=t[n],i=e[n];return\"object\"==typeof r&&\"object\"==typeof i?Ji(r,i):String(r)===String(i)}))}function Qi(t,e,n){var r=t.charAt(0);if(\"/\"===r)return t;if(\"?\"===r||\"#\"===r)return e+t;var i=e.split(\"/\");n&&i[i.length-1]||i.pop();for(var o=t.replace(/^\\//,\"\").split(\"/\"),a=0;a<o.length;a++){var l=o[a];\"..\"===l?i.pop():\".\"!==l&&i.push(l)}return\"\"!==i[0]&&i.unshift(\"\"),i.join(\"/\")}function Zi(t){return t.replace(/\\/\\//g,\"/\")}var to=Array.isArray||function(t){return\"[object Array]\"==Object.prototype.toString.call(t)},eo=mo,no=lo,ro=function(t,e){return uo(lo(t,e))},io=uo,oo=vo,ao=new RegExp([\"(\\\\\\\\.)\",\"([\\\\/.])?(?:(?:\\\\:(\\\\w+)(?:\\\\(((?:\\\\\\\\.|[^\\\\\\\\()])+)\\\\))?|\\\\(((?:\\\\\\\\.|[^\\\\\\\\()])+)\\\\))([+*?])?|(\\\\*))\"].join(\"|\"),\"g\");function lo(t,e){for(var n,r=[],i=0,o=0,a=\"\",l=e&&e.delimiter||\"/\";null!=(n=ao.exec(t));){var s=n[0],u=n[1],c=n.index;if(a+=t.slice(o,c),o=c+s.length,u)a+=u[1];else{var f=t[o],p=n[2],d=n[3],h=n[4],v=n[5],m=n[6],g=n[7];a&&(r.push(a),a=\"\");var y=null!=p&&null!=f&&f!==p,b=\"+\"===m||\"*\"===m,_=\"?\"===m||\"*\"===m,x=n[2]||l,k=h||v;r.push({name:d||i++,prefix:p||\"\",delimiter:x,optional:_,repeat:b,partial:y,asterisk:!!g,pattern:k?fo(k):g?\".*\":\"[^\"+co(x)+\"]+?\"})}}return o<t.length&&(a+=t.substr(o)),a&&r.push(a),r}function so(t){return encodeURI(t).replace(/[\\/?#]/g,(function(t){return\"%\"+t.charCodeAt(0).toString(16).toUpperCase()}))}function uo(t){for(var e=new Array(t.length),n=0;n<t.length;n++)\"object\"==typeof t[n]&&(e[n]=new RegExp(\"^(?:\"+t[n].pattern+\")$\"));return function(n,r){for(var i=\"\",o=n||{},a=(r||{}).pretty?so:encodeURIComponent,l=0;l<t.length;l++){var s=t[l];if(\"string\"!=typeof s){var u,c=o[s.name];if(null==c){if(s.optional){s.partial&&(i+=s.prefix);continue}throw new TypeError('Expected \"'+s.name+'\" to be defined')}if(to(c)){if(!s.repeat)throw new TypeError('Expected \"'+s.name+'\" to not repeat, but received `'+JSON.stringify(c)+\"`\");if(0===c.length){if(s.optional)continue;throw new TypeError('Expected \"'+s.name+'\" to not be empty')}for(var f=0;f<c.length;f++){if(u=a(c[f]),!e[l].test(u))throw new TypeError('Expected all \"'+s.name+'\" to match \"'+s.pattern+'\", but received `'+JSON.stringify(u)+\"`\");i+=(0===f?s.prefix:s.delimiter)+u}}else{if(u=s.asterisk?encodeURI(c).replace(/[?#]/g,(function(t){return\"%\"+t.charCodeAt(0).toString(16).toUpperCase()})):a(c),!e[l].test(u))throw new TypeError('Expected \"'+s.name+'\" to match \"'+s.pattern+'\", but received \"'+u+'\"');i+=s.prefix+u}}else i+=s}return i}}function co(t){return t.replace(/([.+*?=^!:${}()[\\]|\\/\\\\])/g,\"\\\\$1\")}function fo(t){return t.replace(/([=!:$\\/()])/g,\"\\\\$1\")}function po(t,e){return t.keys=e,t}function ho(t){return t.sensitive?\"\":\"i\"}function vo(t,e,n){to(e)||(n=e||n,e=[]);for(var r=(n=n||{}).strict,i=!1!==n.end,o=\"\",a=0;a<t.length;a++){var l=t[a];if(\"string\"==typeof l)o+=co(l);else{var s=co(l.prefix),u=\"(?:\"+l.pattern+\")\";e.push(l),l.repeat&&(u+=\"(?:\"+s+u+\")*\"),o+=u=l.optional?l.partial?s+\"(\"+u+\")?\":\"(?:\"+s+\"(\"+u+\"))?\":s+\"(\"+u+\")\"}}var c=co(n.delimiter||\"/\"),f=o.slice(-c.length)===c;return r||(o=(f?o.slice(0,-c.length):o)+\"(?:\"+c+\"(?=$))?\"),o+=i?\"$\":r&&f?\"\":\"(?=\"+c+\"|$)\",po(new RegExp(\"^\"+o,ho(n)),e)}function mo(t,e,n){return to(e)||(n=e||n,e=[]),n=n||{},t instanceof RegExp?function(t,e){var n=t.source.match(/\\((?!\\?)/g);if(n)for(var r=0;r<n.length;r++)e.push({name:r,prefix:null,delimiter:null,optional:!1,repeat:!1,partial:!1,asterisk:!1,pattern:null});return po(t,e)}(t,e):to(t)?function(t,e,n){for(var r=[],i=0;i<t.length;i++)r.push(mo(t[i],e,n).source);return po(new RegExp(\"(?:\"+r.join(\"|\")+\")\",ho(n)),e)}(t,e,n):function(t,e,n){return vo(lo(t,n),e,n)}(t,e,n)}eo.parse=no,eo.compile=ro,eo.tokensToFunction=io,eo.tokensToRegExp=oo;var go=Object.create(null);function yo(t,e,n){e=e||{};try{var r=go[t]||(go[t]=eo.compile(t));return e.pathMatch&&(e[0]=e.pathMatch),r(e,{pretty:!0})}catch(t){return\"\"}finally{delete e[0]}}function bo(t,e,n,r){var i=\"string\"==typeof t?{path:t}:t;if(i._normalized)return i;if(i.name){var o=(i=Pi({},t)).params;return o&&\"object\"==typeof o&&(i.params=Pi({},o)),i}if(!i.path&&i.params&&e){(i=Pi({},i))._normalized=!0;var a=Pi(Pi({},e.params),i.params);if(e.name)i.name=e.name,i.params=a;else if(e.matched.length){var l=e.matched[e.matched.length-1].path;i.path=yo(l,a,e.path)}else 0;return i}var s=function(t){var e=\"\",n=\"\",r=t.indexOf(\"#\");r>=0&&(e=t.slice(r),t=t.slice(0,r));var i=t.indexOf(\"?\");return i>=0&&(n=t.slice(i+1),t=t.slice(0,i)),{path:t,query:n,hash:e}}(i.path||\"\"),u=e&&e.path||\"/\",c=s.path?Qi(s.path,u,n||i.append):u,f=function(t,e,n){void 0===e&&(e={});var r,i=n||Vi;try{r=i(t||\"\")}catch(t){r={}}for(var o in e)r[o]=e[o];return r}(s.query,i.query,r&&r.options.parseQuery),p=i.hash||s.hash;return p&&\"#\"!==p.charAt(0)&&(p=\"#\"+p),{_normalized:!0,path:c,query:f,hash:p}}var _o,xo=function(){},ko={name:\"RouterLink\",props:{to:{type:[String,Object],required:!0},tag:{type:String,default:\"a\"},exact:Boolean,append:Boolean,replace:Boolean,activeClass:String,exactActiveClass:String,event:{type:[String,Array],default:\"click\"}},render:function(t){var e=this,n=this.$router,r=this.$route,i=n.resolve(this.to,r,this.append),o=i.location,a=i.route,l=i.href,s={},u=n.options.linkActiveClass,c=n.options.linkExactActiveClass,f=null==u?\"router-link-active\":u,p=null==c?\"router-link-exact-active\":c,d=null==this.activeClass?f:this.activeClass,h=null==this.exactActiveClass?p:this.exactActiveClass,v=a.redirectedFrom?Wi(null,bo(a.redirectedFrom),null,n):a;s[h]=Xi(r,v),s[d]=this.exact?s[h]:function(t,e){return 0===t.path.replace(Hi,\"/\").indexOf(e.path.replace(Hi,\"/\"))&&(!e.hash||t.hash===e.hash)&&function(t,e){for(var n in e)if(!(n in t))return!1;return!0}(t.query,e.query)}(r,v);var m=function(t){wo(t)&&(e.replace?n.replace(o,xo):n.push(o,xo))},g={click:wo};Array.isArray(this.event)?this.event.forEach((function(t){g[t]=m})):g[this.event]=m;var y={class:s},b=!this.$scopedSlots.$hasNormal&&this.$scopedSlots.default&&this.$scopedSlots.default({href:l,route:a,navigate:m,isActive:s[d],isExactActive:s[h]});if(b){if(1===b.length)return b[0];if(b.length>1||!b.length)return 0===b.length?t():t(\"span\",{},b)}if(\"a\"===this.tag)y.on=g,y.attrs={href:l};else{var _=function t(e){var n;if(e)for(var r=0;r<e.length;r++){if(\"a\"===(n=e[r]).tag)return n;if(n.children&&(n=t(n.children)))return n}}(this.$slots.default);if(_){_.isStatic=!1;var x=_.data=Pi({},_.data);for(var k in x.on=x.on||{},x.on){var w=x.on[k];k in g&&(x.on[k]=Array.isArray(w)?w:[w])}for(var C in g)C in x.on?x.on[C].push(g[C]):x.on[C]=m;(_.data.attrs=Pi({},_.data.attrs)).href=l}else y.on=g}return t(this.tag,y,this.$slots.default)}};function wo(t){if(!(t.metaKey||t.altKey||t.ctrlKey||t.shiftKey||t.defaultPrevented||void 0!==t.button&&0!==t.button)){if(t.currentTarget&&t.currentTarget.getAttribute){var e=t.currentTarget.getAttribute(\"target\");if(/\\b_blank\\b/i.test(e))return}return t.preventDefault&&t.preventDefault(),!0}}var Co=\"undefined\"!=typeof window;function $o(t,e,n,r){var i=e||[],o=n||Object.create(null),a=r||Object.create(null);t.forEach((function(t){!function t(e,n,r,i,o,a){var l=i.path,s=i.name;0;var u=i.pathToRegexpOptions||{},c=function(t,e,n){n||(t=t.replace(/\\/$/,\"\"));if(\"/\"===t[0])return t;if(null==e)return t;return Zi(e.path+\"/\"+t)}(l,o,u.strict);\"boolean\"==typeof i.caseSensitive&&(u.sensitive=i.caseSensitive);var f={path:c,regex:So(c,u),components:i.components||{default:i.component},instances:{},name:s,parent:o,matchAs:a,redirect:i.redirect,beforeEnter:i.beforeEnter,meta:i.meta||{},props:null==i.props?{}:i.components?i.props:{default:i.props}};i.children&&i.children.forEach((function(i){var o=a?Zi(a+\"/\"+i.path):void 0;t(e,n,r,i,f,o)}));n[f.path]||(e.push(f.path),n[f.path]=f);if(void 0!==i.alias)for(var p=Array.isArray(i.alias)?i.alias:[i.alias],d=0;d<p.length;++d){0;var h={path:p[d],children:i.children};t(e,n,r,h,o,f.path||\"/\")}s&&(r[s]||(r[s]=f))}(i,o,a,t)}));for(var l=0,s=i.length;l<s;l++)\"*\"===i[l]&&(i.push(i.splice(l,1)[0]),s--,l--);return{pathList:i,pathMap:o,nameMap:a}}function So(t,e){return eo(t,[],e)}function Eo(t,e){var n=$o(t),r=n.pathList,i=n.pathMap,o=n.nameMap;function a(t,n,a){var l=bo(t,n,!1,e),u=l.name;if(u){var c=o[u];if(!c)return s(null,l);var f=c.regex.keys.filter((function(t){return!t.optional})).map((function(t){return t.name}));if(\"object\"!=typeof l.params&&(l.params={}),n&&\"object\"==typeof n.params)for(var p in n.params)!(p in l.params)&&f.indexOf(p)>-1&&(l.params[p]=n.params[p]);return l.path=yo(c.path,l.params),s(c,l,a)}if(l.path){l.params={};for(var d=0;d<r.length;d++){var h=r[d],v=i[h];if(Oo(v.regex,l.path,l.params))return s(v,l,a)}}return s(null,l)}function l(t,n){var r=t.redirect,i=\"function\"==typeof r?r(Wi(t,n,null,e)):r;if(\"string\"==typeof i&&(i={path:i}),!i||\"object\"!=typeof i)return s(null,n);var l=i,u=l.name,c=l.path,f=n.query,p=n.hash,d=n.params;if(f=l.hasOwnProperty(\"query\")?l.query:f,p=l.hasOwnProperty(\"hash\")?l.hash:p,d=l.hasOwnProperty(\"params\")?l.params:d,u){o[u];return a({_normalized:!0,name:u,query:f,hash:p,params:d},void 0,n)}if(c){var h=function(t,e){return Qi(t,e.parent?e.parent.path:\"/\",!0)}(c,t);return a({_normalized:!0,path:yo(h,d),query:f,hash:p},void 0,n)}return s(null,n)}function s(t,n,r){return t&&t.redirect?l(t,r||n):t&&t.matchAs?function(t,e,n){var r=a({_normalized:!0,path:yo(n,e.params)});if(r){var i=r.matched,o=i[i.length-1];return e.params=r.params,s(o,e)}return s(null,e)}(0,n,t.matchAs):Wi(t,n,r,e)}return{match:a,addRoutes:function(t){$o(t,r,i,o)}}}function Oo(t,e,n){var r=e.match(t);if(!r)return!1;if(!n)return!0;for(var i=1,o=r.length;i<o;++i){var a=t.keys[i-1],l=\"string\"==typeof r[i]?decodeURIComponent(r[i]):r[i];a&&(n[a.name||\"pathMatch\"]=l)}return!0}var Ao=Co&&window.performance&&window.performance.now?window.performance:Date;function jo(){return Ao.now().toFixed(3)}var To=jo();function Lo(){return To}function Io(t){return To=t}var Po=Object.create(null);function zo(){var t=window.location.protocol+\"//\"+window.location.host,e=window.location.href.replace(t,\"\");window.history.replaceState({key:Lo()},\"\",e),window.addEventListener(\"popstate\",(function(t){Mo(),t.state&&t.state.key&&Io(t.state.key)}))}function Uo(t,e,n,r){if(t.app){var i=t.options.scrollBehavior;i&&t.app.$nextTick((function(){var o=function(){var t=Lo();if(t)return Po[t]}(),a=i.call(t,e,n,r?o:null);a&&(\"function\"==typeof a.then?a.then((function(t){Vo(t,o)})).catch((function(t){0})):Vo(a,o))}))}}function Mo(){var t=Lo();t&&(Po[t]={x:window.pageXOffset,y:window.pageYOffset})}function Ro(t){return Do(t.x)||Do(t.y)}function No(t){return{x:Do(t.x)?t.x:window.pageXOffset,y:Do(t.y)?t.y:window.pageYOffset}}function Do(t){return\"number\"==typeof t}var Fo=/^#\\d/;function Vo(t,e){var n,r=\"object\"==typeof t;if(r&&\"string\"==typeof t.selector){var i=Fo.test(t.selector)?document.getElementById(t.selector.slice(1)):document.querySelector(t.selector);if(i){var o=t.offset&&\"object\"==typeof t.offset?t.offset:{};e=function(t,e){var n=document.documentElement.getBoundingClientRect(),r=t.getBoundingClientRect();return{x:r.left-n.left-e.x,y:r.top-n.top-e.y}}(i,o={x:Do((n=o).x)?n.x:0,y:Do(n.y)?n.y:0})}else Ro(t)&&(e=No(t))}else r&&Ro(t)&&(e=No(t));e&&window.scrollTo(e.x,e.y)}var Bo,Ho=Co&&((-1===(Bo=window.navigator.userAgent).indexOf(\"Android 2.\")&&-1===Bo.indexOf(\"Android 4.0\")||-1===Bo.indexOf(\"Mobile Safari\")||-1!==Bo.indexOf(\"Chrome\")||-1!==Bo.indexOf(\"Windows Phone\"))&&window.history&&\"pushState\"in window.history);function Wo(t,e){Mo();var n=window.history;try{if(e){var r=Pi({},n.state);r.key=Lo(),n.replaceState(r,\"\",t)}else n.pushState({key:Io(jo())},\"\",t)}catch(n){window.location[e?\"replace\":\"assign\"](t)}}function qo(t){Wo(t,!0)}function Go(t,e,n){var r=function(i){i>=t.length?n():t[i]?e(t[i],(function(){r(i+1)})):r(i+1)};r(0)}function Ko(t){return function(e,n,r){var i=!1,o=0,a=null;Yo(t,(function(t,e,n,l){if(\"function\"==typeof t&&void 0===t.cid){i=!0,o++;var s,u=Qo((function(e){var i;((i=e).__esModule||Jo&&\"Module\"===i[Symbol.toStringTag])&&(e=e.default),t.resolved=\"function\"==typeof e?e:_o.extend(e),n.components[l]=e,--o<=0&&r()})),c=Qo((function(t){var e=\"Failed to resolve async component \"+l+\": \"+t;a||(a=Li(t)?t:new Error(e),r(a))}));try{s=t(u,c)}catch(t){c(t)}if(s)if(\"function\"==typeof s.then)s.then(u,c);else{var f=s.component;f&&\"function\"==typeof f.then&&f.then(u,c)}}})),i||r()}}function Yo(t,e){return Xo(t.map((function(t){return Object.keys(t.components).map((function(n){return e(t.components[n],t.instances[n],t,n)}))})))}function Xo(t){return Array.prototype.concat.apply([],t)}var Jo=\"function\"==typeof Symbol&&\"symbol\"==typeof Symbol.toStringTag;function Qo(t){var e=!1;return function(){for(var n=[],r=arguments.length;r--;)n[r]=arguments[r];if(!e)return e=!0,t.apply(this,n)}}var Zo=function(t){function e(e){t.call(this),this.name=this._name=\"NavigationDuplicated\",this.message='Navigating to current location (\"'+e.fullPath+'\") is not allowed',Object.defineProperty(this,\"stack\",{value:(new t).stack,writable:!0,configurable:!0})}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e}(Error);Zo._name=\"NavigationDuplicated\";var ta=function(t,e){this.router=t,this.base=function(t){if(!t)if(Co){var e=document.querySelector(\"base\");t=(t=e&&e.getAttribute(\"href\")||\"/\").replace(/^https?:\\/\\/[^\\/]+/,\"\")}else t=\"/\";\"/\"!==t.charAt(0)&&(t=\"/\"+t);return t.replace(/\\/$/,\"\")}(e),this.current=Gi,this.pending=null,this.ready=!1,this.readyCbs=[],this.readyErrorCbs=[],this.errorCbs=[]};function ea(t,e,n,r){var i=Yo(t,(function(t,r,i,o){var a=function(t,e){\"function\"!=typeof t&&(t=_o.extend(t));return t.options[e]}(t,e);if(a)return Array.isArray(a)?a.map((function(t){return n(t,r,i,o)})):n(a,r,i,o)}));return Xo(r?i.reverse():i)}function na(t,e){if(e)return function(){return t.apply(e,arguments)}}ta.prototype.listen=function(t){this.cb=t},ta.prototype.onReady=function(t,e){this.ready?t():(this.readyCbs.push(t),e&&this.readyErrorCbs.push(e))},ta.prototype.onError=function(t){this.errorCbs.push(t)},ta.prototype.transitionTo=function(t,e,n){var r=this,i=this.router.match(t,this.current);this.confirmTransition(i,(function(){r.updateRoute(i),e&&e(i),r.ensureURL(),r.ready||(r.ready=!0,r.readyCbs.forEach((function(t){t(i)})))}),(function(t){n&&n(t),t&&!r.ready&&(r.ready=!0,r.readyErrorCbs.forEach((function(e){e(t)})))}))},ta.prototype.confirmTransition=function(t,e,n){var r=this,i=this.current,o=function(t){!Ii(Zo,t)&&Li(t)&&(r.errorCbs.length?r.errorCbs.forEach((function(e){e(t)})):console.error(t)),n&&n(t)};if(Xi(t,i)&&t.matched.length===i.matched.length)return this.ensureURL(),o(new Zo(t));var a=function(t,e){var n,r=Math.max(t.length,e.length);for(n=0;n<r&&t[n]===e[n];n++);return{updated:e.slice(0,n),activated:e.slice(n),deactivated:t.slice(n)}}(this.current.matched,t.matched),l=a.updated,s=a.deactivated,u=a.activated,c=[].concat(function(t){return ea(t,\"beforeRouteLeave\",na,!0)}(s),this.router.beforeHooks,function(t){return ea(t,\"beforeRouteUpdate\",na)}(l),u.map((function(t){return t.beforeEnter})),Ko(u));this.pending=t;var f=function(e,n){if(r.pending!==t)return o();try{e(t,i,(function(t){!1===t||Li(t)?(r.ensureURL(!0),o(t)):\"string\"==typeof t||\"object\"==typeof t&&(\"string\"==typeof t.path||\"string\"==typeof t.name)?(o(),\"object\"==typeof t&&t.replace?r.replace(t):r.push(t)):n(t)}))}catch(t){o(t)}};Go(c,f,(function(){var n=[];Go(function(t,e,n){return ea(t,\"beforeRouteEnter\",(function(t,r,i,o){return function(t,e,n,r,i){return function(o,a,l){return t(o,a,(function(t){\"function\"==typeof t&&r.push((function(){!function t(e,n,r,i){n[r]&&!n[r]._isBeingDestroyed?e(n[r]):i()&&setTimeout((function(){t(e,n,r,i)}),16)}(t,e.instances,n,i)})),l(t)}))}}(t,i,o,e,n)}))}(u,n,(function(){return r.current===t})).concat(r.router.resolveHooks),f,(function(){if(r.pending!==t)return o();r.pending=null,e(t),r.router.app&&r.router.app.$nextTick((function(){n.forEach((function(t){t()}))}))}))}))},ta.prototype.updateRoute=function(t){var e=this.current;this.current=t,this.cb&&this.cb(t),this.router.afterHooks.forEach((function(n){n&&n(t,e)}))};var ra=function(t){function e(e,n){var r=this;t.call(this,e,n);var i=e.options.scrollBehavior,o=Ho&&i;o&&zo();var a=ia(this.base);window.addEventListener(\"popstate\",(function(t){var n=r.current,i=ia(r.base);r.current===Gi&&i===a||r.transitionTo(i,(function(t){o&&Uo(e,t,n,!0)}))}))}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.go=function(t){window.history.go(t)},e.prototype.push=function(t,e,n){var r=this,i=this.current;this.transitionTo(t,(function(t){Wo(Zi(r.base+t.fullPath)),Uo(r.router,t,i,!1),e&&e(t)}),n)},e.prototype.replace=function(t,e,n){var r=this,i=this.current;this.transitionTo(t,(function(t){qo(Zi(r.base+t.fullPath)),Uo(r.router,t,i,!1),e&&e(t)}),n)},e.prototype.ensureURL=function(t){if(ia(this.base)!==this.current.fullPath){var e=Zi(this.base+this.current.fullPath);t?Wo(e):qo(e)}},e.prototype.getCurrentLocation=function(){return ia(this.base)},e}(ta);function ia(t){var e=decodeURI(window.location.pathname);return t&&0===e.indexOf(t)&&(e=e.slice(t.length)),(e||\"/\")+window.location.search+window.location.hash}var oa=function(t){function e(e,n,r){t.call(this,e,n),r&&function(t){var e=ia(t);if(!/^\\/#/.test(e))return window.location.replace(Zi(t+\"/#\"+e)),!0}(this.base)||aa()}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setupListeners=function(){var t=this,e=this.router.options.scrollBehavior,n=Ho&&e;n&&zo(),window.addEventListener(Ho?\"popstate\":\"hashchange\",(function(){var e=t.current;aa()&&t.transitionTo(la(),(function(r){n&&Uo(t.router,r,e,!0),Ho||ca(r.fullPath)}))}))},e.prototype.push=function(t,e,n){var r=this,i=this.current;this.transitionTo(t,(function(t){ua(t.fullPath),Uo(r.router,t,i,!1),e&&e(t)}),n)},e.prototype.replace=function(t,e,n){var r=this,i=this.current;this.transitionTo(t,(function(t){ca(t.fullPath),Uo(r.router,t,i,!1),e&&e(t)}),n)},e.prototype.go=function(t){window.history.go(t)},e.prototype.ensureURL=function(t){var e=this.current.fullPath;la()!==e&&(t?ua(e):ca(e))},e.prototype.getCurrentLocation=function(){return la()},e}(ta);function aa(){var t=la();return\"/\"===t.charAt(0)||(ca(\"/\"+t),!1)}function la(){var t=window.location.href,e=t.indexOf(\"#\");if(e<0)return\"\";var n=(t=t.slice(e+1)).indexOf(\"?\");if(n<0){var r=t.indexOf(\"#\");t=r>-1?decodeURI(t.slice(0,r))+t.slice(r):decodeURI(t)}else t=decodeURI(t.slice(0,n))+t.slice(n);return t}function sa(t){var e=window.location.href,n=e.indexOf(\"#\");return(n>=0?e.slice(0,n):e)+\"#\"+t}function ua(t){Ho?Wo(sa(t)):window.location.hash=t}function ca(t){Ho?qo(sa(t)):window.location.replace(sa(t))}var fa=function(t){function e(e,n){t.call(this,e,n),this.stack=[],this.index=-1}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.push=function(t,e,n){var r=this;this.transitionTo(t,(function(t){r.stack=r.stack.slice(0,r.index+1).concat(t),r.index++,e&&e(t)}),n)},e.prototype.replace=function(t,e,n){var r=this;this.transitionTo(t,(function(t){r.stack=r.stack.slice(0,r.index).concat(t),e&&e(t)}),n)},e.prototype.go=function(t){var e=this,n=this.index+t;if(!(n<0||n>=this.stack.length)){var r=this.stack[n];this.confirmTransition(r,(function(){e.index=n,e.updateRoute(r)}),(function(t){Ii(Zo,t)&&(e.index=n)}))}},e.prototype.getCurrentLocation=function(){var t=this.stack[this.stack.length-1];return t?t.fullPath:\"/\"},e.prototype.ensureURL=function(){},e}(ta),pa=function(t){void 0===t&&(t={}),this.app=null,this.apps=[],this.options=t,this.beforeHooks=[],this.resolveHooks=[],this.afterHooks=[],this.matcher=Eo(t.routes||[],this);var e=t.mode||\"hash\";switch(this.fallback=\"history\"===e&&!Ho&&!1!==t.fallback,this.fallback&&(e=\"hash\"),Co||(e=\"abstract\"),this.mode=e,e){case\"history\":this.history=new ra(this,t.base);break;case\"hash\":this.history=new oa(this,t.base,this.fallback);break;case\"abstract\":this.history=new fa(this,t.base);break;default:0}},da={currentRoute:{configurable:!0}};function ha(t,e){return t.push(e),function(){var n=t.indexOf(e);n>-1&&t.splice(n,1)}}pa.prototype.match=function(t,e,n){return this.matcher.match(t,e,n)},da.currentRoute.get=function(){return this.history&&this.history.current},pa.prototype.init=function(t){var e=this;if(this.apps.push(t),t.$once(\"hook:destroyed\",(function(){var n=e.apps.indexOf(t);n>-1&&e.apps.splice(n,1),e.app===t&&(e.app=e.apps[0]||null)})),!this.app){this.app=t;var n=this.history;if(n instanceof ra)n.transitionTo(n.getCurrentLocation());else if(n instanceof oa){var r=function(){n.setupListeners()};n.transitionTo(n.getCurrentLocation(),r,r)}n.listen((function(t){e.apps.forEach((function(e){e._route=t}))}))}},pa.prototype.beforeEach=function(t){return ha(this.beforeHooks,t)},pa.prototype.beforeResolve=function(t){return ha(this.resolveHooks,t)},pa.prototype.afterEach=function(t){return ha(this.afterHooks,t)},pa.prototype.onReady=function(t,e){this.history.onReady(t,e)},pa.prototype.onError=function(t){this.history.onError(t)},pa.prototype.push=function(t,e,n){var r=this;if(!e&&!n&&\"undefined\"!=typeof Promise)return new Promise((function(e,n){r.history.push(t,e,n)}));this.history.push(t,e,n)},pa.prototype.replace=function(t,e,n){var r=this;if(!e&&!n&&\"undefined\"!=typeof Promise)return new Promise((function(e,n){r.history.replace(t,e,n)}));this.history.replace(t,e,n)},pa.prototype.go=function(t){this.history.go(t)},pa.prototype.back=function(){this.go(-1)},pa.prototype.forward=function(){this.go(1)},pa.prototype.getMatchedComponents=function(t){var e=t?t.matched?t:this.resolve(t).route:this.currentRoute;return e?[].concat.apply([],e.matched.map((function(t){return Object.keys(t.components).map((function(e){return t.components[e]}))}))):[]},pa.prototype.resolve=function(t,e,n){var r=bo(t,e=e||this.history.current,n,this),i=this.match(r,e),o=i.redirectedFrom||i.fullPath;return{location:r,route:i,href:function(t,e,n){var r=\"hash\"===n?\"#\"+e:e;return t?Zi(t+\"/\"+r):r}(this.history.base,o,this.mode),normalizedTo:r,resolved:i}},pa.prototype.addRoutes=function(t){this.matcher.addRoutes(t),this.history.current!==Gi&&this.history.transitionTo(this.history.getCurrentLocation())},Object.defineProperties(pa.prototype,da),pa.install=function t(e){if(!t.installed||_o!==e){t.installed=!0,_o=e;var n=function(t){return void 0!==t},r=function(t,e){var r=t.$options._parentVnode;n(r)&&n(r=r.data)&&n(r=r.registerRouteInstance)&&r(t,e)};e.mixin({beforeCreate:function(){n(this.$options.router)?(this._routerRoot=this,this._router=this.$options.router,this._router.init(this),e.util.defineReactive(this,\"_route\",this._router.history.current)):this._routerRoot=this.$parent&&this.$parent._routerRoot||this,r(this,this)},destroyed:function(){r(this)}}),Object.defineProperty(e.prototype,\"$router\",{get:function(){return this._routerRoot._router}}),Object.defineProperty(e.prototype,\"$route\",{get:function(){return this._routerRoot._route}}),e.component(\"RouterView\",zi),e.component(\"RouterLink\",ko);var i=e.config.optionMergeStrategies;i.beforeRouteEnter=i.beforeRouteLeave=i.beforeRouteUpdate=i.created}},pa.version=\"3.1.5\",Co&&window.Vue&&window.Vue.use(pa);var va=pa;n(107),n(20),n(30),n(17),n(31),n(66),n(33),n(67);function ma(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||\"[object Arguments]\"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError(\"Invalid attempt to spread non-iterable instance\")}()}function ga(t,e){var n;t.mixins||(t.mixins=[]),(n=t.mixins).push.apply(n,ma(e))}var ya={disableScrollBehavior:!1},ba=n(51),_a=n.n(ba),xa=(n(22),n(114),n(116),n(34),n(117),n(90),n(35),/#.*$/),ka=/\\.(md|html)$/,wa=/\\/$/,Ca=/^(https?:|mailto:|tel:)/;function $a(t){return decodeURI(t).replace(xa,\"\").replace(ka,\"\")}function Sa(t){return Ca.test(t)}function Ea(t){if(Sa(t))return t;var e=t.match(xa),n=e?e[0]:\"\",r=$a(t);return wa.test(r)?t:r+\".html\"+n}function Oa(t,e){var n=t.hash,r=function(t){var e=t.match(xa);if(e)return e[0]}(e);return(!r||n===r)&&$a(t.path)===$a(e)}function Aa(t,e,n){n&&(e=function(t,e,n){var r=t.charAt(0);if(\"/\"===r)return t;if(\"?\"===r||\"#\"===r)return e+t;var i=e.split(\"/\");n&&i[i.length-1]||i.pop();for(var o=t.replace(/^\\//,\"\").split(\"/\"),a=0;a<o.length;a++){var l=o[a];\"..\"===l?i.pop():\".\"!==l&&i.push(l)}\"\"!==i[0]&&i.unshift(\"\");return i.join(\"/\")}(e,n));for(var r=$a(e),i=0;i<t.length;i++)if($a(t[i].path)===r)return Object.assign({},t[i],{type:\"page\",path:Ea(e)});return console.error('[vuepress] No matching page found for sidebar item \"'.concat(e,'\"')),{}}function ja(t,e,n,r){var i=n.pages,o=n.themeConfig,a=r&&o.locales&&o.locales[r]||o;if(\"auto\"===(t.frontmatter.sidebar||a.sidebar||o.sidebar))return function(t){var e=Ta(t.headers||[]);return[{type:\"group\",collapsable:!1,title:t.title,children:e.map((function(e){return{type:\"auto\",title:e.title,basePath:t.path,path:t.path+\"#\"+e.slug,children:e.children||[]}}))}]}(t);var l=a.sidebar||o.sidebar;if(l){var s=function(t,e){if(Array.isArray(e))return{base:\"/\",config:e};for(var n in e)if(0===(r=t.path,/(\\.html|\\/)$/.test(r)?r:r+\"/\").indexOf(n))return{base:n,config:e[n]};var r;return{}}(e,l),u=s.base,c=s.config;return c?c.map((function(t){return function t(e,n,r,i){if(\"string\"==typeof e)return Aa(n,e,r);if(Array.isArray(e))return Object.assign(Aa(n,e[0],r),{title:e[1]});i&&console.error(\"[vuepress] Nested sidebar groups are not supported. Consider using navbar + categories instead.\");var o=e.children||[];return{type:\"group\",title:e.title,children:o.map((function(e){return t(e,n,r,!0)})),collapsable:!1!==e.collapsable}}(t,i,u)})):[]}return[]}function Ta(t){var e;return(t=t.map((function(t){return Object.assign({},t)}))).forEach((function(t){2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)})),t.filter((function(t){return 2===t.level}))}function La(t){return Object.assign(t,{type:t.items&&t.items.length?\"links\":\"link\"})}var Ia={props:{item:{required:!0}},computed:{link:function(){return Ea(this.item.link)},exact:function(){var t=this;return this.$site.locales?Object.keys(this.$site.locales).some((function(e){return e===t.link})):\"/\"===this.link}},methods:{isExternal:Sa,isMailto:function(t){return/^mailto:/.test(t)},isTel:function(t){return/^tel:/.test(t)}}},Pa=n(0),za=Object(Pa.a)(Ia,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.isExternal(t.link)?n(\"a\",{staticClass:\"nav-link external\",attrs:{href:t.link,target:t.isMailto(t.link)||t.isTel(t.link)?null:\"_blank\",rel:t.isMailto(t.link)||t.isTel(t.link)?null:\"noopener noreferrer\"}},[t._v(\"\\n  \"+t._s(t.item.text)+\"\\n  \"),n(\"OutboundLink\")],1):n(\"router-link\",{staticClass:\"nav-link\",attrs:{to:t.link,exact:t.exact}},[t._v(t._s(t.item.text))])}),[],!1,null,null,null).exports,Ua={components:{NavLink:za},computed:{data:function(){return this.$page.frontmatter},actionLink:function(){return{link:this.data.actionLink,text:this.data.actionText}}}},Ma=(n(119),Object(Pa.a)(Ua,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n(\"div\",{staticClass:\"home\"},[n(\"div\",{staticClass:\"hero\"},[t.data.heroImage?n(\"img\",{attrs:{src:t.$withBase(t.data.heroImage),alt:\"hero\"}}):t._e(),t._v(\" \"),n(\"h1\",[t._v(t._s(t.data.heroText||t.$title||\"Hello\"))]),t._v(\" \"),n(\"p\",{staticClass:\"description\"},[t._v(\"\\n      \"+t._s(t.data.tagline||t.$description||\"Welcome to your VuePress site\")+\"\\n    \")]),t._v(\" \"),t.data.actionText&&t.data.actionLink?n(\"p\",{staticClass:\"action\"},[n(\"NavLink\",{staticClass:\"action-button\",attrs:{item:t.actionLink}})],1):t._e()]),t._v(\" \"),t.data.features&&t.data.features.length?n(\"div\",{staticClass:\"features\"},t._l(t.data.features,(function(e,r){return n(\"div\",{key:r,staticClass:\"feature\"},[n(\"h2\",[t._v(t._s(e.title))]),t._v(\" \"),n(\"p\",[t._v(t._s(e.details))])])})),0):t._e(),t._v(\" \"),n(\"Content\",{attrs:{custom:\"\"}}),t._v(\" \"),t.data.footer?n(\"div\",{staticClass:\"footer\"},[t._v(\"\\n    \"+t._s(t.data.footer)+\"\\n  \")]):t._e()],1)}),[],!1,null,null,null).exports),Ra=(n(121),Object(Pa.a)({},(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n(\"div\",{staticClass:\"sidebar-button\",on:{click:function(e){return t.$emit(\"toggle-sidebar\")}}},[n(\"svg\",{staticClass:\"icon\",attrs:{xmlns:\"http://www.w3.org/2000/svg\",\"aria-hidden\":\"true\",role:\"img\",viewBox:\"0 0 448 512\"}},[n(\"path\",{attrs:{fill:\"currentColor\",d:\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"}})])])}),[],!1,null,null,null).exports),Na=(n(123),{data:function(){return{query:\"\",focused:!1,focusIndex:0}},computed:{showSuggestions:function(){return this.focused&&this.suggestions&&this.suggestions.length},suggestions:function(){var t=this.query.trim().toLowerCase();if(t){for(var e=this.$site,n=e.pages,r=e.themeConfig.searchMaxSuggestions||5,i=this.$localePath,o=function(e){return e.title&&e.title.toLowerCase().indexOf(t)>-1},a=[],l=0;l<n.length&&!(a.length>=r);l++){var s=n[l];if(this.getPageLocalePath(s)===i)if(o(s))a.push(s);else if(s.headers)for(var u=0;u<s.headers.length&&!(a.length>=r);u++){var c=s.headers[u];o(c)&&a.push(Object.assign({},s,{path:s.path+\"#\"+c.slug,header:c}))}}return a}},alignRight:function(){return(this.$site.themeConfig.nav||[]).length+(this.$site.repo?1:0)<=2}},methods:{getPageLocalePath:function(t){for(var e in this.$site.locales||{})if(\"/\"!==e&&0===t.path.indexOf(e))return e;return\"/\"},onUp:function(){this.showSuggestions&&(this.focusIndex>0?this.focusIndex--:this.focusIndex=this.suggestions.length-1)},onDown:function(){this.showSuggestions&&(this.focusIndex<this.suggestions.length-1?this.focusIndex++:this.focusIndex=0)},go:function(t){this.showSuggestions&&(this.$router.push(this.suggestions[t].path),this.query=\"\",this.focusIndex=0)},focus:function(t){this.focusIndex=t},unfocus:function(){this.focusIndex=-1}}}),Da=(n(126),Object(Pa.a)(Na,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n(\"div\",{staticClass:\"search-box\"},[n(\"input\",{class:{focused:t.focused},attrs:{\"aria-label\":\"Search\",autocomplete:\"off\",spellcheck:\"false\"},domProps:{value:t.query},on:{input:function(e){t.query=e.target.value},focus:function(e){t.focused=!0},blur:function(e){t.focused=!1},keyup:[function(e){return!e.type.indexOf(\"key\")&&t._k(e.keyCode,\"enter\",13,e.key,\"Enter\")?null:t.go(t.focusIndex)},function(e){return!e.type.indexOf(\"key\")&&t._k(e.keyCode,\"up\",38,e.key,[\"Up\",\"ArrowUp\"])?null:t.onUp(e)},function(e){return!e.type.indexOf(\"key\")&&t._k(e.keyCode,\"down\",40,e.key,[\"Down\",\"ArrowDown\"])?null:t.onDown(e)}]}}),t._v(\" \"),t.showSuggestions?n(\"ul\",{staticClass:\"suggestions\",class:{\"align-right\":t.alignRight},on:{mouseleave:t.unfocus}},t._l(t.suggestions,(function(e,r){return n(\"li\",{staticClass:\"suggestion\",class:{focused:r===t.focusIndex},on:{mousedown:function(e){return t.go(r)},mouseenter:function(e){return t.focus(r)}}},[n(\"a\",{attrs:{href:e.path},on:{click:function(t){t.preventDefault()}}},[n(\"span\",{staticClass:\"page-title\"},[t._v(t._s(e.title||e.path))]),t._v(\" \"),e.header?n(\"span\",{staticClass:\"header\"},[t._v(\"> \"+t._s(e.header.title))]):t._e()])])})),0):t._e()])}),[],!1,null,null,null).exports),Fa=(n(128),{name:\"DropdownTransition\",methods:{setHeight:function(t){t.style.height=t.scrollHeight+\"px\"},unsetHeight:function(t){t.style.height=\"\"}}}),Va=(n(132),Object(Pa.a)(Fa,(function(){var t=this.$createElement;return(this._self._c||t)(\"transition\",{attrs:{name:\"dropdown\"},on:{enter:this.setHeight,\"after-enter\":this.unsetHeight,\"before-leave\":this.setHeight}},[this._t(\"default\")],2)}),[],!1,null,null,null).exports),Ba={components:{NavLink:za,DropdownTransition:Va},data:function(){return{open:!1}},props:{item:{required:!0}},methods:{toggle:function(){this.open=!this.open}}},Ha=(n(134),{components:{NavLink:za,DropdownLink:Object(Pa.a)(Ba,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n(\"div\",{staticClass:\"dropdown-wrapper\",class:{open:t.open}},[n(\"a\",{staticClass:\"dropdown-title\",on:{click:t.toggle}},[n(\"span\",{staticClass:\"title\"},[t._v(t._s(t.item.text))]),t._v(\" \"),n(\"span\",{staticClass:\"arrow\",class:t.open?\"down\":\"right\"})]),t._v(\" \"),n(\"DropdownTransition\",[n(\"ul\",{directives:[{name:\"show\",rawName:\"v-show\",value:t.open,expression:\"open\"}],staticClass:\"nav-dropdown\"},t._l(t.item.items,(function(e,r){return n(\"li\",{key:e.link||r,staticClass:\"dropdown-item\"},[\"links\"===e.type?n(\"h4\",[t._v(t._s(e.text))]):t._e(),t._v(\" \"),\"links\"===e.type?n(\"ul\",{staticClass:\"dropdown-subitem-wrapper\"},t._l(e.items,(function(t){return n(\"li\",{key:t.link,staticClass:\"dropdown-subitem\"},[n(\"NavLink\",{attrs:{item:t}})],1)})),0):n(\"NavLink\",{attrs:{item:e}})],1)})),0)])],1)}),[],!1,null,null,null).exports},computed:{userNav:function(){return this.$themeLocaleConfig.nav||this.$site.themeConfig.nav||[]},nav:function(){var t=this,e=this.$site.locales;if(e&&Object.keys(e).length>1){var n=this.$page.path,r=this.$router.options.routes,i=this.$site.themeConfig.locales||{},o={text:this.$themeLocaleConfig.selectText||\"Languages\",items:Object.keys(e).map((function(o){var a,l=e[o],s=i[o]&&i[o].label||l.lang;return l.lang===t.$lang?a=n:(a=n.replace(t.$localeConfig.path,o),r.some((function(t){return t.path===a}))||(a=o)),{text:s,link:a}}))};return ma(this.userNav).concat([o])}return this.userNav},userLinks:function(){return(this.nav||[]).map((function(t){return Object.assign(La(t),{items:(t.items||[]).map(La)})}))},repoLink:function(){var t=this.$site.themeConfig.repo;if(t)return/^https?:/.test(t)?t:\"https://github.com/\".concat(t)},repoLabel:function(){if(this.repoLink){if(this.$site.themeConfig.repoLabel)return this.$site.themeConfig.repoLabel;for(var t=this.repoLink.match(/^https?:\\/\\/[^/]+/)[0],e=[\"GitHub\",\"GitLab\",\"Bitbucket\"],n=0;n<e.length;n++){var r=e[n];if(new RegExp(r,\"i\").test(t))return r}return\"Source\"}}}}),Wa=(n(136),Object(Pa.a)(Ha,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.userLinks.length||t.repoLink?n(\"nav\",{staticClass:\"nav-links\"},[t._l(t.userLinks,(function(t){return n(\"div\",{key:t.link,staticClass:\"nav-item\"},[\"links\"===t.type?n(\"DropdownLink\",{attrs:{item:t}}):n(\"NavLink\",{attrs:{item:t}})],1)})),t._v(\" \"),t.repoLink?n(\"a\",{staticClass:\"repo-link\",attrs:{href:t.repoLink,target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(\"\\n    \"+t._s(t.repoLabel)+\"\\n    \"),n(\"OutboundLink\")],1):t._e()],2):t._e()}),[],!1,null,null,null).exports);function qa(t,e){return t.ownerDocument.defaultView.getComputedStyle(t,null)[e]}var Ga={components:{SidebarButton:Ra,NavLinks:Wa,SearchBox:Da,AlgoliaSearchBox:{}},data:function(){return{linksWrapMaxWidth:null}},mounted:function(){var t=this,e=parseInt(qa(this.$el,\"paddingLeft\"))+parseInt(qa(this.$el,\"paddingRight\")),n=function(){document.documentElement.clientWidth<719?t.linksWrapMaxWidth=null:t.linksWrapMaxWidth=t.$el.offsetWidth-e-(t.$refs.siteName&&t.$refs.siteName.offsetWidth||0)};n(),window.addEventListener(\"resize\",n,!1)},computed:{algolia:function(){return this.$themeLocaleConfig.algolia||this.$site.themeConfig.algolia||{}},isAlgoliaSearch:function(){return this.algolia&&this.algolia.apiKey&&this.algolia.indexName}}},Ka=(n(138),Object(Pa.a)(Ga,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n(\"header\",{staticClass:\"navbar\"},[n(\"SidebarButton\",{on:{\"toggle-sidebar\":function(e){return t.$emit(\"toggle-sidebar\")}}}),t._v(\" \"),n(\"router-link\",{staticClass:\"home-link\",attrs:{to:t.$localePath}},[t.$site.themeConfig.logo?n(\"img\",{staticClass:\"logo\",attrs:{src:t.$withBase(t.$site.themeConfig.logo),alt:t.$siteTitle}}):t._e(),t._v(\" \"),t.$siteTitle?n(\"span\",{ref:\"siteName\",staticClass:\"site-name\",class:{\"can-hide\":t.$site.themeConfig.logo}},[t._v(t._s(t.$siteTitle))]):t._e()]),t._v(\" \"),n(\"div\",{staticClass:\"links\",style:{\"max-width\":t.linksWrapMaxWidth+\"px\"}},[t.isAlgoliaSearch?n(\"AlgoliaSearchBox\",{attrs:{options:t.algolia}}):!1!==t.$site.themeConfig.search?n(\"SearchBox\"):t._e(),t._v(\" \"),n(\"NavLinks\",{staticClass:\"can-hide\"})],1)],1)}),[],!1,null,null,null).exports);function Ya(t,e,n){var r=[];e.forEach((function(t){\"group\"===t.type?r.push.apply(r,ma(t.children||[])):r.push(t)}));for(var i=0;i<r.length;i++){var o=r[i];if(\"page\"===o.type&&o.path===t.path)return r[i+n]}}var Xa={props:[\"sidebarItems\"],computed:{lastUpdated:function(){if(this.$page.lastUpdated)return new Date(this.$page.lastUpdated).toLocaleString(this.$lang)},lastUpdatedText:function(){return\"string\"==typeof this.$themeLocaleConfig.lastUpdated?this.$themeLocaleConfig.lastUpdated:\"string\"==typeof this.$site.themeConfig.lastUpdated?this.$site.themeConfig.lastUpdated:\"Last Updated\"},prev:function(){var t,e,n=this.$page.frontmatter.prev;return!1===n?void 0:n?Aa(this.$site.pages,n,this.$route.path):(t=this.$page,e=this.sidebarItems,Ya(t,e,-1))},next:function(){var t,e,n=this.$page.frontmatter.next;return!1===n?void 0:n?Aa(this.$site.pages,n,this.$route.path):(t=this.$page,e=this.sidebarItems,Ya(t,e,1))},editLink:function(){if(!1!==this.$page.frontmatter.editLink){var t=this.$site.themeConfig,e=t.repo,n=t.editLinks,r=t.docsDir,i=void 0===r?\"\":r,o=t.docsBranch,a=void 0===o?\"master\":o,l=t.docsRepo,s=void 0===l?e:l,u=$a(this.$page.path);return wa.test(u)?u+=\"README.md\":u+=\".md\",s&&n?this.createEditLink(e,s,i,a,u):void 0}},editLinkText:function(){return this.$themeLocaleConfig.editLinkText||this.$site.themeConfig.editLinkText||\"Edit this page\"}},methods:{createEditLink:function(t,e,n,r,i){return/bitbucket.org/.test(t)?(Ca.test(e)?e:t).replace(wa,\"\")+\"/src\"+\"/\".concat(r)+(n?\"/\"+n.replace(wa,\"\"):\"\")+i+\"?mode=edit&spa=0&at=\".concat(r,\"&fileviewer=file-view-default\"):(Ca.test(e)?e:\"https://github.com/\".concat(e)).replace(wa,\"\")+\"/edit/\".concat(r)+(n?\"/\"+n.replace(wa,\"\"):\"\")+i}}},Ja=(n(140),Object(Pa.a)(Xa,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n(\"div\",{staticClass:\"page\"},[t._t(\"top\"),t._v(\" \"),n(\"Content\",{attrs:{custom:!1}}),t._v(\" \"),n(\"div\",{staticClass:\"page-edit\"},[t.editLink?n(\"div\",{staticClass:\"edit-link\"},[n(\"a\",{attrs:{href:t.editLink,target:\"_blank\",rel:\"noopener noreferrer\"}},[t._v(t._s(t.editLinkText))]),t._v(\" \"),n(\"OutboundLink\")],1):t._e(),t._v(\" \"),t.lastUpdated?n(\"div\",{staticClass:\"last-updated\"},[n(\"span\",{staticClass:\"prefix\"},[t._v(t._s(t.lastUpdatedText)+\": \")]),t._v(\" \"),n(\"span\",{staticClass:\"time\"},[t._v(t._s(t.lastUpdated))])]):t._e()]),t._v(\" \"),t.prev||t.next?n(\"div\",{staticClass:\"page-nav\"},[n(\"p\",{staticClass:\"inner\"},[t.prev?n(\"span\",{staticClass:\"prev\"},[t._v(\"\\n        ←\\n        \"),t.prev?n(\"router-link\",{staticClass:\"prev\",attrs:{to:t.prev.path}},[t._v(\"\\n          \"+t._s(t.prev.title||t.prev.path)+\"\\n        \")]):t._e()],1):t._e(),t._v(\" \"),t.next?n(\"span\",{staticClass:\"next\"},[t.next?n(\"router-link\",{attrs:{to:t.next.path}},[t._v(\"\\n          \"+t._s(t.next.title||t.next.path)+\"\\n        \")]):t._e(),t._v(\"\\n        →\\n      \")],1):t._e()])]):t._e(),t._v(\" \"),t._t(\"bottom\")],2)}),[],!1,null,null,null).exports);function Qa(t,e,n,r){return t(\"router-link\",{props:{to:e,activeClass:\"\",exactActiveClass:\"\"},class:{active:r,\"sidebar-link\":!0}},n)}function Za(t,e,n,r,i){var o=arguments.length>5&&void 0!==arguments[5]?arguments[5]:1;return!e||o>i?null:t(\"ul\",{class:\"sidebar-sub-headers\"},e.map((function(e){var a=Oa(r,n+\"#\"+e.slug);return t(\"li\",{class:\"sidebar-sub-header\"},[Qa(t,n+\"#\"+e.slug,e.title,a),Za(t,e.children,n,r,i,o+1)])})))}var tl={functional:!0,props:[\"item\"],render:function(t,e){var n=e.parent,r=n.$page,i=n.$site,o=n.$route,a=e.props.item,l=Oa(o,a.path),s=\"auto\"===a.type?l||a.children.some((function(t){return Oa(o,a.basePath+\"#\"+t.slug)})):l,u=Qa(t,a.path,a.title||a.path,s),c=null!=r.frontmatter.sidebarDepth?r.frontmatter.sidebarDepth:i.themeConfig.sidebarDepth,f=null==c?1:c,p=!!i.themeConfig.displayAllHeaders;return\"auto\"===a.type?[u,Za(t,a.children,a.basePath,o,f)]:(s||p)&&a.headers&&!xa.test(a.path)?[u,Za(t,Ta(a.headers),a.path,o,f)]:u}},el=(n(142),Object(Pa.a)(tl,void 0,void 0,!1,null,null,null).exports),nl={name:\"SidebarGroup\",props:[\"item\",\"first\",\"open\",\"collapsable\"],components:{SidebarLink:el,DropdownTransition:Va}};n(144);var rl={components:{SidebarGroup:Object(Pa.a)(nl,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n(\"div\",{staticClass:\"sidebar-group\",class:{first:t.first,collapsable:t.collapsable}},[n(\"p\",{staticClass:\"sidebar-heading\",class:{open:t.open},on:{click:function(e){return t.$emit(\"toggle\")}}},[n(\"span\",[t._v(t._s(t.item.title))]),t._v(\" \"),t.collapsable?n(\"span\",{staticClass:\"arrow\",class:t.open?\"down\":\"right\"}):t._e()]),t._v(\" \"),n(\"DropdownTransition\",[t.open||!t.collapsable?n(\"ul\",{ref:\"items\",staticClass:\"sidebar-group-items\"},t._l(t.item.children,(function(t){return n(\"li\",[n(\"SidebarLink\",{attrs:{item:t}})],1)})),0):t._e()])],1)}),[],!1,null,null,null).exports,SidebarLink:el,NavLinks:Wa},props:[\"items\"],data:function(){return{openGroupIndex:0}},created:function(){this.refreshIndex()},watch:{$route:function(){this.refreshIndex()}},methods:{refreshIndex:function(){var t=function(t,e){for(var n=0;n<e.length;n++){var r=e[n];if(\"group\"===r.type&&r.children.some((function(e){return Oa(t,e.path)})))return n}return-1}(this.$route,this.items);t>-1&&(this.openGroupIndex=t)},toggleGroup:function(t){this.openGroupIndex=t===this.openGroupIndex?-1:t},isActive:function(t){return Oa(this.$route,t.path)}}},il=(n(146),Object(Pa.a)(rl,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n(\"div\",{staticClass:\"sidebar\"},[n(\"NavLinks\"),t._v(\" \"),t._t(\"top\"),t._v(\" \"),t.items.length?n(\"ul\",{staticClass:\"sidebar-links\"},t._l(t.items,(function(e,r){return n(\"li\",{key:r},[\"group\"===e.type?n(\"SidebarGroup\",{attrs:{item:e,first:0===r,open:r===t.openGroupIndex,collapsable:e.collapsable||e.collapsible},on:{toggle:function(e){return t.toggleGroup(r)}}}):n(\"SidebarLink\",{attrs:{item:e}})],1)})),0):t._e(),t._v(\" \"),t._t(\"bottom\")],2)}),[],!1,null,null,null).exports);function ol(t){return(ol=\"function\"==typeof Symbol&&\"symbol\"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&\"function\"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?\"symbol\":typeof t})(t)}function al(t){return(al=\"function\"==typeof Symbol&&\"symbol\"===ol(Symbol.iterator)?function(t){return ol(t)}:function(t){return t&&\"function\"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?\"symbol\":ol(t)})(t)}var ll={props:{updateEvent:{type:Object,default:null}},computed:{popupConfig:function(){for(var t=[this.$themeLocaleConfig,this.$site.themeConfig],e=0;e<t.length;e++){var n=t[e].serviceWorker;if(n&&n.updatePopup)return\"object\"===al(n.updatePopup)?n.updatePopup:{}}return null},enabled:function(){return Boolean(this.popupConfig&&this.updateEvent)},message:function(){var t=this.popupConfig;return t&&t.message||\"New content is available.\"},buttonText:function(){var t=this.popupConfig;return t&&t.buttonText||\"Refresh\"}},methods:{reload:function(){this.updateEvent&&(this.updateEvent.skipWaiting().then((function(){location.reload(!0)})),this.updateEvent=null)}}},sl=(n(148),{components:{Home:Ma,Page:Ja,Sidebar:il,Navbar:Ka,SWUpdatePopup:Object(Pa.a)(ll,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n(\"transition\",{attrs:{name:\"sw-update-popup\"}},[t.enabled?n(\"div\",{staticClass:\"sw-update-popup\"},[t._v(\"\\n    \"+t._s(t.message)),n(\"br\"),t._v(\" \"),n(\"button\",{on:{click:t.reload}},[t._v(t._s(t.buttonText))])]):t._e()])}),[],!1,null,null,null).exports},data:function(){return{isSidebarOpen:!1,swUpdateEvent:null}},computed:{shouldShowNavbar:function(){var t=this.$site.themeConfig;return!1!==this.$page.frontmatter.navbar&&!1!==t.navbar&&(this.$title||t.logo||t.repo||t.nav||this.$themeLocaleConfig.nav)},shouldShowSidebar:function(){var t=this.$page.frontmatter;return!t.layout&&!t.home&&!1!==t.sidebar&&this.sidebarItems.length},sidebarItems:function(){return ja(this.$page,this.$route,this.$site,this.$localePath)},pageClasses:function(){var t=this.$page.frontmatter.pageClass;return[{\"no-navbar\":!this.shouldShowNavbar,\"sidebar-open\":this.isSidebarOpen,\"no-sidebar\":!this.shouldShowSidebar},t]}},mounted:function(){var t=this;window.addEventListener(\"scroll\",this.onScroll),_a.a.configure({showSpinner:!1}),this.$router.beforeEach((function(t,e,n){t.path===e.path||Ti.component(t.name)||_a.a.start(),n()})),this.$router.afterEach((function(){_a.a.done(),t.isSidebarOpen=!1})),this.$on(\"sw-updated\",this.onSWUpdated)},methods:{toggleSidebar:function(t){this.isSidebarOpen=\"boolean\"==typeof t?t:!this.isSidebarOpen},onTouchStart:function(t){this.touchStart={x:t.changedTouches[0].clientX,y:t.changedTouches[0].clientY}},onTouchEnd:function(t){var e=t.changedTouches[0].clientX-this.touchStart.x,n=t.changedTouches[0].clientY-this.touchStart.y;Math.abs(e)>Math.abs(n)&&Math.abs(e)>40&&(e>0&&this.touchStart.x<=80?this.toggleSidebar(!0):this.toggleSidebar(!1))},onSWUpdated:function(t){this.swUpdateEvent=t}}}),ul=(n(150),n(152),Object(Pa.a)(sl,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n(\"div\",{staticClass:\"theme-container\",class:t.pageClasses,on:{touchstart:t.onTouchStart,touchend:t.onTouchEnd}},[t.shouldShowNavbar?n(\"Navbar\",{on:{\"toggle-sidebar\":t.toggleSidebar}}):t._e(),t._v(\" \"),n(\"div\",{staticClass:\"sidebar-mask\",on:{click:function(e){return t.toggleSidebar(!1)}}}),t._v(\" \"),n(\"Sidebar\",{attrs:{items:t.sidebarItems},on:{\"toggle-sidebar\":t.toggleSidebar}},[t._t(\"sidebar-top\",null,{slot:\"top\"}),t._v(\" \"),t._t(\"sidebar-bottom\",null,{slot:\"bottom\"})],2),t._v(\" \"),t.$page.frontmatter.layout?n(\"div\",{staticClass:\"custom-layout\"},[n(t.$page.frontmatter.layout,{tag:\"component\"})],1):t.$page.frontmatter.home?n(\"Home\"):n(\"Page\",{attrs:{\"sidebar-items\":t.sidebarItems}},[t._t(\"page-top\",null,{slot:\"top\"}),t._v(\" \"),t._t(\"page-bottom\",null,{slot:\"bottom\"})],2),t._v(\" \"),n(\"SWUpdatePopup\",{attrs:{updateEvent:t.swUpdateEvent}})],1)}),[],!1,null,null,null).exports),cl=[\"There's nothing here.\",\"How did we get here?\",\"That's a Four-Oh-Four.\",\"Looks like we've got some broken links.\"],fl={methods:{getMsg:function(){return cl[Math.floor(Math.random()*cl.length)]}}},pl=Object(Pa.a)(fl,(function(){var t=this.$createElement,e=this._self._c||t;return e(\"div\",{staticClass:\"theme-container\"},[e(\"div\",{staticClass:\"content\"},[e(\"h1\",[this._v(\"404\")]),this._v(\" \"),e(\"blockquote\",[this._v(this._s(this.getMsg()))]),this._v(\" \"),e(\"router-link\",{attrs:{to:\"/\"}},[this._v(\"Take me home.\")])],1)])}),[],!1,null,null,null).exports,dl=(n(154),n(155),{created:function(){this.$ssrContext&&(this.$ssrContext.title=this.$title,this.$ssrContext.lang=this.$lang,this.$ssrContext.description=this.$page.description||this.$description)},mounted:function(){var t=this;this.currentMetaTags=new Set;var e=function(){document.title=t.$title,document.documentElement.lang=t.$lang;var e=t.$page.frontmatter.meta||[],n=e.slice(0);0===e.filter((function(t){return\"description\"===t.name})).length&&n.push({name:\"description\",content:t.$description});var r=document.querySelectorAll('meta[name=\"description\"]');r.length&&r.forEach((function(e){return t.currentMetaTags.add(e)})),t.currentMetaTags=new Set(hl(n,t.currentMetaTags))};this.$watch(\"$page\",e),e()},beforeDestroy:function(){hl(null,this.currentMetaTags)}});function hl(t,e){if(e&&ma(e).forEach((function(t){document.head.removeChild(t)})),t)return t.map((function(t){var e=document.createElement(\"meta\");return Object.keys(t).forEach((function(n){e.setAttribute(n,t[n])})),document.head.appendChild(e),e}))}var vl=n(93),ml=[dl,{mounted:function(){window.addEventListener(\"scroll\",this.onScroll)},methods:{onScroll:n.n(vl)()((function(){this.setActiveHash()}),300),setActiveHash:function(){for(var t=this,e=[].slice.call(document.querySelectorAll(\".sidebar-link\")),n=[].slice.call(document.querySelectorAll(\".header-anchor\")).filter((function(t){return e.some((function(e){return e.hash===t.hash}))})),r=Math.max(window.pageYOffset,document.documentElement.scrollTop,document.body.scrollTop),i=0;i<n.length;i++){var o=n[i],a=n[i+1];if((0===i&&0===r||r>=o.parentElement.offsetTop+10&&(!a||r<a.parentElement.offsetTop-10))&&decodeURIComponent(this.$route.hash)!==decodeURIComponent(o.hash))return ya.disableScrollBehavior=!0,void this.$router.replace(decodeURIComponent(o.hash),(function(){t.$nextTick((function(){ya.disableScrollBehavior=!1}))}))}}},beforeDestroy:function(){window.removeEventListener(\"scroll\",this.onScroll)}}];Ti.component(\"sponsor-button\",(function(){return n.e(3).then(n.bind(null,234))})),ga(ul,ml),ga(pl,ml);var gl=[{name:\"v-8d15385729d78\",path:\"/\",component:ul,beforeEnter:function(t,e,r){n.e(4).then(n.bind(null,236)).then((function(t){Ti.component(\"v-8d15385729d78\",t.default),r()}))}},{path:\"/index.html\",redirect:\"/\"},{name:\"v-b9611195369bf\",path:\"/api/\",component:ul,beforeEnter:function(t,e,r){n.e(5).then(n.bind(null,237)).then((function(t){Ti.component(\"v-b9611195369bf\",t.default),r()}))}},{path:\"/api/index.html\",redirect:\"/api/\"},{name:\"v-133f824e97633\",path:\"/guide/component.html\",component:ul,beforeEnter:function(t,e,r){n.e(6).then(n.bind(null,238)).then((function(t){Ti.component(\"v-133f824e97633\",t.default),r()}))}},{name:\"v-c790b6db9ce05\",path:\"/guide/datetime.html\",component:ul,beforeEnter:function(t,e,r){n.e(7).then(n.bind(null,239)).then((function(t){Ti.component(\"v-c790b6db9ce05\",t.default),r()}))}},{name:\"v-7100354b5ed77\",path:\"/guide/directive.html\",component:ul,beforeEnter:function(t,e,r){n.e(8).then(n.bind(null,240)).then((function(t){Ti.component(\"v-7100354b5ed77\",t.default),r()}))}},{name:\"v-d45ef4c59c58\",path:\"/guide/fallback.html\",component:ul,beforeEnter:function(t,e,r){n.e(9).then(n.bind(null,241)).then((function(t){Ti.component(\"v-d45ef4c59c58\",t.default),r()}))}},{name:\"v-2c680f126d38\",path:\"/guide/formatting.html\",component:ul,beforeEnter:function(t,e,r){n.e(10).then(n.bind(null,242)).then((function(t){Ti.component(\"v-2c680f126d38\",t.default),r()}))}},{name:\"v-1c15c7c846801\",path:\"/guide/hot-reload.html\",component:ul,beforeEnter:function(t,e,r){n.e(11).then(n.bind(null,243)).then((function(t){Ti.component(\"v-1c15c7c846801\",t.default),r()}))}},{name:\"v-41420ce27fb8\",path:\"/guide/interpolation.html\",component:ul,beforeEnter:function(t,e,r){n.e(12).then(n.bind(null,244)).then((function(t){Ti.component(\"v-41420ce27fb8\",t.default),r()}))}},{name:\"v-6ff85c655f73e\",path:\"/guide/lazy-loading.html\",component:ul,beforeEnter:function(t,e,r){n.e(13).then(n.bind(null,245)).then((function(t){Ti.component(\"v-6ff85c655f73e\",t.default),r()}))}},{name:\"v-cd0819c764bc\",path:\"/guide/locale.html\",component:ul,beforeEnter:function(t,e,r){n.e(14).then(n.bind(null,246)).then((function(t){Ti.component(\"v-cd0819c764bc\",t.default),r()}))}},{name:\"v-9d66ca7f2dbd2\",path:\"/guide/messages.html\",component:ul,beforeEnter:function(t,e,r){n.e(15).then(n.bind(null,247)).then((function(t){Ti.component(\"v-9d66ca7f2dbd2\",t.default),r()}))}},{name:\"v-6665886c16e78\",path:\"/guide/number.html\",component:ul,beforeEnter:function(t,e,r){n.e(16).then(n.bind(null,248)).then((function(t){Ti.component(\"v-6665886c16e78\",t.default),r()}))}},{name:\"v-76f1c11be5fd2\",path:\"/guide/pluralization.html\",component:ul,beforeEnter:function(t,e,r){n.e(17).then(n.bind(null,249)).then((function(t){Ti.component(\"v-76f1c11be5fd2\",t.default),r()}))}},{name:\"v-36b37c4c4e7ad\",path:\"/guide/sfc.html\",component:ul,beforeEnter:function(t,e,r){n.e(18).then(n.bind(null,250)).then((function(t){Ti.component(\"v-36b37c4c4e7ad\",t.default),r()}))}},{name:\"v-ae62efdc40e54\",path:\"/guide/tooling.html\",component:ul,beforeEnter:function(t,e,r){n.e(19).then(n.bind(null,251)).then((function(t){Ti.component(\"v-ae62efdc40e54\",t.default),r()}))}},{name:\"v-0604f93daa4dd\",path:\"/installation.html\",component:ul,beforeEnter:function(t,e,r){n.e(20).then(n.bind(null,252)).then((function(t){Ti.component(\"v-0604f93daa4dd\",t.default),r()}))}},{name:\"v-1fab3d6f9aff7\",path:\"/introduction.html\",component:ul,beforeEnter:function(t,e,r){n.e(21).then(n.bind(null,253)).then((function(t){Ti.component(\"v-1fab3d6f9aff7\",t.default),r()}))}},{name:\"v-608f16f241bce\",path:\"/legacy/\",component:ul,beforeEnter:function(t,e,r){n.e(22).then(n.bind(null,254)).then((function(t){Ti.component(\"v-608f16f241bce\",t.default),r()}))}},{path:\"/legacy/index.html\",redirect:\"/legacy/\"},{name:\"v-03ff12f9b60dd\",path:\"/legacy/v5.html\",component:ul,beforeEnter:function(t,e,r){n.e(23).then(n.bind(null,255)).then((function(t){Ti.component(\"v-03ff12f9b60dd\",t.default),r()}))}},{name:\"v-b82a23b6b42c\",path:\"/ru/\",component:ul,beforeEnter:function(t,e,r){n.e(24).then(n.bind(null,256)).then((function(t){Ti.component(\"v-b82a23b6b42c\",t.default),r()}))}},{path:\"/ru/index.html\",redirect:\"/ru/\"},{name:\"v-c74ddaf9316ce\",path:\"/ru/api/\",component:ul,beforeEnter:function(t,e,r){n.e(25).then(n.bind(null,257)).then((function(t){Ti.component(\"v-c74ddaf9316ce\",t.default),r()}))}},{path:\"/ru/api/index.html\",redirect:\"/ru/api/\"},{name:\"v-3b10ee88ee508\",path:\"/ru/guide/component.html\",component:ul,beforeEnter:function(t,e,r){n.e(26).then(n.bind(null,258)).then((function(t){Ti.component(\"v-3b10ee88ee508\",t.default),r()}))}},{name:\"v-10231dd8fcaf1\",path:\"/ru/guide/datetime.html\",component:ul,beforeEnter:function(t,e,r){n.e(27).then(n.bind(null,259)).then((function(t){Ti.component(\"v-10231dd8fcaf1\",t.default),r()}))}},{name:\"v-cb6f89c0b8de1\",path:\"/ru/guide/directive.html\",component:ul,beforeEnter:function(t,e,r){n.e(28).then(n.bind(null,260)).then((function(t){Ti.component(\"v-cb6f89c0b8de1\",t.default),r()}))}},{name:\"v-5f55d3083255\",path:\"/ru/guide/fallback.html\",component:ul,beforeEnter:function(t,e,r){n.e(29).then(n.bind(null,261)).then((function(t){Ti.component(\"v-5f55d3083255\",t.default),r()}))}},{name:\"v-4ba15fbf369ef\",path:\"/ru/guide/formatting.html\",component:ul,beforeEnter:function(t,e,r){n.e(30).then(n.bind(null,262)).then((function(t){Ti.component(\"v-4ba15fbf369ef\",t.default),r()}))}},{name:\"v-89f67f3a05f3c\",path:\"/ru/guide/hot-reload.html\",component:ul,beforeEnter:function(t,e,r){n.e(31).then(n.bind(null,263)).then((function(t){Ti.component(\"v-89f67f3a05f3c\",t.default),r()}))}},{name:\"v-26231bc8e8b48\",path:\"/ru/guide/interpolation.html\",component:ul,beforeEnter:function(t,e,r){n.e(32).then(n.bind(null,264)).then((function(t){Ti.component(\"v-26231bc8e8b48\",t.default),r()}))}},{name:\"v-74f2f7b64f894\",path:\"/ru/guide/lazy-loading.html\",component:ul,beforeEnter:function(t,e,r){n.e(33).then(n.bind(null,265)).then((function(t){Ti.component(\"v-74f2f7b64f894\",t.default),r()}))}},{name:\"v-b2f387c044859\",path:\"/ru/guide/locale.html\",component:ul,beforeEnter:function(t,e,r){n.e(34).then(n.bind(null,266)).then((function(t){Ti.component(\"v-b2f387c044859\",t.default),r()}))}},{name:\"v-6695734128c03\",path:\"/ru/guide/messages.html\",component:ul,beforeEnter:function(t,e,r){n.e(35).then(n.bind(null,267)).then((function(t){Ti.component(\"v-6695734128c03\",t.default),r()}))}},{name:\"v-ad6b38f21b4cb\",path:\"/ru/guide/number.html\",component:ul,beforeEnter:function(t,e,r){n.e(36).then(n.bind(null,268)).then((function(t){Ti.component(\"v-ad6b38f21b4cb\",t.default),r()}))}},{name:\"v-b9eb56e42af1\",path:\"/ru/guide/pluralization.html\",component:ul,beforeEnter:function(t,e,r){n.e(37).then(n.bind(null,269)).then((function(t){Ti.component(\"v-b9eb56e42af1\",t.default),r()}))}},{name:\"v-24b00e6060d43\",path:\"/ru/guide/sfc.html\",component:ul,beforeEnter:function(t,e,r){n.e(38).then(n.bind(null,270)).then((function(t){Ti.component(\"v-24b00e6060d43\",t.default),r()}))}},{name:\"v-3b2bcd4ce1b6d\",path:\"/ru/guide/tooling.html\",component:ul,beforeEnter:function(t,e,r){n.e(39).then(n.bind(null,271)).then((function(t){Ti.component(\"v-3b2bcd4ce1b6d\",t.default),r()}))}},{name:\"v-f3357fd95d666\",path:\"/ru/installation.html\",component:ul,beforeEnter:function(t,e,r){n.e(40).then(n.bind(null,272)).then((function(t){Ti.component(\"v-f3357fd95d666\",t.default),r()}))}},{name:\"v-88a3f8817a5c4\",path:\"/ru/introduction.html\",component:ul,beforeEnter:function(t,e,r){n.e(41).then(n.bind(null,273)).then((function(t){Ti.component(\"v-88a3f8817a5c4\",t.default),r()}))}},{name:\"v-09b3f4e44a9ca\",path:\"/ru/legacy/\",component:ul,beforeEnter:function(t,e,r){n.e(42).then(n.bind(null,274)).then((function(t){Ti.component(\"v-09b3f4e44a9ca\",t.default),r()}))}},{path:\"/ru/legacy/index.html\",redirect:\"/ru/legacy/\"},{name:\"v-6e9ce9df194a6\",path:\"/ru/legacy/v5.html\",component:ul,beforeEnter:function(t,e,r){n.e(43).then(n.bind(null,275)).then((function(t){Ti.component(\"v-6e9ce9df194a6\",t.default),r()}))}},{name:\"v-ffa435311637\",path:\"/ru/started.html\",component:ul,beforeEnter:function(t,e,r){n.e(44).then(n.bind(null,276)).then((function(t){Ti.component(\"v-ffa435311637\",t.default),r()}))}},{name:\"v-0a7e7f368dd6f\",path:\"/started.html\",component:ul,beforeEnter:function(t,e,r){n.e(45).then(n.bind(null,277)).then((function(t){Ti.component(\"v-0a7e7f368dd6f\",t.default),r()}))}},{name:\"v-0f97b5f49b0a3\",path:\"/zh/\",component:ul,beforeEnter:function(t,e,r){n.e(46).then(n.bind(null,278)).then((function(t){Ti.component(\"v-0f97b5f49b0a3\",t.default),r()}))}},{path:\"/zh/index.html\",redirect:\"/zh/\"},{name:\"v-d11ddda9e82b3\",path:\"/zh/api/\",component:ul,beforeEnter:function(t,e,r){n.e(47).then(n.bind(null,279)).then((function(t){Ti.component(\"v-d11ddda9e82b3\",t.default),r()}))}},{path:\"/zh/api/index.html\",redirect:\"/zh/api/\"},{name:\"v-54cb671482c07\",path:\"/zh/guide/component.html\",component:ul,beforeEnter:function(t,e,r){n.e(48).then(n.bind(null,280)).then((function(t){Ti.component(\"v-54cb671482c07\",t.default),r()}))}},{name:\"v-63abb1ccfa931\",path:\"/zh/guide/datetime.html\",component:ul,beforeEnter:function(t,e,r){n.e(49).then(n.bind(null,281)).then((function(t){Ti.component(\"v-63abb1ccfa931\",t.default),r()}))}},{name:\"v-56e04ec301076\",path:\"/zh/guide/directive.html\",component:ul,beforeEnter:function(t,e,r){n.e(50).then(n.bind(null,282)).then((function(t){Ti.component(\"v-56e04ec301076\",t.default),r()}))}},{name:\"v-ee9d89b7acd81\",path:\"/zh/guide/fallback.html\",component:ul,beforeEnter:function(t,e,r){n.e(51).then(n.bind(null,283)).then((function(t){Ti.component(\"v-ee9d89b7acd81\",t.default),r()}))}},{name:\"v-7ef0198d1b05f\",path:\"/zh/guide/formatting.html\",component:ul,beforeEnter:function(t,e,r){n.e(52).then(n.bind(null,284)).then((function(t){Ti.component(\"v-7ef0198d1b05f\",t.default),r()}))}},{name:\"v-07d5312f71d27\",path:\"/zh/guide/hot-reload.html\",component:ul,beforeEnter:function(t,e,r){n.e(53).then(n.bind(null,285)).then((function(t){Ti.component(\"v-07d5312f71d27\",t.default),r()}))}},{name:\"v-b1cd9591d1034\",path:\"/zh/guide/interpolation.html\",component:ul,beforeEnter:function(t,e,r){n.e(54).then(n.bind(null,286)).then((function(t){Ti.component(\"v-b1cd9591d1034\",t.default),r()}))}},{name:\"v-bbf5c21bda7b\",path:\"/zh/guide/lazy-loading.html\",component:ul,beforeEnter:function(t,e,r){n.e(55).then(n.bind(null,287)).then((function(t){Ti.component(\"v-bbf5c21bda7b\",t.default),r()}))}},{name:\"v-7ed9b8e9c3d4a\",path:\"/zh/guide/locale.html\",component:ul,beforeEnter:function(t,e,r){n.e(56).then(n.bind(null,288)).then((function(t){Ti.component(\"v-7ed9b8e9c3d4a\",t.default),r()}))}},{name:\"v-e82b265a0e7c4\",path:\"/zh/guide/messages.html\",component:ul,beforeEnter:function(t,e,r){n.e(57).then(n.bind(null,289)).then((function(t){Ti.component(\"v-e82b265a0e7c4\",t.default),r()}))}},{name:\"v-26ef59603b192\",path:\"/zh/guide/number.html\",component:ul,beforeEnter:function(t,e,r){n.e(58).then(n.bind(null,290)).then((function(t){Ti.component(\"v-26ef59603b192\",t.default),r()}))}},{name:\"v-18c815ac181bf\",path:\"/zh/guide/pluralization.html\",component:ul,beforeEnter:function(t,e,r){n.e(59).then(n.bind(null,291)).then((function(t){Ti.component(\"v-18c815ac181bf\",t.default),r()}))}},{name:\"v-09a1e66f0d6b6\",path:\"/zh/guide/sfc.html\",component:ul,beforeEnter:function(t,e,r){n.e(60).then(n.bind(null,292)).then((function(t){Ti.component(\"v-09a1e66f0d6b6\",t.default),r()}))}},{name:\"v-58d8a29362b3c\",path:\"/zh/guide/tooling.html\",component:ul,beforeEnter:function(t,e,r){n.e(61).then(n.bind(null,293)).then((function(t){Ti.component(\"v-58d8a29362b3c\",t.default),r()}))}},{name:\"v-040b0917ad328\",path:\"/zh/installation.html\",component:ul,beforeEnter:function(t,e,r){n.e(62).then(n.bind(null,294)).then((function(t){Ti.component(\"v-040b0917ad328\",t.default),r()}))}},{name:\"v-83db497acc1c\",path:\"/zh/introduction.html\",component:ul,beforeEnter:function(t,e,r){n.e(63).then(n.bind(null,295)).then((function(t){Ti.component(\"v-83db497acc1c\",t.default),r()}))}},{name:\"v-d16314ad662e1\",path:\"/zh/legacy/\",component:ul,beforeEnter:function(t,e,r){n.e(64).then(n.bind(null,296)).then((function(t){Ti.component(\"v-d16314ad662e1\",t.default),r()}))}},{path:\"/zh/legacy/index.html\",redirect:\"/zh/legacy/\"},{name:\"v-39f1a0d693a8d\",path:\"/zh/legacy/v5.html\",component:ul,beforeEnter:function(t,e,r){n.e(65).then(n.bind(null,297)).then((function(t){Ti.component(\"v-39f1a0d693a8d\",t.default),r()}))}},{name:\"v-d664b87decf08\",path:\"/zh/started.html\",component:ul,beforeEnter:function(t,e,r){n.e(66).then(n.bind(null,298)).then((function(t){Ti.component(\"v-d664b87decf08\",t.default),r()}))}},{path:\"*\",component:pl}],yl={title:\"\",description:\"\",base:\"/vue-i18n/\",pages:[{key:\"v-8d15385729d78\",path:\"/\",lastUpdated:1587538949e3,title:\"Home\",frontmatter:{home:!0,heroImage:\"./vue-i18n-logo.png\",actionText:\"Get Started →\",actionLink:\"introduction.md\",footer:\"MIT Licensed | Copyright © 2020 kazuya kawaguchi\"}},{key:\"v-b9611195369bf\",path:\"/api/\",lastUpdated:1589491834e3,title:\"API references\",headers:[{level:2,title:\"Extension of Vue\",slug:\"extension-of-vue\"},{level:3,title:\"Vue constructor options\",slug:\"vue-constructor-options\"},{level:3,title:\"Vue injected methods\",slug:\"vue-injected-methods\"},{level:3,title:\"Injected properties\",slug:\"injected-properties\"},{level:2,title:\"VueI18n class\",slug:\"vuei18n-class\"},{level:3,title:\"Static properties\",slug:\"static-properties\"},{level:3,title:\"Constructor options\",slug:\"constructor-options\"},{level:3,title:\"Properties\",slug:\"properties\"},{level:3,title:\"Methods\",slug:\"methods\"},{level:2,title:\"Directives\",slug:\"directives\"},{level:3,title:\"v-t\",slug:\"v-t\"},{level:2,title:\"Components\",slug:\"components\"},{level:3,title:\"i18n functional component\",slug:\"i18n-functional-component\"},{level:3,title:\"i18n-n functional component\",slug:\"i18n-n-functional-component\"},{level:2,title:\"Special Attributes\",slug:\"special-attributes\"},{level:3,title:\"place\",slug:\"place\"}],frontmatter:{sidebar:\"auto\"}},{key:\"v-133f824e97633\",path:\"/guide/component.html\",lastUpdated:1571194192e3,title:\"Component based localization\",headers:[{level:2,title:\"Shared locale messages for components\",slug:\"shared-locale-messages-for-components\"},{level:2,title:\"Translation in functional component\",slug:\"translation-in-functional-component\"}]},{key:\"v-c790b6db9ce05\",path:\"/guide/datetime.html\",lastUpdated:1570068624e3,title:\"DateTime localization\"},{key:\"v-7100354b5ed77\",path:\"/guide/directive.html\",lastUpdated:15892166e5,title:\"Custom directive localization\",headers:[{level:2,title:\"String syntax\",slug:\"string-syntax\"},{level:2,title:\"Object syntax\",slug:\"object-syntax\"},{level:2,title:\"Use with transitions\",slug:\"use-with-transitions\"},{level:2,title:\"$t vs v-t\",slug:\"t-vs-v-t\"},{level:3,title:\"$t\",slug:\"t\"},{level:3,title:\"v-t\",slug:\"v-t\"}]},{key:\"v-d45ef4c59c58\",path:\"/guide/fallback.html\",lastUpdated:15892166e5,title:\"Fallback localization\",headers:[{level:2,title:\"Implicit fallback using locales\",slug:\"implicit-fallback-using-locales\"},{level:2,title:\"Explicit fallback with one locale\",slug:\"explicit-fallback-with-one-locale\"},{level:2,title:\"Explicit fallback with an array of locales\",slug:\"explicit-fallback-with-an-array-of-locales\"},{level:2,title:\"Explicit fallback with decision maps\",slug:\"explicit-fallback-with-decision-maps\"},{level:2,title:\"Fallback interpolation\",slug:\"fallback-interpolation\"}]},{key:\"v-2c680f126d38\",path:\"/guide/formatting.html\",lastUpdated:15892166e5,title:\"Formatting\",headers:[{level:2,title:\"Named formatting\",slug:\"named-formatting\"},{level:2,title:\"List formatting\",slug:\"list-formatting\"},{level:2,title:\"HTML formatting\",slug:\"html-formatting\"},{level:2,title:\"Support ruby on rails i18n format\",slug:\"support-ruby-on-rails-i18n-format\"},{level:2,title:\"Custom formatting\",slug:\"custom-formatting\"}]},{key:\"v-1c15c7c846801\",path:\"/guide/hot-reload.html\",lastUpdated:15892166e5,title:\"Hot reloading\",headers:[{level:2,title:\"Basic example\",slug:\"basic-example\"},{level:2,title:\"Advanced example\",slug:\"advanced-example\"}]},{key:\"v-41420ce27fb8\",path:\"/guide/interpolation.html\",lastUpdated:1589491834e3,title:\"Component interpolation\",headers:[{level:2,title:\"Basic Usage\",slug:\"basic-usage\"},{level:2,title:\"Slots syntax usage\",slug:\"slots-syntax-usage\"},{level:2,title:\"Places syntax usage\",slug:\"places-syntax-usage\"}]},{key:\"v-6ff85c655f73e\",path:\"/guide/lazy-loading.html\",lastUpdated:1570069947e3,title:\"Lazy loading translations\"},{key:\"v-cd0819c764bc\",path:\"/guide/locale.html\",lastUpdated:156363495e4,title:\"Locale changing\"},{key:\"v-9d66ca7f2dbd2\",path:\"/guide/messages.html\",lastUpdated:15892166e5,title:\"Locale messages syntax\",headers:[{level:2,title:\"Structure\",slug:\"structure\"},{level:2,title:\"Linked locale messages\",slug:\"linked-locale-messages\"},{level:3,title:\"Formatting linked locale messages\",slug:\"formatting-linked-locale-messages\"},{level:3,title:\"Grouping by brackets\",slug:\"grouping-by-brackets\"}]},{key:\"v-6665886c16e78\",path:\"/guide/number.html\",lastUpdated:1589491834e3,title:\"Number localization\",headers:[{level:2,title:\"Custom formatting\",slug:\"custom-formatting\"}]},{key:\"v-76f1c11be5fd2\",path:\"/guide/pluralization.html\",lastUpdated:1589193185e3,title:\"Pluralization\",headers:[{level:2,title:\"Accessing the number via the pre-defined argument\",slug:\"accessing-the-number-via-the-pre-defined-argument\"},{level:2,title:\"Custom pluralization\",slug:\"custom-pluralization\"}]},{key:\"v-36b37c4c4e7ad\",path:\"/guide/sfc.html\",lastUpdated:15892166e5,title:\"Single file components\",headers:[{level:2,title:\"Basic Usage\",slug:\"basic-usage\"},{level:2,title:\"Installing vue-i18n-loader\",slug:\"installing-vue-i18n-loader\"},{level:2,title:\"Webpack\",slug:\"webpack\"},{level:2,title:\"Vue CLI 3.0\",slug:\"vue-cli-3-0\"},{level:2,title:\"Laravel-Mix\",slug:\"laravel-mix\"},{level:2,title:\"YAML loading\",slug:\"yaml-loading\"},{level:2,title:\"Multiple custom blocks\",slug:\"multiple-custom-blocks\"},{level:2,title:\"Scoped style\",slug:\"scoped-style\"},{level:2,title:\"Custom blocks in functional component\",slug:\"custom-blocks-in-functional-component\"}]},{key:\"v-ae62efdc40e54\",path:\"/guide/tooling.html\",lastUpdated:1589378329e3,title:\"Tooling\",headers:[{level:2,title:\"Official tooling\",slug:\"official-tooling\"},{level:3,title:\"Vue CLI Plugin\",slug:\"vue-cli-plugin\"},{level:3,title:\"Nuxt Module\",slug:\"nuxt-module\"},{level:3,title:\"Webpack loader\",slug:\"webpack-loader\"},{level:3,title:\"ESLint Plugin\",slug:\"eslint-plugin\"},{level:3,title:\"Extensions\",slug:\"extensions\"},{level:2,title:\"3rd party tooling\",slug:\"_3rd-party-tooling\"},{level:3,title:\"BabelEdit\",slug:\"babeledit\"},{level:3,title:\"i18n Ally\",slug:\"i18n-ally\"},{level:3,title:\"i18nPlugin (intellij platform)\",slug:\"i18nplugin-intellij-platform\"}]},{key:\"v-0604f93daa4dd\",path:\"/installation.html\",lastUpdated:1589491834e3,title:\"Installation\",headers:[{level:2,title:\"Compatibility Note\",slug:\"compatibility-note\"},{level:2,title:\"Direct Download / CDN\",slug:\"direct-download-cdn\"},{level:2,title:\"NPM\",slug:\"npm\"},{level:2,title:\"Yarn\",slug:\"yarn\"},{level:2,title:\"Vue Cli 3.x\",slug:\"vue-cli-3-x\"},{level:2,title:\"Dev Build\",slug:\"dev-build\"},{level:2,title:\"Explanation of Different Builds\",slug:\"explanation-of-different-builds\"},{level:3,title:\"Terms\",slug:\"terms\"}]},{key:\"v-1fab3d6f9aff7\",path:\"/introduction.html\",lastUpdated:1587538949e3,title:\"Introduction\",headers:[{level:2,title:\"Sponsors\",slug:\"sponsors\"},{level:3,title:\"Silver\",slug:\"silver\"},{level:3,title:\"Bronze\",slug:\"bronze\"},{level:2,title:\"Become a Patreon\",slug:\"become-a-patreon\"}]},{key:\"v-608f16f241bce\",path:\"/legacy/\",lastUpdated:1569187561e3,title:\"Migration from v5.x\",headers:[{level:2,title:\"Global config\",slug:\"global-config\"},{level:3,title:\"lang  replaced\",slug:\"lang-replaced\"},{level:3,title:\"fallbackLang replaced\",slug:\"fallbacklang-replaced\"},{level:3,title:\"missingHandler replaced\",slug:\"missinghandler-replaced\"},{level:3,title:\"i18nFormatter replaced\",slug:\"i18nformatter-replaced\"},{level:2,title:\"Global methods\",slug:\"global-methods\"},{level:3,title:\"Vue.locale replaced\",slug:\"vue-locale-replaced\"},{level:3,title:\"Vue.t replaced\",slug:\"vue-t-replaced\"},{level:3,title:\"Vue.tc replaced\",slug:\"vue-tc-replaced\"},{level:3,title:\"Vue.te replaced\",slug:\"vue-te-replaced\"},{level:2,title:\"Constructor options\",slug:\"constructor-options\"},{level:3,title:\"locales replaced\",slug:\"locales-replaced\"},{level:2,title:\"Instance properties\",slug:\"instance-properties\"},{level:3,title:\"$lang replaced\",slug:\"lang-replaced-2\"},{level:2,title:\"Features\",slug:\"features\"},{level:3,title:\"Dynamic locale removed\",slug:\"dynamic-locale-removed\"}]},{key:\"v-03ff12f9b60dd\",path:\"/legacy/v5.html\",lastUpdated:1549377351e3,title:\"documentation for v5.x\"},{key:\"v-b82a23b6b42c\",path:\"/ru/\",lastUpdated:158881597e4,title:\"Home\",frontmatter:{home:!0,heroImage:\"./../vue-i18n-logo.png\",actionText:\"Введение →\",actionLink:\"introduction.md\",footer:\"MIT Licensed | Copyright © 2020 kazuya kawaguchi\"}},{key:\"v-c74ddaf9316ce\",path:\"/ru/api/\",lastUpdated:15892166e5,title:\"Справочник API\",headers:[{level:2,title:\"Расширение прототипа Vue\",slug:\"расширение-прототипа-vue\"},{level:3,title:\"Опции конструктора Vue\",slug:\"опции-конструктора-vue\"},{level:3,title:\"Внедряемые методы\",slug:\"внедряемые-методы\"},{level:3,title:\"Внедряемые свойства\",slug:\"внедряемые-свойства\"},{level:2,title:\"Класс VueI18n\",slug:\"кnасс-vuei18n\"},{level:3,title:\"Статические свойства\",slug:\"статические-свойства\"},{level:3,title:\"Опции конструктора\",slug:\"опции-конструктора\"},{level:3,title:\"Свойства\",slug:\"свойства\"},{level:3,title:\"Методы\",slug:\"методы\"},{level:2,title:\"Директивы\",slug:\"директивы\"},{level:3,title:\"v-t\",slug:\"v-t\"},{level:2,title:\"Компоненты\",slug:\"компоненты\"},{level:3,title:\"Функциональный компонент i18n\",slug:\"функционаnьный-компонент-i18n\"},{level:3,title:\"Функциональный компонент i18n-n\",slug:\"функционаnьный-компонент-i18n-n\"},{level:2,title:\"Специальный атрибуты\",slug:\"специаnьный-атрибуты\"},{level:3,title:\"place\",slug:\"place\"}],frontmatter:{sidebar:\"auto\"}},{key:\"v-3b10ee88ee508\",path:\"/ru/guide/component.html\",lastUpdated:158881597e4,title:\"Локализация на основе компонентов\",headers:[{level:2,title:\"Общие сообщения локализации для компонентов\",slug:\"общие-сообщения-nокаnизации-дnя-компонентов\"},{level:2,title:\"Локализация в функциональных компонентах\",slug:\"локаnизация-в-функционаnьных-компонентах\"}]},{key:\"v-10231dd8fcaf1\",path:\"/ru/guide/datetime.html\",lastUpdated:158881597e4,title:\"Локализация дат\"},{key:\"v-cb6f89c0b8de1\",path:\"/ru/guide/directive.html\",lastUpdated:158881597e4,title:\"Пользовательская директива\",headers:[{level:2,title:\"Строковый синтаксис\",slug:\"строковый-синтаксис\"},{level:2,title:\"Объектный синтаксис\",slug:\"объектный-синтаксис\"},{level:2,title:\"Использование с transition\",slug:\"испоnьзование-с-transition\"},{level:2,title:\"$t или v-t\",slug:\"t-иnи-v-t\"},{level:3,title:\"$t\",slug:\"t\"},{level:3,title:\"v-t\",slug:\"v-t\"}]},{key:\"v-5f55d3083255\",path:\"/ru/guide/fallback.html\",lastUpdated:158881597e4,title:\"Запасная локализация\",headers:[{level:2,title:\"Неявное определение запасных локализаций при использовании локалей\",slug:\"неявное-опредеnение-запасных-nокаnизаций-при-испоnьзовании-nокаnей\"},{level:2,title:\"Явное определение одной локали запасной локализации\",slug:\"явное-опредеnение-одной-nокаnи-запасной-nокаnизации\"},{level:2,title:\"Явное определение запасной локали с помощью массива\",slug:\"явное-опредеnение-запасной-nокаnи-с-помощью-массива\"},{level:2,title:\"Явное определение запасной локали с помощью объекта\",slug:\"явное-опредеnение-запасной-nокаnи-с-помощью-объекта\"},{level:2,title:\"Резервная интерполяция\",slug:\"резервная-интерпоnяция\"}]},{key:\"v-4ba15fbf369ef\",path:\"/ru/guide/formatting.html\",lastUpdated:158881597e4,title:\"Формат сообщений локализации\",headers:[{level:2,title:\"Именованный формат\",slug:\"именованный-формат\"},{level:2,title:\"Формат списков\",slug:\"формат-списков\"},{level:2,title:\"HTML формат\",slug:\"html-формат\"},{level:2,title:\"Формат ruby on rails i18n\",slug:\"формат-ruby-on-rails-i18n\"},{level:2,title:\"Пользовательский формат\",slug:\"поnьзоватеnьский-формат\"}]},{key:\"v-89f67f3a05f3c\",path:\"/ru/guide/hot-reload.html\",lastUpdated:158881597e4,title:\"Горячая перезагрузка переводов\",headers:[{level:2,title:\"Простой пример\",slug:\"простой-пример\"},{level:2,title:\"Продвинутый пример\",slug:\"продвинутый-пример\"}]},{key:\"v-26231bc8e8b48\",path:\"/ru/guide/interpolation.html\",lastUpdated:158881597e4,title:\"Интерполяция компонента\",headers:[{level:2,title:\"Базовое использование\",slug:\"базовое-испоnьзование\"},{level:2,title:\"Использование синтаксиса слотов\",slug:\"испоnьзование-синтаксиса-сnотов\"},{level:2,title:\"Использование синтаксиса places\",slug:\"испоnьзование-синтаксиса-places\"}]},{key:\"v-74f2f7b64f894\",path:\"/ru/guide/lazy-loading.html\",lastUpdated:158881597e4,title:\"Ленивая загрузка переводов\"},{key:\"v-b2f387c044859\",path:\"/ru/guide/locale.html\",lastUpdated:158881597e4,title:\"Переключение локализации\"},{key:\"v-6695734128c03\",path:\"/ru/guide/messages.html\",lastUpdated:158881597e4,title:\"Синтаксис сообщений локализации\",headers:[{level:2,title:\"Структура\",slug:\"структура\"},{level:2,title:\"Связанные сообщения локализации\",slug:\"связанные-сообщения-nокаnизации\"},{level:3,title:\"Форматирование связанных сообщений локализации\",slug:\"форматирование-связанных-сообщений-nокаnизации\"},{level:3,title:\"Группировка с помощью скобок\",slug:\"группировка-с-помощью-скобок\"}]},{key:\"v-ad6b38f21b4cb\",path:\"/ru/guide/number.html\",lastUpdated:158881597e4,title:\"Локализация чисел\",headers:[{level:2,title:\"Пользовательское форматирование\",slug:\"поnьзоватеnьское-форматирование\"}]},{key:\"v-b9eb56e42af1\",path:\"/ru/guide/pluralization.html\",lastUpdated:158881597e4,title:\"Плюрализация\",headers:[{level:2,title:\"Аргумент для доступа к числу\",slug:\"аргумент-дnя-доступа-к-чисnу\"},{level:2,title:\"Пользовательская плюрализация\",slug:\"поnьзоватеnьская-пnюраnизация\"}]},{key:\"v-24b00e6060d43\",path:\"/ru/guide/sfc.html\",lastUpdated:158881597e4,title:\"Однофайловые компоненты\",headers:[{level:2,title:\"Базовое использование\",slug:\"базовое-испоnьзование\"},{level:2,title:\"Установка vue-i18n-loader\",slug:\"установка-vue-i18n-loader\"},{level:2,title:\"Webpack\",slug:\"webpack\"},{level:2,title:\"Vue CLI 3.0\",slug:\"vue-cli-3-0\"},{level:2,title:\"Laravel-Mix\",slug:\"laravel-mix\"},{level:2,title:\"Загрузка YAML\",slug:\"загрузка-yaml\"},{level:2,title:\"Несколько пользовательских блоков\",slug:\"нескоnько-поnьзоватеnьских-бnоков\"},{level:2,title:\"Локальные стили\",slug:\"локаnьные-стиnи\"},{level:2,title:\"Пользовательские блоки в функциональном компоненте\",slug:\"поnьзоватеnьские-бnоки-в-функционаnьном-компоненте\"}]},{key:\"v-3b2bcd4ce1b6d\",path:\"/ru/guide/tooling.html\",lastUpdated:158881597e4,title:\"Инструментарий\",headers:[{level:2,title:\"Официальный инструментарий\",slug:\"официаnьный-инструментарий\"},{level:3,title:\"Плагин для Vue CLI\",slug:\"пnагин-дnя-vue-cli\"},{level:3,title:\"Модуль для Nuxt\",slug:\"модуnь-дnя-nuxt\"},{level:3,title:\"Загрузчик для Webpack\",slug:\"загрузчик-дnя-webpack\"},{level:3,title:\"Плагин для ESLint\",slug:\"пnагин-дnя-eslint\"},{level:3,title:\"Расширения\",slug:\"расширения\"},{level:2,title:\"Сторонние разработки\",slug:\"сторонние-разработки\"},{level:3,title:\"BabelEdit\",slug:\"babeledit\"},{level:3,title:\"i18n Ally\",slug:\"i18n-ally\"}]},{key:\"v-f3357fd95d666\",path:\"/ru/installation.html\",lastUpdated:158881597e4,title:\"Установка\",headers:[{level:2,title:\"Примечание совместимости\",slug:\"примечание-совместимости\"},{level:2,title:\"Загрузка файла / CDN\",slug:\"загрузка-файnа-cdn\"},{level:2,title:\"NPM\",slug:\"npm\"},{level:2,title:\"Yarn\",slug:\"yarn\"},{level:2,title:\"Vue CLI 3.x\",slug:\"vue-cli-3-x\"},{level:2,title:\"Dev-сборка\",slug:\"dev-сборка\"},{level:2,title:\"Отличия различных сборок\",slug:\"отnичия-разnичных-сборок\"},{level:3,title:\"Термины\",slug:\"термины\"}]},{key:\"v-88a3f8817a5c4\",path:\"/ru/introduction.html\",lastUpdated:158881597e4,title:\"Введение\",headers:[{level:2,title:\"Спонсоры\",slug:\"спонсоры\"},{level:3,title:\"Серебряные\",slug:\"серебряные\"},{level:2,title:\"Поддержите на Patreon\",slug:\"поддержите-на-patreon\"}]},{key:\"v-09b3f4e44a9ca\",path:\"/ru/legacy/\",lastUpdated:158881597e4,title:\"Миграция с версии v5.x\",headers:[{level:2,title:\"Глобальная конфигурация\",slug:\"гnобаnьная-конфигурация\"},{level:3,title:\"Заменён lang\",slug:\"заменён-lang\"},{level:3,title:\"Заменён fallbackLang\",slug:\"заменён-fallbacklang\"},{level:3,title:\"Заменён missingHandler\",slug:\"заменён-missinghandler\"},{level:3,title:\"Заменён i18nFormatter\",slug:\"заменён-i18nformatter\"},{level:2,title:\"Глобальные методы\",slug:\"гnобаnьные-методы\"},{level:3,title:\"Заменён Vue.locale\",slug:\"заменён-vue-locale\"},{level:3,title:\"Заменён Vue.t\",slug:\"заменён-vue-t\"},{level:3,title:\"Заменён Vue.tc\",slug:\"заменён-vue-tc\"},{level:3,title:\"Заменён Vue.te\",slug:\"заменён-vue-te\"},{level:2,title:\"Опции конструктора\",slug:\"опции-конструктора\"},{level:3,title:\"Заменён locales\",slug:\"заменён-locales\"},{level:2,title:\"Свойства экземпляра\",slug:\"свойства-экземпnяра\"},{level:3,title:\"Заменён \\\\$lang\",slug:\"заменён-lang-2\"},{level:2,title:\"Другие возможности\",slug:\"другие-возможности\"},{level:3,title:\"Динамическая локализация удалена\",slug:\"динамическая-nокаnизация-удаnена\"}]},{key:\"v-6e9ce9df194a6\",path:\"/ru/legacy/v5.html\",lastUpdated:158881597e4,title:\"Документация для версии v5.x\"},{key:\"v-ffa435311637\",path:\"/ru/started.html\",lastUpdated:158881597e4,title:\"Начало работы\",headers:[{level:2,title:\"HTML\",slug:\"html\"},{level:2,title:\"JavaScript\",slug:\"javascript\"}]},{key:\"v-0a7e7f368dd6f\",path:\"/started.html\",lastUpdated:1549377351e3,title:\"Getting started\",headers:[{level:2,title:\"HTML\",slug:\"html\"},{level:2,title:\"JavaScript\",slug:\"javascript\"}]},{key:\"v-0f97b5f49b0a3\",path:\"/zh/\",lastUpdated:1581762627e3,title:\"Home\",frontmatter:{home:!0,heroImage:\"./vue-i18n-logo.png\",actionText:\"快速上手 →\",actionLink:\"introduction.md\",footer:\"MIT Licensed | Copyright © 2020 kazuya kawaguchi\"}},{key:\"v-d11ddda9e82b3\",path:\"/zh/api/\",lastUpdated:15892166e5,title:\"API参考\",headers:[{level:2,title:\"扩展 Vue\",slug:\"扩展-vue\"},{level:3,title:\"Vue 构造函数选项\",slug:\"vue-构造函数选项\"},{level:3,title:\"Vue 注入方法\",slug:\"vue-注入方法\"},{level:3,title:\"注入属性\",slug:\"注入属性\"},{level:2,title:\"VueI18n 类\",slug:\"vuei18n-类\"},{level:3,title:\"静态属性\",slug:\"静态属性\"},{level:3,title:\"构造函数选项\",slug:\"构造函数选项\"},{level:3,title:\"Properties\",slug:\"properties\"},{level:3,title:\"方法\",slug:\"方法\"},{level:2,title:\"指令\",slug:\"指令\"},{level:3,title:\"v-t\",slug:\"v-t\"},{level:2,title:\"组件\",slug:\"组件\"},{level:3,title:\"i18n 函数式组件\",slug:\"i18n-函数式组件\"},{level:2,title:\"特殊属性\",slug:\"特殊属性\"},{level:3,title:\"地区\",slug:\"地区\"}],frontmatter:{sidebar:\"auto\"}},{key:\"v-54cb671482c07\",path:\"/zh/guide/component.html\",lastUpdated:1553681252e3,title:\"基于组件的本地化\",headers:[{level:2,title:\"函数式组件的翻译\",slug:\"函数式组件的翻译\"}]},{key:\"v-63abb1ccfa931\",path:\"/zh/guide/datetime.html\",lastUpdated:1553681252e3,title:\"日期时间本地化\"},{key:\"v-56e04ec301076\",path:\"/zh/guide/directive.html\",lastUpdated:1553681252e3,title:\"自定义指令本地化\",headers:[{level:2,title:\"字符串语法\",slug:\"字符串语法\"},{level:2,title:\"对象语法\",slug:\"对象语法\"},{level:2,title:\"使用翻译\",slug:\"使用翻译\"},{level:2,title:\"$t vs v-t\",slug:\"t-vs-v-t\"},{level:3,title:\"$t\",slug:\"t\"},{level:3,title:\"v-t\",slug:\"v-t\"}]},{key:\"v-ee9d89b7acd81\",path:\"/zh/guide/fallback.html\",lastUpdated:1582643854e3,title:\"回退本地化\",headers:[{level:2,title:\"回退插值\",slug:\"回退插值\"}]},{key:\"v-7ef0198d1b05f\",path:\"/zh/guide/formatting.html\",lastUpdated:156379338e4,title:\"格式化\",headers:[{level:2,title:\"具名格式\",slug:\"具名格式\"},{level:2,title:\"列表格式\",slug:\"列表格式\"},{level:2,title:\"HTML 格式化\",slug:\"html-格式化\"},{level:2,title:\"支持 ruby on rails 的 i18n 格式\",slug:\"支持-ruby-on-rails-的-i18n-格式\"},{level:2,title:\"自定义格式\",slug:\"自定义格式\"}]},{key:\"v-07d5312f71d27\",path:\"/zh/guide/hot-reload.html\",lastUpdated:15892166e5,title:\"热重载\"},{key:\"v-b1cd9591d1034\",path:\"/zh/guide/interpolation.html\",lastUpdated:1553681252e3,title:\"组件插值\",headers:[{level:2,title:\"基本用法\",slug:\"基本用法\"},{level:2,title:\"高级用法\",slug:\"高级用法\"}]},{key:\"v-bbf5c21bda7b\",path:\"/zh/guide/lazy-loading.html\",lastUpdated:156204953e4,title:\"延迟加载翻译\"},{key:\"v-7ed9b8e9c3d4a\",path:\"/zh/guide/locale.html\",lastUpdated:1553681252e3,title:\"语言环境变更\"},{key:\"v-e82b265a0e7c4\",path:\"/zh/guide/messages.html\",lastUpdated:1553681252e3,title:\"语言环境信息的语法\",headers:[{level:2,title:\"结构\",slug:\"结构\"},{level:2,title:\"Linked locale messages\",slug:\"linked-locale-messages\"},{level:3,title:\"按括号分组\",slug:\"按括号分组\"}]},{key:\"v-26ef59603b192\",path:\"/zh/guide/number.html\",lastUpdated:1553681252e3,title:\"数字本地化\"},{key:\"v-18c815ac181bf\",path:\"/zh/guide/pluralization.html\",lastUpdated:1586478639e3,title:\"复数\",headers:[{level:2,title:\"通过预定义的参数访问该数字\",slug:\"通过预定义的参数访问该数字\"},{level:2,title:\"自定义复数\",slug:\"自定义复数\"}]},{key:\"v-09a1e66f0d6b6\",path:\"/zh/guide/sfc.html\",lastUpdated:1553681252e3,title:\"单文件组件\",headers:[{level:2,title:\"基本用法\",slug:\"基本用法\"},{level:2,title:\"安装 vue-i18n-loader\",slug:\"安装-vue-i18n-loader\"},{level:2,title:\"Webpack\",slug:\"webpack\"},{level:2,title:\"Vue CLI 3.0\",slug:\"vue-cli-3-0\"},{level:2,title:\"Laravel-Mix\",slug:\"laravel-mix\"},{level:2,title:\"加载 YAML\",slug:\"加载-yaml\"},{level:2,title:\"多个自定义块\",slug:\"多个自定义块\"},{level:2,title:\"Scoped 风格\",slug:\"scoped-风格\"},{level:2,title:\"函数式组件中的自定义块\",slug:\"函数式组件中的自定义块\"}]},{key:\"v-58d8a29362b3c\",path:\"/zh/guide/tooling.html\",lastUpdated:1584581318e3,title:\"工具\",headers:[{level:2,title:\"官方工具\",slug:\"官方工具\"},{level:3,title:\"Vue Cli 插件\",slug:\"vue-cli-插件\"},{level:3,title:\"Webpack Loader\",slug:\"webpack-loader\"},{level:3,title:\"ESLint 插件\",slug:\"eslint-插件\"},{level:3,title:\"Extensions\",slug:\"extensions\"},{level:2,title:\"第三方工具\",slug:\"第三方工具\"},{level:3,title:\"BabelEdit\",slug:\"babeledit\"}]},{key:\"v-040b0917ad328\",path:\"/zh/installation.html\",lastUpdated:1553681252e3,title:\"安装\",headers:[{level:2,title:\"兼容性说明\",slug:\"兼容性说明\"},{level:2,title:\"直接下载 / CDN\",slug:\"直接下载-cdn\"},{level:2,title:\"NPM\",slug:\"npm\"},{level:2,title:\"Yarn\",slug:\"yarn\"},{level:2,title:\"Vue Cli 3.x\",slug:\"vue-cli-3-x\"},{level:2,title:\"开发版构建\",slug:\"开发版构建\"}]},{key:\"v-83db497acc1c\",path:\"/zh/introduction.html\",lastUpdated:1556556258e3,title:\"介绍\",headers:[{level:2,title:\"赞助商\",slug:\"赞助商\"},{level:3,title:\"白银赞助商\",slug:\"白银赞助商\"},{level:2,title:\"成为一名 Patreon 赞助商\",slug:\"成为一名-patreon-赞助商\"}]},{key:\"v-d16314ad662e1\",path:\"/zh/legacy/\",lastUpdated:1553681252e3,title:\"从 v5.x 迁移\",headers:[{level:2,title:\"全局配置\",slug:\"全局配置\"},{level:3,title:\"lang 已被替换\",slug:\"lang-已被替换\"},{level:3,title:\"fallbackLang 已被替换\",slug:\"fallbacklang-已被替换\"},{level:3,title:\"missingHandler 已被替换\",slug:\"missinghandler-已被替换\"},{level:3,title:\"i18nFormatter 已被替换\",slug:\"i18nformatter-已被替换\"},{level:2,title:\"全局方法\",slug:\"全局方法\"},{level:3,title:\"Vue.locale 已被替换\",slug:\"vue-locale-已被替换\"},{level:3,title:\"Vue.t 已被替换\",slug:\"vue-t-已被替换\"},{level:3,title:\"Vue.tc 已被替换\",slug:\"vue-tc-已被替换\"},{level:3,title:\"Vue.te 已被替换\",slug:\"vue-te-已被替换\"},{level:2,title:\"构造函数选项\",slug:\"构造函数选项\"},{level:3,title:\"locales 已被替换\",slug:\"locales-已被替换\"},{level:2,title:\"实例属性\",slug:\"实例属性\"},{level:3,title:\"$lang 已被替换\",slug:\"lang-已被替换-2\"},{level:2,title:\"特性\",slug:\"特性\"},{level:3,title:\"已删除动态语言环境\",slug:\"已删除动态语言环境\"}]},{key:\"v-39f1a0d693a8d\",path:\"/zh/legacy/v5.html\",lastUpdated:156379338e4,title:\"v5.x 版本的文档\"},{key:\"v-d664b87decf08\",path:\"/zh/started.html\",lastUpdated:1553681252e3,title:\"开始\",headers:[{level:2,title:\"HTML\",slug:\"html\"},{level:2,title:\"JavaScript\",slug:\"javascript\"}]}],themeConfig:{repo:\"kazupon/vue-i18n\",editLinks:!0,docsDir:\"vuepress\",locales:{\"/\":{label:\"English\",selectText:\"Languages\",editLinkText:\"Edit this page on GitHub\",lastUpdated:\"Last Updated\",nav:[{text:\"Learn\",items:[{text:\"Guide\",link:\"/guide/formatting\"},{text:\"API\",link:\"/api/\"}]},{text:\"Ecosystem\",items:[{text:\"Official Tooling\",items:[{text:\"Vue CLI Plugin\",link:\"https://github.com/kazupon/vue-cli-plugin-i18n\"},{text:\"Webpack Loader\",link:\"https://github.com/kazupon/vue-i18n-loader\"},{text:\"ESLint Plugin\",link:\"https://intlify.github.io/eslint-plugin-vue-i18n/\"},{text:\"Extensions\",link:\"https://github.com/kazupon/vue-i18n-extensions\"}]},{text:\"3rd Party Tooling\",items:[{text:\"BabelEdit\",link:\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\"},{text:\"i18n Ally\",link:\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\"}]}]},{text:\"Patreon\",link:\"https://www.patreon.com/kazupon\"},{text:\"Release Notes\",link:\"https://github.com/kazupon/vue-i18n/releases\"}],sidebar:[\"/introduction\",\"/started\",\"/installation\",{title:\"Guide\",collapsable:!1,children:[\"/guide/formatting\",\"/guide/pluralization\",\"/guide/datetime\",\"/guide/number\",\"/guide/messages\",\"/guide/fallback\",\"/guide/component\",\"/guide/directive\",\"/guide/interpolation\",\"/guide/sfc\",\"/guide/hot-reload\",\"/guide/locale\",\"/guide/lazy-loading\",\"/guide/tooling\"]},{title:\"Legacy\",collapsable:!1,children:[\"/legacy/\",\"/legacy/v5\"]}]},\"/zh/\":{label:\"简体中文\",selectText:\"选择语言\",editLinkText:\"在 GitHub 上编辑此页\",lastUpdated:\"最近一次更新\",nav:[{text:\"学习\",items:[{text:\"指南\",link:\"/zh/guide/formatting\"},{text:\"API\",link:\"/zh/api/\"}]},{text:\"生态\",items:[{text:\"官方工具\",items:[{text:\"脚手架插件\",link:\"https://github.com/kazupon/vue-cli-plugin-i18n\"},{text:\"Webpack Loader\",link:\"https://github.com/kazupon/vue-i18n-loader\"},{text:\"ESLint 插件\",link:\"https://intlify.github.io/eslint-plugin-vue-i18n/\"},{text:\"扩展\",link:\"https://github.com/kazupon/vue-i18n-extensions\"}]},{text:\"翻译工具\",items:[{text:\"BabelEdit\",link:\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\"}]}]},{text:\"赞助\",link:\"https://www.patreon.com/kazupon\"},{text:\"发布日志\",link:\"https://github.com/kazupon/vue-i18n/releases\"}],sidebar:[\"/zh/introduction\",\"/zh/started\",\"/zh/installation\",{title:\"Guide\",collapsable:!1,children:[\"/zh/guide/formatting\",\"/zh/guide/pluralization\",\"/zh/guide/datetime\",\"/zh/guide/number\",\"/zh/guide/messages\",\"/zh/guide/fallback\",\"/zh/guide/component\",\"/zh/guide/directive\",\"/zh/guide/interpolation\",\"/zh/guide/sfc\",\"/zh/guide/hot-reload\",\"/zh/guide/locale\",\"/zh/guide/lazy-loading\",\"/zh/guide/tooling\"]},{title:\"Legacy\",collapsable:!1,children:[\"/zh/legacy/\",\"/zh/legacy/v5\"]}]},\"/ru/\":{label:\"Русский\",selectText:\"Переводы\",editLinkText:\"Изменить эту страницу на GitHub\",lastUpdated:\"Последнее обновление\",nav:[{text:\"Документация\",items:[{text:\"Руководство\",link:\"/ru/guide/formatting\"},{text:\"Справочник API\",link:\"/ru/api/\"}]},{text:\"Экосистема\",items:[{text:\"Оф. инструментарий\",items:[{text:\"Плагин для Vue CLI\",link:\"https://github.com/kazupon/vue-cli-plugin-i18n\"},{text:\"Загрузчик Webpack\",link:\"https://github.com/kazupon/vue-i18n-loader\"},{text:\"Плагин для ESLint\",link:\"https://intlify.github.io/eslint-plugin-vue-i18n/\"},{text:\"Расширения\",link:\"https://github.com/kazupon/vue-i18n-extensions\"}]},{text:\"Сторонние разработки\",items:[{text:\"BabelEdit\",link:\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\"},{text:\"i18n Ally\",link:\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\"}]}]},{text:\"Patreon\",link:\"https://www.patreon.com/kazupon\"},{text:\"История изменений\",link:\"https://github.com/kazupon/vue-i18n/releases\"}],sidebar:[\"/ru/introduction\",\"/ru/started\",\"/ru/installation\",{title:\"Руководство\",collapsable:!1,children:[\"/ru/guide/formatting\",\"/ru/guide/pluralization\",\"/ru/guide/datetime\",\"/ru/guide/number\",\"/ru/guide/messages\",\"/ru/guide/fallback\",\"/ru/guide/component\",\"/ru/guide/directive\",\"/ru/guide/interpolation\",\"/ru/guide/sfc\",\"/ru/guide/hot-reload\",\"/ru/guide/locale\",\"/ru/guide/lazy-loading\",\"/ru/guide/tooling\"]},{title:\"Устаревшие версии\",collapsable:!1,children:[\"/ru/legacy/\",\"/ru/legacy/v5\"]}]}}},locales:{\"/\":{lang:\"en-US\",title:\"Vue I18n\",description:\"Vue I18n is internationalization plugin for Vue.js\"},\"/zh/\":{lang:\"zh-CN\",title:\"Vue I18n\",description:\"Vue I18n 是 Vue.js 的国际化插件\"},\"/ru/\":{lang:\"ru-RU\",title:\"Vue I18n\",description:\"Vue I18n — плагин для интернационализации во Vue.js\"}}},bl={functional:!0,props:{custom:{type:Boolean,default:!0}},render:function(t,e){var n=e.parent,r=e.props,i=e.data;return t(n.$page.key,{class:[r.custom?\"custom\":\"\",i.class,i.staticClass],style:i.style})}},_l=(n(158),Object(Pa.a)({},(function(t,e){var n=e._c;return n(\"svg\",{staticClass:\"icon outbound\",attrs:{xmlns:\"http://www.w3.org/2000/svg\",\"aria-hidden\":\"true\",x:\"0px\",y:\"0px\",viewBox:\"0 0 100 100\",width:\"15\",height:\"15\"}},[n(\"path\",{attrs:{fill:\"currentColor\",d:\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"}}),e._v(\" \"),n(\"polygon\",{attrs:{fill:\"currentColor\",points:\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"}})])}),[],!0,null,null,null).exports);Promise.all([n.e(0),n.e(67)]).then(n.t.bind(null,233,7)),Ti.config.productionTip=!1,Ti.use(va),Ti.mixin(function(t){!function(t){t.pages.forEach((function(t){t.frontmatter||(t.frontmatter={})})),t.locales&&Object.keys(t.locales).forEach((function(e){t.locales[e].path=e}));Object.freeze(t)}(t);var e=new Ti({data:{siteData:t}});return{computed:{$site:function(){return e.siteData},$localeConfig:function(){var t,e,n=this.$site.locales,r=void 0===n?{}:n;for(var i in r)\"/\"===i?e=r[i]:0===this.$page.path.indexOf(i)&&(t=r[i]);return t||e||{}},$siteTitle:function(){return this.$localeConfig.title||this.$site.title||\"\"},$title:function(){var t=this.$page,e=this.$siteTitle,n=t.frontmatter.home?null:t.frontmatter.title||t.title;return e?n?n+\" | \"+e:e:n||\"VuePress\"},$description:function(){if(this.$page.frontmatter.meta){var t=this.$page.frontmatter.meta.filter((function(t){return\"description\"===t.name}))[0];if(t)return t.content}return this.$page.frontmatter.description||this.$localeConfig.description||this.$site.description||\"\"},$lang:function(){return this.$page.frontmatter.lang||this.$localeConfig.lang||\"en-US\"},$localePath:function(){return this.$localeConfig.path||\"/\"},$themeLocaleConfig:function(){return(this.$site.themeConfig.locales||{})[this.$localePath]||{}},$page:function(){return function(t,e){for(var n=0;n<t.length;n++){var r=t[n];if(r.path===e)return r}return{path:\"\",frontmatter:{}}}(this.$site.pages,this.$route.path)}}}}(yl)),Ti.component(\"Content\",bl),Ti.component(\"OutboundLink\",_l),Ti.component(\"Badge\",(function(){return Promise.all([n.e(0),n.e(2)]).then(n.bind(null,235))})),Ti.component(\"ClientOnly\",{functional:!0,render:function(t,e){var n=e.parent,r=e.children;if(n._isMounted)return r;n.$once(\"hook:mounted\",(function(){n.$forceUpdate()}))}}),Ti.prototype.$withBase=function(t){var e=this.$site.base;return\"/\"===t.charAt(0)?e+t.slice(1):t};n(160);var xl=function(){var t=new va({base:yl.base,mode:\"history\",fallback:!1,routes:gl,scrollBehavior:function(t,e,n){return n||(t.hash?!ya.disableScrollBehavior&&{selector:t.hash}:{x:0,y:0})}});t.beforeEach((function(t,e,n){/(\\/|\\.html)$/.test(t.path)?n():n(Object.assign({},t,{path:t.path+\"/\"}))}));var e={};return{app:new Ti(Object.assign(e,{router:t,render:function(t){return t(\"div\",{attrs:{id:\"app\"}},[t(\"router-view\",{ref:\"layout\"})])}})),router:t}}(),kl=xl.app,wl=xl.router;window.__VUEPRESS_VERSION__={version:\"0.14.11\",hash:\"6734e85\"},wl.onReady((function(){kl.$mount(\"#app\")}))}]);"
  },
  {
    "path": "docs/guide/component.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en-US\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Component based localization | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n is internationalization plugin for Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/6.b88753f1.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/component.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/component.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/component.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/component.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/component.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/component.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/introduction.html\" class=\"sidebar-link\">Introduction</a></li><li><a href=\"/vue-i18n/started.html\" class=\"sidebar-link\">Getting started</a></li><li><a href=\"/vue-i18n/installation.html\" class=\"sidebar-link\">Installation</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/guide/formatting.html\" class=\"sidebar-link\">Formatting</a></li><li><a href=\"/vue-i18n/guide/pluralization.html\" class=\"sidebar-link\">Pluralization</a></li><li><a href=\"/vue-i18n/guide/datetime.html\" class=\"sidebar-link\">DateTime localization</a></li><li><a href=\"/vue-i18n/guide/number.html\" class=\"sidebar-link\">Number localization</a></li><li><a href=\"/vue-i18n/guide/messages.html\" class=\"sidebar-link\">Locale messages syntax</a></li><li><a href=\"/vue-i18n/guide/fallback.html\" class=\"sidebar-link\">Fallback localization</a></li><li><a href=\"/vue-i18n/guide/component.html\" class=\"active sidebar-link\">Component based localization</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/component.html#shared-locale-messages-for-components\" class=\"sidebar-link\">Shared locale messages for components</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/component.html#translation-in-functional-component\" class=\"sidebar-link\">Translation in functional component</a></li></ul></li><li><a href=\"/vue-i18n/guide/directive.html\" class=\"sidebar-link\">Custom directive localization</a></li><li><a href=\"/vue-i18n/guide/interpolation.html\" class=\"sidebar-link\">Component interpolation</a></li><li><a href=\"/vue-i18n/guide/sfc.html\" class=\"sidebar-link\">Single file components</a></li><li><a href=\"/vue-i18n/guide/hot-reload.html\" class=\"sidebar-link\">Hot reloading</a></li><li><a href=\"/vue-i18n/guide/locale.html\" class=\"sidebar-link\">Locale changing</a></li><li><a href=\"/vue-i18n/guide/lazy-loading.html\" class=\"sidebar-link\">Lazy loading translations</a></li><li><a href=\"/vue-i18n/guide/tooling.html\" class=\"sidebar-link\">Tooling</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/legacy/\" class=\"sidebar-link\">Migration from v5.x</a></li><li><a href=\"/vue-i18n/legacy/v5.html\" class=\"sidebar-link\">documentation for v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"component-based-localization\"><a href=\"#component-based-localization\" class=\"header-anchor\">#</a> Component based localization</h1> <p>In general, locale info (e.g. <code>locale</code>,<code>messages</code>, etc) is set as constructor option of <code>VueI18n</code> instance and it sets <code>i18n</code> option as root Vue instance.</p> <p>Therefore you can globally translate using <code>$t</code> or <code>$tc</code> in the root Vue instance and any composed component. You can also manage locale info for each component separately, which might be more convenient due to Vue components oriented design.</p> <p>Component based localization example:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token comment\">// setup locale info for root Vue instance</span>\n<span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'ja'</span><span class=\"token punctuation\">,</span>\n  messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        hello<span class=\"token operator\">:</span> <span class=\"token string\">'hello world'</span><span class=\"token punctuation\">,</span>\n        greeting<span class=\"token operator\">:</span> <span class=\"token string\">'good morning'</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    ja<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        hello<span class=\"token operator\">:</span> <span class=\"token string\">'こんにちは、世界'</span><span class=\"token punctuation\">,</span>\n        greeting<span class=\"token operator\">:</span> <span class=\"token string\">'おはようございます'</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// Define component</span>\n<span class=\"token keyword\">const</span> Component1 <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  template<span class=\"token operator\">:</span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">\n    &lt;div class=&quot;container&quot;&gt;\n     &lt;p&gt;Component1 locale messages: {{ $t(&quot;message.hello&quot;) }}&lt;/p&gt;\n     &lt;p&gt;Fallback global locale messages: {{ $t(&quot;message.greeting&quot;) }}&lt;/p&gt;\n   &lt;/div&gt;</span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">,</span>\n  i18n<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> <span class=\"token comment\">// `i18n` option, setup locale info for component</span>\n    messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> hello<span class=\"token operator\">:</span> <span class=\"token string\">'hello component1'</span> <span class=\"token punctuation\">}</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      ja<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> hello<span class=\"token operator\">:</span> <span class=\"token string\">'こんにちは、component1'</span> <span class=\"token punctuation\">}</span> <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token punctuation\">,</span>\n  components<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    Component1\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>Template:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t(&quot;message.hello&quot;) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>component1</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>component1</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Outputs the following:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>こんにちは、世界<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>container<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>Component1 locale messages: こんにちは、component1<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>Fallback global locale messages: おはようございます<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>As in the example above, if the component doesn't have the locale message, it falls back to globally defined localization info. The component uses the language set in the root instance (in the above example: <code>locale: 'ja'</code>).</p> <p>Note that, by default, falling back to root locale generates two warnings in the console:</p> <div class=\"language-console extra-class\"><pre class=\"language-text\"><code>[vue-i18n] Value of key 'message.greeting' is not a string!\n[vue-i18n] Fall back to translate the keypath 'message.greeting' with root locale.\n</code></pre></div><p>To suppress these warnings (while keeping those which warn of the total absence of translation for the given key) set <code>silentFallbackWarn: true</code> when initializing the <code>VueI18n</code> instance.</p> <p>If you want to localize using the component locale, you can do that with <code>sync: false</code> and <code>locale</code> in the <code>i18n</code> option.</p> <h2 id=\"shared-locale-messages-for-components\"><a href=\"#shared-locale-messages-for-components\" class=\"header-anchor\">#</a> Shared locale messages for components</h2> <p>Sometimes you may want to import shared locale messages for certain components, not fallback from global locale messages (e.g. common messages of certain feature for components.</p> <p>You can use <code>sharedMessages</code> options of <code>i18n</code>.</p> <p>Common Locale Messages example:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">export</span> <span class=\"token keyword\">default</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    buttons<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      save<span class=\"token operator\">:</span> <span class=\"token string\">&quot;Save&quot;</span><span class=\"token punctuation\">,</span>\n      <span class=\"token comment\">// ...</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  ja<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    buttons<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      save<span class=\"token operator\">:</span> <span class=\"token string\">&quot;保存&quot;</span><span class=\"token punctuation\">,</span>\n      <span class=\"token comment\">// ...</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>Components:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">import</span> commonMessage <span class=\"token keyword\">from</span> <span class=\"token string\">'./locales/common'</span> <span class=\"token comment\">// import common locale messages</span>\n\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">default</span> <span class=\"token punctuation\">{</span>\n  name<span class=\"token operator\">:</span> <span class=\"token string\">'ServiceModal'</span><span class=\"token punctuation\">,</span>\n  template<span class=\"token operator\">:</span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">\n    &lt;div class=&quot;modal&quot;&gt;\n      &lt;div class=&quot;body&quot;&gt;\n        &lt;p&gt;This is good service&lt;/p&gt;\n      &lt;/div&gt;\n      &lt;div class=&quot;footer&quot;&gt;\n        &lt;button type=&quot;button&quot;&gt;{{ $t('buttons.save') }}&lt;/button&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  </span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">,</span>\n  i18n<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> <span class=\"token operator\">...</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    sharedMessages<span class=\"token operator\">:</span> commonMessages\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>If <code>sharedMessages</code> option is specified along with the <code>messages</code> option, those messages will be merged into locale messages into the VueI18n instance of the target component.</p> <h2 id=\"translation-in-functional-component\"><a href=\"#translation-in-functional-component\" class=\"header-anchor\">#</a> Translation in functional component</h2> <p>When using a functional component, all data (including props, children, slots, parent, etc.) is passed through the <code>context</code> containing the attributes, and it doesn't recognize the <code>this</code> scope, so when using the vue-i18n on functional components, you must refer to <code>$t</code> as <code>parent.$t</code>, check the example below:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code>...\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span>\n    <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>#<span class=\"token punctuation\">&quot;</span></span>\n    <span class=\"token attr-name\">target</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>_blank<span class=\"token punctuation\">&quot;</span></span>\n    <span class=\"token attr-name\">rel</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>noopener noreferrer<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>img</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span><span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">:alt</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>parent.$t('message.hello')<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n...\n</code></pre></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/guide/component.md\" target=\"_blank\" rel=\"noopener noreferrer\">Edit this page on GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Last Updated: </span> <span class=\"time\">10/16/2019, 4:49:52 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/guide/fallback.html\" class=\"prev\">\n          Fallback localization\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/guide/directive.html\">\n          Custom directive localization\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/6.b88753f1.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/guide/datetime.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en-US\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>DateTime localization | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n is internationalization plugin for Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/datetime.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/datetime.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/datetime.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/datetime.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/datetime.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/datetime.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/introduction.html\" class=\"sidebar-link\">Introduction</a></li><li><a href=\"/vue-i18n/started.html\" class=\"sidebar-link\">Getting started</a></li><li><a href=\"/vue-i18n/installation.html\" class=\"sidebar-link\">Installation</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/guide/formatting.html\" class=\"sidebar-link\">Formatting</a></li><li><a href=\"/vue-i18n/guide/pluralization.html\" class=\"sidebar-link\">Pluralization</a></li><li><a href=\"/vue-i18n/guide/datetime.html\" class=\"active sidebar-link\">DateTime localization</a></li><li><a href=\"/vue-i18n/guide/number.html\" class=\"sidebar-link\">Number localization</a></li><li><a href=\"/vue-i18n/guide/messages.html\" class=\"sidebar-link\">Locale messages syntax</a></li><li><a href=\"/vue-i18n/guide/fallback.html\" class=\"sidebar-link\">Fallback localization</a></li><li><a href=\"/vue-i18n/guide/component.html\" class=\"sidebar-link\">Component based localization</a></li><li><a href=\"/vue-i18n/guide/directive.html\" class=\"sidebar-link\">Custom directive localization</a></li><li><a href=\"/vue-i18n/guide/interpolation.html\" class=\"sidebar-link\">Component interpolation</a></li><li><a href=\"/vue-i18n/guide/sfc.html\" class=\"sidebar-link\">Single file components</a></li><li><a href=\"/vue-i18n/guide/hot-reload.html\" class=\"sidebar-link\">Hot reloading</a></li><li><a href=\"/vue-i18n/guide/locale.html\" class=\"sidebar-link\">Locale changing</a></li><li><a href=\"/vue-i18n/guide/lazy-loading.html\" class=\"sidebar-link\">Lazy loading translations</a></li><li><a href=\"/vue-i18n/guide/tooling.html\" class=\"sidebar-link\">Tooling</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/legacy/\" class=\"sidebar-link\">Migration from v5.x</a></li><li><a href=\"/vue-i18n/legacy/v5.html\" class=\"sidebar-link\">documentation for v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"datetime-localization\"><a href=\"#datetime-localization\" class=\"header-anchor\">#</a> DateTime localization</h1> <div class=\"tip custom-block\"><p class=\"custom-block-title\">Support Version</p> <p>🆕 7.0+</p></div> <p>You can localize the datetime with your definition formats.</p> <p>DateTime formats the below:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> dateTimeFormats <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token string\">'en-US'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    short<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      year<span class=\"token operator\">:</span> <span class=\"token string\">'numeric'</span><span class=\"token punctuation\">,</span> month<span class=\"token operator\">:</span> <span class=\"token string\">'short'</span><span class=\"token punctuation\">,</span> day<span class=\"token operator\">:</span> <span class=\"token string\">'numeric'</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    long<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      year<span class=\"token operator\">:</span> <span class=\"token string\">'numeric'</span><span class=\"token punctuation\">,</span> month<span class=\"token operator\">:</span> <span class=\"token string\">'short'</span><span class=\"token punctuation\">,</span> day<span class=\"token operator\">:</span> <span class=\"token string\">'numeric'</span><span class=\"token punctuation\">,</span>\n      weekday<span class=\"token operator\">:</span> <span class=\"token string\">'short'</span><span class=\"token punctuation\">,</span> hour<span class=\"token operator\">:</span> <span class=\"token string\">'numeric'</span><span class=\"token punctuation\">,</span> minute<span class=\"token operator\">:</span> <span class=\"token string\">'numeric'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token string\">'ja-JP'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    short<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      year<span class=\"token operator\">:</span> <span class=\"token string\">'numeric'</span><span class=\"token punctuation\">,</span> month<span class=\"token operator\">:</span> <span class=\"token string\">'short'</span><span class=\"token punctuation\">,</span> day<span class=\"token operator\">:</span> <span class=\"token string\">'numeric'</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    long<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      year<span class=\"token operator\">:</span> <span class=\"token string\">'numeric'</span><span class=\"token punctuation\">,</span> month<span class=\"token operator\">:</span> <span class=\"token string\">'short'</span><span class=\"token punctuation\">,</span> day<span class=\"token operator\">:</span> <span class=\"token string\">'numeric'</span><span class=\"token punctuation\">,</span>\n      weekday<span class=\"token operator\">:</span> <span class=\"token string\">'short'</span><span class=\"token punctuation\">,</span> hour<span class=\"token operator\">:</span> <span class=\"token string\">'numeric'</span><span class=\"token punctuation\">,</span> minute<span class=\"token operator\">:</span> <span class=\"token string\">'numeric'</span><span class=\"token punctuation\">,</span> hour12<span class=\"token operator\">:</span> <span class=\"token boolean\">true</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>As seen above, you can define named datetime format (e.g. <code>short</code>, <code>long</code>, etc), and you need to use <a href=\"http://www.ecma-international.org/ecma-402/2.0/#sec-intl-datetimeformat-constructor\" target=\"_blank\" rel=\"noopener noreferrer\">the options with ECMA-402 Intl.DateTimeFormat<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></p> <p>After that, when using the locale messages, you need to specify the <code>dateTimeFormats</code> option of the <code>VueI18n</code> constructor:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  dateTimeFormats\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>Template the below:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $d(new Date(), 'short') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $d(new Date(), 'long', 'ja-JP') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Output the below:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>Apr 19, 2017<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>2017年4月19日(水) 午前2:19<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/guide/datetime.md\" target=\"_blank\" rel=\"noopener noreferrer\">Edit this page on GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Last Updated: </span> <span class=\"time\">10/3/2019, 4:10:24 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/guide/pluralization.html\" class=\"prev\">\n          Pluralization\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/guide/number.html\">\n          Number localization\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/7.eaeacaf7.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/guide/directive.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en-US\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Custom directive localization | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n is internationalization plugin for Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/8.344bd519.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/directive.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/directive.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/directive.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/directive.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/directive.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/directive.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/introduction.html\" class=\"sidebar-link\">Introduction</a></li><li><a href=\"/vue-i18n/started.html\" class=\"sidebar-link\">Getting started</a></li><li><a href=\"/vue-i18n/installation.html\" class=\"sidebar-link\">Installation</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/guide/formatting.html\" class=\"sidebar-link\">Formatting</a></li><li><a href=\"/vue-i18n/guide/pluralization.html\" class=\"sidebar-link\">Pluralization</a></li><li><a href=\"/vue-i18n/guide/datetime.html\" class=\"sidebar-link\">DateTime localization</a></li><li><a href=\"/vue-i18n/guide/number.html\" class=\"sidebar-link\">Number localization</a></li><li><a href=\"/vue-i18n/guide/messages.html\" class=\"sidebar-link\">Locale messages syntax</a></li><li><a href=\"/vue-i18n/guide/fallback.html\" class=\"sidebar-link\">Fallback localization</a></li><li><a href=\"/vue-i18n/guide/component.html\" class=\"sidebar-link\">Component based localization</a></li><li><a href=\"/vue-i18n/guide/directive.html\" class=\"active sidebar-link\">Custom directive localization</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/directive.html#string-syntax\" class=\"sidebar-link\">String syntax</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/directive.html#object-syntax\" class=\"sidebar-link\">Object syntax</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/directive.html#use-with-transitions\" class=\"sidebar-link\">Use with transitions</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/directive.html#t-vs-v-t\" class=\"sidebar-link\">$t vs v-t</a></li></ul></li><li><a href=\"/vue-i18n/guide/interpolation.html\" class=\"sidebar-link\">Component interpolation</a></li><li><a href=\"/vue-i18n/guide/sfc.html\" class=\"sidebar-link\">Single file components</a></li><li><a href=\"/vue-i18n/guide/hot-reload.html\" class=\"sidebar-link\">Hot reloading</a></li><li><a href=\"/vue-i18n/guide/locale.html\" class=\"sidebar-link\">Locale changing</a></li><li><a href=\"/vue-i18n/guide/lazy-loading.html\" class=\"sidebar-link\">Lazy loading translations</a></li><li><a href=\"/vue-i18n/guide/tooling.html\" class=\"sidebar-link\">Tooling</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/legacy/\" class=\"sidebar-link\">Migration from v5.x</a></li><li><a href=\"/vue-i18n/legacy/v5.html\" class=\"sidebar-link\">documentation for v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"custom-directive-localization\"><a href=\"#custom-directive-localization\" class=\"header-anchor\">#</a> Custom directive localization</h1> <div class=\"tip custom-block\"><p class=\"custom-block-title\">Support Version</p> <p>🆕 7.3+</p></div> <p>You can translate not only with <code>v-t</code> custom directive, but also with the <code>$t</code>\nmethod.</p> <h2 id=\"string-syntax\"><a href=\"#string-syntax\" class=\"header-anchor\">#</a> String syntax</h2> <p>You can pass the keypath of locale messages with string syntax.</p> <p>Javascript:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token operator\">:</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n    locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n    messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> hello<span class=\"token operator\">:</span> <span class=\"token string\">'hi there!'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      ja<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> hello<span class=\"token operator\">:</span> <span class=\"token string\">'こんにちは！'</span> <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  data<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> path<span class=\"token operator\">:</span> <span class=\"token string\">'hello'</span> <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#string-syntax'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>Templates:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>string-syntax<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- string literal --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">v-t</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span><span class=\"token punctuation\">'</span>hello'<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- keypath binding via data --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">v-t</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>path<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Outputs:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>string-syntax<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>hi there!<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>hi there!<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"object-syntax\"><a href=\"#object-syntax\" class=\"header-anchor\">#</a> Object syntax</h2> <p>You can use object syntax.</p> <p>Javascript:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token operator\">:</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n    locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n    messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> hello<span class=\"token operator\">:</span> <span class=\"token string\">'hi {name}!'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      ja<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> hello<span class=\"token operator\">:</span> <span class=\"token string\">'こんにちは、{name}！'</span> <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  computed<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token function\">nickName</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span> <span class=\"token keyword\">return</span> <span class=\"token string\">'kazupon'</span> <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  data<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> path<span class=\"token operator\">:</span> <span class=\"token string\">'hello'</span> <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#object-syntax'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>Templates:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>object-syntax<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- literal --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">v-t</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>{ path: 'hello', locale: 'ja', args: { name: 'kazupon' } }<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- data binding via data --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">v-t</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>{ path: path, args: { name: nickName } }<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Outputs:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>object-syntax<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>こんにちは、kazupon！<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>hi kazupon!<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"use-with-transitions\"><a href=\"#use-with-transitions\" class=\"header-anchor\">#</a> Use with transitions</h2> <div class=\"tip custom-block\"><p class=\"custom-block-title\">Support Version</p> <p>🆕 8.7+</p></div> <p>When <code>v-t</code> directive is applied to an element inside <a href=\"https://vuejs.org/v2/api/#transition\" target=\"_blank\" rel=\"noopener noreferrer\"><code>&lt;transition&gt;</code> component<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>, you may notice that the translated message disappears during the transition. This behavior is related to the nature of the <code>&lt;transition&gt;</code> component implementation – all directives in the disappearing element inside the <code>&lt;transition&gt;</code> component will be destroyed <strong>before the transition starts</strong>. This behavior may result in content flickering on short animations, but is most noticeable on long transitions.</p> <p>To make sure directive content stays un-touched during a transition, just add the <a href=\"/vue-i18n/api/#v-t\"><code>.preserve</code> modifier</a> to the <code>v-t</code> directive definition.</p> <p>Javascript:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token operator\">:</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n    locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n    messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> preserve<span class=\"token operator\">:</span> <span class=\"token string\">'with preserve'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  data<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> toggle<span class=\"token operator\">:</span> <span class=\"token boolean\">true</span> <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#in-transitions'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>Templates:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>in-transitions<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>transition</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>fade<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\">v-if</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>toggle<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">v-t.preserve</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span><span class=\"token punctuation\">'</span>preserve'<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>transition</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>button</span> <span class=\"token attr-name\">@click</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>toggle = !toggle<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>Toggle<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>button</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>It is also possible to set global settings on the <code>VueI18n</code> instance itself, which will affect all <code>v-t</code> directives without modifier.</p> <p>Javascript:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token operator\">:</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n    locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n    messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> preserve<span class=\"token operator\">:</span> <span class=\"token string\">'with preserve'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    preserveDirectiveContent<span class=\"token operator\">:</span> <span class=\"token boolean\">true</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  data<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> toggle<span class=\"token operator\">:</span> <span class=\"token boolean\">true</span> <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#in-transitions'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>Templates:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>in-transitions<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>transition</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>fade<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\">v-if</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>toggle<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">v-t</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span><span class=\"token punctuation\">'</span>preserve'<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>transition</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>button</span> <span class=\"token attr-name\">@click</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>toggle = !toggle<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>Toggle<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>button</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>About the above examples, see the <a href=\"https://github.com/kazupon/vue-i18n/tree/dev/examples/directive\" target=\"_blank\" rel=\"noopener noreferrer\">example<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></p> <h2 id=\"t-vs-v-t\"><a href=\"#t-vs-v-t\" class=\"header-anchor\">#</a> <code>$t</code> vs <code>v-t</code></h2> <h3 id=\"t\"><a href=\"#t\" class=\"header-anchor\">#</a> <code>$t</code></h3> <p><code>$t</code> is an extended Vue instance method. It has the following pros and cons:</p> <h4 id=\"pros\"><a href=\"#pros\" class=\"header-anchor\">#</a> Pros</h4> <p>You can <strong>flexibly</strong> use mustache syntax <code>{{}}</code> in templates and also computed props and methods in Vue instance.</p> <h4 id=\"cons\"><a href=\"#cons\" class=\"header-anchor\">#</a> Cons</h4> <p><code>$t</code> is executed <strong>every time</strong> when re-render occurs, so it does have translation costs.</p> <h3 id=\"v-t\"><a href=\"#v-t\" class=\"header-anchor\">#</a> <code>v-t</code></h3> <p><code>v-t</code> is a custom directive. It has the following pros and cons:</p> <h4 id=\"pros-2\"><a href=\"#pros-2\" class=\"header-anchor\">#</a> Pros</h4> <p><code>v-t</code> has <strong>better performance</strong> than the <code>$t</code> method due to its cache with the custom directive, when translated once. Also, pre-translation is possible with the Vue compiler module which was provided by <a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\"><code>vue-i18n-extensions</code><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>.</p> <p>Therefore it's possible to make <strong>more performance optimizations</strong>.</p> <h4 id=\"cons-2\"><a href=\"#cons-2\" class=\"header-anchor\">#</a> Cons</h4> <p><code>v-t</code> cannot be flexibly used like <code>$t</code>, it's rather <strong>complex</strong>. The translated content with <code>v-t</code> is inserted into the <code>textContent</code> of the element. Also, when you use server-side rendering, you need to set the <a href=\"https://github.com/kazupon/vue-i18n-extensions#directive-v-t-custom-directive-for-server-side\" target=\"_blank\" rel=\"noopener noreferrer\">custom directive<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> to <code>directives</code> option of the <code>createRenderer</code> function.</p></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/guide/directive.md\" target=\"_blank\" rel=\"noopener noreferrer\">Edit this page on GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Last Updated: </span> <span class=\"time\">5/11/2020, 7:03:20 PM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/guide/component.html\" class=\"prev\">\n          Component based localization\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/guide/interpolation.html\">\n          Component interpolation\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/8.344bd519.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/guide/fallback.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en-US\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Fallback localization | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n is internationalization plugin for Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/fallback.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/fallback.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/fallback.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/fallback.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/fallback.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/fallback.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/introduction.html\" class=\"sidebar-link\">Introduction</a></li><li><a href=\"/vue-i18n/started.html\" class=\"sidebar-link\">Getting started</a></li><li><a href=\"/vue-i18n/installation.html\" class=\"sidebar-link\">Installation</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/guide/formatting.html\" class=\"sidebar-link\">Formatting</a></li><li><a href=\"/vue-i18n/guide/pluralization.html\" class=\"sidebar-link\">Pluralization</a></li><li><a href=\"/vue-i18n/guide/datetime.html\" class=\"sidebar-link\">DateTime localization</a></li><li><a href=\"/vue-i18n/guide/number.html\" class=\"sidebar-link\">Number localization</a></li><li><a href=\"/vue-i18n/guide/messages.html\" class=\"sidebar-link\">Locale messages syntax</a></li><li><a href=\"/vue-i18n/guide/fallback.html\" class=\"active sidebar-link\">Fallback localization</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/fallback.html#implicit-fallback-using-locales\" class=\"sidebar-link\">Implicit fallback using locales</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/fallback.html#explicit-fallback-with-one-locale\" class=\"sidebar-link\">Explicit fallback with one locale</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/fallback.html#explicit-fallback-with-an-array-of-locales\" class=\"sidebar-link\">Explicit fallback with an array of locales</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/fallback.html#explicit-fallback-with-decision-maps\" class=\"sidebar-link\">Explicit fallback with decision maps</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/fallback.html#fallback-interpolation\" class=\"sidebar-link\">Fallback interpolation</a></li></ul></li><li><a href=\"/vue-i18n/guide/component.html\" class=\"sidebar-link\">Component based localization</a></li><li><a href=\"/vue-i18n/guide/directive.html\" class=\"sidebar-link\">Custom directive localization</a></li><li><a href=\"/vue-i18n/guide/interpolation.html\" class=\"sidebar-link\">Component interpolation</a></li><li><a href=\"/vue-i18n/guide/sfc.html\" class=\"sidebar-link\">Single file components</a></li><li><a href=\"/vue-i18n/guide/hot-reload.html\" class=\"sidebar-link\">Hot reloading</a></li><li><a href=\"/vue-i18n/guide/locale.html\" class=\"sidebar-link\">Locale changing</a></li><li><a href=\"/vue-i18n/guide/lazy-loading.html\" class=\"sidebar-link\">Lazy loading translations</a></li><li><a href=\"/vue-i18n/guide/tooling.html\" class=\"sidebar-link\">Tooling</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/legacy/\" class=\"sidebar-link\">Migration from v5.x</a></li><li><a href=\"/vue-i18n/legacy/v5.html\" class=\"sidebar-link\">documentation for v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"fallback-localization\"><a href=\"#fallback-localization\" class=\"header-anchor\">#</a> Fallback localization</h1> <p><em>Summary: Use <code>fallbackLocale: '&lt;lang&gt;'</code> to choose which language to use when your preferred language lacks a translation.</em></p> <h2 id=\"implicit-fallback-using-locales\"><a href=\"#implicit-fallback-using-locales\" class=\"header-anchor\">#</a> Implicit fallback using locales</h2> <p>If a <code>locale</code> is given containing a territory and an optional dialect, the implicit fallback is activated automatically.</p> <p>For example <code>de-DE-bavarian</code> would fallback</p> <ol><li><code>de-DE-bavarian</code></li> <li><code>de-DE</code></li> <li><code>de</code></li></ol> <p>To suppress the automatic fallback, add the postfix exclamation mark <code>!</code>, for example <code>de-DE!</code></p> <h2 id=\"explicit-fallback-with-one-locale\"><a href=\"#explicit-fallback-with-one-locale\" class=\"header-anchor\">#</a> Explicit fallback with one locale</h2> <p>Sometimes some items will not be translated into some languages. In this example, the item <code>hello</code> is available in English but not Japanese:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    hello<span class=\"token operator\">:</span> <span class=\"token string\">'Hello, world!'</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  ja<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>If you want to use (say) <code>en</code> items when an item is not available in your desired locale, set the <code>fallbackLocale</code> option in the VueI18n constructor:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'ja'</span><span class=\"token punctuation\">,</span>\n  fallbackLocale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>Template:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('hello') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Output:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>Hello, world!<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>By default, falling back to <code>fallbackLocale</code> generates two console warnings:</p> <div class=\"language-console extra-class\"><pre class=\"language-text\"><code>[vue-i18n] Value of key 'hello' is not a string!\n[vue-i18n] Fall back to translate the keypath 'hello' with 'en' locale.\n</code></pre></div><p>To suppress these warnings (while keeping those which warn of the total absence of translation for the given key) set <code>silentFallbackWarn: true</code> when initializing the <code>VueI18n</code> instance.</p> <h2 id=\"explicit-fallback-with-an-array-of-locales\"><a href=\"#explicit-fallback-with-an-array-of-locales\" class=\"header-anchor\">#</a> Explicit fallback with an array of locales</h2> <p>It is possible to set more than one fallback locale by using an array of locales. For example</p> <div class=\"language-javascript extra-class\"><pre class=\"language-javascript\"><code>fallbackLocale<span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span> <span class=\"token string\">'fr'</span><span class=\"token punctuation\">,</span> 'en' <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n</code></pre></div><h2 id=\"explicit-fallback-with-decision-maps\"><a href=\"#explicit-fallback-with-decision-maps\" class=\"header-anchor\">#</a> Explicit fallback with decision maps</h2> <p>If more complex decision maps for fallback locales are required, it is possible to define decision maps with according fallback locales.\nUsing the following decision map</p> <div class=\"language-javascript extra-class\"><pre class=\"language-javascript\"><code>fallbackLocale<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">/* 1 */</span> <span class=\"token string\">'de-CH'</span><span class=\"token operator\">:</span>   <span class=\"token punctuation\">[</span><span class=\"token string\">'fr'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'it'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">/* 2 */</span> <span class=\"token string\">'zh-Hant'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'zh-Hans'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">/* 3 */</span> <span class=\"token string\">'es-CL'</span><span class=\"token operator\">:</span>   <span class=\"token punctuation\">[</span><span class=\"token string\">'es-AR'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">/* 4 */</span> <span class=\"token string\">'es'</span><span class=\"token operator\">:</span>      <span class=\"token punctuation\">[</span><span class=\"token string\">'en-GB'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">/* 5 */</span> <span class=\"token string\">'pt'</span><span class=\"token operator\">:</span>      <span class=\"token punctuation\">[</span><span class=\"token string\">'es-AR'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">/* 6 */</span> <span class=\"token string\">'default'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'da'</span><span class=\"token punctuation\">]</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n</code></pre></div><p>will result in the following fallback chains</p> <table><thead><tr><th>locale</th> <th>fallback chains</th></tr></thead> <tbody><tr><td><code>'de-CH'</code></td> <td>de-CH &gt; fr &gt; it &gt; en &gt; da</td></tr> <tr><td><code>'de'</code></td> <td>de &gt; en &gt; da</td></tr> <tr><td><code>'zh-Hant'</code></td> <td>zh-Hant &gt; zh-Hans &gt; zh &gt; en &gt; da</td></tr> <tr><td><code>'es-SP'</code></td> <td>es-SP &gt; es &gt; en-GB &gt; en &gt; da</td></tr> <tr><td><code>'es-SP!'</code></td> <td>es-SP &gt; en &gt; da</td></tr> <tr><td><code>'fr'</code></td> <td>fr &gt; en &gt; da</td></tr> <tr><td><code>'pt-BR'</code></td> <td>pt-BR &gt; pt &gt; es-AR &gt; es &gt; en-GB &gt; en &gt; da</td></tr> <tr><td><code>'es-CL'</code></td> <td>es-CL &gt; es-AR &gt; es &gt; en-GB &gt; en &gt; da</td></tr></tbody></table> <h2 id=\"fallback-interpolation\"><a href=\"#fallback-interpolation\" class=\"header-anchor\">#</a> Fallback interpolation</h2> <p><em>Summary: Set <code>formatFallbackMessages: true</code> to do template interpolation on translation keys when your language lacks a translation for a key.</em></p> <p>Since the keys to the translations are strings, you can use a user-readable message (for a particular language) as a key.\nE.g.</p> <div class=\"language-javascript extra-class\"><pre class=\"language-javascript\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  ja<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token string\">'Hello, world!'</span><span class=\"token operator\">:</span> <span class=\"token string\">'こんにちは、世界!'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>This is useful because you don't have to specify a translation for the string &quot;Hello, world!&quot; into English.</p> <p>In fact, you can even include template parameters in a key. Together with <code>formatFallbackMessages: true</code>, this lets you skip writing templates for your &quot;base&quot; language; the keys <em>are</em> your templates.</p> <div class=\"language-javascript extra-class\"><pre class=\"language-javascript\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  ru<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token string\">'Hello {name}'</span><span class=\"token operator\">:</span> <span class=\"token string\">'Здравствуйте {name}'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'ru'</span><span class=\"token punctuation\">,</span>\n  fallbackLocale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  formatFallbackMessages<span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n  messages\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>When the template is as below:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('Hello {name}', { name: 'John' }}) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('The weather today is {condition}!', { condition: 'sunny' }) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>The following will be output:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>Здравствуйте, John<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>The weather today is sunny!<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/guide/fallback.md\" target=\"_blank\" rel=\"noopener noreferrer\">Edit this page on GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Last Updated: </span> <span class=\"time\">5/11/2020, 7:03:20 PM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/guide/messages.html\" class=\"prev\">\n          Locale messages syntax\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/guide/component.html\">\n          Component based localization\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/9.ec02aae8.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/guide/formatting.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en-US\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Formatting | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n is internationalization plugin for Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/10.13689381.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link router-link-exact-active router-link-active\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link router-link-exact-active router-link-active\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/introduction.html\" class=\"sidebar-link\">Introduction</a></li><li><a href=\"/vue-i18n/started.html\" class=\"sidebar-link\">Getting started</a></li><li><a href=\"/vue-i18n/installation.html\" class=\"sidebar-link\">Installation</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/guide/formatting.html\" class=\"active sidebar-link\">Formatting</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/formatting.html#named-formatting\" class=\"sidebar-link\">Named formatting</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/formatting.html#list-formatting\" class=\"sidebar-link\">List formatting</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/formatting.html#html-formatting\" class=\"sidebar-link\">HTML formatting</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/formatting.html#support-ruby-on-rails-i18n-format\" class=\"sidebar-link\">Support ruby on rails i18n format</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/formatting.html#custom-formatting\" class=\"sidebar-link\">Custom formatting</a></li></ul></li><li><a href=\"/vue-i18n/guide/pluralization.html\" class=\"sidebar-link\">Pluralization</a></li><li><a href=\"/vue-i18n/guide/datetime.html\" class=\"sidebar-link\">DateTime localization</a></li><li><a href=\"/vue-i18n/guide/number.html\" class=\"sidebar-link\">Number localization</a></li><li><a href=\"/vue-i18n/guide/messages.html\" class=\"sidebar-link\">Locale messages syntax</a></li><li><a href=\"/vue-i18n/guide/fallback.html\" class=\"sidebar-link\">Fallback localization</a></li><li><a href=\"/vue-i18n/guide/component.html\" class=\"sidebar-link\">Component based localization</a></li><li><a href=\"/vue-i18n/guide/directive.html\" class=\"sidebar-link\">Custom directive localization</a></li><li><a href=\"/vue-i18n/guide/interpolation.html\" class=\"sidebar-link\">Component interpolation</a></li><li><a href=\"/vue-i18n/guide/sfc.html\" class=\"sidebar-link\">Single file components</a></li><li><a href=\"/vue-i18n/guide/hot-reload.html\" class=\"sidebar-link\">Hot reloading</a></li><li><a href=\"/vue-i18n/guide/locale.html\" class=\"sidebar-link\">Locale changing</a></li><li><a href=\"/vue-i18n/guide/lazy-loading.html\" class=\"sidebar-link\">Lazy loading translations</a></li><li><a href=\"/vue-i18n/guide/tooling.html\" class=\"sidebar-link\">Tooling</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/legacy/\" class=\"sidebar-link\">Migration from v5.x</a></li><li><a href=\"/vue-i18n/legacy/v5.html\" class=\"sidebar-link\">documentation for v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"formatting\"><a href=\"#formatting\" class=\"header-anchor\">#</a> Formatting</h1> <h2 id=\"named-formatting\"><a href=\"#named-formatting\" class=\"header-anchor\">#</a> Named formatting</h2> <p>Locale messages:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      hello<span class=\"token operator\">:</span> <span class=\"token string\">'{msg} world'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>Template:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('message.hello', { msg: 'hello' }) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Output:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>hello world<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"list-formatting\"><a href=\"#list-formatting\" class=\"header-anchor\">#</a> List formatting</h2> <p>Locale messages:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      hello<span class=\"token operator\">:</span> <span class=\"token string\">'{0} world'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>Template:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('message.hello', ['hello']) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Output:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>hello world<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>List formatting also accepts array-like objects:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('message.hello', {'0': 'hello'}) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Output:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>hello world<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"html-formatting\"><a href=\"#html-formatting\" class=\"header-anchor\">#</a> HTML formatting</h2> <div class=\"warning custom-block\"><p class=\"custom-block-title\">Notice</p> <p>⚠️ Dynamically localizing arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use HTML interpolation on trusted content and never on user-provided content.</p> <p>We recommended using the <a href=\"/vue-i18n/guide/interpolation.html\">component interpolation</a> feature.</p></div> <div class=\"warning custom-block\"><p class=\"custom-block-title\">Notice</p> <blockquote><p>🆕 8.11+</p></blockquote> <p>You can control the use of HTML formatting. see the detail <code>warnHtmlInMessage</code> constructor option and property API.</p></div> <p>In some cases you might want to render your translation as an HTML message and not a static string.</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      hello<span class=\"token operator\">:</span> <span class=\"token string\">'hello &lt;br&gt; world'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>Template:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">v-html</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>$t('message.hello')<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Output (instead of the pre-formatted message )</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>hello\n<span class=\"token comment\">&lt;!--&lt;br&gt; exists but is rendered as html and not a string--&gt;</span>\nworld<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"support-ruby-on-rails-i18n-format\"><a href=\"#support-ruby-on-rails-i18n-format\" class=\"header-anchor\">#</a> Support ruby on rails i18n format</h2> <p>Locale messages:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      hello<span class=\"token operator\">:</span> <span class=\"token string\">'%{msg} world'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>Template:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('message.hello', { msg: 'hello' }) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Output:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>hello world<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"custom-formatting\"><a href=\"#custom-formatting\" class=\"header-anchor\">#</a> Custom formatting</h2> <p>Sometimes, you may need to translate using custom formatting (e.g. <a href=\"http://userguide.icu-project.org/formatparse/messages\" target=\"_blank\" rel=\"noopener noreferrer\">ICU message syntax<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>).</p> <p>You can do that with a custom formatter that implements the <a href=\"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js#L41-L43\" target=\"_blank\" rel=\"noopener noreferrer\">Formatter Interface<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>.</p> <p>The following custom formatter with ES2015 class syntax:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token comment\">// Custom Formatter implementation</span>\n<span class=\"token keyword\">class</span> <span class=\"token class-name\">CustomFormatter</span> <span class=\"token punctuation\">{</span>\n     <span class=\"token function\">constructor</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">options</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n       <span class=\"token comment\">// ...</span>\n     <span class=\"token punctuation\">}</span>\n\n     <span class=\"token comment\">//</span>\n     <span class=\"token comment\">// interpolate</span>\n     <span class=\"token comment\">//</span>\n     <span class=\"token comment\">// @param {string} message</span>\n     <span class=\"token comment\">//   string of list or named format.</span>\n     <span class=\"token comment\">//   e.g.</span>\n     <span class=\"token comment\">//   - named formatting: 'Hi {name}'</span>\n     <span class=\"token comment\">//   - list formatting: 'Hi {0}'</span>\n     <span class=\"token comment\">//</span>\n     <span class=\"token comment\">// @param {Object | Array} values</span>\n     <span class=\"token comment\">//   values of `message` interpolation.</span>\n     <span class=\"token comment\">//   passed values with `$t`, `$tc` and `i18n` functional component.</span>\n     <span class=\"token comment\">//   e.g.</span>\n     <span class=\"token comment\">//   - $t('hello', { name: 'kazupon' }) -&gt; passed values: Object `{ name: 'kazupon' }`</span>\n     <span class=\"token comment\">//   - $t('hello', ['kazupon']) -&gt; passed values: Array `['kazupon']`</span>\n     <span class=\"token comment\">//   - `i18n` functional component (component interpolation)</span>\n     <span class=\"token comment\">//     &lt;i18n path=&quot;hello&quot;&gt;</span>\n     <span class=\"token comment\">//       &lt;p&gt;kazupon&lt;/p&gt;</span>\n     <span class=\"token comment\">//       &lt;p&gt;how are you?&lt;/p&gt;</span>\n     <span class=\"token comment\">//     &lt;/i18n&gt;</span>\n     <span class=\"token comment\">//     -&gt; passed values: Array (included VNode):</span>\n     <span class=\"token comment\">//        `[VNode{ tag: 'p', text: 'kazupon', ...}, VNode{ tag: 'p', text: 'how are you?', ...}]`</span>\n     <span class=\"token comment\">//</span>\n     <span class=\"token comment\">// @return {Array&lt;any&gt;}</span>\n     <span class=\"token comment\">//   interpolated values. you need to return the following:</span>\n     <span class=\"token comment\">//   - array of string, when is using `$t` or `$tc`.</span>\n     <span class=\"token comment\">//   - array included VNode object, when is using `i18n` functional component.</span>\n     <span class=\"token comment\">//</span>\n     <span class=\"token function\">interpolate</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">message<span class=\"token punctuation\">,</span> values</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n       <span class=\"token comment\">// implement interpolation logic here</span>\n       <span class=\"token comment\">// ...</span>\n\n       <span class=\"token comment\">// return the interpolated array</span>\n       <span class=\"token keyword\">return</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'resolved message string'</span><span class=\"token punctuation\">]</span>\n     <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token comment\">// register with `formatter` option</span>\n<span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en-US'</span><span class=\"token punctuation\">,</span>\n  formatter<span class=\"token operator\">:</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">CustomFormatter</span><span class=\"token punctuation\">(</span><span class=\"token comment\">/* here the constructor options */</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token string\">'en-US'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token comment\">// ...</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token comment\">// ...</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// Run!</span>\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> i18n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>You can check <a href=\"https://github.com/kazupon/vue-i18n/tree/dev/examples/formatting/custom\" target=\"_blank\" rel=\"noopener noreferrer\">the custom formatter official example<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>.</p></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/guide/formatting.md\" target=\"_blank\" rel=\"noopener noreferrer\">Edit this page on GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Last Updated: </span> <span class=\"time\">5/11/2020, 7:03:20 PM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/installation.html\" class=\"prev\">\n          Installation\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/guide/pluralization.html\">\n          Pluralization\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/10.13689381.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/guide/hot-reload.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en-US\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Hot reloading | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n is internationalization plugin for Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/11.aa13f293.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/hot-reload.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/hot-reload.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/hot-reload.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/hot-reload.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/hot-reload.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/hot-reload.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/introduction.html\" class=\"sidebar-link\">Introduction</a></li><li><a href=\"/vue-i18n/started.html\" class=\"sidebar-link\">Getting started</a></li><li><a href=\"/vue-i18n/installation.html\" class=\"sidebar-link\">Installation</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/guide/formatting.html\" class=\"sidebar-link\">Formatting</a></li><li><a href=\"/vue-i18n/guide/pluralization.html\" class=\"sidebar-link\">Pluralization</a></li><li><a href=\"/vue-i18n/guide/datetime.html\" class=\"sidebar-link\">DateTime localization</a></li><li><a href=\"/vue-i18n/guide/number.html\" class=\"sidebar-link\">Number localization</a></li><li><a href=\"/vue-i18n/guide/messages.html\" class=\"sidebar-link\">Locale messages syntax</a></li><li><a href=\"/vue-i18n/guide/fallback.html\" class=\"sidebar-link\">Fallback localization</a></li><li><a href=\"/vue-i18n/guide/component.html\" class=\"sidebar-link\">Component based localization</a></li><li><a href=\"/vue-i18n/guide/directive.html\" class=\"sidebar-link\">Custom directive localization</a></li><li><a href=\"/vue-i18n/guide/interpolation.html\" class=\"sidebar-link\">Component interpolation</a></li><li><a href=\"/vue-i18n/guide/sfc.html\" class=\"sidebar-link\">Single file components</a></li><li><a href=\"/vue-i18n/guide/hot-reload.html\" class=\"active sidebar-link\">Hot reloading</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/hot-reload.html#basic-example\" class=\"sidebar-link\">Basic example</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/hot-reload.html#advanced-example\" class=\"sidebar-link\">Advanced example</a></li></ul></li><li><a href=\"/vue-i18n/guide/locale.html\" class=\"sidebar-link\">Locale changing</a></li><li><a href=\"/vue-i18n/guide/lazy-loading.html\" class=\"sidebar-link\">Lazy loading translations</a></li><li><a href=\"/vue-i18n/guide/tooling.html\" class=\"sidebar-link\">Tooling</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/legacy/\" class=\"sidebar-link\">Migration from v5.x</a></li><li><a href=\"/vue-i18n/legacy/v5.html\" class=\"sidebar-link\">documentation for v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"hot-reloading\"><a href=\"#hot-reloading\" class=\"header-anchor\">#</a> Hot reloading</h1> <p>You can use Webpack's <a href=\"https://webpack.js.org/concepts/hot-module-replacement/\" target=\"_blank\" rel=\"noopener noreferrer\">Hot Module Replacement<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> (HMR) feature to watch for changes in localization files and hot reload changes into your application.</p> <h2 id=\"basic-example\"><a href=\"#basic-example\" class=\"header-anchor\">#</a> Basic example</h2> <p>If you only use a static set of locales, you can hot reload those locales explicitly:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">import</span> Vue <span class=\"token keyword\">from</span> <span class=\"token string\">&quot;vue&quot;</span>\n<span class=\"token keyword\">import</span> VueI18n <span class=\"token keyword\">from</span> <span class=\"token string\">&quot;vue-i18n&quot;</span>\n<span class=\"token keyword\">import</span> en <span class=\"token keyword\">from</span> <span class=\"token string\">'./en'</span>\n<span class=\"token keyword\">import</span> ja <span class=\"token keyword\">from</span> <span class=\"token string\">'./ja'</span>\n\n<span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token punctuation\">,</span>\n  ja\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token comment\">// VueI18n instance</span>\n<span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// Run app</span>\n<span class=\"token keyword\">const</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// Hot updates</span>\n<span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>module<span class=\"token punctuation\">.</span>hot<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  module<span class=\"token punctuation\">.</span>hot<span class=\"token punctuation\">.</span><span class=\"token function\">accept</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token string\">'./en'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'./ja'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">function</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    i18n<span class=\"token punctuation\">.</span><span class=\"token function\">setLocaleMessage</span><span class=\"token punctuation\">(</span><span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span> <span class=\"token function\">require</span><span class=\"token punctuation\">(</span><span class=\"token string\">'./en'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span>default<span class=\"token punctuation\">)</span>\n    i18n<span class=\"token punctuation\">.</span><span class=\"token function\">setLocaleMessage</span><span class=\"token punctuation\">(</span><span class=\"token string\">'ja'</span><span class=\"token punctuation\">,</span> <span class=\"token function\">require</span><span class=\"token punctuation\">(</span><span class=\"token string\">'./ja'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span>default<span class=\"token punctuation\">)</span>\n    <span class=\"token comment\">// Or the following hot updates via $i18n property</span>\n    <span class=\"token comment\">// app.$i18n.setLocaleMessage('en', require('./en').default)</span>\n    <span class=\"token comment\">// app.$i18n.setLocaleMessage('ja', require('./ja').default)</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><h2 id=\"advanced-example\"><a href=\"#advanced-example\" class=\"header-anchor\">#</a> Advanced example</h2> <p>If you want to support a changing set of locales, you can hot reload those locales dynamically using <code>require.context</code>:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">import</span> Vue <span class=\"token keyword\">from</span> <span class=\"token string\">&quot;vue&quot;</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">import</span> VueI18n <span class=\"token keyword\">from</span> <span class=\"token string\">&quot;vue-i18n&quot;</span><span class=\"token punctuation\">;</span>\n\nVue<span class=\"token punctuation\">.</span><span class=\"token function\">use</span><span class=\"token punctuation\">(</span>VueI18n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// Load all locales and remember context</span>\n<span class=\"token keyword\">function</span> <span class=\"token function\">loadMessages</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> context <span class=\"token operator\">=</span> require<span class=\"token punctuation\">.</span><span class=\"token function\">context</span><span class=\"token punctuation\">(</span><span class=\"token string\">&quot;./locales&quot;</span><span class=\"token punctuation\">,</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span> <span class=\"token regex\">/[a-z0-9-_]+\\.json$/i</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> context\n    <span class=\"token punctuation\">.</span><span class=\"token function\">keys</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n    <span class=\"token punctuation\">.</span><span class=\"token function\">map</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">key</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> key<span class=\"token punctuation\">,</span> locale<span class=\"token operator\">:</span> key<span class=\"token punctuation\">.</span><span class=\"token function\">match</span><span class=\"token punctuation\">(</span><span class=\"token regex\">/[a-z0-9-_]+/i</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n    <span class=\"token punctuation\">.</span><span class=\"token function\">reduce</span><span class=\"token punctuation\">(</span>\n      <span class=\"token punctuation\">(</span><span class=\"token parameter\">messages<span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span> key<span class=\"token punctuation\">,</span> locale <span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n        <span class=\"token operator\">...</span>messages<span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">[</span>locale<span class=\"token punctuation\">]</span><span class=\"token operator\">:</span> <span class=\"token function\">context</span><span class=\"token punctuation\">(</span>key<span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n      <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span> context<span class=\"token punctuation\">,</span> messages <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> <span class=\"token punctuation\">{</span> context<span class=\"token punctuation\">,</span> messages <span class=\"token punctuation\">}</span> <span class=\"token operator\">=</span> <span class=\"token function\">loadMessages</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// VueI18n instance</span>\n<span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">&quot;en&quot;</span><span class=\"token punctuation\">,</span>\n  messages<span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// Run app</span>\n<span class=\"token keyword\">const</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// Hot updates</span>\n<span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>module<span class=\"token punctuation\">.</span>hot<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  module<span class=\"token punctuation\">.</span>hot<span class=\"token punctuation\">.</span><span class=\"token function\">accept</span><span class=\"token punctuation\">(</span>context<span class=\"token punctuation\">.</span>id<span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">const</span> <span class=\"token punctuation\">{</span> messages<span class=\"token operator\">:</span> newMessages <span class=\"token punctuation\">}</span> <span class=\"token operator\">=</span> <span class=\"token function\">loadMessages</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n    Object<span class=\"token punctuation\">.</span><span class=\"token function\">keys</span><span class=\"token punctuation\">(</span>newMessages<span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">filter</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">locale</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> messages<span class=\"token punctuation\">[</span>locale<span class=\"token punctuation\">]</span> <span class=\"token operator\">!==</span> newMessages<span class=\"token punctuation\">[</span>locale<span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">locale</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n        messages<span class=\"token punctuation\">[</span>locale<span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> newMessages<span class=\"token punctuation\">[</span>locale<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n        i18n<span class=\"token punctuation\">.</span><span class=\"token function\">setLocaleMessage</span><span class=\"token punctuation\">(</span>locale<span class=\"token punctuation\">,</span> messages<span class=\"token punctuation\">[</span>locale<span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/guide/hot-reload.md\" target=\"_blank\" rel=\"noopener noreferrer\">Edit this page on GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Last Updated: </span> <span class=\"time\">5/11/2020, 7:03:20 PM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/guide/sfc.html\" class=\"prev\">\n          Single file components\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/guide/locale.html\">\n          Locale changing\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/11.aa13f293.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/guide/interpolation.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en-US\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Component interpolation | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n is internationalization plugin for Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/interpolation.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/interpolation.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/interpolation.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/interpolation.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/interpolation.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/interpolation.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/introduction.html\" class=\"sidebar-link\">Introduction</a></li><li><a href=\"/vue-i18n/started.html\" class=\"sidebar-link\">Getting started</a></li><li><a href=\"/vue-i18n/installation.html\" class=\"sidebar-link\">Installation</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/guide/formatting.html\" class=\"sidebar-link\">Formatting</a></li><li><a href=\"/vue-i18n/guide/pluralization.html\" class=\"sidebar-link\">Pluralization</a></li><li><a href=\"/vue-i18n/guide/datetime.html\" class=\"sidebar-link\">DateTime localization</a></li><li><a href=\"/vue-i18n/guide/number.html\" class=\"sidebar-link\">Number localization</a></li><li><a href=\"/vue-i18n/guide/messages.html\" class=\"sidebar-link\">Locale messages syntax</a></li><li><a href=\"/vue-i18n/guide/fallback.html\" class=\"sidebar-link\">Fallback localization</a></li><li><a href=\"/vue-i18n/guide/component.html\" class=\"sidebar-link\">Component based localization</a></li><li><a href=\"/vue-i18n/guide/directive.html\" class=\"sidebar-link\">Custom directive localization</a></li><li><a href=\"/vue-i18n/guide/interpolation.html\" class=\"active sidebar-link\">Component interpolation</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/interpolation.html#basic-usage\" class=\"sidebar-link\">Basic Usage</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/interpolation.html#slots-syntax-usage\" class=\"sidebar-link\">Slots syntax usage</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/interpolation.html#places-syntax-usage\" class=\"sidebar-link\">Places syntax usage</a></li></ul></li><li><a href=\"/vue-i18n/guide/sfc.html\" class=\"sidebar-link\">Single file components</a></li><li><a href=\"/vue-i18n/guide/hot-reload.html\" class=\"sidebar-link\">Hot reloading</a></li><li><a href=\"/vue-i18n/guide/locale.html\" class=\"sidebar-link\">Locale changing</a></li><li><a href=\"/vue-i18n/guide/lazy-loading.html\" class=\"sidebar-link\">Lazy loading translations</a></li><li><a href=\"/vue-i18n/guide/tooling.html\" class=\"sidebar-link\">Tooling</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/legacy/\" class=\"sidebar-link\">Migration from v5.x</a></li><li><a href=\"/vue-i18n/legacy/v5.html\" class=\"sidebar-link\">documentation for v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"component-interpolation\"><a href=\"#component-interpolation\" class=\"header-anchor\">#</a> Component interpolation</h1> <h2 id=\"basic-usage\"><a href=\"#basic-usage\" class=\"header-anchor\">#</a> Basic Usage</h2> <div class=\"tip custom-block\"><p class=\"custom-block-title\">Support Version</p> <p>🆕 7.0+</p></div> <p>Sometimes, we need to localize with a locale message that was included in a HTML tag or component. For example:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>I accept xxx <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>/term<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>Terms of Service Agreement<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>In the above message, if you use <code>$t</code>, you will probably try to compose the following locale messages:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    term1<span class=\"token operator\">:</span> <span class=\"token string\">'I Accept xxx\\'s'</span><span class=\"token punctuation\">,</span>\n    term2<span class=\"token operator\">:</span> <span class=\"token string\">'Terms of Service Agreement'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>And your localized template may look like this:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('term1') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>/term<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>{{ $t('term2') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Output:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>I accept xxx <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>/term<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>Terms of Service Agreement<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>This is very cumbersome, and if you configure the <code>&lt;a&gt;</code> tag in a locale message, there is a possibility of XSS vulnerabilities due to localizing with\n<code>v-html=&quot;$t('term')&quot;</code>.</p> <p>You can avoid it using the <code>i18n</code> functional component. For example:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span> <span class=\"token attr-name\">path</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>term<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">tag</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>label<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">for</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>tos<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">:href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>url<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">target</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>_blank<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>{{ $t('tos') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    tos<span class=\"token operator\">:</span> <span class=\"token string\">'Term of Service'</span><span class=\"token punctuation\">,</span>\n    term<span class=\"token operator\">:</span> <span class=\"token string\">'I accept xxx {0}.'</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  ja<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    tos<span class=\"token operator\">:</span> <span class=\"token string\">'利用規約'</span><span class=\"token punctuation\">,</span>\n    term<span class=\"token operator\">:</span> <span class=\"token string\">'私は xxx の{0}に同意します。'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token punctuation\">,</span>\n  data<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    url<span class=\"token operator\">:</span> <span class=\"token string\">'/term'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>the following output:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>label</span> <span class=\"token attr-name\">for</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>tos<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    I accept xxx <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>/term<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">target</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>_blank<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>Term of Service<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span>.\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>label</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>About the above example, see the <a href=\"https://github.com/kazupon/vue-i18n/tree/dev/examples/interpolation/places\" target=\"_blank\" rel=\"noopener noreferrer\">example<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></p> <p>The children of <code>i18n</code> functional component are interpolated with locale message of <code>path</code> prop. In the above example,</p> <div><p><code>&lt;a :href=&quot;url&quot; target=&quot;_blank&quot;&gt;{{ $t('tos') }}&lt;/a&gt;</code></p></div> <p>is interpolated with <code>term</code> locale message.</p> <p>In the above example, the component interpolation follows the <strong>list formatting</strong>. The children of <code>i18n</code> functional component are interpolated by their order of appearance.</p> <p>You can choose the root container's node type by specifying a <code>tag</code> prop. If omitted, it defaults to <code>'span'</code>. You can also set it to the boolean value <code>false</code> to insert the child nodes directly without creating a root element.</p> <h2 id=\"slots-syntax-usage\"><a href=\"#slots-syntax-usage\" class=\"header-anchor\">#</a> Slots syntax usage</h2> <div class=\"tip custom-block\"><p class=\"custom-block-title\">Support Version</p> <p>🆕 8.14+</p></div> <p>It's more convenient to use the named slots syntax. For example:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span> <span class=\"token attr-name\">path</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>info<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">tag</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>p<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>template</span> <span class=\"token attr-name\"><span class=\"token namespace\">v-slot:</span>limit</span><span class=\"token punctuation\">&gt;</span></span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span><span class=\"token punctuation\">&gt;</span></span>{{ changeLimit }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>template</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>template</span> <span class=\"token attr-name\"><span class=\"token namespace\">v-slot:</span>action</span><span class=\"token punctuation\">&gt;</span></span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">:href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>changeUrl<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>{{ $t('change') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>template</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    info<span class=\"token operator\">:</span> <span class=\"token string\">'You can {action} until {limit} minutes from departure.'</span><span class=\"token punctuation\">,</span>\n    change<span class=\"token operator\">:</span> <span class=\"token string\">'change your flight'</span><span class=\"token punctuation\">,</span>\n    refund<span class=\"token operator\">:</span> <span class=\"token string\">'refund the ticket'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token punctuation\">,</span>\n  data<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    changeUrl<span class=\"token operator\">:</span> <span class=\"token string\">'/change'</span><span class=\"token punctuation\">,</span>\n    refundUrl<span class=\"token operator\">:</span> <span class=\"token string\">'/refund'</span><span class=\"token punctuation\">,</span>\n    changeLimit<span class=\"token operator\">:</span> <span class=\"token number\">15</span><span class=\"token punctuation\">,</span>\n    refundLimit<span class=\"token operator\">:</span> <span class=\"token number\">30</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>Outputs:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n    You can <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>/change<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>change your flight<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span> until <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span><span class=\"token punctuation\">&gt;</span></span>15<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span> minutes from departure.\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>In Vue 2.6 and later, you can use the following slots syntax in templates:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span> <span class=\"token attr-name\">path</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>info<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">tag</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>p<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>template</span> <span class=\"token attr-name\">#limit</span><span class=\"token punctuation\">&gt;</span></span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span><span class=\"token punctuation\">&gt;</span></span>{{ changeLimit }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>template</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>template</span> <span class=\"token attr-name\">#action</span><span class=\"token punctuation\">&gt;</span></span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">:href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>changeUrl<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>{{ $t('change') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>template</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><div class=\"warning custom-block\"><p class=\"custom-block-title\">Limitation</p> <p>⚠️ In <code>i18n</code> component, slots props are not supported.</p></div> <h2 id=\"places-syntax-usage\"><a href=\"#places-syntax-usage\" class=\"header-anchor\">#</a> Places syntax usage</h2> <div class=\"danger custom-block\"><p class=\"custom-block-title\">Important!!</p> <p>In the next major version, the <code>place</code> and <code>places</code> props will be deprecated. Please switch to slots syntax.</p></div> <div class=\"tip custom-block\"><p class=\"custom-block-title\">Support Version</p> <p>🆕 7.2+</p></div> <div class=\"warning custom-block\"><p class=\"custom-block-title\">Notice</p> <p>⚠️ In <code>i18n</code> component, text content consisting of only white spaces will be omitted.</p></div> <p>Named formatting is supported with the help of <code>place</code> attribute. For example:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span> <span class=\"token attr-name\">path</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>info<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">tag</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>p<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\">place</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>limit<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>{{ changeLimit }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">place</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>action<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">:href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>changeUrl<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>{{ $t('change') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    info<span class=\"token operator\">:</span> <span class=\"token string\">'You can {action} until {limit} minutes from departure.'</span><span class=\"token punctuation\">,</span>\n    change<span class=\"token operator\">:</span> <span class=\"token string\">'change your flight'</span><span class=\"token punctuation\">,</span>\n    refund<span class=\"token operator\">:</span> <span class=\"token string\">'refund the ticket'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token punctuation\">,</span>\n  data<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    changeUrl<span class=\"token operator\">:</span> <span class=\"token string\">'/change'</span><span class=\"token punctuation\">,</span>\n    refundUrl<span class=\"token operator\">:</span> <span class=\"token string\">'/refund'</span><span class=\"token punctuation\">,</span>\n    changeLimit<span class=\"token operator\">:</span> <span class=\"token number\">15</span><span class=\"token punctuation\">,</span>\n    refundLimit<span class=\"token operator\">:</span> <span class=\"token number\">30</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>Outputs:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n    You can <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>/change<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>change your flight<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span> until <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span><span class=\"token punctuation\">&gt;</span></span>15<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span> minutes from departure.\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><div class=\"warning custom-block\"><p class=\"custom-block-title\">Notice</p> <p>⚠️ To use named formatting, all children of <code>i18n</code> component must have <code>place</code> attribute set. Otherwise it will fallback to list formatting.</p></div> <p>If you still want to interpolate text content in named formatting, you could define <code>places</code> property on <code>i18n</code> component. For example:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span> <span class=\"token attr-name\">path</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>info<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">tag</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>p<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">:places</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>{ limit: refundLimit }<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">place</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>action<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">:href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>refundUrl<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>{{ $t('refund') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Outputs:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n    You can <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>/refund<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>refund your ticket<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span> until 30 minutes from departure.\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/guide/interpolation.md\" target=\"_blank\" rel=\"noopener noreferrer\">Edit this page on GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Last Updated: </span> <span class=\"time\">5/14/2020, 11:30:34 PM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/guide/directive.html\" class=\"prev\">\n          Custom directive localization\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/guide/sfc.html\">\n          Single file components\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/12.2b21ead8.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/guide/lazy-loading.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en-US\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Lazy loading translations | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n is internationalization plugin for Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/13.b3706367.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/lazy-loading.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/lazy-loading.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/lazy-loading.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/lazy-loading.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/lazy-loading.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/lazy-loading.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/introduction.html\" class=\"sidebar-link\">Introduction</a></li><li><a href=\"/vue-i18n/started.html\" class=\"sidebar-link\">Getting started</a></li><li><a href=\"/vue-i18n/installation.html\" class=\"sidebar-link\">Installation</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/guide/formatting.html\" class=\"sidebar-link\">Formatting</a></li><li><a href=\"/vue-i18n/guide/pluralization.html\" class=\"sidebar-link\">Pluralization</a></li><li><a href=\"/vue-i18n/guide/datetime.html\" class=\"sidebar-link\">DateTime localization</a></li><li><a href=\"/vue-i18n/guide/number.html\" class=\"sidebar-link\">Number localization</a></li><li><a href=\"/vue-i18n/guide/messages.html\" class=\"sidebar-link\">Locale messages syntax</a></li><li><a href=\"/vue-i18n/guide/fallback.html\" class=\"sidebar-link\">Fallback localization</a></li><li><a href=\"/vue-i18n/guide/component.html\" class=\"sidebar-link\">Component based localization</a></li><li><a href=\"/vue-i18n/guide/directive.html\" class=\"sidebar-link\">Custom directive localization</a></li><li><a href=\"/vue-i18n/guide/interpolation.html\" class=\"sidebar-link\">Component interpolation</a></li><li><a href=\"/vue-i18n/guide/sfc.html\" class=\"sidebar-link\">Single file components</a></li><li><a href=\"/vue-i18n/guide/hot-reload.html\" class=\"sidebar-link\">Hot reloading</a></li><li><a href=\"/vue-i18n/guide/locale.html\" class=\"sidebar-link\">Locale changing</a></li><li><a href=\"/vue-i18n/guide/lazy-loading.html\" class=\"active sidebar-link\">Lazy loading translations</a></li><li><a href=\"/vue-i18n/guide/tooling.html\" class=\"sidebar-link\">Tooling</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/legacy/\" class=\"sidebar-link\">Migration from v5.x</a></li><li><a href=\"/vue-i18n/legacy/v5.html\" class=\"sidebar-link\">documentation for v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"lazy-loading-translations\"><a href=\"#lazy-loading-translations\" class=\"header-anchor\">#</a> Lazy loading translations</h1> <p>Loading all of your translation files at once is overkill and unnecessary.</p> <p>Lazy loading or asynchronously loading the translation files is really easy when using Webpack.</p> <p>Let´s assume we have a project directory similar to the one below:</p> <div class=\"language- extra-class\"><pre class=\"language-text\"><code>our-cool-project\n-dist\n-src\n--routes\n--store\n--setup\n---i18n-setup.js\n--lang\n---en.js\n---it.js\n</code></pre></div><p>The <code>lang</code> folder is where all of our translation files reside. The <code>setup</code> folder is where our arbitrary setup files like the i18n-setup, global component inits, plugin inits and other reside.</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token comment\">//i18n-setup.js</span>\n<span class=\"token keyword\">import</span> Vue <span class=\"token keyword\">from</span> <span class=\"token string\">'vue'</span>\n<span class=\"token keyword\">import</span> VueI18n <span class=\"token keyword\">from</span> <span class=\"token string\">'vue-i18n'</span>\n<span class=\"token keyword\">import</span> messages <span class=\"token keyword\">from</span> <span class=\"token string\">'@/lang/en'</span>\n<span class=\"token keyword\">import</span> axios <span class=\"token keyword\">from</span> <span class=\"token string\">'axios'</span>\n\nVue<span class=\"token punctuation\">.</span><span class=\"token function\">use</span><span class=\"token punctuation\">(</span>VueI18n<span class=\"token punctuation\">)</span>\n\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// set locale</span>\n  fallbackLocale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages <span class=\"token comment\">// set locale messages</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token keyword\">const</span> loadedLanguages <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'en'</span><span class=\"token punctuation\">]</span> <span class=\"token comment\">// our default language that is preloaded</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">setI18nLanguage</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">lang</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  i18n<span class=\"token punctuation\">.</span>locale <span class=\"token operator\">=</span> lang\n  axios<span class=\"token punctuation\">.</span>defaults<span class=\"token punctuation\">.</span>headers<span class=\"token punctuation\">.</span>common<span class=\"token punctuation\">[</span><span class=\"token string\">'Accept-Language'</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> lang\n  document<span class=\"token punctuation\">.</span><span class=\"token function\">querySelector</span><span class=\"token punctuation\">(</span><span class=\"token string\">'html'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">setAttribute</span><span class=\"token punctuation\">(</span><span class=\"token string\">'lang'</span><span class=\"token punctuation\">,</span> lang<span class=\"token punctuation\">)</span>\n  <span class=\"token keyword\">return</span> lang\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">function</span> <span class=\"token function\">loadLanguageAsync</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">lang</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// If the same language</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>i18n<span class=\"token punctuation\">.</span>locale <span class=\"token operator\">===</span> lang<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> Promise<span class=\"token punctuation\">.</span><span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span><span class=\"token function\">setI18nLanguage</span><span class=\"token punctuation\">(</span>lang<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token comment\">// If the language was already loaded</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>loadedLanguages<span class=\"token punctuation\">.</span><span class=\"token function\">includes</span><span class=\"token punctuation\">(</span>lang<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> Promise<span class=\"token punctuation\">.</span><span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span><span class=\"token function\">setI18nLanguage</span><span class=\"token punctuation\">(</span>lang<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token comment\">// If the language hasn't been loaded yet</span>\n  <span class=\"token keyword\">return</span> <span class=\"token keyword\">import</span><span class=\"token punctuation\">(</span><span class=\"token comment\">/* webpackChunkName: &quot;lang-[request]&quot; */</span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">@/i18n/messages/</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>lang<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\">.js</span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">then</span><span class=\"token punctuation\">(</span>\n    <span class=\"token parameter\">messages</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n      i18n<span class=\"token punctuation\">.</span><span class=\"token function\">setLocaleMessage</span><span class=\"token punctuation\">(</span>lang<span class=\"token punctuation\">,</span> messages<span class=\"token punctuation\">.</span>default<span class=\"token punctuation\">)</span>\n      loadedLanguages<span class=\"token punctuation\">.</span><span class=\"token function\">push</span><span class=\"token punctuation\">(</span>lang<span class=\"token punctuation\">)</span>\n      <span class=\"token keyword\">return</span> <span class=\"token function\">setI18nLanguage</span><span class=\"token punctuation\">(</span>lang<span class=\"token punctuation\">)</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>In short we are creating a new VueI18n instance as we normally would. Then we are creating a <code>loadedLanguages</code> array that will keep track of our loaded languages. Next is the <code>setI18nLanguage</code> function that will actually change the language in our vueI18n instance, axios and where ever else is needed.</p> <p>The <code>loadLanguageAsync</code> function is what we will actually use to change the languages. Loading the new files is done via the <code>import</code> function, which is generously provided by Webpack and it allows us to load files dynamically, and because it uses promises we can easily wait for the loading to finish.</p> <p>You can learn more about the import function in the <a href=\"https://webpack.js.org/guides/code-splitting/#dynamic-imports\" target=\"_blank\" rel=\"noopener noreferrer\">Webpack documentation<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>.</p> <p>Using the <code>loadLanguageAsync</code> function is straightforward. A common use case is inside a vue-router beforeEach hook.</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code>router<span class=\"token punctuation\">.</span><span class=\"token function\">beforeEach</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">to<span class=\"token punctuation\">,</span> <span class=\"token keyword\">from</span><span class=\"token punctuation\">,</span> next</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> lang <span class=\"token operator\">=</span> to<span class=\"token punctuation\">.</span>params<span class=\"token punctuation\">.</span>lang\n  <span class=\"token function\">loadLanguageAsync</span><span class=\"token punctuation\">(</span>lang<span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">then</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token function\">next</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>We could improve this by checking if the <code>lang</code> is actually supported by us or not, call <code>reject</code> so we can catch that in the <code>beforeEach</code> stopping the route transition.</p></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/guide/lazy-loading.md\" target=\"_blank\" rel=\"noopener noreferrer\">Edit this page on GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Last Updated: </span> <span class=\"time\">10/3/2019, 4:32:27 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/guide/locale.html\" class=\"prev\">\n          Locale changing\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/guide/tooling.html\">\n          Tooling\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/13.b3706367.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/guide/locale.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en-US\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Locale changing | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n is internationalization plugin for Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/14.1819508a.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/locale.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/locale.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/locale.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/locale.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/locale.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/locale.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/introduction.html\" class=\"sidebar-link\">Introduction</a></li><li><a href=\"/vue-i18n/started.html\" class=\"sidebar-link\">Getting started</a></li><li><a href=\"/vue-i18n/installation.html\" class=\"sidebar-link\">Installation</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/guide/formatting.html\" class=\"sidebar-link\">Formatting</a></li><li><a href=\"/vue-i18n/guide/pluralization.html\" class=\"sidebar-link\">Pluralization</a></li><li><a href=\"/vue-i18n/guide/datetime.html\" class=\"sidebar-link\">DateTime localization</a></li><li><a href=\"/vue-i18n/guide/number.html\" class=\"sidebar-link\">Number localization</a></li><li><a href=\"/vue-i18n/guide/messages.html\" class=\"sidebar-link\">Locale messages syntax</a></li><li><a href=\"/vue-i18n/guide/fallback.html\" class=\"sidebar-link\">Fallback localization</a></li><li><a href=\"/vue-i18n/guide/component.html\" class=\"sidebar-link\">Component based localization</a></li><li><a href=\"/vue-i18n/guide/directive.html\" class=\"sidebar-link\">Custom directive localization</a></li><li><a href=\"/vue-i18n/guide/interpolation.html\" class=\"sidebar-link\">Component interpolation</a></li><li><a href=\"/vue-i18n/guide/sfc.html\" class=\"sidebar-link\">Single file components</a></li><li><a href=\"/vue-i18n/guide/hot-reload.html\" class=\"sidebar-link\">Hot reloading</a></li><li><a href=\"/vue-i18n/guide/locale.html\" class=\"active sidebar-link\">Locale changing</a></li><li><a href=\"/vue-i18n/guide/lazy-loading.html\" class=\"sidebar-link\">Lazy loading translations</a></li><li><a href=\"/vue-i18n/guide/tooling.html\" class=\"sidebar-link\">Tooling</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/legacy/\" class=\"sidebar-link\">Migration from v5.x</a></li><li><a href=\"/vue-i18n/legacy/v5.html\" class=\"sidebar-link\">documentation for v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"locale-changing\"><a href=\"#locale-changing\" class=\"header-anchor\">#</a> Locale changing</h1> <p>Normally, using the root Vue instance as the starting point, all child components are localized using the <code>locale</code> property of the <code>VueI18n</code> class as a reference.</p> <p>Sometimes you might want to dynamically change the locale. In that case you can change the value of the <code>locale</code> property of the <code>VueI18n</code> instance.</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'ja'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// set locale</span>\n  <span class=\"token operator\">...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// create root Vue instance</span>\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token punctuation\">,</span>\n  <span class=\"token operator\">...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// change other locale</span>\ni18n<span class=\"token punctuation\">.</span>locale <span class=\"token operator\">=</span> <span class=\"token string\">'en'</span>\n</code></pre></div><p>Each component contains a <code>VueI18n</code> instance referenced as the <code>$i18n</code> property that can also be used to change the locale.</p> <p>Example:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>template</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>locale-changer<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>select</span> <span class=\"token attr-name\">v-model</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>$i18n.locale<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>option</span> <span class=\"token attr-name\">v-for</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>(lang, i) in langs<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">:key</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>`Lang${i}`<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">:value</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>lang<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>{{ lang }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>option</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>select</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>template</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token script\"><span class=\"token language-javascript\">\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">default</span> <span class=\"token punctuation\">{</span>\n  name<span class=\"token operator\">:</span> <span class=\"token string\">'locale-changer'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token function\">data</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span> langs<span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'ja'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">]</span> <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><div class=\"warning custom-block\"><p class=\"custom-block-title\">Notice</p> <p>⚠️ Locale changing is ignored for components that use <code>sync: false</code>.</p></div> <div class=\"warning custom-block\"><p class=\"custom-block-title\">Component vs. root scope</p> <p>⚠️ Changing <code>$i18n.locale</code> inside a component does not update the root locale.\nIf you rely on the root locale, for example when using <a href=\"/vue-i18n/guide/fallback.html\">root fallbacks</a>, use <code>$root.$i18n.locale</code> instead of <code>$i18n.locale</code>.</p></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/guide/locale.md\" target=\"_blank\" rel=\"noopener noreferrer\">Edit this page on GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Last Updated: </span> <span class=\"time\">7/20/2019, 5:02:30 PM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/guide/hot-reload.html\" class=\"prev\">\n          Hot reloading\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/guide/lazy-loading.html\">\n          Lazy loading translations\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/14.1819508a.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/guide/messages.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en-US\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Locale messages syntax | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n is internationalization plugin for Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/15.12152ec7.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/messages.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/messages.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/messages.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/messages.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/messages.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/messages.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/introduction.html\" class=\"sidebar-link\">Introduction</a></li><li><a href=\"/vue-i18n/started.html\" class=\"sidebar-link\">Getting started</a></li><li><a href=\"/vue-i18n/installation.html\" class=\"sidebar-link\">Installation</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/guide/formatting.html\" class=\"sidebar-link\">Formatting</a></li><li><a href=\"/vue-i18n/guide/pluralization.html\" class=\"sidebar-link\">Pluralization</a></li><li><a href=\"/vue-i18n/guide/datetime.html\" class=\"sidebar-link\">DateTime localization</a></li><li><a href=\"/vue-i18n/guide/number.html\" class=\"sidebar-link\">Number localization</a></li><li><a href=\"/vue-i18n/guide/messages.html\" class=\"active sidebar-link\">Locale messages syntax</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/messages.html#structure\" class=\"sidebar-link\">Structure</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/messages.html#linked-locale-messages\" class=\"sidebar-link\">Linked locale messages</a></li></ul></li><li><a href=\"/vue-i18n/guide/fallback.html\" class=\"sidebar-link\">Fallback localization</a></li><li><a href=\"/vue-i18n/guide/component.html\" class=\"sidebar-link\">Component based localization</a></li><li><a href=\"/vue-i18n/guide/directive.html\" class=\"sidebar-link\">Custom directive localization</a></li><li><a href=\"/vue-i18n/guide/interpolation.html\" class=\"sidebar-link\">Component interpolation</a></li><li><a href=\"/vue-i18n/guide/sfc.html\" class=\"sidebar-link\">Single file components</a></li><li><a href=\"/vue-i18n/guide/hot-reload.html\" class=\"sidebar-link\">Hot reloading</a></li><li><a href=\"/vue-i18n/guide/locale.html\" class=\"sidebar-link\">Locale changing</a></li><li><a href=\"/vue-i18n/guide/lazy-loading.html\" class=\"sidebar-link\">Lazy loading translations</a></li><li><a href=\"/vue-i18n/guide/tooling.html\" class=\"sidebar-link\">Tooling</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/legacy/\" class=\"sidebar-link\">Migration from v5.x</a></li><li><a href=\"/vue-i18n/legacy/v5.html\" class=\"sidebar-link\">documentation for v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"locale-messages-syntax\"><a href=\"#locale-messages-syntax\" class=\"header-anchor\">#</a> Locale messages syntax</h1> <h2 id=\"structure\"><a href=\"#structure\" class=\"header-anchor\">#</a> Structure</h2> <p>Locale Messages syntax below:</p> <div class=\"language-typescript extra-class\"><pre class=\"language-typescript\"><code><span class=\"token comment\">// As Flowtype definition, Locale Messages syntax like BNF annotation</span>\n<span class=\"token keyword\">type</span> LocaleMessages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span> <span class=\"token punctuation\">[</span>key<span class=\"token operator\">:</span> Locale<span class=\"token punctuation\">]</span><span class=\"token operator\">:</span> LocaleMessageObject <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">type</span> LocaleMessageObject <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span> <span class=\"token punctuation\">[</span>key<span class=\"token operator\">:</span> Path<span class=\"token punctuation\">]</span><span class=\"token operator\">:</span> LocaleMessage <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">type</span> LocaleMessageArray <span class=\"token operator\">=</span> LocaleMessage<span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">type</span> LocaleMessage <span class=\"token operator\">=</span> <span class=\"token builtin\">string</span> <span class=\"token operator\">|</span> LocaleMessageObject <span class=\"token operator\">|</span> LocaleMessageArray<span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">type</span> Locale <span class=\"token operator\">=</span> <span class=\"token builtin\">string</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">type</span> Path <span class=\"token operator\">=</span> <span class=\"token builtin\">string</span><span class=\"token punctuation\">;</span>\n</code></pre></div><p>Based on the above syntax, You can configure the following Locale Messages structure:</p> <div class=\"language-json extra-class\"><pre class=\"language-json\"><code><span class=\"token punctuation\">{</span>\n  <span class=\"token property\">&quot;en&quot;</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>  <span class=\"token comment\">// 'en' Locale</span>\n    <span class=\"token property\">&quot;key1&quot;</span><span class=\"token operator\">:</span> <span class=\"token string\">&quot;this is message1&quot;</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// basic</span>\n    <span class=\"token property\">&quot;nested&quot;</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> <span class=\"token comment\">// nested</span>\n      <span class=\"token property\">&quot;message1&quot;</span><span class=\"token operator\">:</span> <span class=\"token string\">&quot;this is nested message1&quot;</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token property\">&quot;errors&quot;</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span> <span class=\"token comment\">// array</span>\n      <span class=\"token string\">&quot;this is 0 error code message&quot;</span><span class=\"token punctuation\">,</span>\n      <span class=\"token punctuation\">{</span>  <span class=\"token comment\">// object in array</span>\n        <span class=\"token property\">&quot;internal1&quot;</span><span class=\"token operator\">:</span> <span class=\"token string\">&quot;this is internal 1 error message&quot;</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      <span class=\"token punctuation\">[</span>  <span class=\"token comment\">// array in array</span>\n        <span class=\"token string\">&quot;this is nested array error 1&quot;</span>\n      <span class=\"token punctuation\">]</span>\n    <span class=\"token punctuation\">]</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token property\">&quot;ja&quot;</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> <span class=\"token comment\">// 'ja' Locale</span>\n    <span class=\"token comment\">// ...</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>In the above Locale Messages structure, You can translate using below key paths.</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- basic --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('key1') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- nested --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('nested.message1') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- array --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('errors[0]') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- object in array --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('errors[1].internal1') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- array in array --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('errors[2][0]') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Output the following:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- basic --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>this is message1<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- nested --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>this is nested message1<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- array --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>this is 0 error code message<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- object in array --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>this is internal 1 error message<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- array in array --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>this is nested array error 1<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"linked-locale-messages\"><a href=\"#linked-locale-messages\" class=\"header-anchor\">#</a> Linked locale messages</h2> <p>If there's a translation key that will always have the same concrete text as another one you can just link to it. To link to another translation key, all you have to do is to prefix its contents with an <code>@:</code> sign followed by the full name of the translation key including the namespace you want to link to.</p> <p>Locale messages the below:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      the_world<span class=\"token operator\">:</span> <span class=\"token string\">'the world'</span><span class=\"token punctuation\">,</span>\n      dio<span class=\"token operator\">:</span> <span class=\"token string\">'DIO:'</span><span class=\"token punctuation\">,</span>\n      linked<span class=\"token operator\">:</span> <span class=\"token string\">'@:message.dio @:message.the_world !!!!'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>Template:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('message.linked') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Output:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>DIO: the world !!!!<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h3 id=\"formatting-linked-locale-messages\"><a href=\"#formatting-linked-locale-messages\" class=\"header-anchor\">#</a> Formatting linked locale messages</h3> <p>If the language distinguish cases of character, you may need control the case of the linked locale messages.\nLinked messages can be formatted with modifier <code>@.modifier:key</code></p> <p>The below modifiers are available currently.</p> <ul><li><code>upper</code>: Uppercase all characters in the linked message.</li> <li><code>lower</code>: Lowercase all characters in the linked message.</li> <li><code>capitalize</code>: Capitalize the first character in the linked message.</li></ul> <p>Locale messages the below:</p> <div class=\"language-javascript extra-class\"><pre class=\"language-javascript\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      homeAddress<span class=\"token operator\">:</span> <span class=\"token string\">'Home address'</span><span class=\"token punctuation\">,</span>\n      missingHomeAddress<span class=\"token operator\">:</span> <span class=\"token string\">'Please provide @.lower:message.homeAddress'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>label</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('message.homeAddress') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>label</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>error<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>{{ $t('message.missingHomeAddress') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Output the below:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>label</span><span class=\"token punctuation\">&gt;</span></span>Home address<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>label</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>error<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>Please provide home address<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>You can add modifiers or overwrite the existing ones passing the <code>modifiers</code> options to the <code>VueI18n</code> constructor.</p> <div class=\"language-javascript extra-class\"><pre class=\"language-javascript\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">// ...</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  modifiers<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token function-variable function\">snakeCase</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">str</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> str<span class=\"token punctuation\">.</span><span class=\"token function\">split</span><span class=\"token punctuation\">(</span><span class=\"token string\">' '</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">join</span><span class=\"token punctuation\">(</span><span class=\"token string\">'-'</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n</code></pre></div><h3 id=\"grouping-by-brackets\"><a href=\"#grouping-by-brackets\" class=\"header-anchor\">#</a> Grouping by brackets</h3> <p>A translation key of linked locale message can also have the form of <code>@:(message.foo.bar.baz)</code> in which the link to another translation key is within brackets <code>()</code>.</p> <p>This can be useful if the link <code>@:message.something</code> is followed by period <code>.</code>, which otherwise would be part of the link and may not need to be.</p> <p>Locale messages:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      dio<span class=\"token operator\">:</span> <span class=\"token string\">'DIO'</span><span class=\"token punctuation\">,</span>\n      linked<span class=\"token operator\">:</span> <span class=\"token string\">'There\\'s a reason, you lost, @:(message.dio).'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>Template:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('message.linked') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Output:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>There's a reason, you lost, DIO.<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/guide/messages.md\" target=\"_blank\" rel=\"noopener noreferrer\">Edit this page on GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Last Updated: </span> <span class=\"time\">5/11/2020, 7:03:20 PM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/guide/number.html\" class=\"prev\">\n          Number localization\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/guide/fallback.html\">\n          Fallback localization\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/15.12152ec7.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/guide/number.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en-US\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Number localization | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n is internationalization plugin for Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/16.c251473e.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/number.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/number.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/number.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/number.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/number.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/number.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/introduction.html\" class=\"sidebar-link\">Introduction</a></li><li><a href=\"/vue-i18n/started.html\" class=\"sidebar-link\">Getting started</a></li><li><a href=\"/vue-i18n/installation.html\" class=\"sidebar-link\">Installation</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/guide/formatting.html\" class=\"sidebar-link\">Formatting</a></li><li><a href=\"/vue-i18n/guide/pluralization.html\" class=\"sidebar-link\">Pluralization</a></li><li><a href=\"/vue-i18n/guide/datetime.html\" class=\"sidebar-link\">DateTime localization</a></li><li><a href=\"/vue-i18n/guide/number.html\" class=\"active sidebar-link\">Number localization</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/number.html#custom-formatting\" class=\"sidebar-link\">Custom formatting</a></li></ul></li><li><a href=\"/vue-i18n/guide/messages.html\" class=\"sidebar-link\">Locale messages syntax</a></li><li><a href=\"/vue-i18n/guide/fallback.html\" class=\"sidebar-link\">Fallback localization</a></li><li><a href=\"/vue-i18n/guide/component.html\" class=\"sidebar-link\">Component based localization</a></li><li><a href=\"/vue-i18n/guide/directive.html\" class=\"sidebar-link\">Custom directive localization</a></li><li><a href=\"/vue-i18n/guide/interpolation.html\" class=\"sidebar-link\">Component interpolation</a></li><li><a href=\"/vue-i18n/guide/sfc.html\" class=\"sidebar-link\">Single file components</a></li><li><a href=\"/vue-i18n/guide/hot-reload.html\" class=\"sidebar-link\">Hot reloading</a></li><li><a href=\"/vue-i18n/guide/locale.html\" class=\"sidebar-link\">Locale changing</a></li><li><a href=\"/vue-i18n/guide/lazy-loading.html\" class=\"sidebar-link\">Lazy loading translations</a></li><li><a href=\"/vue-i18n/guide/tooling.html\" class=\"sidebar-link\">Tooling</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/legacy/\" class=\"sidebar-link\">Migration from v5.x</a></li><li><a href=\"/vue-i18n/legacy/v5.html\" class=\"sidebar-link\">documentation for v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"number-localization\"><a href=\"#number-localization\" class=\"header-anchor\">#</a> Number localization</h1> <div class=\"tip custom-block\"><p class=\"custom-block-title\">Support Version</p> <p>🆕 7.0+</p></div> <p>You can localize the number with your definition formats.</p> <p>Number formats the below:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> numberFormats <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token string\">'en-US'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    currency<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      style<span class=\"token operator\">:</span> <span class=\"token string\">'currency'</span><span class=\"token punctuation\">,</span> currency<span class=\"token operator\">:</span> <span class=\"token string\">'USD'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token string\">'ja-JP'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    currency<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      style<span class=\"token operator\">:</span> <span class=\"token string\">'currency'</span><span class=\"token punctuation\">,</span> currency<span class=\"token operator\">:</span> <span class=\"token string\">'JPY'</span><span class=\"token punctuation\">,</span> currencyDisplay<span class=\"token operator\">:</span> <span class=\"token string\">'symbol'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>As the above, you can define named number formats (e.g. <code>currency</code>, etc), and you need to use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat\" target=\"_blank\" rel=\"noopener noreferrer\">the options with ECMA-402 Intl.NumberFormat<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></p> <p>After that, when using the locale messages, you need to specify the <code>numberFormats</code> option of the <code>VueI18n</code> constructor:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  numberFormats\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>Template the below:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $n(100, 'currency') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $n(100, 'currency', 'ja-JP') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Output the below:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>$100.00<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>￥100<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"custom-formatting\"><a href=\"#custom-formatting\" class=\"header-anchor\">#</a> Custom formatting</h2> <div class=\"tip custom-block\"><p class=\"custom-block-title\">Support Version</p> <p>🆕 8.10+</p></div> <p><code>$n</code> method returns resulting string with fully formatted number, which can only be used as a whole. In situations when you need to style some part of the formatted number (like fraction digits), <code>$n</code> is not enough. In such cases <code>&lt;i18n-n&gt;</code> functional component will be of help.</p> <p>With a minimum set of properties, <code>&lt;i18n-n&gt;</code> generates the same output as <code>$n</code>, wrapped into configured DOM element.</p> <p>The following template:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n-n</span> <span class=\"token attr-name\">:value</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>100<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n-n</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n-n</span> <span class=\"token attr-name\">:value</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>100<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">format</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>currency<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n-n</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n-n</span> <span class=\"token attr-name\">:value</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>100<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">format</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>currency<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">locale</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>ja-JP<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n-n</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>will produce the below output:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span><span class=\"token punctuation\">&gt;</span></span>100<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span><span class=\"token punctuation\">&gt;</span></span>$100.00<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span><span class=\"token punctuation\">&gt;</span></span>￥100<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>But the real power of this component comes into play when it is used with <a href=\"https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots\" target=\"_blank\" rel=\"noopener noreferrer\">scoped slots<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>.</p> <p>Let's say there is a requirement to render the integer part of the number with a bolder font. This can be achieved by specifying <code>integer</code> scoped slot element:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n-n</span> <span class=\"token attr-name\">:value</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>100<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">format</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>currency<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\"><span class=\"token namespace\">v-slot:</span>integer</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>slotProps<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">styles</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>font-weight: bold<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>{{ slotProps.integer }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n-n</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Template above will result in the following HTML:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span><span class=\"token punctuation\">&gt;</span></span>$<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\">styles</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>font-weight: bold<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>100<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>.00<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>It is possible to specify multiple scoped slots at the same time:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n-n</span> <span class=\"token attr-name\">:value</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>1234<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">:format</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>{ key: 'currency', currency: 'EUR' }<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\"><span class=\"token namespace\">v-slot:</span>currency</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>slotProps<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">styles</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>color: green<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>{{ slotProps.currency }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\"><span class=\"token namespace\">v-slot:</span>integer</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>slotProps<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">styles</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>font-weight: bold<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>{{ slotProps.integer }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\"><span class=\"token namespace\">v-slot:</span>group</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>slotProps<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">styles</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>font-weight: bold<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>{{ slotProps.group }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\"><span class=\"token namespace\">v-slot:</span>fraction</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>slotProps<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">styles</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>font-size: small<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>{{ slotProps.fraction }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n-n</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>(this resulting HTML was formatted for better readability)</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\">styles</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>color: green<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>€<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\">styles</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>font-weight: bold<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>1<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\">styles</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>font-weight: bold<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>,<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\">styles</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>font-weight: bold<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>234<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n  .\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\">styles</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>font-size: small<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>00<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>You can choose the root container's node type by specifying a <code>tag</code> prop. If omitted, it defaults to <code>'span'</code>. You can also set it to the boolean value <code>false</code> to insert the child nodes directly without creating a root element.</p> <p>Full list of the supported scoped slots as well as other <code>&lt;i18n-n&gt;</code> properties can be found <a href=\"/vue-i18n/api/#i18n-n-functional-component\">on API page</a>.</p></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/guide/number.md\" target=\"_blank\" rel=\"noopener noreferrer\">Edit this page on GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Last Updated: </span> <span class=\"time\">5/14/2020, 11:30:34 PM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/guide/datetime.html\" class=\"prev\">\n          DateTime localization\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/guide/messages.html\">\n          Locale messages syntax\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/16.c251473e.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/guide/pluralization.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en-US\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Pluralization | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n is internationalization plugin for Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/17.311179bd.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/pluralization.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/pluralization.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/pluralization.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/pluralization.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/pluralization.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/pluralization.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/introduction.html\" class=\"sidebar-link\">Introduction</a></li><li><a href=\"/vue-i18n/started.html\" class=\"sidebar-link\">Getting started</a></li><li><a href=\"/vue-i18n/installation.html\" class=\"sidebar-link\">Installation</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/guide/formatting.html\" class=\"sidebar-link\">Formatting</a></li><li><a href=\"/vue-i18n/guide/pluralization.html\" class=\"active sidebar-link\">Pluralization</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/pluralization.html#accessing-the-number-via-the-pre-defined-argument\" class=\"sidebar-link\">Accessing the number via the pre-defined argument</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/pluralization.html#custom-pluralization\" class=\"sidebar-link\">Custom pluralization</a></li></ul></li><li><a href=\"/vue-i18n/guide/datetime.html\" class=\"sidebar-link\">DateTime localization</a></li><li><a href=\"/vue-i18n/guide/number.html\" class=\"sidebar-link\">Number localization</a></li><li><a href=\"/vue-i18n/guide/messages.html\" class=\"sidebar-link\">Locale messages syntax</a></li><li><a href=\"/vue-i18n/guide/fallback.html\" class=\"sidebar-link\">Fallback localization</a></li><li><a href=\"/vue-i18n/guide/component.html\" class=\"sidebar-link\">Component based localization</a></li><li><a href=\"/vue-i18n/guide/directive.html\" class=\"sidebar-link\">Custom directive localization</a></li><li><a href=\"/vue-i18n/guide/interpolation.html\" class=\"sidebar-link\">Component interpolation</a></li><li><a href=\"/vue-i18n/guide/sfc.html\" class=\"sidebar-link\">Single file components</a></li><li><a href=\"/vue-i18n/guide/hot-reload.html\" class=\"sidebar-link\">Hot reloading</a></li><li><a href=\"/vue-i18n/guide/locale.html\" class=\"sidebar-link\">Locale changing</a></li><li><a href=\"/vue-i18n/guide/lazy-loading.html\" class=\"sidebar-link\">Lazy loading translations</a></li><li><a href=\"/vue-i18n/guide/tooling.html\" class=\"sidebar-link\">Tooling</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/legacy/\" class=\"sidebar-link\">Migration from v5.x</a></li><li><a href=\"/vue-i18n/legacy/v5.html\" class=\"sidebar-link\">documentation for v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"pluralization\"><a href=\"#pluralization\" class=\"header-anchor\">#</a> Pluralization</h1> <p>You can translate with pluralization. You must define the locale that have a pipe <code>|</code> separator, and define plurals in pipe separator.</p> <p><em>Your template will need to use <code>$tc()</code> instead of <code>$t()</code>.</em></p> <p>Locale messages below:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    car<span class=\"token operator\">:</span> <span class=\"token string\">'car | cars'</span><span class=\"token punctuation\">,</span>\n    apple<span class=\"token operator\">:</span> <span class=\"token string\">'no apples | one apple | {count} apples'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>Template below:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('car', 1) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('car', 2) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('apple', 0) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('apple', 1) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('apple', 10, { count: 10 }) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Output below:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>car<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>cars<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>no apples<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>one apple<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>10 apples<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"accessing-the-number-via-the-pre-defined-argument\"><a href=\"#accessing-the-number-via-the-pre-defined-argument\" class=\"header-anchor\">#</a> Accessing the number via the pre-defined argument</h2> <p>You don't need to explicitly give the number for pluralization.\nThe number can be accessed within locale messages via pre-defined named arguments <code>{count}</code> and/or <code>{n}</code>.\nYou can overwrite those pre-defined named arguments if necessary.</p> <p>Locale messages the below:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    apple<span class=\"token operator\">:</span> <span class=\"token string\">'no apples | one apple | {count} apples'</span><span class=\"token punctuation\">,</span>\n    banana<span class=\"token operator\">:</span> <span class=\"token string\">'no bananas | {n} banana | {n} bananas'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>Template below:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('apple', 10, { count: 10 }) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('apple', 10) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('banana', 1, { n: 1 }) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('banana', 1) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('banana', 100, { n: 'too many' }) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Output below:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>10 apples<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>10 apples<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>1 banana<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>1 banana<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>too many bananas<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"custom-pluralization\"><a href=\"#custom-pluralization\" class=\"header-anchor\">#</a> Custom pluralization</h2> <p>Such pluralization, however, does not apply to all languages (Slavic languages, for example, have different pluralization rules).</p> <p>In order to implement these rules you can override the <code>VueI18n.prototype.getChoiceIndex</code> function.</p> <p>Very simplified example using rules for Slavic languages (Russian, Ukrainian, etc.):</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code>\n<span class=\"token keyword\">const</span> defaultImpl <span class=\"token operator\">=</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">.</span>prototype<span class=\"token punctuation\">.</span>getChoiceIndex\n\n<span class=\"token comment\">/**\n * @param choice {number} a choice index given by the input to $tc: `$tc('path.to.rule', choiceIndex)`\n * @param choicesLength {number} an overall amount of available choices\n * @returns a final choice index to select plural word by\n**/</span>\n<span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">.</span>prototype<span class=\"token punctuation\">.</span><span class=\"token function-variable function\">getChoiceIndex</span> <span class=\"token operator\">=</span> <span class=\"token keyword\">function</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">choice<span class=\"token punctuation\">,</span> choicesLength</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// this === VueI18n instance, so the locale property also exists here</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>locale <span class=\"token operator\">!==</span> <span class=\"token string\">'ru'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">// proceed to the default implementation</span>\n    <span class=\"token keyword\">return</span> <span class=\"token function\">defaultImpl</span><span class=\"token punctuation\">.</span><span class=\"token function\">apply</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">,</span> arguments<span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>choice <span class=\"token operator\">===</span> <span class=\"token number\">0</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">const</span> teen <span class=\"token operator\">=</span> choice <span class=\"token operator\">&gt;</span> <span class=\"token number\">10</span> <span class=\"token operator\">&amp;&amp;</span> choice <span class=\"token operator\">&lt;</span> <span class=\"token number\">20</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">const</span> endsWithOne <span class=\"token operator\">=</span> choice <span class=\"token operator\">%</span> <span class=\"token number\">10</span> <span class=\"token operator\">===</span> <span class=\"token number\">1</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token operator\">!</span>teen <span class=\"token operator\">&amp;&amp;</span> endsWithOne<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token number\">1</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token operator\">!</span>teen <span class=\"token operator\">&amp;&amp;</span> choice <span class=\"token operator\">%</span> <span class=\"token number\">10</span> <span class=\"token operator\">&gt;=</span> <span class=\"token number\">2</span> <span class=\"token operator\">&amp;&amp;</span> choice <span class=\"token operator\">%</span> <span class=\"token number\">10</span> <span class=\"token operator\">&lt;=</span> <span class=\"token number\">4</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token number\">2</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">return</span> <span class=\"token punctuation\">(</span>choicesLength <span class=\"token operator\">&lt;</span> <span class=\"token number\">4</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">?</span> <span class=\"token number\">2</span> <span class=\"token operator\">:</span> <span class=\"token number\">3</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>This would effectively give this:</p> <div class=\"language-javascript extra-class\"><pre class=\"language-javascript\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  ru<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    car<span class=\"token operator\">:</span> <span class=\"token string\">'0 машин | {n} машина | {n} машины | {n} машин'</span><span class=\"token punctuation\">,</span>\n    banana<span class=\"token operator\">:</span> <span class=\"token string\">'нет бананов | {n} банан | {n} банана | {n} бананов'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>Where the format is <code>0 things | 1 thing | few things | multiple things</code>.</p> <p>Your template still needs to use <code>$tc()</code>, not <code>$t()</code>:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('car', 1) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('car', 2) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('car', 4) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('car', 12) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('car', 21) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('banana', 0) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('banana', 4) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('banana', 11) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('banana', 31) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Which results in:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>1 машина<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>2 машины<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>4 машины<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>12 машин<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>21 машина<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>нет бананов<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>4 банана<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>11 бананов<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>31 банан<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/guide/pluralization.md\" target=\"_blank\" rel=\"noopener noreferrer\">Edit this page on GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Last Updated: </span> <span class=\"time\">5/11/2020, 12:33:05 PM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/guide/formatting.html\" class=\"prev\">\n          Formatting\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/guide/datetime.html\">\n          DateTime localization\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/17.311179bd.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/guide/sfc.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en-US\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Single file components | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n is internationalization plugin for Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/sfc.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/sfc.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/sfc.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/sfc.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/sfc.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/sfc.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/introduction.html\" class=\"sidebar-link\">Introduction</a></li><li><a href=\"/vue-i18n/started.html\" class=\"sidebar-link\">Getting started</a></li><li><a href=\"/vue-i18n/installation.html\" class=\"sidebar-link\">Installation</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/guide/formatting.html\" class=\"sidebar-link\">Formatting</a></li><li><a href=\"/vue-i18n/guide/pluralization.html\" class=\"sidebar-link\">Pluralization</a></li><li><a href=\"/vue-i18n/guide/datetime.html\" class=\"sidebar-link\">DateTime localization</a></li><li><a href=\"/vue-i18n/guide/number.html\" class=\"sidebar-link\">Number localization</a></li><li><a href=\"/vue-i18n/guide/messages.html\" class=\"sidebar-link\">Locale messages syntax</a></li><li><a href=\"/vue-i18n/guide/fallback.html\" class=\"sidebar-link\">Fallback localization</a></li><li><a href=\"/vue-i18n/guide/component.html\" class=\"sidebar-link\">Component based localization</a></li><li><a href=\"/vue-i18n/guide/directive.html\" class=\"sidebar-link\">Custom directive localization</a></li><li><a href=\"/vue-i18n/guide/interpolation.html\" class=\"sidebar-link\">Component interpolation</a></li><li><a href=\"/vue-i18n/guide/sfc.html\" class=\"active sidebar-link\">Single file components</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/sfc.html#basic-usage\" class=\"sidebar-link\">Basic Usage</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/sfc.html#installing-vue-i18n-loader\" class=\"sidebar-link\">Installing vue-i18n-loader</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/sfc.html#webpack\" class=\"sidebar-link\">Webpack</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/sfc.html#vue-cli-3-0\" class=\"sidebar-link\">Vue CLI 3.0</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/sfc.html#laravel-mix\" class=\"sidebar-link\">Laravel-Mix</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/sfc.html#yaml-loading\" class=\"sidebar-link\">YAML loading</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/sfc.html#multiple-custom-blocks\" class=\"sidebar-link\">Multiple custom blocks</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/sfc.html#scoped-style\" class=\"sidebar-link\">Scoped style</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/sfc.html#custom-blocks-in-functional-component\" class=\"sidebar-link\">Custom blocks in functional component</a></li></ul></li><li><a href=\"/vue-i18n/guide/hot-reload.html\" class=\"sidebar-link\">Hot reloading</a></li><li><a href=\"/vue-i18n/guide/locale.html\" class=\"sidebar-link\">Locale changing</a></li><li><a href=\"/vue-i18n/guide/lazy-loading.html\" class=\"sidebar-link\">Lazy loading translations</a></li><li><a href=\"/vue-i18n/guide/tooling.html\" class=\"sidebar-link\">Tooling</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/legacy/\" class=\"sidebar-link\">Migration from v5.x</a></li><li><a href=\"/vue-i18n/legacy/v5.html\" class=\"sidebar-link\">documentation for v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"single-file-components\"><a href=\"#single-file-components\" class=\"header-anchor\">#</a> Single file components</h1> <h2 id=\"basic-usage\"><a href=\"#basic-usage\" class=\"header-anchor\">#</a> Basic Usage</h2> <p>If you are building Vue component or Vue application using single file components, you can manage the locale messages <code>i18n</code> custom block.</p> <p>The following in <a href=\"https://github.com/kazupon/vue-i18n/tree/dev/examples/sfc\" target=\"_blank\" rel=\"noopener noreferrer\">single file components example<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token operator\">&lt;</span>i18n<span class=\"token operator\">&gt;</span>\n<span class=\"token punctuation\">{</span>\n  <span class=\"token string\">&quot;en&quot;</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token string\">&quot;hello&quot;</span><span class=\"token operator\">:</span> <span class=\"token string\">&quot;hello world!&quot;</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token string\">&quot;ja&quot;</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token string\">&quot;hello&quot;</span><span class=\"token operator\">:</span> <span class=\"token string\">&quot;こんにちは、世界！&quot;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>i18n<span class=\"token operator\">&gt;</span>\n\n<span class=\"token operator\">&lt;</span>template<span class=\"token operator\">&gt;</span>\n  <span class=\"token operator\">&lt;</span>div id<span class=\"token operator\">=</span><span class=\"token string\">&quot;app&quot;</span><span class=\"token operator\">&gt;</span>\n    <span class=\"token operator\">&lt;</span>label <span class=\"token keyword\">for</span><span class=\"token operator\">=</span><span class=\"token string\">&quot;locale&quot;</span><span class=\"token operator\">&gt;</span>locale<span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>label<span class=\"token operator\">&gt;</span>\n    <span class=\"token operator\">&lt;</span>select v<span class=\"token operator\">-</span>model<span class=\"token operator\">=</span><span class=\"token string\">&quot;locale&quot;</span><span class=\"token operator\">&gt;</span>\n      <span class=\"token operator\">&lt;</span>option<span class=\"token operator\">&gt;</span>en<span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>option<span class=\"token operator\">&gt;</span>\n      <span class=\"token operator\">&lt;</span>option<span class=\"token operator\">&gt;</span>ja<span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>option<span class=\"token operator\">&gt;</span>\n    <span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>select<span class=\"token operator\">&gt;</span>\n    <span class=\"token operator\">&lt;</span>p<span class=\"token operator\">&gt;</span>message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">{</span> <span class=\"token function\">$t</span><span class=\"token punctuation\">(</span><span class=\"token string\">'hello'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span><span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>p<span class=\"token operator\">&gt;</span>\n  <span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>div<span class=\"token operator\">&gt;</span>\n<span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>template<span class=\"token operator\">&gt;</span>\n\n<span class=\"token operator\">&lt;</span>script<span class=\"token operator\">&gt;</span>\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">default</span> <span class=\"token punctuation\">{</span>\n  name<span class=\"token operator\">:</span> <span class=\"token string\">'app'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token function\">data</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>$i18n<span class=\"token punctuation\">.</span>locale <span class=\"token operator\">=</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span> locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span> <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  watch<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token function\">locale</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">val</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>$i18n<span class=\"token punctuation\">.</span>locale <span class=\"token operator\">=</span> val\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>script<span class=\"token operator\">&gt;</span>\n</code></pre></div><h2 id=\"installing-vue-i18n-loader\"><a href=\"#installing-vue-i18n-loader\" class=\"header-anchor\">#</a> Installing vue-i18n-loader</h2> <p>You need to install <code>vue-loader</code> and <code>vue-i18n-loader</code> due to use <code>&lt;i18n&gt;</code> custom blocks. While <a href=\"https://github.com/vuejs/vue-loader\" target=\"_blank\" rel=\"noopener noreferrer\">vue-loader<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> most likely is already used in your project if you are working with single file components, you must install <a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\">vue-i18n-loader<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> additionally:</p> <div class=\"language-sh extra-class\"><pre class=\"language-text\"><code>npm i --save-dev @intlify/vue-i18n-loader@next\n</code></pre></div><h2 id=\"webpack\"><a href=\"#webpack\" class=\"header-anchor\">#</a> Webpack</h2> <p>For Webpack the configuration below is required:</p> <p>for vue-loader v15 or later:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code>module<span class=\"token punctuation\">.</span>exports <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// ...</span>\n  module<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    rules<span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n      <span class=\"token punctuation\">{</span>\n        test<span class=\"token operator\">:</span> <span class=\"token regex\">/\\.vue$/</span><span class=\"token punctuation\">,</span>\n        loader<span class=\"token operator\">:</span> <span class=\"token string\">'vue-loader'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      <span class=\"token punctuation\">{</span>\n        resourceQuery<span class=\"token operator\">:</span> <span class=\"token regex\">/blockType=i18n/</span><span class=\"token punctuation\">,</span>\n        type<span class=\"token operator\">:</span> <span class=\"token string\">'javascript/auto'</span><span class=\"token punctuation\">,</span>\n        loader<span class=\"token operator\">:</span> <span class=\"token string\">'@intlify/vue-i18n-loader'</span>\n      <span class=\"token punctuation\">}</span>\n      <span class=\"token comment\">// ...</span>\n    <span class=\"token punctuation\">]</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>for vue-loader v14:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code>module<span class=\"token punctuation\">.</span>exports <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// ...</span>\n  module<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    rules<span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n      <span class=\"token punctuation\">{</span>\n        test<span class=\"token operator\">:</span> <span class=\"token regex\">/\\.vue$/</span><span class=\"token punctuation\">,</span>\n        loader<span class=\"token operator\">:</span> <span class=\"token string\">'vue-loader'</span><span class=\"token punctuation\">,</span>\n        options<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n          loaders<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token comment\">// you need to specify `i18n` loaders key with `vue-i18n-loader` (https://github.com/kazupon/vue-i18n-loader)</span>\n            i18n<span class=\"token operator\">:</span> <span class=\"token string\">'@intlify/vue-i18n-loader'</span>\n          <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      <span class=\"token comment\">// ...</span>\n    <span class=\"token punctuation\">]</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><h2 id=\"vue-cli-3-0\"><a href=\"#vue-cli-3-0\" class=\"header-anchor\">#</a> Vue CLI 3.0</h2> <p><a href=\"https://github.com/vuejs/vue-cli\" target=\"_blank\" rel=\"noopener noreferrer\">Vue CLI 3.0<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> hides the webpack configuration, so, if we want to add support to the <code>&lt;i18n&gt;</code> tag inside a single file component we need to modify the existing configuration.</p> <p>In order to do that we have to create a <code>vue.config.js</code> at the root of our project. Once we have done that, we have to include the following:</p> <p>for vue-loader v15 or later:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code>module<span class=\"token punctuation\">.</span>exports <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function-variable function\">chainWebpack</span><span class=\"token operator\">:</span> <span class=\"token parameter\">config</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n    config<span class=\"token punctuation\">.</span>module\n      <span class=\"token punctuation\">.</span><span class=\"token function\">rule</span><span class=\"token punctuation\">(</span><span class=\"token string\">&quot;i18n&quot;</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">resourceQuery</span><span class=\"token punctuation\">(</span><span class=\"token regex\">/blockType=i18n/</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">type</span><span class=\"token punctuation\">(</span><span class=\"token string\">'javascript/auto'</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">use</span><span class=\"token punctuation\">(</span><span class=\"token string\">&quot;i18n&quot;</span><span class=\"token punctuation\">)</span>\n        <span class=\"token punctuation\">.</span><span class=\"token function\">loader</span><span class=\"token punctuation\">(</span><span class=\"token string\">&quot;@intlify/vue-i18n-loader&quot;</span><span class=\"token punctuation\">)</span>\n        <span class=\"token punctuation\">.</span><span class=\"token function\">end</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>for vue-loader v14:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> merge <span class=\"token operator\">=</span> <span class=\"token function\">require</span><span class=\"token punctuation\">(</span><span class=\"token string\">'deepmerge'</span><span class=\"token punctuation\">)</span>\n\nmodule<span class=\"token punctuation\">.</span>exports <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function-variable function\">chainWebpack</span><span class=\"token operator\">:</span> <span class=\"token parameter\">config</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n    config<span class=\"token punctuation\">.</span>module\n      <span class=\"token punctuation\">.</span><span class=\"token function\">rule</span><span class=\"token punctuation\">(</span><span class=\"token string\">'vue'</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">use</span><span class=\"token punctuation\">(</span><span class=\"token string\">'vue-loader'</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">tap</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">options</span> <span class=\"token operator\">=&gt;</span>\n        <span class=\"token function\">merge</span><span class=\"token punctuation\">(</span>options<span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n          loaders<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n            i18n<span class=\"token operator\">:</span> <span class=\"token string\">'@intlify/vue-i18n-loader'</span>\n          <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p><em>Don 't forget to install <a href=\"https://github.com/KyleAMathews/deepmerge\" target=\"_blank\" rel=\"noopener noreferrer\">deepmerge<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>! (<code>npm i deepmerge -D</code> or <code>yarn add deepmerge -D</code>)</em></p> <p>If you want to read more about modifying the existing configuration <a href=\"https://cli.vuejs.org/guide/webpack.html\" target=\"_blank\" rel=\"noopener noreferrer\">click here<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>.</p> <h2 id=\"laravel-mix\"><a href=\"#laravel-mix\" class=\"header-anchor\">#</a> Laravel-Mix</h2> <p>for Laravel-mix 4 with vue-loader v15 or later:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token comment\">// Extend Mix with the &quot;i18n&quot; method, that loads the vue-i18n-loader</span>\nmix<span class=\"token punctuation\">.</span><span class=\"token function\">extend</span><span class=\"token punctuation\">(</span> <span class=\"token string\">'i18n'</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">class</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token function\">webpackRules</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token keyword\">return</span> <span class=\"token punctuation\">[</span>\n                <span class=\"token punctuation\">{</span>\n                    resourceQuery<span class=\"token operator\">:</span> <span class=\"token regex\">/blockType=i18n/</span><span class=\"token punctuation\">,</span>\n                    type<span class=\"token operator\">:</span>          <span class=\"token string\">'javascript/auto'</span><span class=\"token punctuation\">,</span>\n                    loader<span class=\"token operator\">:</span>        <span class=\"token string\">'@intlify/vue-i18n-loader'</span><span class=\"token punctuation\">,</span>\n                <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n            <span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// Make sure to call the .i18n() (to load the loader) before .js(..., ...)</span>\nmix<span class=\"token punctuation\">.</span><span class=\"token function\">i18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n   <span class=\"token punctuation\">.</span><span class=\"token function\">js</span><span class=\"token punctuation\">(</span> <span class=\"token string\">'resources/js/App.js'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'public/js/app.js'</span> <span class=\"token punctuation\">)</span>\n   <span class=\"token operator\">...</span>\n</code></pre></div><p>for Laravel-mix 2 with vue-loader v14:</p> <p>As of <a href=\"https://github.com/JeffreyWay/laravel-mix/releases/tag/v2.1\" target=\"_blank\" rel=\"noopener noreferrer\">V2.1<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> of Laravel-mix, you can add custom rules via mix.extend(). Laravel mix already has its own rules for handling .vue files. To add the <code>vue-i18n-loader</code>, add the following to <code>webpack.mix.js</code></p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token comment\">// The below code will inject i18n Kazupon/vue-18-loader as a loader for .vue files.</span>\nmix<span class=\"token punctuation\">.</span><span class=\"token function\">extend</span><span class=\"token punctuation\">(</span> <span class=\"token string\">'i18n'</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span> <span class=\"token parameter\">webpackConfig<span class=\"token punctuation\">,</span> <span class=\"token operator\">...</span>args</span> <span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    webpackConfig<span class=\"token punctuation\">.</span>module<span class=\"token punctuation\">.</span>rules<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span> <span class=\"token punctuation\">(</span> <span class=\"token parameter\">module</span> <span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token comment\">// Search for the &quot;vue-loader&quot; component, which handles .vue files.</span>\n        <span class=\"token keyword\">if</span><span class=\"token punctuation\">(</span> module<span class=\"token punctuation\">.</span>loader <span class=\"token operator\">!==</span> <span class=\"token string\">'vue-loader'</span> <span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token keyword\">return</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n\n        <span class=\"token comment\">// Within this module, add the vue-i18n-loader for the i18n tag.</span>\n        module<span class=\"token punctuation\">.</span>options<span class=\"token punctuation\">.</span>loaders<span class=\"token punctuation\">.</span>i18n <span class=\"token operator\">=</span> <span class=\"token string\">'@intlify/vue-i18n-loader'</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span> <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span> <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// Make sure to call .i18n() before .js(..., ...)</span>\nmix<span class=\"token punctuation\">.</span><span class=\"token function\">i18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n   <span class=\"token punctuation\">.</span><span class=\"token function\">js</span><span class=\"token punctuation\">(</span> <span class=\"token string\">'resources/assets/js/App.js'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'public/js/app.js'</span> <span class=\"token punctuation\">)</span>\n   <span class=\"token operator\">...</span>\n</code></pre></div><h2 id=\"yaml-loading\"><a href=\"#yaml-loading\" class=\"header-anchor\">#</a> YAML loading</h2> <p><code>i18n</code> custom blocks need to specify <code>JSON</code> format, also you can use <code>YAML</code> format by using pre-loader feature of <code>vue-loader</code>.</p> <p>the <code>i18n</code> custom blocks below of <code>YAML</code> format:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\nen:\n  hello: &quot;hello world!&quot;\nja:\n  hello: &quot;こんにちは、世界！&quot;\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Webpack conf the below:</p> <p>for vue-loader v15 or later:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token comment\">// Vue CLI 3.0</span>\nmodule<span class=\"token punctuation\">.</span>exports <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function-variable function\">chainWebpack</span><span class=\"token operator\">:</span> <span class=\"token parameter\">config</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n    config<span class=\"token punctuation\">.</span>module\n      <span class=\"token punctuation\">.</span><span class=\"token function\">rule</span><span class=\"token punctuation\">(</span><span class=\"token string\">&quot;i18n&quot;</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">resourceQuery</span><span class=\"token punctuation\">(</span><span class=\"token regex\">/blockType=i18n/</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">type</span><span class=\"token punctuation\">(</span><span class=\"token string\">'javascript/auto'</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">use</span><span class=\"token punctuation\">(</span><span class=\"token string\">&quot;i18n&quot;</span><span class=\"token punctuation\">)</span>\n        <span class=\"token punctuation\">.</span><span class=\"token function\">loader</span><span class=\"token punctuation\">(</span><span class=\"token string\">&quot;@intlify/vue-i18n-loader&quot;</span><span class=\"token punctuation\">)</span>\n        <span class=\"token punctuation\">.</span><span class=\"token function\">end</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">use</span><span class=\"token punctuation\">(</span><span class=\"token string\">'yaml'</span><span class=\"token punctuation\">)</span>\n        <span class=\"token punctuation\">.</span><span class=\"token function\">loader</span><span class=\"token punctuation\">(</span><span class=\"token string\">'yaml-loader'</span><span class=\"token punctuation\">)</span>\n        <span class=\"token punctuation\">.</span><span class=\"token function\">end</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>for vue-loader v14:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code>module<span class=\"token punctuation\">.</span>exports <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// ...</span>\n  module<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    rules<span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n      <span class=\"token punctuation\">{</span>\n        test<span class=\"token operator\">:</span> <span class=\"token regex\">/\\.vue$/</span><span class=\"token punctuation\">,</span>\n        loader<span class=\"token operator\">:</span> <span class=\"token string\">'vue-loader'</span><span class=\"token punctuation\">,</span>\n        options<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n          preLoaders<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n            i18n<span class=\"token operator\">:</span> <span class=\"token string\">'yaml-loader'</span>\n          <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n          loaders<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n            i18n<span class=\"token operator\">:</span> <span class=\"token string\">'@intlify/vue-i18n-loader'</span>\n          <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      <span class=\"token comment\">// ...</span>\n    <span class=\"token punctuation\">]</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><h2 id=\"multiple-custom-blocks\"><a href=\"#multiple-custom-blocks\" class=\"header-anchor\">#</a> Multiple custom blocks</h2> <p>You can use locale messages with multiple <code>i18n</code> custom blocks.</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>./common/locales.json<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n  {\n    &quot;en&quot;: {\n      &quot;hello&quot;: &quot;hello world!&quot;\n    },\n    &quot;ja&quot;: {\n      &quot;hello&quot;: &quot;こんにちは、世界！&quot;\n    }\n  }\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>In the above, first custom block load the common locale message with <code>src</code> attribute, second custom block load the locale message that is defined only at single file component. These locale messages will be merged as locale message of component.</p> <p>In this way, multiple custom blocks useful when want to be used as module.</p> <h2 id=\"scoped-style\"><a href=\"#scoped-style\" class=\"header-anchor\">#</a> Scoped style</h2> <p>When using <code>vue-i18n</code> with <code>scoped style</code>, it's important to remember to use a <a href=\"https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements\" target=\"_blank\" rel=\"noopener noreferrer\">deep selector<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> for styling an element <strong><em>inside</em></strong> the translation string. For example:</p> <p><strong>Translation contains only text</strong> (Work without deep selector)</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code>...\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n{\n  &quot;en&quot;: {\n    &quot;hello&quot;: &quot;hello world!&quot;\n  },\n  &quot;ja&quot;: {\n    &quot;hello&quot;: &quot;こんにちは、世界&quot;\n  }\n}\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n...\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>template</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>parent<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>message: {{ $t('hello') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>template</span><span class=\"token punctuation\">&gt;</span></span>\n...\n<span class=\"token comment\">&lt;!-- Will work --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>style</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token style\"><span class=\"token language-css\">\n<span class=\"token selector\">.parent p</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token property\">color</span><span class=\"token punctuation\">:</span> #42b883<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>style</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p><strong>Translation with HTML element</strong> (Must use deep selector)</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code>...\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n{\n  &quot;en&quot;: {\n    &quot;hello&quot;: &quot;hello<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span><span class=\"token punctuation\">&gt;</span></span>world!<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>&quot;\n  },\n  &quot;ja&quot;: {\n    &quot;hello&quot;: &quot;こんにちは、<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span><span class=\"token punctuation\">&gt;</span></span>世界！<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>&quot;\n  }\n}\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n...\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>template</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>parent<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">v-html</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>$t('hello')<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>template</span><span class=\"token punctuation\">&gt;</span></span>\n...\n<span class=\"token comment\">&lt;!-- Won't work --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>style</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token style\"><span class=\"token language-css\">\n<span class=\"token selector\">.parent p</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token property\">color</span><span class=\"token punctuation\">:</span> #42b883<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token selector\">.parent p span</span><span class=\"token punctuation\">{</span>\n  <span class=\"token property\">color</span><span class=\"token punctuation\">:</span> red<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>style</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token comment\">&lt;!-- Will work --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>style</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token style\"><span class=\"token language-css\">\n<span class=\"token selector\">.parent p</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token property\">color</span><span class=\"token punctuation\">:</span> #42b883<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token selector\">.parent p &gt;&gt;&gt; span</span><span class=\"token punctuation\">{</span>\n  <span class=\"token property\">color</span><span class=\"token punctuation\">:</span> red<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>style</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"custom-blocks-in-functional-component\"><a href=\"#custom-blocks-in-functional-component\" class=\"header-anchor\">#</a> Custom blocks in functional component</h2> <p>If the single file components have the template using a functional component, and you had been defined <code>i18n</code> custom blocks, note you cannot localize using locale messages.</p> <p>For example, the following code cannot localize with the locale message of <code>i18n</code> custom block.</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n{\n  &quot;en&quot;: {\n    &quot;hello&quot;: &quot;hello world&quot;\n  },\n  &quot;ja&quot;: {\n    &quot;hello&quot;: &quot;こんにちは、世界&quot;\n  }\n}\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>template</span> <span class=\"token attr-name\">functional</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- 'hello' of locale messages of parent instance --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ parent.$t('hello') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>template</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/guide/sfc.md\" target=\"_blank\" rel=\"noopener noreferrer\">Edit this page on GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Last Updated: </span> <span class=\"time\">5/11/2020, 7:03:20 PM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/guide/interpolation.html\" class=\"prev\">\n          Component interpolation\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/guide/hot-reload.html\">\n          Hot reloading\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/18.a9d0f1d4.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/guide/tooling.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en-US\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Tooling | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n is internationalization plugin for Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/19.d0288f09.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/tooling.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/tooling.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/tooling.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/tooling.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/tooling.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/tooling.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/introduction.html\" class=\"sidebar-link\">Introduction</a></li><li><a href=\"/vue-i18n/started.html\" class=\"sidebar-link\">Getting started</a></li><li><a href=\"/vue-i18n/installation.html\" class=\"sidebar-link\">Installation</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/guide/formatting.html\" class=\"sidebar-link\">Formatting</a></li><li><a href=\"/vue-i18n/guide/pluralization.html\" class=\"sidebar-link\">Pluralization</a></li><li><a href=\"/vue-i18n/guide/datetime.html\" class=\"sidebar-link\">DateTime localization</a></li><li><a href=\"/vue-i18n/guide/number.html\" class=\"sidebar-link\">Number localization</a></li><li><a href=\"/vue-i18n/guide/messages.html\" class=\"sidebar-link\">Locale messages syntax</a></li><li><a href=\"/vue-i18n/guide/fallback.html\" class=\"sidebar-link\">Fallback localization</a></li><li><a href=\"/vue-i18n/guide/component.html\" class=\"sidebar-link\">Component based localization</a></li><li><a href=\"/vue-i18n/guide/directive.html\" class=\"sidebar-link\">Custom directive localization</a></li><li><a href=\"/vue-i18n/guide/interpolation.html\" class=\"sidebar-link\">Component interpolation</a></li><li><a href=\"/vue-i18n/guide/sfc.html\" class=\"sidebar-link\">Single file components</a></li><li><a href=\"/vue-i18n/guide/hot-reload.html\" class=\"sidebar-link\">Hot reloading</a></li><li><a href=\"/vue-i18n/guide/locale.html\" class=\"sidebar-link\">Locale changing</a></li><li><a href=\"/vue-i18n/guide/lazy-loading.html\" class=\"sidebar-link\">Lazy loading translations</a></li><li><a href=\"/vue-i18n/guide/tooling.html\" class=\"active sidebar-link\">Tooling</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/tooling.html#official-tooling\" class=\"sidebar-link\">Official tooling</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/guide/tooling.html#_3rd-party-tooling\" class=\"sidebar-link\">3rd party tooling</a></li></ul></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/legacy/\" class=\"sidebar-link\">Migration from v5.x</a></li><li><a href=\"/vue-i18n/legacy/v5.html\" class=\"sidebar-link\">documentation for v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"tooling\"><a href=\"#tooling\" class=\"header-anchor\">#</a> Tooling</h1> <p>To support the i18n of Vue applications, some tools are officially provided.</p> <p>There are also tools from third vendors integrating Vue I18n.</p> <h2 id=\"official-tooling\"><a href=\"#official-tooling\" class=\"header-anchor\">#</a> Official tooling</h2> <h3 id=\"vue-cli-plugin\"><a href=\"#vue-cli-plugin\" class=\"header-anchor\">#</a> Vue CLI Plugin</h3> <p><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\">vue-cli-plugin-i18n<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> is officially provided as the Vue CLI Plugin.</p> <p>With this plugin, you can setup the i18n environment for the Vue application, and support the i18n development environment.</p> <h3 id=\"nuxt-module\"><a href=\"#nuxt-module\" class=\"header-anchor\">#</a> Nuxt Module</h3> <p><a href=\"https://github.com/nuxt-community/nuxt-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\">nuxt-i18n<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> is corresponding Nuxt.js module.</p> <h3 id=\"webpack-loader\"><a href=\"#webpack-loader\" class=\"header-anchor\">#</a> Webpack loader</h3> <p><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\">vue-i18n-loader<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> is an officially provided webpack loader.</p> <p>With this loader, you can use the <code>i18n</code> custom block in the Single file components.</p> <p>In about <code>i18n</code> custom block, see the <a href=\"/vue-i18n/guide/sfc.html\">Single file components section</a></p> <h3 id=\"eslint-plugin\"><a href=\"#eslint-plugin\" class=\"header-anchor\">#</a> ESLint Plugin</h3> <p><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\">eslint-plugin-vue-i18n<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> is ESLint plugin for Vue I18n.</p> <p>It easily integrates some localization lint features to your Vue.js Application.</p> <h3 id=\"extensions\"><a href=\"#extensions\" class=\"header-anchor\">#</a> Extensions</h3> <p><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\">vue-i18n-extensions<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> provides some extensions for Vue I18n.</p> <p>You can use this extension to enable SSR and improve i18n performance.</p> <h2 id=\"_3rd-party-tooling\"><a href=\"#_3rd-party-tooling\" class=\"header-anchor\">#</a> 3rd party tooling</h2> <h3 id=\"babeledit\"><a href=\"#babeledit\" class=\"header-anchor\">#</a> BabelEdit</h3> <p><a href=\"https://www.codeandweb.com/babeledit\" target=\"_blank\" rel=\"noopener noreferrer\">BabelEdit<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> is translation editor for web apps.</p> <p>BabelEdit can translate <code>json</code> files, and it can also translate <code>i18n</code> custom block of Single-file components.</p> <p>Read more about BabelEdit in <a href=\"https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-vue-app-with-vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\">tutorial page<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>.</p> <h3 id=\"i18n-ally\"><a href=\"#i18n-ally\" class=\"header-anchor\">#</a> i18n Ally</h3> <p><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\">i18n Ally<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> is i18n extension for VSCode.</p> <p>i18n Ally give awesome DX for your i18n development.</p> <p>Read more about i18n Ally in <a href=\"https://github.com/antfu/i18n-ally/blob/master/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">README<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>.</p> <h3 id=\"i18nplugin-intellij-platform\"><a href=\"#i18nplugin-intellij-platform\" class=\"header-anchor\">#</a> i18nPlugin (intellij platform)</h3> <p><a href=\"https://github.com/nyavro/i18nPlugin\" target=\"_blank\" rel=\"noopener noreferrer\">i18nPlugin<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> Intellij idea i18next support plugin ( <a href=\"https://plugins.jetbrains.com/plugin/12981-i18n-support\" target=\"_blank\" rel=\"noopener noreferrer\">Jetbrains plugin page <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>).</p> <p>Plugin for i18n typescript/javascript/PHP. Supports vue-i18n. To enable vue-i18n support go to settings -&gt; Tools -&gt; i18n Plugin configuration and check &quot;Vue-i18n&quot;. You need set vue locales directory (locales by default).</p></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/guide/tooling.md\" target=\"_blank\" rel=\"noopener noreferrer\">Edit this page on GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Last Updated: </span> <span class=\"time\">5/13/2020, 3:58:49 PM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/guide/lazy-loading.html\" class=\"prev\">\n          Lazy loading translations\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/legacy/\">\n          Migration from v5.x\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/19.d0288f09.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en-US\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n is internationalization plugin for Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/4.9735c0af.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/3.5e63523d.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container no-sidebar\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/\" class=\"home-link router-link-exact-active router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/introduction.html\" class=\"sidebar-link\">Introduction</a></li><li><a href=\"/vue-i18n/started.html\" class=\"sidebar-link\">Getting started</a></li><li><a href=\"/vue-i18n/installation.html\" class=\"sidebar-link\">Installation</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/guide/formatting.html\" class=\"sidebar-link\">Formatting</a></li><li><a href=\"/vue-i18n/guide/pluralization.html\" class=\"sidebar-link\">Pluralization</a></li><li><a href=\"/vue-i18n/guide/datetime.html\" class=\"sidebar-link\">DateTime localization</a></li><li><a href=\"/vue-i18n/guide/number.html\" class=\"sidebar-link\">Number localization</a></li><li><a href=\"/vue-i18n/guide/messages.html\" class=\"sidebar-link\">Locale messages syntax</a></li><li><a href=\"/vue-i18n/guide/fallback.html\" class=\"sidebar-link\">Fallback localization</a></li><li><a href=\"/vue-i18n/guide/component.html\" class=\"sidebar-link\">Component based localization</a></li><li><a href=\"/vue-i18n/guide/directive.html\" class=\"sidebar-link\">Custom directive localization</a></li><li><a href=\"/vue-i18n/guide/interpolation.html\" class=\"sidebar-link\">Component interpolation</a></li><li><a href=\"/vue-i18n/guide/sfc.html\" class=\"sidebar-link\">Single file components</a></li><li><a href=\"/vue-i18n/guide/hot-reload.html\" class=\"sidebar-link\">Hot reloading</a></li><li><a href=\"/vue-i18n/guide/locale.html\" class=\"sidebar-link\">Locale changing</a></li><li><a href=\"/vue-i18n/guide/lazy-loading.html\" class=\"sidebar-link\">Lazy loading translations</a></li><li><a href=\"/vue-i18n/guide/tooling.html\" class=\"sidebar-link\">Tooling</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/legacy/\" class=\"sidebar-link\">Migration from v5.x</a></li><li><a href=\"/vue-i18n/legacy/v5.html\" class=\"sidebar-link\">documentation for v5.x</a></li></ul></div></li></ul> </div> <div class=\"home\"><div class=\"hero\"><img src=\"./vue-i18n-logo.png\" alt=\"hero\"> <h1>Vue I18n</h1> <p class=\"description\">\n      Vue I18n is internationalization plugin for Vue.js\n    </p> <p class=\"action\"><a href=\"/vue-i18n/introduction.html\" class=\"nav-link action-button\">Get Started →</a></p></div> <!----> <div class=\"content custom\"><div class=\"sponsors\" style=\"text-align:center; padding: 24px 0 24px 0;\"><h4>Silver Sponsors</h4> <a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\"><img src=\"/vue-i18n/patrons/babeledit.png\"></a> <h4 style=\"padding: 12px 0 0 0;\">Bronze Sponsors</h4> <a href=\"https://zenarchitects.co.jp/\" target=\"_blank\"><img src=\"/vue-i18n/patrons/zenarchitects.png\"></a></div> <div class=\"github\" style=\"text-align:center; padding: 0 0 24px 0;\"><p class=\"sponsor-button\" data-v-0a314292><span data-v-0a314292><a href=\"https://github.com/sponsors/kazupon\" aria-label=\"Sponsor @kazupon on GitHub\" data-icon=\"octicon-heart\" data-size=\"large\">\n    Sponsor on GitHub\n  </a></span></p></div> <div class=\"patreon\" style=\"padding: 0 0 24px 0;\"><p style=\"text-align: center;\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\"><img src=\"https://c5.patreon.com/external/logo/become_a_patron_button.png\" alt=\"Become a Patreon\"></a></p></div> <div class=\"features\"><div class=\"feature\"><h2>Easy</h2> <p>You can introduce internationalization into your app with simple API</p></div> <div class=\"feature\"><h2>Powerful</h2> <p>In addition to simple translation, support localization such as pluralization, number, datetime ... etc</p></div> <div class=\"feature\"><h2>Component-oriented</h2> <p>You can manage locale messages on single file component</p></div></div></div> <div class=\"footer\">\n    MIT Licensed | Copyright © 2020 kazuya kawaguchi\n  </div></div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/4.9735c0af.js\" defer></script><script src=\"/vue-i18n/assets/js/3.5e63523d.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/installation.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en-US\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Installation | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n is internationalization plugin for Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/20.9de38e10.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/installation.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/installation.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/installation.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/installation.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/installation.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/installation.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/introduction.html\" class=\"sidebar-link\">Introduction</a></li><li><a href=\"/vue-i18n/started.html\" class=\"sidebar-link\">Getting started</a></li><li><a href=\"/vue-i18n/installation.html\" class=\"active sidebar-link\">Installation</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/installation.html#compatibility-note\" class=\"sidebar-link\">Compatibility Note</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/installation.html#direct-download-cdn\" class=\"sidebar-link\">Direct Download / CDN</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/installation.html#npm\" class=\"sidebar-link\">NPM</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/installation.html#yarn\" class=\"sidebar-link\">Yarn</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/installation.html#vue-cli-3-x\" class=\"sidebar-link\">Vue Cli 3.x</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/installation.html#dev-build\" class=\"sidebar-link\">Dev Build</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/installation.html#explanation-of-different-builds\" class=\"sidebar-link\">Explanation of Different Builds</a></li></ul></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/guide/formatting.html\" class=\"sidebar-link\">Formatting</a></li><li><a href=\"/vue-i18n/guide/pluralization.html\" class=\"sidebar-link\">Pluralization</a></li><li><a href=\"/vue-i18n/guide/datetime.html\" class=\"sidebar-link\">DateTime localization</a></li><li><a href=\"/vue-i18n/guide/number.html\" class=\"sidebar-link\">Number localization</a></li><li><a href=\"/vue-i18n/guide/messages.html\" class=\"sidebar-link\">Locale messages syntax</a></li><li><a href=\"/vue-i18n/guide/fallback.html\" class=\"sidebar-link\">Fallback localization</a></li><li><a href=\"/vue-i18n/guide/component.html\" class=\"sidebar-link\">Component based localization</a></li><li><a href=\"/vue-i18n/guide/directive.html\" class=\"sidebar-link\">Custom directive localization</a></li><li><a href=\"/vue-i18n/guide/interpolation.html\" class=\"sidebar-link\">Component interpolation</a></li><li><a href=\"/vue-i18n/guide/sfc.html\" class=\"sidebar-link\">Single file components</a></li><li><a href=\"/vue-i18n/guide/hot-reload.html\" class=\"sidebar-link\">Hot reloading</a></li><li><a href=\"/vue-i18n/guide/locale.html\" class=\"sidebar-link\">Locale changing</a></li><li><a href=\"/vue-i18n/guide/lazy-loading.html\" class=\"sidebar-link\">Lazy loading translations</a></li><li><a href=\"/vue-i18n/guide/tooling.html\" class=\"sidebar-link\">Tooling</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/legacy/\" class=\"sidebar-link\">Migration from v5.x</a></li><li><a href=\"/vue-i18n/legacy/v5.html\" class=\"sidebar-link\">documentation for v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"installation\"><a href=\"#installation\" class=\"header-anchor\">#</a> Installation</h1> <h2 id=\"compatibility-note\"><a href=\"#compatibility-note\" class=\"header-anchor\">#</a> Compatibility Note</h2> <ul><li>Vue.js <code>2.0.0</code>+</li></ul> <h2 id=\"direct-download-cdn\"><a href=\"#direct-download-cdn\" class=\"header-anchor\">#</a> Direct Download / CDN</h2> <p><a href=\"https://unpkg.com/vue-i18n/dist/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\">https://unpkg.com/vue-i18n/dist/vue-i18n<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></p> <p><a href=\"https://unpkg.com\" target=\"_blank\" rel=\"noopener noreferrer\">unpkg.com<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> provides NPM-based CDN links. The above link will always point to the latest release on NPM. You can also use a specific version/tag via URLs like <a href=\"https://unpkg.com/vue-i18n@8.17.5/dist/vue-i18n.js\" target=\"_blank\" rel=\"noopener noreferrer\">https://unpkg.com/vue-i18n@8.17.5/dist/vue-i18n.js<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></p> <p>Include vue-i18n after Vue and it will install itself automatically:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>https://unpkg.com/vue/dist/vue.js<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>https://unpkg.com/vue-i18n/dist/vue-i18n.js<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"npm\"><a href=\"#npm\" class=\"header-anchor\">#</a> NPM</h2> <div class=\"language-sh extra-class\"><pre class=\"language-text\"><code>npm install vue-i18n\n</code></pre></div><h2 id=\"yarn\"><a href=\"#yarn\" class=\"header-anchor\">#</a> Yarn</h2> <div class=\"language-sh extra-class\"><pre class=\"language-text\"><code>yarn add vue-i18n\n</code></pre></div><p>When using with a module system, you must explicitly install the <code>vue-i18n</code>\nvia <code>Vue.use()</code>:</p> <div class=\"language-javascript extra-class\"><pre class=\"language-javascript\"><code><span class=\"token keyword\">import</span> Vue <span class=\"token keyword\">from</span> <span class=\"token string\">'vue'</span>\n<span class=\"token keyword\">import</span> VueI18n <span class=\"token keyword\">from</span> <span class=\"token string\">'vue-i18n'</span>\n\nVue<span class=\"token punctuation\">.</span><span class=\"token function\">use</span><span class=\"token punctuation\">(</span>VueI18n<span class=\"token punctuation\">)</span>\n</code></pre></div><p>You don't need to do this when using global script tags.</p> <h2 id=\"vue-cli-3-x\"><a href=\"#vue-cli-3-x\" class=\"header-anchor\">#</a> Vue Cli 3.x</h2> <div class=\"language-sh extra-class\"><pre class=\"language-text\"><code>vue add i18n\n</code></pre></div><p>You need Vue cli 3.x as pre-requisite, you can install it on your shell with the next command:</p> <div class=\"language-sh extra-class\"><pre class=\"language-text\"><code>npm install @vue/cli -g\n</code></pre></div><h2 id=\"dev-build\"><a href=\"#dev-build\" class=\"header-anchor\">#</a> Dev Build</h2> <p>You will have to clone directly from GitHub and build <code>vue-i18n</code> yourself if you want to use the latest dev build.</p> <div class=\"language-sh extra-class\"><pre class=\"language-text\"><code>git clone https://github.com/kazupon/vue-i18n.git node_modules/vue-i18n\ncd node_modules/vue-i18n\nnpm install # or `yarn`\nnpm run build  # or `yarn run build`\n</code></pre></div><h2 id=\"explanation-of-different-builds\"><a href=\"#explanation-of-different-builds\" class=\"header-anchor\">#</a> Explanation of Different Builds</h2> <p>In the dist/ <a href=\"https://cdn.jsdelivr.net/npm/vue-i18n/dist/\" target=\"_blank\" rel=\"noopener noreferrer\">directory of the NPM package<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> you will find many different builds of VueI18n. Here’s an overview of the difference between them:</p> <ul><li>UMD: <code>vue-i18n.js</code></li> <li>CommonJS: <code>vue-i18n.common.js</code></li> <li>ES Module for bundlers: <code>vue-i18n.esm.js</code></li> <li>ES Module for browsers: <code>vue-i18n.esm.browser.js</code></li></ul> <h3 id=\"terms\"><a href=\"#terms\" class=\"header-anchor\">#</a> Terms</h3> <ul><li><p><strong><a href=\"https://github.com/umdjs/umd\" target=\"_blank\" rel=\"noopener noreferrer\">UMD<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></strong>: UMD builds can be used directly in the browser via a <code>&lt;script&gt;</code> tag. The default file from Unpkg CDN at <a href=\"https://unpkg.com/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\">https://unpkg.com/vue-i18n<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> is the UMD build (<code>vue-i18n.js</code>).</p></li> <li><p><strong><a href=\"http://wiki.commonjs.org/wiki/Modules/1.1\" target=\"_blank\" rel=\"noopener noreferrer\">CommonJS<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></strong>: CommonJS builds are intended for use with older bundlers like <a href=\"http://browserify.org/\" target=\"_blank\" rel=\"noopener noreferrer\">browserify<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> or <a href=\"https://webpack.github.io\" target=\"_blank\" rel=\"noopener noreferrer\">webpack 1<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>. The default file for these bundlers (<code>pkg.main</code>) is the Runtime only CommonJS build (<code>vue-i18n.common.js</code>).</p></li> <li><p><strong><a href=\"http://exploringjs.com/es6/ch_modules.html\" target=\"_blank\" rel=\"noopener noreferrer\">ES Module<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></strong>: starting in 8.11 VueI18n provides two ES Modules (ESM) builds:</p> <ul><li>ESM for bundlers: intended for use with modern bundlers like <a href=\"https://webpack.js.org\" target=\"_blank\" rel=\"noopener noreferrer\">webpack 2<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> or <a href=\"https://rollupjs.org/\" target=\"_blank\" rel=\"noopener noreferrer\">Rollup<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>. ESM format is designed to be statically analyzable so the bundlers can take advantage of that to perform &quot;tree-shaking&quot; and eliminate unused code from your final bundle. The default file for these bundlers (<code>pkg.module</code>) is the Runtime only ES Module build (<code>vue-i18n.esm.js</code>).</li> <li>ESM for browsers (8.11+ only, <code>vue-i18n.esm.browser.js</code>): intended for direct imports in modern browsers via <code>&lt;script type=&quot;module&quot;&gt;</code>.</li></ul></li></ul></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/installation.md\" target=\"_blank\" rel=\"noopener noreferrer\">Edit this page on GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Last Updated: </span> <span class=\"time\">5/14/2020, 11:30:34 PM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/started.html\" class=\"prev\">\n          Getting started\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/guide/formatting.html\">\n          Formatting\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/20.9de38e10.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/introduction.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en-US\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Introduction | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n is internationalization plugin for Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/21.65715f7c.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/introduction.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/introduction.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/introduction.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/introduction.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/introduction.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/introduction.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/introduction.html\" class=\"active sidebar-link\">Introduction</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/introduction.html#sponsors\" class=\"sidebar-link\">Sponsors</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/introduction.html#become-a-patreon\" class=\"sidebar-link\">Become a Patreon</a></li></ul></li><li><a href=\"/vue-i18n/started.html\" class=\"sidebar-link\">Getting started</a></li><li><a href=\"/vue-i18n/installation.html\" class=\"sidebar-link\">Installation</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/guide/formatting.html\" class=\"sidebar-link\">Formatting</a></li><li><a href=\"/vue-i18n/guide/pluralization.html\" class=\"sidebar-link\">Pluralization</a></li><li><a href=\"/vue-i18n/guide/datetime.html\" class=\"sidebar-link\">DateTime localization</a></li><li><a href=\"/vue-i18n/guide/number.html\" class=\"sidebar-link\">Number localization</a></li><li><a href=\"/vue-i18n/guide/messages.html\" class=\"sidebar-link\">Locale messages syntax</a></li><li><a href=\"/vue-i18n/guide/fallback.html\" class=\"sidebar-link\">Fallback localization</a></li><li><a href=\"/vue-i18n/guide/component.html\" class=\"sidebar-link\">Component based localization</a></li><li><a href=\"/vue-i18n/guide/directive.html\" class=\"sidebar-link\">Custom directive localization</a></li><li><a href=\"/vue-i18n/guide/interpolation.html\" class=\"sidebar-link\">Component interpolation</a></li><li><a href=\"/vue-i18n/guide/sfc.html\" class=\"sidebar-link\">Single file components</a></li><li><a href=\"/vue-i18n/guide/hot-reload.html\" class=\"sidebar-link\">Hot reloading</a></li><li><a href=\"/vue-i18n/guide/locale.html\" class=\"sidebar-link\">Locale changing</a></li><li><a href=\"/vue-i18n/guide/lazy-loading.html\" class=\"sidebar-link\">Lazy loading translations</a></li><li><a href=\"/vue-i18n/guide/tooling.html\" class=\"sidebar-link\">Tooling</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/legacy/\" class=\"sidebar-link\">Migration from v5.x</a></li><li><a href=\"/vue-i18n/legacy/v5.html\" class=\"sidebar-link\">documentation for v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"introduction\"><a href=\"#introduction\" class=\"header-anchor\">#</a> Introduction</h1> <div class=\"warning custom-block\"><p class=\"custom-block-title\">Notice</p> <p>⚠️ This documentation is for Vue I18n v6.0 or later. if you use v5.x, see the <a href=\"/vue-i18n/legacy/\">legacy</a> section.</p></div> <p>Vue I18n is internationalization plugin of Vue.js. It easily integrates some localization features to your Vue.js Application.</p> <p>Go to <a href=\"/vue-i18n/started.html\">Get Started</a></p> <h2 id=\"sponsors\"><a href=\"#sponsors\" class=\"header-anchor\">#</a> Sponsors</h2> <h3 id=\"silver\"><a href=\"#silver\" class=\"header-anchor\">#</a> Silver</h3> <p style=\"text-align: center;\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\"><img src=\"/vue-i18n/patrons/babeledit.png\"></a></p> <h3 id=\"bronze\"><a href=\"#bronze\" class=\"header-anchor\">#</a> Bronze</h3> <p style=\"text-align: center;\"><a href=\"https://zenarchitects.co.jp/\" target=\"_blank\"><img src=\"/vue-i18n/patrons/zenarchitects.png\"></a></p> <h2 id=\"become-a-patreon\"><a href=\"#become-a-patreon\" class=\"header-anchor\">#</a> Become a Patreon</h2> <p>Is your company using vue-i18n or vue-cli-plugin-i18n to build awesome apps? Join the other patrons and become a sponsor to add your logo on this documentation! Supporting me on Patreon allows me to work less for a job and to work more on Free Open Source Software such as vue-i18n! Thank you!</p> <p style=\"text-align: center;\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\"><img src=\"https://c5.patreon.com/external/logo/become_a_patron_button.png\" alt=\"Become a Patreon\"></a></p></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/introduction.md\" target=\"_blank\" rel=\"noopener noreferrer\">Edit this page on GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Last Updated: </span> <span class=\"time\">4/22/2020, 9:02:29 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><!----> <span class=\"next\"><a href=\"/vue-i18n/started.html\">\n          Getting started\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/21.65715f7c.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/legacy/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en-US\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Migration from v5.x | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n is internationalization plugin for Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/22.7b59f449.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/legacy/\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/legacy/\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/legacy/\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/legacy/\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/legacy/\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/legacy/\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/introduction.html\" class=\"sidebar-link\">Introduction</a></li><li><a href=\"/vue-i18n/started.html\" class=\"sidebar-link\">Getting started</a></li><li><a href=\"/vue-i18n/installation.html\" class=\"sidebar-link\">Installation</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/guide/formatting.html\" class=\"sidebar-link\">Formatting</a></li><li><a href=\"/vue-i18n/guide/pluralization.html\" class=\"sidebar-link\">Pluralization</a></li><li><a href=\"/vue-i18n/guide/datetime.html\" class=\"sidebar-link\">DateTime localization</a></li><li><a href=\"/vue-i18n/guide/number.html\" class=\"sidebar-link\">Number localization</a></li><li><a href=\"/vue-i18n/guide/messages.html\" class=\"sidebar-link\">Locale messages syntax</a></li><li><a href=\"/vue-i18n/guide/fallback.html\" class=\"sidebar-link\">Fallback localization</a></li><li><a href=\"/vue-i18n/guide/component.html\" class=\"sidebar-link\">Component based localization</a></li><li><a href=\"/vue-i18n/guide/directive.html\" class=\"sidebar-link\">Custom directive localization</a></li><li><a href=\"/vue-i18n/guide/interpolation.html\" class=\"sidebar-link\">Component interpolation</a></li><li><a href=\"/vue-i18n/guide/sfc.html\" class=\"sidebar-link\">Single file components</a></li><li><a href=\"/vue-i18n/guide/hot-reload.html\" class=\"sidebar-link\">Hot reloading</a></li><li><a href=\"/vue-i18n/guide/locale.html\" class=\"sidebar-link\">Locale changing</a></li><li><a href=\"/vue-i18n/guide/lazy-loading.html\" class=\"sidebar-link\">Lazy loading translations</a></li><li><a href=\"/vue-i18n/guide/tooling.html\" class=\"sidebar-link\">Tooling</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/legacy/\" class=\"active sidebar-link\">Migration from v5.x</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/legacy/#global-config\" class=\"sidebar-link\">Global config</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/legacy/#global-methods\" class=\"sidebar-link\">Global methods</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/legacy/#constructor-options\" class=\"sidebar-link\">Constructor options</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/legacy/#instance-properties\" class=\"sidebar-link\">Instance properties</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/legacy/#features\" class=\"sidebar-link\">Features</a></li></ul></li><li><a href=\"/vue-i18n/legacy/v5.html\" class=\"sidebar-link\">documentation for v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"migration-from-v5-x\"><a href=\"#migration-from-v5-x\" class=\"header-anchor\">#</a> Migration from v5.x</h1> <h2 id=\"global-config\"><a href=\"#global-config\" class=\"header-anchor\">#</a> Global config</h2> <h3 id=\"lang-replaced\"><a href=\"#lang-replaced\" class=\"header-anchor\">#</a> lang  replaced</h3> <p>Use <code>VueI18n</code> class constructor <code>locale</code> option, or <code>VueI18n#locale</code> property:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code>  <span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n    locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token comment\">// ...</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n  <span class=\"token keyword\">const</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> i18n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n\n  <span class=\"token comment\">// change locale</span>\n  i18n<span class=\"token punctuation\">.</span>locale <span class=\"token operator\">=</span> <span class=\"token string\">'ja'</span>\n  <span class=\"token comment\">// or</span>\n  app<span class=\"token punctuation\">.</span>$i18n<span class=\"token punctuation\">.</span>locale <span class=\"token operator\">=</span> <span class=\"token string\">'ja'</span>\n</code></pre></div><h3 id=\"fallbacklang-replaced\"><a href=\"#fallbacklang-replaced\" class=\"header-anchor\">#</a> fallbackLang replaced</h3> <p>Use <code>VueI18n</code> class constructor <code>fallbackLocale</code> option, or\n<code>VueI18n#fallbackLocale</code> property:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code>  <span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n    locale<span class=\"token operator\">:</span> <span class=\"token string\">'ja'</span><span class=\"token punctuation\">,</span>\n    fallbackLocale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token comment\">// ...</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n  <span class=\"token keyword\">const</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> i18n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n\n  <span class=\"token comment\">// change fallback locale</span>\n  i18n<span class=\"token punctuation\">.</span>fallbackLocale <span class=\"token operator\">=</span> <span class=\"token string\">'zh'</span>\n  <span class=\"token comment\">// or</span>\n  app<span class=\"token punctuation\">.</span>$i18n<span class=\"token punctuation\">.</span>fallbackLocale <span class=\"token operator\">=</span> <span class=\"token string\">'zh'</span>\n</code></pre></div><h3 id=\"missinghandler-replaced\"><a href=\"#missinghandler-replaced\" class=\"header-anchor\">#</a> missingHandler replaced</h3> <p>Use <code>VueI18n</code> class constructor <code>missing</code> option, or <code>VueI18n#missing</code>\nproperty:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// ...</span>\n  <span class=\"token function-variable function\">missing</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">locale<span class=\"token punctuation\">,</span> key<span class=\"token punctuation\">,</span> vm<span class=\"token punctuation\">,</span> values</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">// handle translation missing</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">const</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> i18n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// change missing handler</span>\ni18n<span class=\"token punctuation\">.</span><span class=\"token function-variable function\">missing</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">locale<span class=\"token punctuation\">,</span> key<span class=\"token punctuation\">,</span> vm<span class=\"token punctuation\">,</span> values</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// handle translation missing</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token comment\">// or</span>\napp<span class=\"token punctuation\">.</span>$i18n<span class=\"token punctuation\">.</span><span class=\"token function-variable function\">missing</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">locale<span class=\"token punctuation\">,</span> key<span class=\"token punctuation\">,</span> vm<span class=\"token punctuation\">,</span> values</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// handle translation missing</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><h3 id=\"i18nformatter-replaced\"><a href=\"#i18nformatter-replaced\" class=\"header-anchor\">#</a> i18nFormatter replaced</h3> <p>Use <code>VueI18n</code> class constructor <code>formatter</code> option, or <code>VueI18n#formatter</code>\nproperty:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code>  <span class=\"token keyword\">class</span> <span class=\"token class-name\">CustomFormatter</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token function\">format</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">message<span class=\"token punctuation\">,</span> <span class=\"token operator\">...</span>values</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token comment\">// something render logic</span>\n      <span class=\"token keyword\">return</span> <span class=\"token string\">'something string'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">// ...</span>\n    formatter<span class=\"token operator\">:</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">CustomFormatter</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n    <span class=\"token comment\">// ...</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n  <span class=\"token keyword\">const</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> i18n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n\n  <span class=\"token comment\">// change custom formatter</span>\n  i18n<span class=\"token punctuation\">.</span>formatter <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token function-variable function\">format</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">message<span class=\"token punctuation\">,</span> <span class=\"token operator\">...</span>values</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token comment\">// something render logic</span>\n      <span class=\"token keyword\">return</span> <span class=\"token string\">'something string'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token comment\">// or</span>\n  app<span class=\"token punctuation\">.</span>$i18n<span class=\"token punctuation\">.</span>formatter <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token function-variable function\">format</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">message<span class=\"token punctuation\">,</span> <span class=\"token operator\">...</span>values</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token comment\">// something render logic</span>\n      <span class=\"token keyword\">return</span> <span class=\"token string\">'something string'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n</code></pre></div><h2 id=\"global-methods\"><a href=\"#global-methods\" class=\"header-anchor\">#</a> Global methods</h2> <h3 id=\"vue-locale-replaced\"><a href=\"#vue-locale-replaced\" class=\"header-anchor\">#</a> Vue.locale replaced</h3> <p>Use <code>VueI18n</code> class constructor <code>messages</code> option, or\n<code>VueI18n#GetLocaleMessage</code> / <code>VueI18n#setLocaleMessage</code> methods:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code>  <span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">// ...</span>\n    messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        hello<span class=\"token operator\">:</span> <span class=\"token string\">'hello world'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token comment\">// ...</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      ja<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        hello<span class=\"token operator\">:</span> <span class=\"token string\">'こんにちは、世界'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token comment\">// ...</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token comment\">// ...</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n  <span class=\"token keyword\">const</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> i18n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n\n  <span class=\"token comment\">// get locale message</span>\n  <span class=\"token keyword\">const</span> en <span class=\"token operator\">=</span> i18n<span class=\"token punctuation\">.</span><span class=\"token function\">getLocaleMessage</span><span class=\"token punctuation\">(</span><span class=\"token string\">'en'</span><span class=\"token punctuation\">)</span>\n  en<span class=\"token punctuation\">.</span>greeting <span class=\"token operator\">=</span> <span class=\"token string\">'hi!'</span>\n  <span class=\"token comment\">// set locale message</span>\n  i18n<span class=\"token punctuation\">.</span><span class=\"token function\">setLocaleMessage</span><span class=\"token punctuation\">(</span><span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span> en<span class=\"token punctuation\">)</span>\n  <span class=\"token comment\">// or</span>\n  <span class=\"token keyword\">const</span> ja <span class=\"token operator\">=</span> app<span class=\"token punctuation\">.</span>$i18n<span class=\"token punctuation\">.</span><span class=\"token function\">getLocaleMessage</span><span class=\"token punctuation\">(</span><span class=\"token string\">'ja'</span><span class=\"token punctuation\">)</span>\n  ja<span class=\"token punctuation\">.</span>greeting <span class=\"token operator\">=</span> <span class=\"token string\">'やあ！'</span>\n  app<span class=\"token punctuation\">.</span>$i18n<span class=\"token punctuation\">.</span><span class=\"token function\">setLocaleMessage</span><span class=\"token punctuation\">(</span><span class=\"token string\">'ja'</span><span class=\"token punctuation\">,</span> ja<span class=\"token punctuation\">)</span>\n</code></pre></div><h3 id=\"vue-t-replaced\"><a href=\"#vue-t-replaced\" class=\"header-anchor\">#</a> Vue.t replaced</h3> <p>Use <code>VueI18n#t</code> method:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      greeting<span class=\"token operator\">:</span> <span class=\"token string\">'hi {name}'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\ni18n<span class=\"token punctuation\">.</span><span class=\"token function\">t</span><span class=\"token punctuation\">(</span><span class=\"token string\">'greeting'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span> name<span class=\"token operator\">:</span> <span class=\"token string\">'kazupon'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// -&gt; hi kazupon</span>\n</code></pre></div><h3 id=\"vue-tc-replaced\"><a href=\"#vue-tc-replaced\" class=\"header-anchor\">#</a> Vue.tc replaced</h3> <p>Use <code>VueI18n#tc</code> method:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      apple<span class=\"token operator\">:</span> <span class=\"token string\">'no apples | one apple | {count} apples'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token keyword\">const</span> count <span class=\"token operator\">=</span> <span class=\"token number\">10</span>\ni18n<span class=\"token punctuation\">.</span><span class=\"token function\">tc</span><span class=\"token punctuation\">(</span><span class=\"token string\">'apple'</span><span class=\"token punctuation\">,</span> count<span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span> count <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// -&gt; 10 apples</span>\n</code></pre></div><h3 id=\"vue-te-replaced\"><a href=\"#vue-te-replaced\" class=\"header-anchor\">#</a> Vue.te replaced</h3> <p>Use <code>VueI18n#te</code> method:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      hello<span class=\"token operator\">:</span> <span class=\"token string\">'hello world'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\ni18n<span class=\"token punctuation\">.</span><span class=\"token function\">te</span><span class=\"token punctuation\">(</span><span class=\"token string\">'hello'</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// -&gt; true</span>\ni18n<span class=\"token punctuation\">.</span><span class=\"token function\">te</span><span class=\"token punctuation\">(</span><span class=\"token string\">'hallo'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'ja'</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// -&gt; false</span>\ni18n<span class=\"token punctuation\">.</span><span class=\"token function\">te</span><span class=\"token punctuation\">(</span><span class=\"token string\">'hello'</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// -&gt; true</span>\n</code></pre></div><h2 id=\"constructor-options\"><a href=\"#constructor-options\" class=\"header-anchor\">#</a> Constructor options</h2> <h3 id=\"locales-replaced\"><a href=\"#locales-replaced\" class=\"header-anchor\">#</a> locales replaced</h3> <p>Use <code>messages</code> of <code>VueI18n</code> class constructor option, or <code>messages</code> of <code>i18n</code>\noption (for Component option):</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      greeting<span class=\"token operator\">:</span> <span class=\"token string\">'hi {name}'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// for Component</span>\n<span class=\"token keyword\">const</span> Component1 <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  i18n<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        title<span class=\"token operator\">:</span> <span class=\"token string\">'Title1'</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><h2 id=\"instance-properties\"><a href=\"#instance-properties\" class=\"header-anchor\">#</a> Instance properties</h2> <h3 id=\"lang-replaced-2\"><a href=\"#lang-replaced-2\" class=\"header-anchor\">#</a> $lang replaced</h3> <p>Use <code>VueI18n#locale</code> property:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">const</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> i18n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// change locale</span>\ni18n<span class=\"token punctuation\">.</span>locale <span class=\"token operator\">=</span> <span class=\"token string\">'ja'</span>\n<span class=\"token comment\">// or</span>\napp<span class=\"token punctuation\">.</span>$i18n<span class=\"token punctuation\">.</span>locale <span class=\"token operator\">=</span> <span class=\"token string\">'ja'</span>\n</code></pre></div><h2 id=\"features\"><a href=\"#features\" class=\"header-anchor\">#</a> Features</h2> <h3 id=\"dynamic-locale-removed\"><a href=\"#dynamic-locale-removed\" class=\"header-anchor\">#</a> Dynamic locale removed</h3> <p>If you need to dynamic set locale messages, you should implement the below:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">const</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token punctuation\">,</span>\n  data<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> loading<span class=\"token operator\">:</span> <span class=\"token string\">''</span> <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">loadLocaleMessage</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">locale<span class=\"token punctuation\">,</span> cb</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">return</span> <span class=\"token function\">fetch</span><span class=\"token punctuation\">(</span><span class=\"token string\">'/locales/'</span> <span class=\"token operator\">+</span> locale<span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n    method<span class=\"token operator\">:</span> <span class=\"token string\">'get'</span><span class=\"token punctuation\">,</span>\n    headers<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token string\">'Accept'</span><span class=\"token operator\">:</span> <span class=\"token string\">'application/json'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string\">'Content-Type'</span><span class=\"token operator\">:</span> <span class=\"token string\">'application/json'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">then</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">res</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> res<span class=\"token punctuation\">.</span><span class=\"token function\">json</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">then</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">json</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>Object<span class=\"token punctuation\">.</span><span class=\"token function\">keys</span><span class=\"token punctuation\">(</span>json<span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span>length <span class=\"token operator\">===</span> <span class=\"token number\">0</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword\">return</span> Promise<span class=\"token punctuation\">.</span><span class=\"token function\">reject</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">new</span> <span class=\"token class-name\">Error</span><span class=\"token punctuation\">(</span><span class=\"token string\">'locale empty !!'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n    <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword\">return</span> Promise<span class=\"token punctuation\">.</span><span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span>json<span class=\"token punctuation\">)</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">then</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">message</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token function\">cb</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">null</span><span class=\"token punctuation\">,</span> message<span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">catch</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">error</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token function\">cb</span><span class=\"token punctuation\">(</span>error<span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\napp<span class=\"token punctuation\">.</span>loading <span class=\"token operator\">=</span> <span class=\"token string\">'loading ...'</span>\n<span class=\"token function\">loadLocaleMessage</span><span class=\"token punctuation\">(</span><span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">err<span class=\"token punctuation\">,</span> message</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>err<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    app<span class=\"token punctuation\">.</span>loading <span class=\"token operator\">=</span> <span class=\"token string\">''</span>\n    console<span class=\"token punctuation\">.</span><span class=\"token function\">error</span><span class=\"token punctuation\">(</span>err<span class=\"token punctuation\">)</span>\n    <span class=\"token keyword\">return</span>\n  <span class=\"token punctuation\">}</span>\n  i18n<span class=\"token punctuation\">.</span><span class=\"token function\">setLocaleMessage</span><span class=\"token punctuation\">(</span><span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span> message<span class=\"token punctuation\">)</span>\n  app<span class=\"token punctuation\">.</span>loading <span class=\"token operator\">=</span> <span class=\"token string\">''</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n</code></pre></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/legacy/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">Edit this page on GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Last Updated: </span> <span class=\"time\">9/22/2019, 11:26:01 PM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/guide/tooling.html\" class=\"prev\">\n          Tooling\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/legacy/v5.html\">\n          documentation for v5.x\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/22.7b59f449.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/legacy/v5.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en-US\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>documentation for v5.x | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n is internationalization plugin for Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/legacy/v5.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/legacy/v5.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/legacy/v5.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/legacy/v5.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/legacy/v5.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/legacy/v5.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/introduction.html\" class=\"sidebar-link\">Introduction</a></li><li><a href=\"/vue-i18n/started.html\" class=\"sidebar-link\">Getting started</a></li><li><a href=\"/vue-i18n/installation.html\" class=\"sidebar-link\">Installation</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/guide/formatting.html\" class=\"sidebar-link\">Formatting</a></li><li><a href=\"/vue-i18n/guide/pluralization.html\" class=\"sidebar-link\">Pluralization</a></li><li><a href=\"/vue-i18n/guide/datetime.html\" class=\"sidebar-link\">DateTime localization</a></li><li><a href=\"/vue-i18n/guide/number.html\" class=\"sidebar-link\">Number localization</a></li><li><a href=\"/vue-i18n/guide/messages.html\" class=\"sidebar-link\">Locale messages syntax</a></li><li><a href=\"/vue-i18n/guide/fallback.html\" class=\"sidebar-link\">Fallback localization</a></li><li><a href=\"/vue-i18n/guide/component.html\" class=\"sidebar-link\">Component based localization</a></li><li><a href=\"/vue-i18n/guide/directive.html\" class=\"sidebar-link\">Custom directive localization</a></li><li><a href=\"/vue-i18n/guide/interpolation.html\" class=\"sidebar-link\">Component interpolation</a></li><li><a href=\"/vue-i18n/guide/sfc.html\" class=\"sidebar-link\">Single file components</a></li><li><a href=\"/vue-i18n/guide/hot-reload.html\" class=\"sidebar-link\">Hot reloading</a></li><li><a href=\"/vue-i18n/guide/locale.html\" class=\"sidebar-link\">Locale changing</a></li><li><a href=\"/vue-i18n/guide/lazy-loading.html\" class=\"sidebar-link\">Lazy loading translations</a></li><li><a href=\"/vue-i18n/guide/tooling.html\" class=\"sidebar-link\">Tooling</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/legacy/\" class=\"sidebar-link\">Migration from v5.x</a></li><li><a href=\"/vue-i18n/legacy/v5.html\" class=\"active sidebar-link\">documentation for v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"documentation-for-v5-x\"><a href=\"#documentation-for-v5-x\" class=\"header-anchor\">#</a> documentation for v5.x</h1> <ul><li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/installation.md\" target=\"_blank\" rel=\"noopener noreferrer\">Installation<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li> <li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/started.md\" target=\"_blank\" rel=\"noopener noreferrer\">Getting Started<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li> <li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/formatting.md\" target=\"_blank\" rel=\"noopener noreferrer\">Formatting<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li> <li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/pluralization.md\" target=\"_blank\" rel=\"noopener noreferrer\">Pluralization<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li> <li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/syntax.md\" target=\"_blank\" rel=\"noopener noreferrer\">Locale and Keypath Syntax<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li> <li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/linked.md\" target=\"_blank\" rel=\"noopener noreferrer\">Linked Translation<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li> <li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/fallback.md\" target=\"_blank\" rel=\"noopener noreferrer\">Fallback Translation<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li> <li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/component.md\" target=\"_blank\" rel=\"noopener noreferrer\">Component Locale<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li> <li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/dynamic.md\" target=\"_blank\" rel=\"noopener noreferrer\">Dynamic Locale<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li> <li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/hot-reload.md\" target=\"_blank\" rel=\"noopener noreferrer\">Hot reload<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li> <li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/api.md\" target=\"_blank\" rel=\"noopener noreferrer\">API References<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/legacy/v5.md\" target=\"_blank\" rel=\"noopener noreferrer\">Edit this page on GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Last Updated: </span> <span class=\"time\">2/5/2019, 3:35:51 PM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/legacy/\" class=\"prev router-link-active\">\n          Migration from v5.x\n        </a></span> <!----></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/23.11ece4c3.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/ru/api/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"ru-RU\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Справочник API | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n — плагин для интернационализации во Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/25.97b69148.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/ru/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link router-link-exact-active router-link-active\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link router-link-exact-active router-link-active\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><div class=\"sidebar-group first\"><p class=\"sidebar-heading open\"><span>Справочник API</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/api/#расширение-прототипа-vue\" class=\"sidebar-link\">Расширение прототипа Vue</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/api/#опции-конструктора-vue\" class=\"sidebar-link\">Опции конструктора Vue</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/api/#внедряемые-методы\" class=\"sidebar-link\">Внедряемые методы</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/api/#внедряемые-свойства\" class=\"sidebar-link\">Внедряемые свойства</a></li></ul></li><li><a href=\"/vue-i18n/ru/api/#кnасс-vuei18n\" class=\"sidebar-link\">Класс VueI18n</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/api/#статические-свойства\" class=\"sidebar-link\">Статические свойства</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/api/#опции-конструктора\" class=\"sidebar-link\">Опции конструктора</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/api/#свойства\" class=\"sidebar-link\">Свойства</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/api/#методы\" class=\"sidebar-link\">Методы</a></li></ul></li><li><a href=\"/vue-i18n/ru/api/#директивы\" class=\"sidebar-link\">Директивы</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/api/#v-t\" class=\"sidebar-link\">v-t</a></li></ul></li><li><a href=\"/vue-i18n/ru/api/#компоненты\" class=\"sidebar-link\">Компоненты</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/api/#функционаnьный-компонент-i18n\" class=\"sidebar-link\">Функциональный компонент i18n</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/api/#функционаnьный-компонент-i18n-n\" class=\"sidebar-link\">Функциональный компонент i18n-n</a></li></ul></li><li><a href=\"/vue-i18n/ru/api/#специаnьный-атрибуты\" class=\"sidebar-link\">Специальный атрибуты</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/api/#place\" class=\"sidebar-link\">place</a></li></ul></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"справочник-api\"><a href=\"#справочник-api\" class=\"header-anchor\">#</a> Справочник API</h1> <h2 id=\"расширение-прототипа-vue\"><a href=\"#расширение-прототипа-vue\" class=\"header-anchor\">#</a> Расширение прототипа Vue</h2> <h3 id=\"опции-конструктора-vue\"><a href=\"#опции-конструктора-vue\" class=\"header-anchor\">#</a> Опции конструктора Vue</h3> <h4 id=\"i18n\"><a href=\"#i18n\" class=\"header-anchor\">#</a> i18n</h4> <ul><li><strong>Тип:</strong> <code>I18nOptions</code></li></ul> <p>Опция локализации на основе компонентов.</p> <ul><li><strong>См. также:</strong> Опции конструктора класса <code>VueI18n</code></li></ul> <h3 id=\"внедряемые-методы\"><a href=\"#внедряемые-методы\" class=\"header-anchor\">#</a> Внедряемые методы</h3> <h4 id=\"t\"><a href=\"#t\" class=\"header-anchor\">#</a> $t</h4> <ul><li><p><strong>Аргументы:</strong></p> <ul><li><code>{Path} key</code>: обязательный</li> <li><code>{Locale} locale</code>: опционально</li> <li><code>{Array | Object} values</code>: опционально</li></ul></li> <li><p><strong>Возвращает:</strong> <code>TranslateResult</code></p></li></ul> <p>Получение переведённого сообщения по ключу <code>key</code>. Сообщения локализации в компоненте имеют приоритет над глобальными сообщениями. Если сообщений локализации в компоненте нет, то локализация осуществляется с помощью глобальных сообщений локализации. Если указана <code>locale</code>, то используются сообщения локализации из <code>locale</code>. Если был указан <code>key</code> именованного формата / формата списков сообщений локализации, то необходимо указывать также <code>values</code>. Подробнее про значения <code>values</code> можно изучить в разделе <a href=\"/vue-i18n/ru/guide/formatting.html\">Формат сообщений локализации</a>.</p> <div class=\"danger custom-block\"><p class=\"custom-block-title\">Совет</p> <p>Обратите внимание, что в хуках жизненного цикла контекст должен быть экземпляром компонента (например в опции <code>data</code>, <code>const $t = this.$t.bind(this)</code>).</p></div> <h4 id=\"tc\"><a href=\"#tc\" class=\"header-anchor\">#</a> $tc</h4> <ul><li><p><strong>Аргументы:</strong></p> <ul><li><code>{Path} key</code>: обязательный</li> <li><code>{number} choice</code>: опционально, по умолчанию <code>1</code></li> <li><code>{Locale} locale</code>: опционально</li> <li><code>{string | Array | Object} values</code>: опционально</li></ul></li> <li><p><strong>Возвращает:</strong> <code>TranslateResult</code></p></li></ul> <p>Получение переведённого сообщения по ключу <code>key</code> с использованием плюрализации. Сообщения локализации компонента имеют приоритет над глобальными сообщениями. Если сообщений локализации в компоненте нет, то локализация осуществляется с помощью глобальных сообщений локализации. Если указана <code>locale</code>, то используются сообщения локализации из <code>locale</code>. Если указано строковое значение для <code>values</code>, то локализация выполняется для этого значения. Если указано значение Array или Object в <code>values</code>, то необходимо указывать с <code>values</code> из $t.</p> <div class=\"danger custom-block\"><p class=\"custom-block-title\">Совет</p> <p>Обратите внимание, что в хуках жизненного цикла контекст должен быть экземпляром компонента (например в опции <code>data</code>, <code>const $tc = this.$tc.bind(this)</code>).</p></div> <h4 id=\"te\"><a href=\"#te\" class=\"header-anchor\">#</a> $te</h4> <ul><li><p><strong>Аргументы:</strong></p> <ul><li><code>{Path} key</code>: обязательный</li> <li><code>{Locale} locale</code>: опционально</li></ul></li> <li><p><strong>Возвращает:</strong> <code>boolean</code></p></li></ul> <p>Проверяет существует ли перевод для ключа в сообщениях локализации. Если нет сообщений локализации в компоненте, то проверяет в глобальных сообщениях локализации. Если указана <code>locale</code>, то проверяется наличие в сообщениях локализации <code>locale</code>.</p> <div class=\"danger custom-block\"><p class=\"custom-block-title\">Совет</p> <p>Обратите внимание, что в хуках жизненного цикла контекст должен быть экземпляром компонента (например в опции <code>data</code>, <code>const $te = this.$te.bind(this)</code>).</p></div> <h4 id=\"d\"><a href=\"#d\" class=\"header-anchor\">#</a> $d</h4> <blockquote><p>🆕 Добавлено в версии 7.0+</p></blockquote> <ul><li><p><strong>Аргументы:</strong></p> <ul><li><code>{number | Date} value</code>: обязательный</li> <li><code>{Path | Object} key</code>: опционально</li> <li><code>{Locale | Object} locale</code>: опционально</li></ul></li> <li><p><strong>Возвращает:</strong> <code>DateTimeFormatResult</code></p></li></ul> <p>Локализация даты из <code>value</code> по указанному формату даты из <code>key</code>. Формат указанный в <code>key</code> должен быть зарегистрирован в опции <code>dateTimeFormats</code> класса <code>VueI18n</code>, и зависит от опции <code>locale</code> конструктора <code>VueI18n</code>. Если указать аргумент <code>locale</code>, то он будет иметь приоритет над опцией <code>locale</code> конструктора <code>VueI18n</code>.</p> <p>Если формата даты для <code>key</code> нет в опции <code>dateTimeFormats</code>, то будет использован запасной формат, основываясь на опции <code>fallbackLocale</code> конструктора <code>VueI18n</code>.</p> <div class=\"danger custom-block\"><p class=\"custom-block-title\">Совет</p> <p>Обратите внимание, что в хуках жизненного цикла контекст должен быть экземпляром компонента (например в опции <code>data</code>, <code>const $d = this.$d.bind(this)</code>).</p></div> <h4 id=\"n\"><a href=\"#n\" class=\"header-anchor\">#</a> $n</h4> <blockquote><p>🆕 Добавлено в версии 7.0+</p></blockquote> <ul><li><p><strong>Аргументы:</strong></p> <ul><li><code>{number} value</code>: обязательный</li> <li><code>{Path | Object} format</code>: опционально</li> <li><code>{Locale} locale</code>: опционально</li></ul></li> <li><p><strong>Возвращает:</strong> <code>NumberFormatResult</code></p></li></ul> <p>Локализация числа <code>value</code> с помощью формата чисел <code>format</code>. Числовой формат из <code>format</code> должен быть зарегистрирован в опции <code>numberFormats</code> класса <code>VueI18n</code>, и зависит от опции <code>locale</code> конструктора <code>VueI18n</code>. Если указать аргумент <code>locale</code>, то он будет иметь приоритет над опцией <code>locale</code> конструктора <code>VueI18n</code>.</p> <p>Если формат чисел для <code>format</code> не указан в опции <code>numberFormats</code>, будет использован запасной формат, основываясь на опции <code>fallbackLocale</code> конструктора <code>VueI18n</code>.</p> <p>Если второй аргумент <code>format</code> указан объектом, то в нём должны быть следующие свойства:</p> <ul><li><code>key {Path}</code>: опционально, форматируемое число</li> <li><code>locale {Locale}</code>: опционально, локализация</li> <li><code>style {string}</code>: опционально, опция форматирования чисел</li> <li><code>currency {string}</code>: опционально, опция форматирования чисел</li> <li><code>currencyDisplay {string}</code>: опционально, опция форматирования чисел</li> <li><code>useGrouping {string}</code>: опционально, опция форматирования чисел</li> <li><code>minimumIntegerDigits {string}</code>: опционально, опция форматирования чисел</li> <li><code>minimumFractionDigits {string}</code>: опционально, опция форматирования чисел</li> <li><code>maximumFractionDigits {string}</code>: опционально, опция форматирования чисел</li> <li><code>minimumSignificantDigits {string}</code>: опционально, опция форматирования чисел</li> <li><code>maximumSignificantDigits {string}</code>: опционально, опция форматирования чисел</li> <li><code>localeMatcher {string}</code>: опционально, опция форматирования чисел</li> <li><code>formatMatcher {string}</code>: опционально, опция форматирования чисел</li></ul> <p>Любые указанные опции форматирования числа будут иметь приоритет над значениями <code>numberFormats</code> из конструктора <code>VueI18n</code>.</p> <div class=\"danger custom-block\"><p class=\"custom-block-title\">Совет</p> <p>Обратите внимание, что в хуках жизненного цикла контекст должен быть экземпляром компонента (например в опции <code>data</code>, <code>const $n = this.$n.bind(this)</code>).</p></div> <h3 id=\"внедряемые-свойства\"><a href=\"#внедряемые-свойства\" class=\"header-anchor\">#</a> Внедряемые свойства</h3> <h4 id=\"i18n-2\"><a href=\"#i18n-2\" class=\"header-anchor\">#</a> $i18n</h4> <ul><li><p><strong>Тип:</strong> <code>I18n</code></p></li> <li><p><strong>Только для чтения</strong></p></li></ul> <p>Получение экземпляра <code>VueI18n</code>, если был определён.</p> <p>Если в компоненте указана опция <code>i18n</code>, то получение экземпляра <code>VueI18n</code> компонента. В противном случае, получение корневого экземпляра <code>VueI18n</code>.</p> <h2 id=\"кnасс-vuei18n\"><a href=\"#кnасс-vuei18n\" class=\"header-anchor\">#</a> Класс <code>VueI18n</code></h2> <p>Класс <code>VueI18n</code> реализует интерфейс <code>I18n</code> из <a href=\"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js\" target=\"_blank\" rel=\"noopener noreferrer\">определений flowtype<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></p> <h3 id=\"статические-свойства\"><a href=\"#статические-свойства\" class=\"header-anchor\">#</a> Статические свойства</h3> <h4 id=\"version\"><a href=\"#version\" class=\"header-anchor\">#</a> version</h4> <ul><li><strong>Тип:</strong> <code>string</code></li></ul> <p>Версия <code>vue-i18n</code>.</p> <h4 id=\"availabilities\"><a href=\"#availabilities\" class=\"header-anchor\">#</a> availabilities</h4> <blockquote><p>🆕 Добавлено в версии 7.0+</p></blockquote> <ul><li><strong>Тип:</strong> <code>IntlAvailability</code></li></ul> <p>Проверка доступности следующих возможностей интернационализации:</p> <ul><li><p><code>{boolean} dateTimeFormat</code>: форматирование дат для локалей</p></li> <li><p><code>{boolean} numberFormat</code>: форматирование чисел для локалей</p></li></ul> <p>Указанные выше возможности интернационализации зависят от <a href=\"http://kangax.github.io/compat-table/esintl/\" target=\"_blank\" rel=\"noopener noreferrer\">окружения браузера<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>, в котором реализован ECMAScript Internationalization API (ECMA-402).</p> <h3 id=\"опции-конструктора\"><a href=\"#опции-конструктора\" class=\"header-anchor\">#</a> Опции конструктора</h3> <p>Можно указывать некоторые опции конструктора <code>I18nOptions</code>, основываясь на <a href=\"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js\" target=\"_blank\" rel=\"noopener noreferrer\">определениях flowtype<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></p> <h4 id=\"locale\"><a href=\"#locale\" class=\"header-anchor\">#</a> locale</h4> <ul><li><p><strong>Тип:</strong> <code>Locale</code></p></li> <li><p><strong>По умолчанию:</strong> <code>'en-US'</code></p></li></ul> <p>Локаль используемая для локализации. Если локаль содержит территорию и диалект, то эта локаль явно определяет запасную локализацию.</p> <h4 id=\"fallbacklocale\"><a href=\"#fallbacklocale\" class=\"header-anchor\">#</a> fallbackLocale</h4> <ul><li><p><strong>Тип:</strong> <code>FallbackLocale</code></p></li> <li><p><strong>По умолчанию:</strong> <code>false</code></p></li></ul> <p>Запасная локаль для локализации. Подробнее в разделе <a href=\"/vue-i18n/ru/guide/fallback.html\">Запасная локализация</a>.</p> <h4 id=\"messages\"><a href=\"#messages\" class=\"header-anchor\">#</a> messages</h4> <ul><li><p><strong>Тип:</strong> <code>LocaleMessages</code></p></li> <li><p><strong>По умолчанию:</strong> <code>{}</code></p></li></ul> <p>Сообщения локализации для локали.</p> <h4 id=\"datetimeformats\"><a href=\"#datetimeformats\" class=\"header-anchor\">#</a> dateTimeFormats</h4> <blockquote><p>🆕 Добавлено в версии 7.0+</p></blockquote> <ul><li><p><strong>Тип:</strong> <code>DateTimeFormats</code></p></li> <li><p><strong>По умолчанию:</strong> <code>{}</code></p></li></ul> <p>Форматы дат для локализации.</p> <ul><li><strong>См. также:</strong> тип <code>DateTimeFormats</code> в <a href=\"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js\" target=\"_blank\" rel=\"noopener noreferrer\">определениях flowtype<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul> <h4 id=\"numberformats\"><a href=\"#numberformats\" class=\"header-anchor\">#</a> numberFormats</h4> <blockquote><p>🆕 Добавлено в версии 7.0+</p></blockquote> <ul><li><p><strong>Тип:</strong> <code>NumberFormats</code></p></li> <li><p><strong>По умолчанию:</strong> <code>{}</code></p></li></ul> <p>Форматы чисел для локализации.</p> <ul><li><strong>См. также:</strong> тип <code>NumberFormats</code> в <a href=\"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js\" target=\"_blank\" rel=\"noopener noreferrer\">определениях flowtype<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul> <h4 id=\"availablelocales\"><a href=\"#availablelocales\" class=\"header-anchor\">#</a> availableLocales</h4> <blockquote><p>🆕 Добавлено в версии 8.9.0+</p></blockquote> <ul><li><p><strong>Тип:</strong> <code>Locale[]</code></p></li> <li><p><strong>По умолчанию:</strong> <code>[]</code></p></li> <li><p><strong>Примеры:</strong> <code>[&quot;en&quot;, &quot;ru&quot;]</code></p></li></ul> <p>Список доступных локалей в <code>messages</code> в лексическом порядке.</p> <h4 id=\"formatter\"><a href=\"#formatter\" class=\"header-anchor\">#</a> formatter</h4> <ul><li><p><strong>Тип:</strong> <code>Formatter</code></p></li> <li><p><strong>По умолчанию:</strong> Встроенный formatter</p></li></ul> <p>Метод форматирования, реализующий интерфейс <code>Formatter</code>.</p> <h4 id=\"modifiers\"><a href=\"#modifiers\" class=\"header-anchor\">#</a> modifiers</h4> <blockquote><p>🆕 Добавлено в версии 8.15.0+</p></blockquote> <ul><li><p><strong>Тип:</strong> <code>Modifier</code></p></li> <li><p><strong>По умолчанию:</strong> модификаторы <code>lower</code> и <code>upper</code></p></li></ul> <p>Функции модификаторов для связанных сообщений</p> <h4 id=\"missing\"><a href=\"#missing\" class=\"header-anchor\">#</a> missing</h4> <ul><li><p><strong>Тип:</strong> <code>MissingHandler</code></p></li> <li><p><strong>По умолчанию:</strong> <code>null</code></p></li></ul> <p>Обработчик для отсутствующих сообщений локализации. Обработчик будет вызван с локалью, ключом сообщения локализации и значениями values.</p> <p>Если указан этот обработчик и произойдёт попытка доступа к отсутствующему сообщению локализации, то предупреждения в консоли не будет.</p> <h4 id=\"fallbackroot\"><a href=\"#fallbackroot\" class=\"header-anchor\">#</a> fallbackRoot</h4> <ul><li><p><strong>Тип:</strong> <code>Boolean</code></p></li> <li><p><strong>По умолчанию:</strong> <code>true</code></p></li></ul> <p>При использовании локализации в компонентах определяет обращаться ли к локализации корневого уровня (глобальной) при неудаче.</p> <p>При значении <code>false</code> будет выбрасываться предупреждение и возвращаться ключ.</p> <h4 id=\"sync\"><a href=\"#sync\" class=\"header-anchor\">#</a> sync</h4> <ul><li><p><strong>Тип:</strong> <code>Boolean</code></p></li> <li><p><strong>По умолчанию:</strong> <code>true</code></p></li></ul> <p>Синхронизировать ли локализацию корневого уровня с локализацией компонента.</p> <p>При значении <code>false</code>, независимо от локали определённой на корневом уровне, будет использоваться локаль установленная в компоненте.</p> <h4 id=\"silenttranslationwarn\"><a href=\"#silenttranslationwarn\" class=\"header-anchor\">#</a> silentTranslationWarn</h4> <blockquote><p>6.1+, 🆙 8.13</p></blockquote> <ul><li><p><strong>Тип:</strong> <code>Boolean | RegExp</code></p></li> <li><p><strong>По умолчанию:</strong> <code>false</code></p></li></ul> <p>Отключение предупреждений, отображаемых при неудаче локализации.</p> <p>При значении <code>true</code>, отключаются предупреждения об ошибках локализации. Если использовать регулярное выражение, то можно отключать предупреждения об ошибках, которые будут соответствовать <code>key</code> (например, <code>$t</code>).</p> <h4 id=\"silentfallbackwarn\"><a href=\"#silentfallbackwarn\" class=\"header-anchor\">#</a> silentFallbackWarn</h4> <blockquote><p>🆕 Добавлено в версии 8.8+, 🆙 8.13</p></blockquote> <ul><li><p><strong>Тип:</strong> <code>Boolean | RegExp</code></p></li> <li><p><strong>По умолчанию:</strong> <code>false</code></p></li></ul> <p>Отключение предупреждений при использовании запасной локали из <code>fallbackLocale</code> или <code>root</code>.</p> <p>При значении <code>true</code> предупреждения будут генерироваться только если недоступна локализация вообще, а не для случаев использования запасной локали. При использовании регулярного выражения можно отключать предупреждения которые будут соответствовать <code>key</code> (например, <code>$t</code>).</p> <h4 id=\"preservedirectivecontent\"><a href=\"#preservedirectivecontent\" class=\"header-anchor\">#</a> preserveDirectiveContent</h4> <blockquote><p>Добавлено в версии 8.7+</p></blockquote> <ul><li><p><strong>Тип:</strong> <code>Boolean</code></p></li> <li><p><strong>По умолчанию:</strong> <code>false</code></p></li></ul> <p>Определяет должен ли элемент директивы <code>v-t</code> сохранять <code>textContent</code> после того как директива будет снята с элемента.</p> <h4 id=\"warnhtmlinmessage\"><a href=\"#warnhtmlinmessage\" class=\"header-anchor\">#</a> warnHtmlInMessage</h4> <blockquote><p>Добавлено в версии 8.11+</p></blockquote> <ul><li><p><strong>Тип:</strong> <code>WarnHtmlInMessageLevel</code></p></li> <li><p><strong>По умолчанию:</strong> <code>off</code></p></li></ul> <p>Разрешить ли использование HTML-форматирования в сообщениях локализации. См. также свойство <code>warnHtmlInMessage</code>.</p> <div class=\"danger custom-block\"><p class=\"custom-block-title\">Внимание!</p> <p>Со следующей мажорной версии значение по умолчанию <code>warnHtmlInMessage</code> будет <code>warn</code>.</p></div> <h4 id=\"sharedmessages\"><a href=\"#sharedmessages\" class=\"header-anchor\">#</a> sharedMessages</h4> <blockquote><p>Добавлено в версии 8.12+</p></blockquote> <ul><li><p><strong>Тип:</strong> <code>LocaleMessages</code></p></li> <li><p><strong>По умолчанию:</strong> <code>undefined</code></p></li></ul> <p>Общие сообщения локализации при локализации в компонентах. Подробнее в разделе <a href=\"/vue-i18n/ru/guide/component.html#локаnизация-на-основе-компонентов\">Локализация на основе компонентов</a>.</p> <h4 id=\"posttranslation\"><a href=\"#posttranslation\" class=\"header-anchor\">#</a> postTranslation</h4> <blockquote><p>Добавлено в версии 8.16+</p></blockquote> <ul><li><p><strong>Тип:</strong> <code>PostTranslationHandler</code></p></li> <li><p><strong>По умолчанию:</strong> <code>null</code></p></li></ul> <p>Пост-обработчик локализации. Выполняется после вызова <code>$t</code>, <code>t</code>, <code>$tc</code> и <code>tc</code>.</p> <p>Может пригодиться при необходимости дополнительно обработать итоговый текст перевода, например избавиться от висящих пробелов.</p> <h3 id=\"свойства\"><a href=\"#свойства\" class=\"header-anchor\">#</a> Свойства</h3> <h4 id=\"locale-2\"><a href=\"#locale-2\" class=\"header-anchor\">#</a> locale</h4> <ul><li><p><strong>Тип:</strong> <code>Locale</code></p></li> <li><p><strong>Чтение/Запись</strong></p></li></ul> <p>Локаль используемая для локализации. Если локаль содержит территорию и диалект, то эта локаль неявно указывает на запасные варианты.</p> <h4 id=\"fallbacklocale-2\"><a href=\"#fallbacklocale-2\" class=\"header-anchor\">#</a> fallbackLocale</h4> <ul><li><p><strong>Тип:</strong> <code>FallbackLocale</code></p></li> <li><p><strong>Чтение/Запись</strong></p></li></ul> <p>Локаль используемая для запасной локализации. Способы определения и переключения на запасную локализацию можно изучить в разделе <a href=\"/vue-i18n/ru/guide/fallback.html\">Запасная локализация</a>.</p> <h4 id=\"messages-2\"><a href=\"#messages-2\" class=\"header-anchor\">#</a> messages</h4> <ul><li><p><strong>Тип:</strong> <code>LocaleMessages</code></p></li> <li><p><strong>Только для чтения</strong></p></li></ul> <p>Переведённые сообщения используемые для локализации.</p> <h4 id=\"datetimeformats-2\"><a href=\"#datetimeformats-2\" class=\"header-anchor\">#</a> dateTimeFormats</h4> <blockquote><p>🆕 Добавлено в версии 7.0+</p></blockquote> <ul><li><p><strong>Тип:</strong> <code>DateTimeFormats</code></p></li> <li><p><strong>Только для чтения</strong></p></li></ul> <p>Форматы форматирования дат для локализации.</p> <h4 id=\"numberformats-2\"><a href=\"#numberformats-2\" class=\"header-anchor\">#</a> numberFormats</h4> <blockquote><p>🆕 Добавлено в версии 7.0+</p></blockquote> <ul><li><p><strong>Тип:</strong> <code>NumberFormats</code></p></li> <li><p><strong>Только для чтения</strong></p></li></ul> <p>Форматы форматирования чисел для локализации.</p> <h4 id=\"missing-2\"><a href=\"#missing-2\" class=\"header-anchor\">#</a> missing</h4> <ul><li><p><strong>Тип:</strong> <code>MissingHandler</code></p></li> <li><p><strong>Чтение/Запись</strong></p></li></ul> <p>Обработчик для отсутствующих ключей локализаций.</p> <h4 id=\"formatter-2\"><a href=\"#formatter-2\" class=\"header-anchor\">#</a> formatter</h4> <ul><li><p><strong>Тип:</strong> <code>Formatter</code></p></li> <li><p><strong>Чтение/Запись</strong></p></li></ul> <p>Метод форматирования, который реализует интерфейс <code>Formatter</code>.</p> <h4 id=\"silenttranslationwarn-2\"><a href=\"#silenttranslationwarn-2\" class=\"header-anchor\">#</a> silentTranslationWarn</h4> <blockquote><p>6.1+, 🆙 8.13</p></blockquote> <ul><li><p><strong>Тип:</strong> <code>Boolean | RegExp</code></p></li> <li><p><strong>Чтение/Запись</strong></p></li></ul> <p>Отключение предупреждений выводимых при ошибке локализации.</p> <h4 id=\"silentfallbackwarn-2\"><a href=\"#silentfallbackwarn-2\" class=\"header-anchor\">#</a> silentFallbackWarn</h4> <blockquote><p>🆕 Добавлено в версии 8.8+, 🆙 8.13</p></blockquote> <ul><li><p><strong>Тип:</strong> <code>Boolean | RegExp</code></p></li> <li><p><strong>Чтение/Запись</strong></p></li></ul> <p>Отключение предупреждений выводимых при ошибке использования запасной локализации.</p> <h4 id=\"preservedirectivecontent-2\"><a href=\"#preservedirectivecontent-2\" class=\"header-anchor\">#</a> preserveDirectiveContent</h4> <blockquote><p>Добавлено в версии 8.7+</p></blockquote> <ul><li><p><strong>Тип:</strong> <code>Boolean</code></p></li> <li><p><strong>Чтение/Запись</strong></p></li></ul> <p>Должен ли элемент директивы <code>v-t</code> сохранять <code>textContent</code> после того как директива снята с элемента.</p> <h4 id=\"warnhtmlinmessage-2\"><a href=\"#warnhtmlinmessage-2\" class=\"header-anchor\">#</a> warnHtmlInMessage</h4> <blockquote><p>Добавлено в версии 8.11+</p></blockquote> <ul><li><p><strong>Тип:</strong> <code>WarnHtmlInMessageLevel</code></p></li> <li><p><strong>Чтение/Запись</strong></p></li></ul> <p>Разрешить ли использование HTML-форматирования в сообщениях локализации.</p> <ul><li>При установке <code>warn</code> или <code>error</code> проверяются сообщения локализации экземпляра VueI18n.</li> <li>При установке <code>warn</code> выводятся предупреждения в консоль.</li> <li>При установке <code>error</code> генерируется Error.</li></ul> <p>В качестве значения по умолчанию в экземпляре VueI18n установлено <code>off</code>.</p> <h4 id=\"posttranslation-2\"><a href=\"#posttranslation-2\" class=\"header-anchor\">#</a> postTranslation</h4> <blockquote><p>Добавлено в версии 8.16+</p></blockquote> <ul><li><p><strong>Тип:</strong> <code>PostTranslationHandler</code></p></li> <li><p><strong>Чтение/Запись</strong></p></li></ul> <p>Обработчик для пост-обработки перевода.</p> <h3 id=\"методы\"><a href=\"#методы\" class=\"header-anchor\">#</a> Методы</h3> <h4 id=\"getchoiceindex\"><a href=\"#getchoiceindex\" class=\"header-anchor\">#</a> getChoiceIndex</h4> <ul><li><p><strong>Аргументы:</strong></p> <ul><li><code>{number} choice</code></li> <li><code>{number} choicesLength</code></li></ul></li> <li><p><strong>Возвращает:</strong> <code>finalChoice {number}</code></p></li></ul> <p>Получение индекса для плюрализации текущего числа и заданного количества вариантов. Реализация может быть переопределена через изменение прототипа:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">.</span>prototype<span class=\"token punctuation\">.</span>getChoiceIndex <span class=\"token operator\">=</span> <span class=\"token comment\">/* пользовательская реализация */</span>\n</code></pre></div><h4 id=\"getlocalemessage-locale\"><a href=\"#getlocalemessage-locale\" class=\"header-anchor\">#</a> getLocaleMessage( locale )</h4> <ul><li><p><strong>Аргументы:</strong></p> <ul><li><code>{Locale} locale</code></li></ul></li> <li><p><strong>Возвращает:</strong> <code>LocaleMessageObject</code></p></li></ul> <p>Получение сообщений локализации для локали.</p> <h4 id=\"setlocalemessage-locale-message\"><a href=\"#setlocalemessage-locale-message\" class=\"header-anchor\">#</a> setLocaleMessage( locale, message )</h4> <ul><li><p><strong>Аргументы:</strong></p> <ul><li><code>{Locale} locale</code></li> <li><code>{LocaleMessageObject} message</code></li></ul></li></ul> <p>Установка сообщений локализации для локали.</p> <div class=\"tip custom-block\"><p class=\"custom-block-title\">ПРИМЕЧАНИЕ</p> <blockquote><p>Добавлено в версии 8.11+</p></blockquote> <p>При использовании <code>warn</code> или <code>error</code> в свойстве <code>warnHtmlInMessage</code>, при выполнении этого метода будет проверено используется ли HTML-форматирование для сообщения локализации.</p></div> <h4 id=\"mergelocalemessage-locale-message\"><a href=\"#mergelocalemessage-locale-message\" class=\"header-anchor\">#</a> mergeLocaleMessage( locale, message )</h4> <blockquote><p>6.1+</p></blockquote> <ul><li><p><strong>Аргументы:</strong></p> <ul><li><code>{Locale} locale</code></li> <li><code>{LocaleMessageObject} message</code></li></ul></li></ul> <p>Объединение указанных сообщений локализации с сообщениями локализации локали.</p> <div class=\"tip custom-block\"><p class=\"custom-block-title\">ПРИМЕЧАНИЕ</p> <blockquote><p>Добавлено в версии 8.11+</p></blockquote> <p>При использовании <code>warn</code> или <code>error</code> в свойстве <code>warnHtmlInMessage</code>, при выполнении этого метода будет проверено используется ли HTML-форматирование для сообщения локализации.</p></div> <h4 id=\"t-key-locale-values\"><a href=\"#t-key-locale-values\" class=\"header-anchor\">#</a> t( key, [locale], [values] )</h4> <ul><li><p><strong>Аргументы:</strong></p> <ul><li><code>{Path} key</code>: обязательный</li> <li><code>{Locale} locale</code>: опционально</li> <li><code>{Array | Object} values</code>: опционально</li></ul></li> <li><p><strong>Возвращает:</strong> : <code>TranslateResult</code></p></li></ul> <p>Аналогично функции возвращаемой методом <code>$t</code>. Подробнее см. <a href=\"#t\">$t</a>.</p> <h4 id=\"tc-key-choice-values\"><a href=\"#tc-key-choice-values\" class=\"header-anchor\">#</a> tc( key, [choice], [values] )</h4> <ul><li><p><strong>Аргументы:</strong></p> <ul><li><code>{Path} key</code>: обязательный</li> <li><code>{number} choice</code>: опционально, по умолчанию <code>1</code></li> <li><code>{string | Array | Object} values</code>: опционально</li></ul></li> <li><p><strong>Возвращает:</strong> <code>TranslateResult</code></p></li></ul> <p>Аналогично функции возвращаемой методом <code>$tc</code>. Подробнее см. <a href=\"#tc\">$tc</a>.</p> <h4 id=\"te-key-locale\"><a href=\"#te-key-locale\" class=\"header-anchor\">#</a> te( key, [locale] )</h4> <ul><li><p><strong>Аргументы:</strong></p> <ul><li><code>{string} key</code>: обязательный</li> <li><code>{Locale} locale</code>: опционально</li></ul></li> <li><p><strong>Возвращает:</strong> <code>boolean</code></p></li></ul> <p>Проверяет существует ли указанный ключ в глобальных сообщениях локализации. Если указать <code>locale</code>, проверка будет осуществляться в сообщениях локализации <code>locale</code>.</p> <h4 id=\"getdatetimeformat-locale\"><a href=\"#getdatetimeformat-locale\" class=\"header-anchor\">#</a> getDateTimeFormat ( locale )</h4> <blockquote><p>🆕 Добавлено в версии 7.0+</p></blockquote> <ul><li><p><strong>Аргументы:</strong></p> <ul><li><code>{Locale} locale</code></li></ul></li> <li><p><strong>Возвращает:</strong> <code>DateTimeFormat</code></p></li></ul> <p>Получение форматов форматирования дат локализации.</p> <h4 id=\"setdatetimeformat-locale-format\"><a href=\"#setdatetimeformat-locale-format\" class=\"header-anchor\">#</a> setDateTimeFormat ( locale, format )</h4> <blockquote><p>🆕 Добавлено в версии 7.0+</p></blockquote> <ul><li><p><strong>Аргументы:</strong></p> <ul><li><code>{Locale} locale</code></li> <li><code>{DateTimeFormat} format</code></li></ul></li></ul> <p>Установка форматов форматирования дат для локализации.</p> <h4 id=\"mergedatetimeformat-locale-format\"><a href=\"#mergedatetimeformat-locale-format\" class=\"header-anchor\">#</a> mergeDateTimeFormat ( locale, format )</h4> <blockquote><p>🆕 Добавлено в версии 7.0+</p></blockquote> <ul><li><p><strong>Аргументы:</strong></p> <ul><li><code>{Locale} locale</code></li> <li><code>{DateTimeFormat} format</code></li></ul></li></ul> <p>Объединение указанных форматов форматирования дат с форматами локализации.</p> <h4 id=\"d-value-key-locale\"><a href=\"#d-value-key-locale\" class=\"header-anchor\">#</a> d( value, [key], [locale] )</h4> <blockquote><p>🆕 Добавлено в версии 7.0+</p></blockquote> <ul><li><p><strong>Аргументы:</strong></p> <ul><li><code>{number | Date} value</code>: обязательный</li> <li><code>{Path | Object} key</code>: опционально</li> <li><code>{Locale | Object} locale</code>: опционально</li></ul></li> <li><p><strong>Возвращает:</strong> <code>DateTimeFormatResult</code></p></li></ul> <p>Аналогично функции возвращаемой методом <code>$d</code>. Подробнее см. <a href=\"#d\">$d</a>.</p> <h4 id=\"getnumberformat-locale\"><a href=\"#getnumberformat-locale\" class=\"header-anchor\">#</a> getNumberFormat ( locale )</h4> <blockquote><p>🆕 Добавлено в версии 7.0+</p></blockquote> <ul><li><p><strong>Аргументы:</strong></p> <ul><li><code>{Locale} locale</code></li></ul></li> <li><p><strong>Возвращает:</strong> <code>NumberFormat</code></p></li></ul> <p>Получение форматов форматирования чисел для локализации.</p> <h4 id=\"setnumberformat-locale-format\"><a href=\"#setnumberformat-locale-format\" class=\"header-anchor\">#</a> setNumberFormat ( locale, format )</h4> <blockquote><p>🆕 Добавлено в версии 7.0+</p></blockquote> <ul><li><p><strong>Аргументы:</strong></p> <ul><li><code>{Locale} locale</code></li> <li><code>{NumberFormat} format</code></li></ul></li></ul> <p>Установка форматов форматирования чисел для локализации.</p> <h4 id=\"mergenumberformat-locale-format\"><a href=\"#mergenumberformat-locale-format\" class=\"header-anchor\">#</a> mergeNumberFormat ( locale, format )</h4> <blockquote><p>🆕 Добавлено в версии 7.0+</p></blockquote> <ul><li><p><strong>Аргументы:</strong></p> <ul><li><code>{Locale} locale</code></li> <li><code>{NumberFormat} format</code></li></ul></li></ul> <p>Объединение указанных форматов форматирования чисел с форматами локализации.</p> <h4 id=\"n-value-format-locale\"><a href=\"#n-value-format-locale\" class=\"header-anchor\">#</a> n( value, [format], [locale] )</h4> <blockquote><p>🆕 Добавлено в версии 7.0+</p></blockquote> <ul><li><p><strong>Аргументы:</strong></p> <ul><li><code>{number} value</code>: обязательный</li> <li><code>{Path | Object} format</code>: опционально</li> <li><code>{Locale} locale</code>: опционально</li></ul></li> <li><p><strong>Возвращает:</strong> <code>NumberFormatResult</code></p></li></ul> <p>Аналогично функции возвращаемой методом <code>$n</code>. Подробнее см. <a href=\"#n\">$n</a>.</p> <h2 id=\"директивы\"><a href=\"#директивы\" class=\"header-anchor\">#</a> Директивы</h2> <blockquote><p>🆕 Добавлено в версии 7.3+</p></blockquote> <h3 id=\"v-t\"><a href=\"#v-t\" class=\"header-anchor\">#</a> v-t</h3> <ul><li><p><strong>Ожидает:</strong> <code>string | Object</code></p></li> <li><p><strong>Модификаторы:</strong></p> <ul><li><code>.preserve</code>: (8.7.0+) сохраняет <code>textContent</code> элемента при снятии директивы с элемента.</li></ul></li> <li><p><strong>Подробности:</strong></p></li></ul> <p>Обновление <code>textContent</code> элемента, который был переведён с помощью сообщений локализации. Можно использовать строковый или объектный синтаксис. Строковый синтаксис может быть задан в качестве пути к сообщению локализации. При использовании объектного синтаксиса необходимо указать следующие свойства:</p> <pre><code>* path: обязательный, ключ сообщения локализации\n* locale: опционально, локализация\n* args: опционально, для списка или именованного форматирования\n</code></pre> <div class=\"tip custom-block\"><p class=\"custom-block-title\">ПРИМЕЧАНИЕ</p> <p>По умолчанию значение <code>textContent</code> элемента удаляется при снятии директивы <code>v-t</code>. Это может быть нежелательной ситуацией например при <a href=\"https://ru.vuejs.org/v2/guide/transitions.html\" target=\"_blank\" rel=\"noopener noreferrer\">анимировании списков<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>. Для сохранения данных <code>textContent</code> после снятия директивы следует использовать модификатор <code>.preserve</code> или глобальную опцию <a href=\"#preservedirectivecontent\"><code>preserveDirectiveContent</code></a>.</p></div> <ul><li><strong>Примеры:</strong></li></ul> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token comment\">&lt;!-- строковый синтаксис: литерал --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">v-t</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span><span class=\"token punctuation\">'</span>foo.bar'<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token comment\">&lt;!-- строковый синтаксис: привязка к данным --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">v-t</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>msg<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token comment\">&lt;!-- объектный синтаксис: литерал --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">v-t</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>{ path: 'hi', локализация: 'ru', args: { name: 'kazupon' } }<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token comment\">&lt;!-- объектный синтаксис: привязка к данным --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">v-t</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>{ path: greeting, args: { name: fullName } }<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token comment\">&lt;!-- с модификатором preserve --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">v-t.preserve</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span><span class=\"token punctuation\">'</span>foo.bar'<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><ul><li><strong>См. также:</strong> <a href=\"/vue-i18n/ru/guide/directive.html\">Пользовательская директива для локализации</a></li></ul> <h2 id=\"компоненты\"><a href=\"#компоненты\" class=\"header-anchor\">#</a> Компоненты</h2> <h3 id=\"функционаnьный-компонент-i18n\"><a href=\"#функционаnьный-компонент-i18n\" class=\"header-anchor\">#</a> Функциональный компонент i18n</h3> <blockquote><p>🆕 Добавлено в версии 7.0+</p></blockquote> <h4 id=\"входные-параметры\"><a href=\"#входные-параметры\" class=\"header-anchor\">#</a> Входные параметры:</h4> <ul><li><code>path {Path}</code>: обязательный, путь к сообщению локализации</li> <li><code>locale {Locale}</code>: опционально, локализация</li> <li><code>tag {string}</code>: опционально, по умолчанию <code>span</code></li> <li><code>places {Array | Object}</code>: опционально (7.2+)</li></ul> <div class=\"danger custom-block\"><p class=\"custom-block-title\">Внимание!</p> <p>Со следующей мажорной версии опция <code>places</code> будет удалена. Используйте синтаксис слотов.</p></div> <h4 id=\"испоnьзование\"><a href=\"#испоnьзование\" class=\"header-anchor\">#</a> Использование:</h4> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span> <span class=\"token attr-name\">path</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>term<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">tag</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>label<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">for</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>tos<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">:href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>url<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">target</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>_blank<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>{{ $t('tos') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    tos<span class=\"token operator\">:</span> <span class=\"token string\">'Term of Service'</span><span class=\"token punctuation\">,</span>\n    term<span class=\"token operator\">:</span> <span class=\"token string\">'I accept xxx {0}.'</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  ru<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    tos<span class=\"token operator\">:</span> <span class=\"token string\">'Условия обслуживания'</span><span class=\"token punctuation\">,</span>\n    term<span class=\"token operator\">:</span> <span class=\"token string\">'Я соглашаюсь с xxx {0}.'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token punctuation\">,</span>\n  data<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    url<span class=\"token operator\">:</span> <span class=\"token string\">'/term'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><h4 id=\"см-также\"><a href=\"#см-также\" class=\"header-anchor\">#</a> См. также:</h4> <p><a href=\"/vue-i18n/ru/guide/interpolation.html\">Интерполяция компонента</a></p> <h3 id=\"функционаnьный-компонент-i18n-n\"><a href=\"#функционаnьный-компонент-i18n-n\" class=\"header-anchor\">#</a> Функциональный компонент i18n-n</h3> <blockquote><p>🆕 Добавлено в версии 8.10+</p></blockquote> <h4 id=\"входные-параметры-2\"><a href=\"#входные-параметры-2\" class=\"header-anchor\">#</a> Входные параметры:</h4> <ul><li><code>value {number}</code>: обязательный, число для форматирования</li> <li><code>format {string | NumberFormatOptions}</code>: опционально, форматируемое число или объект с указанными опциями форматирования</li> <li><code>locale {Locale}</code>: опционально, локализация</li> <li><code>tag {string}</code>: опционально, по умолчанию <code>span</code></li></ul> <h4 id=\"испоnьзование-2\"><a href=\"#испоnьзование-2\" class=\"header-anchor\">#</a> Использование:</h4> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n-n</span> <span class=\"token attr-name\">:value</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>money<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">format</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>currency<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">tag</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>label<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\"><span class=\"token namespace\">v-slot:</span>currency</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>slotProps<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>font-weight: bold<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n      {{ slotProps.currency }}\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n-n</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">var</span> numberFormats <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token string\">'en-US'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    currency<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      style<span class=\"token operator\">:</span> <span class=\"token string\">'currency'</span><span class=\"token punctuation\">,</span>\n      currency<span class=\"token operator\">:</span> <span class=\"token string\">'USD'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token string\">'ru-RU'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    currency<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      style<span class=\"token operator\">:</span> <span class=\"token string\">'currency'</span><span class=\"token punctuation\">,</span>\n      currency<span class=\"token operator\">:</span> <span class=\"token string\">'RUB'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en-US'</span><span class=\"token punctuation\">,</span>\n  numberFormats\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token punctuation\">,</span>\n  data<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    money<span class=\"token operator\">:</span> <span class=\"token number\">10234</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><h4 id=\"сnоты-с-ограниченной-обnастью-видимости\"><a href=\"#сnоты-с-ограниченной-обnастью-видимости\" class=\"header-anchor\">#</a> Слоты с ограниченной областью видимости</h4> <p>Функциональный компонент <code>&lt;i18n-n&gt;</code> может принимать различные слоты с ограниченной областью видимости. Список поддерживаемых имён слотов основан на <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/formatToParts\" target=\"_blank\" rel=\"noopener noreferrer\">выходных типах <code>Intl.NumberFormat.formatToParts()</code><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>:</p> <ul><li><code>currency</code></li> <li><code>decimal</code></li> <li><code>fraction</code></li> <li><code>group</code></li> <li><code>infinity</code></li> <li><code>integer</code></li> <li><code>literal</code></li> <li><code>minusSign</code></li> <li><code>nan</code></li> <li><code>plusSign</code></li> <li><code>percentSign</code></li></ul> <p>Каждый из слотов предоставляет доступ к значениям трёх параметров:</p> <ul><li><code>[slotName] {FormattedNumberPartType}</code>: параметр с тем же именем, что и имя слота (например, <code>integer</code>)</li> <li><code>index {Number}</code>: индекс конкретной части в массиве частей числа</li> <li><code>parts {Array}</code>: массив со всеми отформатированными частями числа</li></ul> <h4 id=\"см-также-2\"><a href=\"#см-также-2\" class=\"header-anchor\">#</a> См. также:</h4> <p><a href=\"/vue-i18n/ru/guide/number.html#custom-formatting\">Локализация чисел</a></p> <h2 id=\"специаnьный-атрибуты\"><a href=\"#специаnьный-атрибуты\" class=\"header-anchor\">#</a> Специальный атрибуты</h2> <h3 id=\"place\"><a href=\"#place\" class=\"header-anchor\">#</a> place</h3> <blockquote><p>🆕 Добавлено в версии 7.2+</p></blockquote> <h4 id=\"ожидает-number-string\"><a href=\"#ожидает-number-string\" class=\"header-anchor\">#</a> Ожидает: <code>{number | string}</code></h4> <p>Используется при интерполяции компонента для указания индекса при форматировании списком или ключа при именованном форматировании.</p> <p>Подробнее об использовании можно изучить в разделе по ссылке ниже.</p> <h4 id=\"см-также-3\"><a href=\"#см-также-3\" class=\"header-anchor\">#</a> См. также:</h4> <p><a href=\"/vue-i18n/ru/guide/interpolation.html\">Интерполяция компонента</a></p></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/ru/api/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">Изменить эту страницу на GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Последнее обновление: </span> <span class=\"time\">5/11/2020, 7:03:20 PM</span></div></div> <!----> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/25.97b69148.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/ru/guide/component.html",
    "content": "<!DOCTYPE html>\n<html lang=\"ru-RU\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Локализация на основе компонентов | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n — плагин для интернационализации во Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/26.616f0814.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/ru/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/component.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/component.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/component.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/component.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/component.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/component.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/ru/introduction.html\" class=\"sidebar-link\">Введение</a></li><li><a href=\"/vue-i18n/ru/started.html\" class=\"sidebar-link\">Начало работы</a></li><li><a href=\"/vue-i18n/ru/installation.html\" class=\"sidebar-link\">Установка</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Руководство</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"sidebar-link\">Формат сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/pluralization.html\" class=\"sidebar-link\">Плюрализация</a></li><li><a href=\"/vue-i18n/ru/guide/datetime.html\" class=\"sidebar-link\">Локализация дат</a></li><li><a href=\"/vue-i18n/ru/guide/number.html\" class=\"sidebar-link\">Локализация чисел</a></li><li><a href=\"/vue-i18n/ru/guide/messages.html\" class=\"sidebar-link\">Синтаксис сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/fallback.html\" class=\"sidebar-link\">Запасная локализация</a></li><li><a href=\"/vue-i18n/ru/guide/component.html\" class=\"active sidebar-link\">Локализация на основе компонентов</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/component.html#общие-сообщения-nокаnизации-дnя-компонентов\" class=\"sidebar-link\">Общие сообщения локализации для компонентов</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/component.html#локаnизация-в-функционаnьных-компонентах\" class=\"sidebar-link\">Локализация в функциональных компонентах</a></li></ul></li><li><a href=\"/vue-i18n/ru/guide/directive.html\" class=\"sidebar-link\">Пользовательская директива</a></li><li><a href=\"/vue-i18n/ru/guide/interpolation.html\" class=\"sidebar-link\">Интерполяция компонента</a></li><li><a href=\"/vue-i18n/ru/guide/sfc.html\" class=\"sidebar-link\">Однофайловые компоненты</a></li><li><a href=\"/vue-i18n/ru/guide/hot-reload.html\" class=\"sidebar-link\">Горячая перезагрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/locale.html\" class=\"sidebar-link\">Переключение локализации</a></li><li><a href=\"/vue-i18n/ru/guide/lazy-loading.html\" class=\"sidebar-link\">Ленивая загрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/tooling.html\" class=\"sidebar-link\">Инструментарий</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Устаревшие версии</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/legacy/\" class=\"sidebar-link\">Миграция с версии v5.x</a></li><li><a href=\"/vue-i18n/ru/legacy/v5.html\" class=\"sidebar-link\">Документация для версии v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"локаnизация-на-основе-компонентов\"><a href=\"#локаnизация-на-основе-компонентов\" class=\"header-anchor\">#</a> Локализация на основе компонентов</h1> <p>В основном данные для локализации (например, <code>locale</code>,<code>messages</code>, и т.д.) задаются опциями конструктора экземпляра <code>VueI18n</code> и устанавливаются через свойство <code>i18n</code> в корневой экземпляр Vue.</p> <p>Поэтому можно глобально выполнять переводы, используя методы <code>$t</code> или <code>$tc</code> в корневом экземпляре Vue и любом из компонентов в нём. Но также возможно указывать данные для локализации в каждом компоненте в отдельности, что может быть удобнее благодаря компонентно-ориентированному дизайну.</p> <p>Пример локализации на основе компонентов:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token comment\">// Установка локализации в корневой экземпляр Vue</span>\n<span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'ru'</span><span class=\"token punctuation\">,</span>\n  messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        hello<span class=\"token operator\">:</span> <span class=\"token string\">'hello world'</span><span class=\"token punctuation\">,</span>\n        greeting<span class=\"token operator\">:</span> <span class=\"token string\">'good morning'</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    ru<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        hello<span class=\"token operator\">:</span> <span class=\"token string\">'привет мир'</span><span class=\"token punctuation\">,</span>\n        greeting<span class=\"token operator\">:</span> <span class=\"token string\">'доброе утро'</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// Определение компонента</span>\n<span class=\"token keyword\">const</span> Component1 <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  template<span class=\"token operator\">:</span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">\n    &lt;div class=&quot;container&quot;&gt;\n     &lt;p&gt;Component1 locale messages: {{ $t(&quot;message.hello&quot;) }}&lt;/p&gt;\n     &lt;p&gt;Fallback global locale messages: {{ $t(&quot;message.greeting&quot;) }}&lt;/p&gt;\n   &lt;/div&gt;</span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">,</span>\n  i18n<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">// опция `i18n`, определение данных локализации для компонента</span>\n    messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> hello<span class=\"token operator\">:</span> <span class=\"token string\">'hello component1'</span> <span class=\"token punctuation\">}</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      ru<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> hello<span class=\"token operator\">:</span> <span class=\"token string\">'привет component1'</span> <span class=\"token punctuation\">}</span> <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token punctuation\">,</span>\n  components<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    Component1\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>Шаблон:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t(&quot;message.hello&quot;) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>component1</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>component1</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Результат:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>привет мир<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>container<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>Component1 locale messages: привет component1<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>Fallback global locale messages: доброе утро<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Если компонент не имеет собственного сообщения для локализации, то в качестве запасного выхода он обратится к глобальным данным для локализации. Компонент использует локаль, установленную в корневом экземпляре (в примере выше установлена: <code>locale: 'ru'</code>).</p> <p>Обратите внимание, по умолчанию при обращении к данным корневой локализации будут генерироваться предупреждения в консоли:</p> <div class=\"language-console extra-class\"><pre class=\"language-text\"><code>[vue-i18n] Value of key 'message.greeting' is not a string!\n[vue-i18n] Fall back to translate the keypath 'message.greeting' with root locale.\n</code></pre></div><p>Чтобы скрыть эти предупреждения (оставив те, что предупреждают о полном отсутствии перевода для данного ключа) установите опцию <code>silentFallbackWarn: true</code> при инициализации экземпляра <code>VueI18n</code>.</p> <p>Если необходимо осуществлять перевод, основываясь на локали компонента, то это можно сделать с помощью опции <code>sync: false</code> и <code>locale</code> в настройках <code>i18n</code>.</p> <h2 id=\"общие-сообщения-nокаnизации-дnя-компонентов\"><a href=\"#общие-сообщения-nокаnизации-дnя-компонентов\" class=\"header-anchor\">#</a> Общие сообщения локализации для компонентов</h2> <p>Иногда может потребоваться импортировать сообщения локализации в определённых компонентах, чтобы не обращаться к глобальным сообщениям локализации (например, общие сообщения для определённых функций компонентов).</p> <p>Для этого можно использовать опцию <code>sharedMessages</code> в свойстве <code>i18n</code> компонента.</p> <p>Пример использования общих сообщений локализации:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">export</span> <span class=\"token keyword\">default</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    buttons<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      save<span class=\"token operator\">:</span> <span class=\"token string\">'Save'</span>\n      <span class=\"token comment\">// ...</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  ru<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    buttons<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      save<span class=\"token operator\">:</span> <span class=\"token string\">'Сохранить'</span>\n      <span class=\"token comment\">// ...</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>Компонент:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">import</span> commonMessage <span class=\"token keyword\">from</span> <span class=\"token string\">'./locales/common'</span> <span class=\"token comment\">// импорт общих сообщений локализации</span>\n\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">default</span> <span class=\"token punctuation\">{</span>\n  name<span class=\"token operator\">:</span> <span class=\"token string\">'ServiceModal'</span><span class=\"token punctuation\">,</span>\n  template<span class=\"token operator\">:</span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">\n    &lt;div class=&quot;modal&quot;&gt;\n      &lt;div class=&quot;body&quot;&gt;\n        &lt;p&gt;Это хороший сервис&lt;/p&gt;\n      &lt;/div&gt;\n      &lt;div class=&quot;footer&quot;&gt;\n        &lt;button type=&quot;button&quot;&gt;\n          {{ $t('buttons.save') }}\n        &lt;/button&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  </span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">,</span>\n  i18n<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> <span class=\"token operator\">...</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    sharedMessages<span class=\"token operator\">:</span> commonMessages\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>Если указаны опции <code>sharedMessages</code> и <code>messages</code>, то их сообщения будут объединены в сообщения локализации в экземпляре VueI18n этого компонента.</p> <h2 id=\"локаnизация-в-функционаnьных-компонентах\"><a href=\"#локаnизация-в-функционаnьных-компонентах\" class=\"header-anchor\">#</a> Локализация в функциональных компонентах</h2> <p>При использовании функционального компонента все данные (включая <code>props</code>, <code>children</code>, <code>slots</code>, <code>parent</code>, и т.д.) передаются через <code>context</code>, в котором содержатся все эти атрибуты. Кроме того отсутствует возможность использовать <code>this</code>, поэтому при использовании vue-i18n с функциональными компонентами следует обращаться к <code>$t</code> как к <code>parent.$t</code>, например так:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code>...\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>#<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">target</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>_blank<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">rel</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>noopener noreferrer<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>img</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span><span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">:alt</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>parent.$t('message.hello')<span class=\"token punctuation\">&quot;</span></span> <span class=\"token punctuation\">/&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n...\n</code></pre></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/ru/guide/component.md\" target=\"_blank\" rel=\"noopener noreferrer\">Изменить эту страницу на GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Последнее обновление: </span> <span class=\"time\">5/7/2020, 3:46:10 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/ru/guide/fallback.html\" class=\"prev\">\n          Запасная локализация\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/ru/guide/directive.html\">\n          Пользовательская директива\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/26.616f0814.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/ru/guide/datetime.html",
    "content": "<!DOCTYPE html>\n<html lang=\"ru-RU\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Локализация дат | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n — плагин для интернационализации во Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/27.adf21b94.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/ru/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/datetime.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/datetime.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/datetime.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/datetime.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/datetime.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/datetime.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/ru/introduction.html\" class=\"sidebar-link\">Введение</a></li><li><a href=\"/vue-i18n/ru/started.html\" class=\"sidebar-link\">Начало работы</a></li><li><a href=\"/vue-i18n/ru/installation.html\" class=\"sidebar-link\">Установка</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Руководство</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"sidebar-link\">Формат сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/pluralization.html\" class=\"sidebar-link\">Плюрализация</a></li><li><a href=\"/vue-i18n/ru/guide/datetime.html\" class=\"active sidebar-link\">Локализация дат</a></li><li><a href=\"/vue-i18n/ru/guide/number.html\" class=\"sidebar-link\">Локализация чисел</a></li><li><a href=\"/vue-i18n/ru/guide/messages.html\" class=\"sidebar-link\">Синтаксис сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/fallback.html\" class=\"sidebar-link\">Запасная локализация</a></li><li><a href=\"/vue-i18n/ru/guide/component.html\" class=\"sidebar-link\">Локализация на основе компонентов</a></li><li><a href=\"/vue-i18n/ru/guide/directive.html\" class=\"sidebar-link\">Пользовательская директива</a></li><li><a href=\"/vue-i18n/ru/guide/interpolation.html\" class=\"sidebar-link\">Интерполяция компонента</a></li><li><a href=\"/vue-i18n/ru/guide/sfc.html\" class=\"sidebar-link\">Однофайловые компоненты</a></li><li><a href=\"/vue-i18n/ru/guide/hot-reload.html\" class=\"sidebar-link\">Горячая перезагрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/locale.html\" class=\"sidebar-link\">Переключение локализации</a></li><li><a href=\"/vue-i18n/ru/guide/lazy-loading.html\" class=\"sidebar-link\">Ленивая загрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/tooling.html\" class=\"sidebar-link\">Инструментарий</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Устаревшие версии</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/legacy/\" class=\"sidebar-link\">Миграция с версии v5.x</a></li><li><a href=\"/vue-i18n/ru/legacy/v5.html\" class=\"sidebar-link\">Документация для версии v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"локаnизация-дат\"><a href=\"#локаnизация-дат\" class=\"header-anchor\">#</a> Локализация дат</h1> <div class=\"tip custom-block\"><p class=\"custom-block-title\">Поддержка с версии</p> <p>🆕 7.0+</p></div> <p>Можно выполнять локализацию дат по соответствующему формату.</p> <p>Пример формата для дат:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> dateTimeFormats <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token string\">'en-US'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    short<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      year<span class=\"token operator\">:</span> <span class=\"token string\">'numeric'</span><span class=\"token punctuation\">,</span>\n      month<span class=\"token operator\">:</span> <span class=\"token string\">'short'</span><span class=\"token punctuation\">,</span>\n      day<span class=\"token operator\">:</span> <span class=\"token string\">'numeric'</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    long<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      year<span class=\"token operator\">:</span> <span class=\"token string\">'numeric'</span><span class=\"token punctuation\">,</span>\n      month<span class=\"token operator\">:</span> <span class=\"token string\">'short'</span><span class=\"token punctuation\">,</span>\n      day<span class=\"token operator\">:</span> <span class=\"token string\">'numeric'</span><span class=\"token punctuation\">,</span>\n      weekday<span class=\"token operator\">:</span> <span class=\"token string\">'short'</span><span class=\"token punctuation\">,</span>\n      hour<span class=\"token operator\">:</span> <span class=\"token string\">'numeric'</span><span class=\"token punctuation\">,</span>\n      minute<span class=\"token operator\">:</span> <span class=\"token string\">'numeric'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>Как видно выше, можно определять именованный формат даты (например, <code>short</code>, <code>long</code> и т.д.) используя <a href=\"http://www.ecma-international.org/ecma-402/2.0/#sec-intl-datetimeformat-constructor\" target=\"_blank\" rel=\"noopener noreferrer\">опции ECMA-402 Intl.DateTimeFormat<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></p> <p>После этого, для возможности использования данного формата в сообщениях локализации, необходимо задать опцию <code>dateTimeFormats</code> в конструкторе <code>VueI18n</code>:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  dateTimeFormats\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>Шаблон:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $d(new Date(), 'short') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $d(new Date(), 'long', 'ru-RU') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Результат:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>Apr 19, 2017<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>2017年4月19日(水) 午前2:19<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/ru/guide/datetime.md\" target=\"_blank\" rel=\"noopener noreferrer\">Изменить эту страницу на GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Последнее обновление: </span> <span class=\"time\">5/7/2020, 3:46:10 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/ru/guide/pluralization.html\" class=\"prev\">\n          Плюрализация\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/ru/guide/number.html\">\n          Локализация чисел\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/27.adf21b94.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/ru/guide/directive.html",
    "content": "<!DOCTYPE html>\n<html lang=\"ru-RU\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Пользовательская директива | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n — плагин для интернационализации во Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/ru/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/directive.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/directive.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/directive.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/directive.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/directive.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/directive.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/ru/introduction.html\" class=\"sidebar-link\">Введение</a></li><li><a href=\"/vue-i18n/ru/started.html\" class=\"sidebar-link\">Начало работы</a></li><li><a href=\"/vue-i18n/ru/installation.html\" class=\"sidebar-link\">Установка</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Руководство</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"sidebar-link\">Формат сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/pluralization.html\" class=\"sidebar-link\">Плюрализация</a></li><li><a href=\"/vue-i18n/ru/guide/datetime.html\" class=\"sidebar-link\">Локализация дат</a></li><li><a href=\"/vue-i18n/ru/guide/number.html\" class=\"sidebar-link\">Локализация чисел</a></li><li><a href=\"/vue-i18n/ru/guide/messages.html\" class=\"sidebar-link\">Синтаксис сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/fallback.html\" class=\"sidebar-link\">Запасная локализация</a></li><li><a href=\"/vue-i18n/ru/guide/component.html\" class=\"sidebar-link\">Локализация на основе компонентов</a></li><li><a href=\"/vue-i18n/ru/guide/directive.html\" class=\"active sidebar-link\">Пользовательская директива</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/directive.html#строковый-синтаксис\" class=\"sidebar-link\">Строковый синтаксис</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/directive.html#объектный-синтаксис\" class=\"sidebar-link\">Объектный синтаксис</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/directive.html#испоnьзование-с-transition\" class=\"sidebar-link\">Использование с transition</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/directive.html#t-иnи-v-t\" class=\"sidebar-link\">$t или v-t</a></li></ul></li><li><a href=\"/vue-i18n/ru/guide/interpolation.html\" class=\"sidebar-link\">Интерполяция компонента</a></li><li><a href=\"/vue-i18n/ru/guide/sfc.html\" class=\"sidebar-link\">Однофайловые компоненты</a></li><li><a href=\"/vue-i18n/ru/guide/hot-reload.html\" class=\"sidebar-link\">Горячая перезагрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/locale.html\" class=\"sidebar-link\">Переключение локализации</a></li><li><a href=\"/vue-i18n/ru/guide/lazy-loading.html\" class=\"sidebar-link\">Ленивая загрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/tooling.html\" class=\"sidebar-link\">Инструментарий</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Устаревшие версии</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/legacy/\" class=\"sidebar-link\">Миграция с версии v5.x</a></li><li><a href=\"/vue-i18n/ru/legacy/v5.html\" class=\"sidebar-link\">Документация для версии v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"поnьзоватеnьская-директива\"><a href=\"#поnьзоватеnьская-директива\" class=\"header-anchor\">#</a> Пользовательская директива</h1> <div class=\"tip custom-block\"><p class=\"custom-block-title\">Поддержка с версии</p> <p>🆕 7.3+</p></div> <p>Переводы можно осуществлять не только используя пользовательскую директиву <code>v-t</code>, но и с помощью метода <code>$t</code>.</p> <h2 id=\"строковый-синтаксис\"><a href=\"#строковый-синтаксис\" class=\"header-anchor\">#</a> Строковый синтаксис</h2> <p>Можно передавать ключ сообщения локализации строкой.</p> <p>JavaScript:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token operator\">:</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n    locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n    messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> hello<span class=\"token operator\">:</span> <span class=\"token string\">'hi there!'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      ru<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> hello<span class=\"token operator\">:</span> <span class=\"token string\">'привет всем!'</span> <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  data<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> path<span class=\"token operator\">:</span> <span class=\"token string\">'hello'</span> <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#string-syntax'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>Шаблон:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>string-syntax<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- строковый литерал --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">v-t</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span><span class=\"token punctuation\">'</span>hello'<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- привязка пути к сообщению из данных --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">v-t</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>path<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Результат:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>string-syntax<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>привет всем!<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>привет всем!<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"объектный-синтаксис\"><a href=\"#объектный-синтаксис\" class=\"header-anchor\">#</a> Объектный синтаксис</h2> <p>Можно использовать объектный синтаксис.</p> <p>JavaScript:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token operator\">:</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n    locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n    messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> hello<span class=\"token operator\">:</span> <span class=\"token string\">'hi {name}!'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      ru<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> hello<span class=\"token operator\">:</span> <span class=\"token string\">'привет {name}！'</span> <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  computed<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token function\">nickName</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword\">return</span> <span class=\"token string\">'kazupon'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  data<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> path<span class=\"token operator\">:</span> <span class=\"token string\">'hello'</span> <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#object-syntax'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>Шаблон:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>object-syntax<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- литерал --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">v-t</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>{ path: 'hello', locale: 'ru', args: { name: 'kazupon' } }<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- привязка к данным --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">v-t</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>{ path: path, args: { name: nickName } }<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Результат:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>object-syntax<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>привет、kazupon！<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>hi kazupon!<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"испоnьзование-с-transition\"><a href=\"#испоnьзование-с-transition\" class=\"header-anchor\">#</a> Использование с transition</h2> <div class=\"tip custom-block\"><p class=\"custom-block-title\">Поддержка с версии</p> <p>🆕 8.7+</p></div> <p>При использовании директивы <code>v-t</code> на элементе внутри <a href=\"https://ru.vuejs.org/v2/api/#transition\" target=\"_blank\" rel=\"noopener noreferrer\">компонента <code>&lt;transition&gt;</code><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>, можно заметить как переведённое сообщение исчезает во время анимации перехода. Это поведение связано с реализацией самого компонента <code>&lt;transition&gt;</code> — все директивы в исчезающем элементе внутри компонента <code>&lt;transition&gt;</code> должны быть уничтожены <strong>до начала анимации</strong>. Это может привести к мерцанию содержимого на коротких анимациях, но наиболее заметно при длинных анимациях переходов.</p> <p>Чтобы сохранить содержимое директивы во время анимации перехода, необходимо добавить <a href=\"/vue-i18n/ru/api/#v-t\">модификатор <code>.preserve</code></a> при определении директивы <code>v-t</code>.</p> <p>Javascript:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token operator\">:</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n    locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n    messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> preserve<span class=\"token operator\">:</span> <span class=\"token string\">'with preserve'</span> <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  data<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> toggle<span class=\"token operator\">:</span> <span class=\"token boolean\">true</span> <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#in-transitions'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>Шаблон:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>in-transitions<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>transition</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>fade<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\">v-if</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>toggle<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">v-t.preserve</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span><span class=\"token punctuation\">'</span>preserve'<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>transition</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>button</span> <span class=\"token attr-name\">@click</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>toggle = !toggle<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>Toggle<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>button</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Также можно глобально установить настройку <code>preserveDirectiveContent</code> в экземпляре <code>VueI18n</code>, что повлияет на все директивы <code>v-t</code> без добавления модификатора к ним.</p> <p>JavaScript:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token operator\">:</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n    locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n    messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> preserve<span class=\"token operator\">:</span> <span class=\"token string\">'with preserve'</span> <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    preserveDirectiveContent<span class=\"token operator\">:</span> <span class=\"token boolean\">true</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  data<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> toggle<span class=\"token operator\">:</span> <span class=\"token boolean\">true</span> <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#in-transitions'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>Шаблон:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>in-transitions<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>transition</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>fade<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\">v-if</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>toggle<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">v-t</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span><span class=\"token punctuation\">'</span>preserve'<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>transition</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>button</span> <span class=\"token attr-name\">@click</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>toggle = !toggle<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>Toggle<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>button</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Подробнее о примерах выше можно изучить <a href=\"https://github.com/kazupon/vue-i18n/tree/dev/examples/directive\" target=\"_blank\" rel=\"noopener noreferrer\">здесь<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></p> <h2 id=\"t-иnи-v-t\"><a href=\"#t-иnи-v-t\" class=\"header-anchor\">#</a> <code>$t</code> или <code>v-t</code></h2> <h3 id=\"t\"><a href=\"#t\" class=\"header-anchor\">#</a> <code>$t</code></h3> <p><code>$t</code> — это метод, добавленный в экземпляр Vue. У него следующие плюсы и минусы:</p> <h4 id=\"пnюсы\"><a href=\"#пnюсы\" class=\"header-anchor\">#</a> Плюсы</h4> <p>Предоставляет <strong>гибкость</strong> в использовании синтаксиса фигурных скобок <code>{{}}</code> в шаблонах, а также применять в вычисляемых свойствах и методах экземпляра Vue.</p> <h4 id=\"минусы\"><a href=\"#минусы\" class=\"header-anchor\">#</a> Минусы</h4> <p><code>$t</code> выполняется <strong>каждый раз</strong> когда происходит перерисовка, поэтому у него есть расходы на осуществление перевода.</p> <h3 id=\"v-t\"><a href=\"#v-t\" class=\"header-anchor\">#</a> <code>v-t</code></h3> <p><code>v-t</code> — пользовательская директива. У неё следующие плюсы и минусы:</p> <h4 id=\"пnюсы-2\"><a href=\"#пnюсы-2\" class=\"header-anchor\">#</a> Плюсы</h4> <p><code>v-t</code> имеет <strong>лучшую производительность</strong> в сравнении с методом <code>$t</code>, благодаря кэшу в пользовательской директиве после выполнения перевода. Также можно реализовать предварительный перевод с помощью модуля для компилятора Vue, который предоставляет плагин <a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\"><code>vue-i18n-extensions</code><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>.</p> <p>Таким образом, можно достичь <strong>большей оптимизации производительности</strong>.</p> <h4 id=\"минусы-2\"><a href=\"#минусы-2\" class=\"header-anchor\">#</a> Минусы</h4> <p><code>v-t</code> нельзя использовать также гибко, как <code>$t</code>, и это добавляет <strong>сложности</strong>. Перевод с помощью <code>v-t</code> вставляется в <code>textContent</code> элемента. Также, при использовании рендеринга на стороне сервера необходимо установить <a href=\"https://github.com/kazupon/vue-i18n-extensions#directive-v-t-custom-directive-for-server-side\" target=\"_blank\" rel=\"noopener noreferrer\">пользовательскую директиву<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> через опцию <code>directives</code> функции <code>createRenderer</code>.</p></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/ru/guide/directive.md\" target=\"_blank\" rel=\"noopener noreferrer\">Изменить эту страницу на GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Последнее обновление: </span> <span class=\"time\">5/7/2020, 3:46:10 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/ru/guide/component.html\" class=\"prev\">\n          Локализация на основе компонентов\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/ru/guide/interpolation.html\">\n          Интерполяция компонента\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/28.6bf6d42b.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/ru/guide/fallback.html",
    "content": "<!DOCTYPE html>\n<html lang=\"ru-RU\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Запасная локализация | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n — плагин для интернационализации во Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/29.e8b42909.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/ru/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/fallback.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/fallback.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/fallback.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/fallback.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/fallback.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/fallback.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/ru/introduction.html\" class=\"sidebar-link\">Введение</a></li><li><a href=\"/vue-i18n/ru/started.html\" class=\"sidebar-link\">Начало работы</a></li><li><a href=\"/vue-i18n/ru/installation.html\" class=\"sidebar-link\">Установка</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Руководство</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"sidebar-link\">Формат сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/pluralization.html\" class=\"sidebar-link\">Плюрализация</a></li><li><a href=\"/vue-i18n/ru/guide/datetime.html\" class=\"sidebar-link\">Локализация дат</a></li><li><a href=\"/vue-i18n/ru/guide/number.html\" class=\"sidebar-link\">Локализация чисел</a></li><li><a href=\"/vue-i18n/ru/guide/messages.html\" class=\"sidebar-link\">Синтаксис сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/fallback.html\" class=\"active sidebar-link\">Запасная локализация</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/fallback.html#неявное-опредеnение-запасных-nокаnизаций-при-испоnьзовании-nокаnей\" class=\"sidebar-link\">Неявное определение запасных локализаций при использовании локалей</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/fallback.html#явное-опредеnение-одной-nокаnи-запасной-nокаnизации\" class=\"sidebar-link\">Явное определение одной локали запасной локализации</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/fallback.html#явное-опредеnение-запасной-nокаnи-с-помощью-массива\" class=\"sidebar-link\">Явное определение запасной локали с помощью массива</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/fallback.html#явное-опредеnение-запасной-nокаnи-с-помощью-объекта\" class=\"sidebar-link\">Явное определение запасной локали с помощью объекта</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/fallback.html#резервная-интерпоnяция\" class=\"sidebar-link\">Резервная интерполяция</a></li></ul></li><li><a href=\"/vue-i18n/ru/guide/component.html\" class=\"sidebar-link\">Локализация на основе компонентов</a></li><li><a href=\"/vue-i18n/ru/guide/directive.html\" class=\"sidebar-link\">Пользовательская директива</a></li><li><a href=\"/vue-i18n/ru/guide/interpolation.html\" class=\"sidebar-link\">Интерполяция компонента</a></li><li><a href=\"/vue-i18n/ru/guide/sfc.html\" class=\"sidebar-link\">Однофайловые компоненты</a></li><li><a href=\"/vue-i18n/ru/guide/hot-reload.html\" class=\"sidebar-link\">Горячая перезагрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/locale.html\" class=\"sidebar-link\">Переключение локализации</a></li><li><a href=\"/vue-i18n/ru/guide/lazy-loading.html\" class=\"sidebar-link\">Ленивая загрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/tooling.html\" class=\"sidebar-link\">Инструментарий</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Устаревшие версии</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/legacy/\" class=\"sidebar-link\">Миграция с версии v5.x</a></li><li><a href=\"/vue-i18n/ru/legacy/v5.html\" class=\"sidebar-link\">Документация для версии v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"запасная-nокаnизация\"><a href=\"#запасная-nокаnизация\" class=\"header-anchor\">#</a> Запасная локализация</h1> <p><em>Вкратце: указывайте <code>fallbackLocale: '&lt;lang&gt;'</code> для определения языка, который будет использоваться, если нет перевода в выбранной локализации.</em></p> <h2 id=\"неявное-опредеnение-запасных-nокаnизаций-при-испоnьзовании-nокаnей\"><a href=\"#неявное-опредеnение-запасных-nокаnизаций-при-испоnьзовании-nокаnей\" class=\"header-anchor\">#</a> Неявное определение запасных локализаций при использовании локалей</h2> <p>Если <code>locale</code> содержит территорию и опционально диалект, то неявно будут определены автоматически запасные локали.</p> <p>Например для <code>de-DE-bavarian</code> в качестве запасных будут считаться следующие:</p> <ol><li><code>de-DE-bavarian</code></li> <li><code>de-DE</code></li> <li><code>de</code></li></ol> <p>Для отключения автоматического определения запасных локалей укажите символ <code>!</code>, например <code>de-DE!</code></p> <h2 id=\"явное-опредеnение-одной-nокаnи-запасной-nокаnизации\"><a href=\"#явное-опредеnение-одной-nокаnи-запасной-nокаnизации\" class=\"header-anchor\">#</a> Явное определение одной локали запасной локализации</h2> <p>Иногда не все ключи сообщений переведены на другие языки. В примере ниже, сообщение для ключа <code>hello</code> доступно в английской локали, но отсутствует в русской:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    hello<span class=\"token operator\">:</span> <span class=\"token string\">'Hello, world!'</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  ru<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">// упс, не все переведено</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>Если хочется использовать сообщения локализации из <code>en</code>, когда перевод отсутствует в нужной локализации, то следует указать опцию <code>fallbackLocale</code> в конструкторе VueI18n:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'ru'</span><span class=\"token punctuation\">,</span>\n  fallbackLocale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>Шаблон:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('hello') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Результат:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>Hello, world!<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>По умолчанию, если использовались сообщения запасной локализации из <code>fallbackLocale</code>, то в консоли будут выведены соответствующие предупреждения:</p> <div class=\"language-console extra-class\"><pre class=\"language-text\"><code>[vue-i18n] Value of key 'hello' is not a string!\n[vue-i18n] Fall back to translate the keypath 'hello' with 'en' locale.\n</code></pre></div><p>Чтобы скрыть такие предупреждения (оставив при этом те, в случаях полного отсутствия переводов для данного ключа) установите <code>silentFallbackWarn: true</code> при инициализации экземпляра <code>VueI18n</code>.</p> <h2 id=\"явное-опредеnение-запасной-nокаnи-с-помощью-массива\"><a href=\"#явное-опредеnение-запасной-nокаnи-с-помощью-массива\" class=\"header-anchor\">#</a> Явное определение запасной локали с помощью массива</h2> <p>Можно указать более одной запасной локализации с помощью массива. Например:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code>fallbackLocale<span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'ru'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n</code></pre></div><h2 id=\"явное-опредеnение-запасной-nокаnи-с-помощью-объекта\"><a href=\"#явное-опредеnение-запасной-nокаnи-с-помощью-объекта\" class=\"header-anchor\">#</a> Явное определение запасной локали с помощью объекта</h2> <p>Более сложный алгоритм принятия решений для определения запасной локали можно реализовать с помощью карты принятия решений в виде объекта.</p> <p>Например для подобного объекта:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code>fallbackLocale<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">/* 1 */</span> <span class=\"token string\">'de-CH'</span><span class=\"token operator\">:</span>   <span class=\"token punctuation\">[</span><span class=\"token string\">'fr'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'it'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">/* 2 */</span> <span class=\"token string\">'zh-Hant'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'zh-Hans'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">/* 3 */</span> <span class=\"token string\">'es-CL'</span><span class=\"token operator\">:</span>   <span class=\"token punctuation\">[</span><span class=\"token string\">'es-AR'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">/* 4 */</span> <span class=\"token string\">'es'</span><span class=\"token operator\">:</span>      <span class=\"token punctuation\">[</span><span class=\"token string\">'en-GB'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">/* 5 */</span> <span class=\"token string\">'pt'</span><span class=\"token operator\">:</span>      <span class=\"token punctuation\">[</span><span class=\"token string\">'es-AR'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">/* 6 */</span> <span class=\"token string\">'default'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'ru'</span><span class=\"token punctuation\">]</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n</code></pre></div><p>Будут следующие цепочки выбора запасной локали:</p> <table><thead><tr><th>Локаль</th> <th>Цепочка выбора</th></tr></thead> <tbody><tr><td><code>'de-CH'</code></td> <td>de-CH &gt; fr &gt; it &gt; en &gt; ru</td></tr> <tr><td><code>'de'</code></td> <td>de &gt; en &gt; ru</td></tr> <tr><td><code>'zh-Hant'</code></td> <td>zh-Hant &gt; zh-Hans &gt; zh &gt; en &gt; ru</td></tr> <tr><td><code>'es-SP'</code></td> <td>es-SP &gt; es &gt; en-GB &gt; en &gt; ru</td></tr> <tr><td><code>'es-SP!'</code></td> <td>es-SP &gt; en &gt; ru</td></tr> <tr><td><code>'fr'</code></td> <td>fr &gt; en &gt; ru</td></tr> <tr><td><code>'pt-BR'</code></td> <td>pt-BR &gt; pt &gt; es-AR &gt; es &gt; en-GB &gt; en &gt; ru</td></tr> <tr><td><code>'es-CL'</code></td> <td>es-CL &gt; es-AR &gt; es &gt; en-GB &gt; en &gt; ru</td></tr></tbody></table> <h2 id=\"резервная-интерпоnяция\"><a href=\"#резервная-интерпоnяция\" class=\"header-anchor\">#</a> Резервная интерполяция</h2> <p><em>Вкратце: установите <code>formatFallbackMessages: true</code> чтобы выполнять интерполяции шаблона по ключам перевода, когда в выбранном языке отсутствует данный ключ для перевода.</em></p> <p>Так как ключи переводов являются строками, то можно использовать само сообщение в качестве ключа (для определённого языка). Например:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  ru<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token string\">'Hello, world!'</span><span class=\"token operator\">:</span> <span class=\"token string\">'Привет мир!'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>Это может быть полезным, потому что не нужно будет указывать перевод для строки &quot;Hello, world!&quot; в английской локализации.</p> <p>Фактически, можно указывать даже параметры в ключе. Вместе с <code>formatFallbackMessages: true</code> это позволит опустить создание шаблонов для «базового» языка; потому что его ключи <em>уже находятся</em> в шаблоне.</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  ru<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token string\">'Hello {name}'</span><span class=\"token operator\">:</span> <span class=\"token string\">'Здравствуйте {name}'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'ru'</span><span class=\"token punctuation\">,</span>\n  fallbackLocale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  formatFallbackMessages<span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n  messages\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>Шаблон:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('Hello {name}', { name: 'John' }}) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('The weather today is {condition}!', { condition: 'sunny' }) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Результат:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>Здравствуйте, John<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>The weather today is sunny!<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/ru/guide/fallback.md\" target=\"_blank\" rel=\"noopener noreferrer\">Изменить эту страницу на GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Последнее обновление: </span> <span class=\"time\">5/7/2020, 3:46:10 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/ru/guide/messages.html\" class=\"prev\">\n          Синтаксис сообщений локализации\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/ru/guide/component.html\">\n          Локализация на основе компонентов\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/29.e8b42909.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/ru/guide/formatting.html",
    "content": "<!DOCTYPE html>\n<html lang=\"ru-RU\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Формат сообщений локализации | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n — плагин для интернационализации во Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/30.24889fb9.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/ru/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link router-link-exact-active router-link-active\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link router-link-exact-active router-link-active\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/ru/introduction.html\" class=\"sidebar-link\">Введение</a></li><li><a href=\"/vue-i18n/ru/started.html\" class=\"sidebar-link\">Начало работы</a></li><li><a href=\"/vue-i18n/ru/installation.html\" class=\"sidebar-link\">Установка</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Руководство</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"active sidebar-link\">Формат сообщений локализации</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/formatting.html#именованный-формат\" class=\"sidebar-link\">Именованный формат</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/formatting.html#формат-списков\" class=\"sidebar-link\">Формат списков</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/formatting.html#html-формат\" class=\"sidebar-link\">HTML формат</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/formatting.html#формат-ruby-on-rails-i18n\" class=\"sidebar-link\">Формат ruby on rails i18n</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/formatting.html#поnьзоватеnьский-формат\" class=\"sidebar-link\">Пользовательский формат</a></li></ul></li><li><a href=\"/vue-i18n/ru/guide/pluralization.html\" class=\"sidebar-link\">Плюрализация</a></li><li><a href=\"/vue-i18n/ru/guide/datetime.html\" class=\"sidebar-link\">Локализация дат</a></li><li><a href=\"/vue-i18n/ru/guide/number.html\" class=\"sidebar-link\">Локализация чисел</a></li><li><a href=\"/vue-i18n/ru/guide/messages.html\" class=\"sidebar-link\">Синтаксис сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/fallback.html\" class=\"sidebar-link\">Запасная локализация</a></li><li><a href=\"/vue-i18n/ru/guide/component.html\" class=\"sidebar-link\">Локализация на основе компонентов</a></li><li><a href=\"/vue-i18n/ru/guide/directive.html\" class=\"sidebar-link\">Пользовательская директива</a></li><li><a href=\"/vue-i18n/ru/guide/interpolation.html\" class=\"sidebar-link\">Интерполяция компонента</a></li><li><a href=\"/vue-i18n/ru/guide/sfc.html\" class=\"sidebar-link\">Однофайловые компоненты</a></li><li><a href=\"/vue-i18n/ru/guide/hot-reload.html\" class=\"sidebar-link\">Горячая перезагрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/locale.html\" class=\"sidebar-link\">Переключение локализации</a></li><li><a href=\"/vue-i18n/ru/guide/lazy-loading.html\" class=\"sidebar-link\">Ленивая загрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/tooling.html\" class=\"sidebar-link\">Инструментарий</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Устаревшие версии</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/legacy/\" class=\"sidebar-link\">Миграция с версии v5.x</a></li><li><a href=\"/vue-i18n/ru/legacy/v5.html\" class=\"sidebar-link\">Документация для версии v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"формат-сообщений-nокаnизации\"><a href=\"#формат-сообщений-nокаnизации\" class=\"header-anchor\">#</a> Формат сообщений локализации</h1> <h2 id=\"именованный-формат\"><a href=\"#именованный-формат\" class=\"header-anchor\">#</a> Именованный формат</h2> <p>Сообщения локализации:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      hello<span class=\"token operator\">:</span> <span class=\"token string\">'{msg} world'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  ru<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      hello<span class=\"token operator\">:</span> <span class=\"token string\">'{msg} мир'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>Шаблон:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('message.hello', { msg: 'привет' }) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Результат:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>привет мир<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"формат-списков\"><a href=\"#формат-списков\" class=\"header-anchor\">#</a> Формат списков</h2> <p>Сообщения локализации:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      hello<span class=\"token operator\">:</span> <span class=\"token string\">'{0} world'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  ru<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      hello<span class=\"token operator\">:</span> <span class=\"token string\">'{0} мир'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>Шаблон:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('message.hello', ['привееет']) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Результат:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>привееет мир<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Форматирование списков также принимает объекты, соответствующие по структуре массиву:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('message.hello', {'0': 'привееет'}) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Результат:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>привееет мир<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"html-формат\"><a href=\"#html-формат\" class=\"header-anchor\">#</a> HTML формат</h2> <div class=\"warning custom-block\"><p class=\"custom-block-title\">Обратите внимание</p> <p>⚠️ Динамическая локализация произвольного HTML на вебсайте очень опасна, потому что легко может привести к XSS-уязвимостям. Используйте HTML-интерполяцию только для доверенного контента и никогда для пользовательского.</p> <p>Рекомендуем в таких случаях использовать возможности <a href=\"/vue-i18n/ru/guide/interpolation.html\">интерполяции компонента</a>.</p></div> <div class=\"warning custom-block\"><p class=\"custom-block-title\">Обратите внимание</p> <blockquote><p>🆕 Добавлено в версии 8.11+</p></blockquote> <p>Можно управлять использованием HTML форматирования. Для подробностей см. опцию конструктора <code>warnHtmlInMessage</code> и свойства API.</p></div> <p>Иногда требуется отобразить сообщение локализации HTML-кодом, а не статической строкой.</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      hello<span class=\"token operator\">:</span> <span class=\"token string\">'hello &lt;br&gt; world'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  ru<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      hello<span class=\"token operator\">:</span> <span class=\"token string\">'привет &lt;br&gt; мир'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>Шаблон:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">v-html</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>$t('message.hello')<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Результат (вместо отформатированного сообщения)</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  привет\n  <span class=\"token comment\">&lt;!-- &lt;br&gt; существует, но отрисован как html, а не строкой --&gt;</span>\n  мир\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"формат-ruby-on-rails-i18n\"><a href=\"#формат-ruby-on-rails-i18n\" class=\"header-anchor\">#</a> Формат ruby on rails i18n</h2> <p>Сообщения локализации:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      hello<span class=\"token operator\">:</span> <span class=\"token string\">'%{msg} world'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  ru<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      hello<span class=\"token operator\">:</span> <span class=\"token string\">'%{msg} мир'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>Шаблон:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('message.hello', { msg: 'привет' }) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Результат:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>привет мир<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"поnьзоватеnьский-формат\"><a href=\"#поnьзоватеnьский-формат\" class=\"header-anchor\">#</a> Пользовательский формат</h2> <p>Иногда может потребоваться реализовать локализацию для собственного формата сообщений (например, использовать <a href=\"http://userguide.icu-project.org/formatparse/messages\" target=\"_blank\" rel=\"noopener noreferrer\">синтаксиса сообщений ICU<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>).</p> <p>Реализовать это можно с помощью специального пользовательского метода форматирования, который должен реализовать <a href=\"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js#L41-L43\" target=\"_blank\" rel=\"noopener noreferrer\">интерфейс Formatter<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>.</p> <p>Пример пользовательского метода форматирования с синтаксисом класса ES2015:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token comment\">// Реализация пользовательского Formatter</span>\n<span class=\"token keyword\">class</span> <span class=\"token class-name\">CustomFormatter</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function\">constructor</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">options</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">// ...</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token comment\">//</span>\n  <span class=\"token comment\">// interpolate</span>\n  <span class=\"token comment\">//</span>\n  <span class=\"token comment\">// @param {string} message</span>\n  <span class=\"token comment\">//   строка или список или именованный формат</span>\n  <span class=\"token comment\">//   напр.</span>\n  <span class=\"token comment\">//   - именованный формат: 'Hi {name}'</span>\n  <span class=\"token comment\">//   - формат списка: 'Hi {0}'</span>\n  <span class=\"token comment\">//</span>\n  <span class=\"token comment\">// @param {Object | Array} values</span>\n  <span class=\"token comment\">//   значения интерполяции `message`.</span>\n  <span class=\"token comment\">//   переданные значения с `$t`, `$tc` и функциональным компонентом `i18n`.</span>\n  <span class=\"token comment\">//   напр.</span>\n  <span class=\"token comment\">//   - $t('hello', { name: 'Alex' }) -&gt; переданные значения: Object `{ name: 'Alex' }`</span>\n  <span class=\"token comment\">//   - $t('hello', ['Alex']) -&gt; переданные значения: Array `['Alex']`</span>\n  <span class=\"token comment\">//   - функциональный компонент `i18n` (интерполяция в компоненте)</span>\n  <span class=\"token comment\">//     &lt;i18n path=&quot;hello&quot;&gt;</span>\n  <span class=\"token comment\">//       &lt;p&gt;Alex&lt;/p&gt;</span>\n  <span class=\"token comment\">//       &lt;p&gt;how are you?&lt;/p&gt;</span>\n  <span class=\"token comment\">//     &lt;/i18n&gt;</span>\n  <span class=\"token comment\">//     -&gt; переданные значения: Array (included VNode):</span>\n  <span class=\"token comment\">//        `[VNode{ tag: 'p', text: 'Alex', ...}, VNode{ tag: 'p', text: 'how are you?', ...}]`</span>\n  <span class=\"token comment\">//</span>\n  <span class=\"token comment\">// @return {Array&lt;any&gt;}</span>\n  <span class=\"token comment\">//   интерполированные значения. Они необходимы чтобы вернуть следующее:</span>\n  <span class=\"token comment\">//   - массив строк, когда используется `$t` или `$tc`.</span>\n  <span class=\"token comment\">//   - массив, включая объект VNode, когда используется функциональный компонент `i18n`.</span>\n  <span class=\"token comment\">//</span>\n  <span class=\"token function\">interpolate</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">message<span class=\"token punctuation\">,</span> values</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">// реализация логики интерполяции</span>\n    <span class=\"token comment\">// ...</span>\n\n    <span class=\"token comment\">// возвращаем интерполированный массив</span>\n    <span class=\"token keyword\">return</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'resolved message string'</span><span class=\"token punctuation\">]</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token comment\">// Регистрация через опцию `formatter`</span>\n<span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en-US'</span><span class=\"token punctuation\">,</span>\n  formatter<span class=\"token operator\">:</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">CustomFormatter</span><span class=\"token punctuation\">(</span><span class=\"token comment\">/* опции конструктора */</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token string\">'en-US'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token comment\">// ...</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token string\">'ru-RU'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token comment\">// ...</span>\n    <span class=\"token punctuation\">}</span>\n    <span class=\"token comment\">// ...</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// Запускаем приложение!</span>\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> i18n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>Также посмотрите <a href=\"https://github.com/kazupon/vue-i18n/tree/dev/examples/formatting/custom\" target=\"_blank\" rel=\"noopener noreferrer\">официальный пример пользовательского метода форматирования<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>.</p></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/ru/guide/formatting.md\" target=\"_blank\" rel=\"noopener noreferrer\">Изменить эту страницу на GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Последнее обновление: </span> <span class=\"time\">5/7/2020, 3:46:10 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/ru/installation.html\" class=\"prev\">\n          Установка\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/ru/guide/pluralization.html\">\n          Плюрализация\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/30.24889fb9.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/ru/guide/hot-reload.html",
    "content": "<!DOCTYPE html>\n<html lang=\"ru-RU\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Горячая перезагрузка переводов | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n — плагин для интернационализации во Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/ru/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/hot-reload.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/hot-reload.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/hot-reload.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/hot-reload.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/hot-reload.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/hot-reload.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/ru/introduction.html\" class=\"sidebar-link\">Введение</a></li><li><a href=\"/vue-i18n/ru/started.html\" class=\"sidebar-link\">Начало работы</a></li><li><a href=\"/vue-i18n/ru/installation.html\" class=\"sidebar-link\">Установка</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Руководство</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"sidebar-link\">Формат сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/pluralization.html\" class=\"sidebar-link\">Плюрализация</a></li><li><a href=\"/vue-i18n/ru/guide/datetime.html\" class=\"sidebar-link\">Локализация дат</a></li><li><a href=\"/vue-i18n/ru/guide/number.html\" class=\"sidebar-link\">Локализация чисел</a></li><li><a href=\"/vue-i18n/ru/guide/messages.html\" class=\"sidebar-link\">Синтаксис сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/fallback.html\" class=\"sidebar-link\">Запасная локализация</a></li><li><a href=\"/vue-i18n/ru/guide/component.html\" class=\"sidebar-link\">Локализация на основе компонентов</a></li><li><a href=\"/vue-i18n/ru/guide/directive.html\" class=\"sidebar-link\">Пользовательская директива</a></li><li><a href=\"/vue-i18n/ru/guide/interpolation.html\" class=\"sidebar-link\">Интерполяция компонента</a></li><li><a href=\"/vue-i18n/ru/guide/sfc.html\" class=\"sidebar-link\">Однофайловые компоненты</a></li><li><a href=\"/vue-i18n/ru/guide/hot-reload.html\" class=\"active sidebar-link\">Горячая перезагрузка переводов</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/hot-reload.html#простой-пример\" class=\"sidebar-link\">Простой пример</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/hot-reload.html#продвинутый-пример\" class=\"sidebar-link\">Продвинутый пример</a></li></ul></li><li><a href=\"/vue-i18n/ru/guide/locale.html\" class=\"sidebar-link\">Переключение локализации</a></li><li><a href=\"/vue-i18n/ru/guide/lazy-loading.html\" class=\"sidebar-link\">Ленивая загрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/tooling.html\" class=\"sidebar-link\">Инструментарий</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Устаревшие версии</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/legacy/\" class=\"sidebar-link\">Миграция с версии v5.x</a></li><li><a href=\"/vue-i18n/ru/legacy/v5.html\" class=\"sidebar-link\">Документация для версии v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"горячая-перезагрузка-переводов\"><a href=\"#горячая-перезагрузка-переводов\" class=\"header-anchor\">#</a> Горячая перезагрузка переводов</h1> <p>С помощью функции Webpack для <a href=\"https://webpack.js.org/concepts/hot-module-replacement/\" target=\"_blank\" rel=\"noopener noreferrer\">горячей перезагрузки модулей (HMR)<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> можно отслеживать изменения в файлах локализации и осуществлять их горячую перезагрузку в приложении.</p> <h2 id=\"простой-пример\"><a href=\"#простой-пример\" class=\"header-anchor\">#</a> Простой пример</h2> <p>Для статичного набора локалей, можно явно указать горячую перезагрузку этих переводов:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">import</span> Vue <span class=\"token keyword\">from</span> <span class=\"token string\">&quot;vue&quot;</span>\n<span class=\"token keyword\">import</span> VueI18n <span class=\"token keyword\">from</span> <span class=\"token string\">&quot;vue-i18n&quot;</span>\n<span class=\"token keyword\">import</span> en <span class=\"token keyword\">from</span> <span class=\"token string\">'./en'</span>\n<span class=\"token keyword\">import</span> ru <span class=\"token keyword\">from</span> <span class=\"token string\">'./ru'</span>\n\n<span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token punctuation\">,</span>\n  ru\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token comment\">// Экземпляр VueI18n</span>\n<span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// Запускаем приложение</span>\n<span class=\"token keyword\">const</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// Добавляем горячую перезагрузку сообщений локализации</span>\n<span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>module<span class=\"token punctuation\">.</span>hot<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  module<span class=\"token punctuation\">.</span>hot<span class=\"token punctuation\">.</span><span class=\"token function\">accept</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token string\">'./en'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'./ru'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    i18n<span class=\"token punctuation\">.</span><span class=\"token function\">setLocaleMessage</span><span class=\"token punctuation\">(</span><span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span> <span class=\"token function\">require</span><span class=\"token punctuation\">(</span><span class=\"token string\">'./en'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span>default<span class=\"token punctuation\">)</span>\n    i18n<span class=\"token punctuation\">.</span><span class=\"token function\">setLocaleMessage</span><span class=\"token punctuation\">(</span><span class=\"token string\">'ru'</span><span class=\"token punctuation\">,</span> <span class=\"token function\">require</span><span class=\"token punctuation\">(</span><span class=\"token string\">'./ru'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span>default<span class=\"token punctuation\">)</span>\n    <span class=\"token comment\">// Или добавляем горячую перезагрузку через свойство $i18n</span>\n    <span class=\"token comment\">// app.$i18n.setLocaleMessage('en', require('./en').default)</span>\n    <span class=\"token comment\">// app.$i18n.setLocaleMessage('ru', require('./ru').default)</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><h2 id=\"продвинутый-пример\"><a href=\"#продвинутый-пример\" class=\"header-anchor\">#</a> Продвинутый пример</h2> <p>Если требуется поддержка изменяющегося набор переводов, можно реализовать горячую перезагрузку для всех локалей динамически через <code>require.context</code>:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">import</span> Vue <span class=\"token keyword\">from</span> <span class=\"token string\">&quot;vue&quot;</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">import</span> VueI18n <span class=\"token keyword\">from</span> <span class=\"token string\">&quot;vue-i18n&quot;</span><span class=\"token punctuation\">;</span>\n\nVue<span class=\"token punctuation\">.</span><span class=\"token function\">use</span><span class=\"token punctuation\">(</span>VueI18n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// Загрузка всех локалей и сохранение контекста</span>\n<span class=\"token keyword\">function</span> <span class=\"token function\">loadMessages</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> context <span class=\"token operator\">=</span> require<span class=\"token punctuation\">.</span><span class=\"token function\">context</span><span class=\"token punctuation\">(</span><span class=\"token string\">&quot;./locales&quot;</span><span class=\"token punctuation\">,</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span> <span class=\"token regex\">/[a-z0-9-_]+\\.json$/i</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> context\n    <span class=\"token punctuation\">.</span><span class=\"token function\">keys</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n    <span class=\"token punctuation\">.</span><span class=\"token function\">map</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">key</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> key<span class=\"token punctuation\">,</span> locale<span class=\"token operator\">:</span> key<span class=\"token punctuation\">.</span><span class=\"token function\">match</span><span class=\"token punctuation\">(</span><span class=\"token regex\">/[a-z0-9-_]+/i</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n    <span class=\"token punctuation\">.</span><span class=\"token function\">reduce</span><span class=\"token punctuation\">(</span>\n      <span class=\"token punctuation\">(</span><span class=\"token parameter\">messages<span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span> key<span class=\"token punctuation\">,</span> locale <span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n        <span class=\"token operator\">...</span>messages<span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">[</span>locale<span class=\"token punctuation\">]</span><span class=\"token operator\">:</span> <span class=\"token function\">context</span><span class=\"token punctuation\">(</span>key<span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n      <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span> context<span class=\"token punctuation\">,</span> messages <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> <span class=\"token punctuation\">{</span> context<span class=\"token punctuation\">,</span> messages <span class=\"token punctuation\">}</span> <span class=\"token operator\">=</span> <span class=\"token function\">loadMessages</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// Экземпляр VueI18n</span>\n<span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">&quot;en&quot;</span><span class=\"token punctuation\">,</span>\n  messages<span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// Запускаем приложение</span>\n<span class=\"token keyword\">const</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// Добавляем горячую перезагрузку сообщений локализации</span>\n<span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>module<span class=\"token punctuation\">.</span>hot<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  module<span class=\"token punctuation\">.</span>hot<span class=\"token punctuation\">.</span><span class=\"token function\">accept</span><span class=\"token punctuation\">(</span>context<span class=\"token punctuation\">.</span>id<span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">const</span> <span class=\"token punctuation\">{</span> messages<span class=\"token operator\">:</span> newMessages <span class=\"token punctuation\">}</span> <span class=\"token operator\">=</span> <span class=\"token function\">loadMessages</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n    Object<span class=\"token punctuation\">.</span><span class=\"token function\">keys</span><span class=\"token punctuation\">(</span>newMessages<span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">filter</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">locale</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> messages<span class=\"token punctuation\">[</span>locale<span class=\"token punctuation\">]</span> <span class=\"token operator\">!==</span> newMessages<span class=\"token punctuation\">[</span>locale<span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">locale</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n        messages<span class=\"token punctuation\">[</span>locale<span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> newMessages<span class=\"token punctuation\">[</span>locale<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n        i18n<span class=\"token punctuation\">.</span><span class=\"token function\">setLocaleMessage</span><span class=\"token punctuation\">(</span>locale<span class=\"token punctuation\">,</span> messages<span class=\"token punctuation\">[</span>locale<span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/ru/guide/hot-reload.md\" target=\"_blank\" rel=\"noopener noreferrer\">Изменить эту страницу на GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Последнее обновление: </span> <span class=\"time\">5/7/2020, 3:46:10 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/ru/guide/sfc.html\" class=\"prev\">\n          Однофайловые компоненты\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/ru/guide/locale.html\">\n          Переключение локализации\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/31.57bd94a5.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/ru/guide/interpolation.html",
    "content": "<!DOCTYPE html>\n<html lang=\"ru-RU\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Интерполяция компонента | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n — плагин для интернационализации во Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/ru/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/interpolation.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/interpolation.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/interpolation.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/interpolation.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/interpolation.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/interpolation.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/ru/introduction.html\" class=\"sidebar-link\">Введение</a></li><li><a href=\"/vue-i18n/ru/started.html\" class=\"sidebar-link\">Начало работы</a></li><li><a href=\"/vue-i18n/ru/installation.html\" class=\"sidebar-link\">Установка</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Руководство</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"sidebar-link\">Формат сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/pluralization.html\" class=\"sidebar-link\">Плюрализация</a></li><li><a href=\"/vue-i18n/ru/guide/datetime.html\" class=\"sidebar-link\">Локализация дат</a></li><li><a href=\"/vue-i18n/ru/guide/number.html\" class=\"sidebar-link\">Локализация чисел</a></li><li><a href=\"/vue-i18n/ru/guide/messages.html\" class=\"sidebar-link\">Синтаксис сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/fallback.html\" class=\"sidebar-link\">Запасная локализация</a></li><li><a href=\"/vue-i18n/ru/guide/component.html\" class=\"sidebar-link\">Локализация на основе компонентов</a></li><li><a href=\"/vue-i18n/ru/guide/directive.html\" class=\"sidebar-link\">Пользовательская директива</a></li><li><a href=\"/vue-i18n/ru/guide/interpolation.html\" class=\"active sidebar-link\">Интерполяция компонента</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/interpolation.html#базовое-испоnьзование\" class=\"sidebar-link\">Базовое использование</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/interpolation.html#испоnьзование-синтаксиса-сnотов\" class=\"sidebar-link\">Использование синтаксиса слотов</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/interpolation.html#испоnьзование-синтаксиса-places\" class=\"sidebar-link\">Использование синтаксиса places</a></li></ul></li><li><a href=\"/vue-i18n/ru/guide/sfc.html\" class=\"sidebar-link\">Однофайловые компоненты</a></li><li><a href=\"/vue-i18n/ru/guide/hot-reload.html\" class=\"sidebar-link\">Горячая перезагрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/locale.html\" class=\"sidebar-link\">Переключение локализации</a></li><li><a href=\"/vue-i18n/ru/guide/lazy-loading.html\" class=\"sidebar-link\">Ленивая загрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/tooling.html\" class=\"sidebar-link\">Инструментарий</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Устаревшие версии</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/legacy/\" class=\"sidebar-link\">Миграция с версии v5.x</a></li><li><a href=\"/vue-i18n/ru/legacy/v5.html\" class=\"sidebar-link\">Документация для версии v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"интерпоnяция-компонента\"><a href=\"#интерпоnяция-компонента\" class=\"header-anchor\">#</a> Интерполяция компонента</h1> <h2 id=\"базовое-испоnьзование\"><a href=\"#базовое-испоnьзование\" class=\"header-anchor\">#</a> Базовое использование</h2> <div class=\"tip custom-block\"><p class=\"custom-block-title\">Поддержка с версии</p> <p>🆕 7.0+</p></div> <p>Иногда требуется перевести сообщения в которых есть HTML теги или компоненты. Например:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>I accept xxx <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>/term<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>Terms of Service Agreement<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Для такого сообщения, если хотим использовать <code>$t</code>, то, вероятно, попробуем достичь скомпоновав из следующих сообщений локализации:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    term1<span class=\"token operator\">:</span> <span class=\"token string\">&quot;I Accept xxx's&quot;</span><span class=\"token punctuation\">,</span>\n    term2<span class=\"token operator\">:</span> <span class=\"token string\">'Terms of Service Agreement'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>И в итоге шаблон станет выглядеть так:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('term1') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>/term<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>{{ $t('term2') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Результат:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>I accept xxx <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>/term<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>Terms of Service Agreement<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Это выглядит очень громоздко, но если перенести тег <code>&lt;a&gt;</code> в сообщение локализации, то добавится вероятность XSS-уязвимости из-за применения <code>v-html=&quot;$t('term')&quot;</code>.</p> <p>Этого можно избежать воспользовавшись функциональным компонентом <code>i18n</code>. Например:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span> <span class=\"token attr-name\">path</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>term<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">tag</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>label<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">for</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>tos<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">:href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>url<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">target</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>_blank<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>{{ $t('tos') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    tos<span class=\"token operator\">:</span> <span class=\"token string\">'Term of Service'</span><span class=\"token punctuation\">,</span>\n    term<span class=\"token operator\">:</span> <span class=\"token string\">'I accept xxx {0}.'</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  ru<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    tos<span class=\"token operator\">:</span> <span class=\"token string\">'Условия обслуживания'</span><span class=\"token punctuation\">,</span>\n    term<span class=\"token operator\">:</span> <span class=\"token string\">'Я соглашаюсь с xxx {0}.'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token punctuation\">,</span>\n  data<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    url<span class=\"token operator\">:</span> <span class=\"token string\">'/term'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>Результат:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>label</span> <span class=\"token attr-name\">for</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>tos<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    I accept xxx <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>/term<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">target</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>_blank<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>Term of Service<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span>.\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>label</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Подробнее о примере можно изучить <a href=\"https://github.com/kazupon/vue-i18n/tree/dev/examples/interpolation/places\" target=\"_blank\" rel=\"noopener noreferrer\">здесь<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></p> <p>Потомки функционального компонента <code>i18n</code> интерполируют сообщения локализации по входному параметру <code>path</code>. В примере выше,</p> <div><p><code>&lt;a :href=&quot;url&quot; target=&quot;_blank&quot;&gt;{{ $t('tos') }}&lt;/a&gt;</code></p></div> <p>интерполируется с сообщением локализации <code>term</code>.</p> <p>В примере выше интерполяция компонента использует <strong>формат в виде списка</strong>. Потомки функционального компонента <code>i18n</code> интерполируются по порядку их появления.</p> <h2 id=\"испоnьзование-синтаксиса-сnотов\"><a href=\"#испоnьзование-синтаксиса-сnотов\" class=\"header-anchor\">#</a> Использование синтаксиса слотов</h2> <div class=\"tip custom-block\"><p class=\"custom-block-title\">Поддержка с версии</p> <p>🆕 8.14+</p></div> <p>Гораздо удобнее использовать синтаксис именованных слотов. Например:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span> <span class=\"token attr-name\">path</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>info<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">tag</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>p<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>template</span> <span class=\"token attr-name\"><span class=\"token namespace\">v-slot:</span>limit</span><span class=\"token punctuation\">&gt;</span></span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span><span class=\"token punctuation\">&gt;</span></span>{{ changeLimit }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>template</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>template</span> <span class=\"token attr-name\"><span class=\"token namespace\">v-slot:</span>action</span><span class=\"token punctuation\">&gt;</span></span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">:href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>changeUrl<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>{{ $t('change') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>template</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    info<span class=\"token operator\">:</span> <span class=\"token string\">'You can {action} until {limit} minutes from departure.'</span><span class=\"token punctuation\">,</span>\n    change<span class=\"token operator\">:</span> <span class=\"token string\">'change your flight'</span><span class=\"token punctuation\">,</span>\n    refund<span class=\"token operator\">:</span> <span class=\"token string\">'refund the ticket'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token punctuation\">,</span>\n  data<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    changeUrl<span class=\"token operator\">:</span> <span class=\"token string\">'/change'</span><span class=\"token punctuation\">,</span>\n    refundUrl<span class=\"token operator\">:</span> <span class=\"token string\">'/refund'</span><span class=\"token punctuation\">,</span>\n    changeLimit<span class=\"token operator\">:</span> <span class=\"token number\">15</span><span class=\"token punctuation\">,</span>\n    refundLimit<span class=\"token operator\">:</span> <span class=\"token number\">30</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>Результат:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n    You can <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>/change<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>change your flight<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span> until\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span><span class=\"token punctuation\">&gt;</span></span>15<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span> minutes from departure.\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>С версии Vue 2.6 можно использовать сокращённый синтаксис слотов в шаблонах:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span> <span class=\"token attr-name\">path</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>info<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">tag</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>p<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>template</span> <span class=\"token attr-name\">#limit</span><span class=\"token punctuation\">&gt;</span></span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span><span class=\"token punctuation\">&gt;</span></span>{{ changeLimit }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>template</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>template</span> <span class=\"token attr-name\">#action</span><span class=\"token punctuation\">&gt;</span></span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">:href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>changeUrl<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>{{ $t('change') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>template</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><div class=\"warning custom-block\"><p class=\"custom-block-title\">Ограничение</p> <p>⚠️ В компоненте <code>i18n</code> входные параметры слота не поддерживаются.</p></div> <h2 id=\"испоnьзование-синтаксиса-places\"><a href=\"#испоnьзование-синтаксиса-places\" class=\"header-anchor\">#</a> Использование синтаксиса places</h2> <div class=\"danger custom-block\"><p class=\"custom-block-title\">Внимание!</p> <p>В следующей мажорной версии входные параметры <code>place</code> и <code>places</code> будут объявлены устаревшими. Рекомендуем использовать синтаксис слотов.</p></div> <div class=\"tip custom-block\"><p class=\"custom-block-title\">Поддержка с версии</p> <p>🆕 7.2+</p></div> <div class=\"warning custom-block\"><p class=\"custom-block-title\">Обратите внимание</p> <p>⚠️ В компоненте <code>i18n</code> содержимое, состоящее только из пробелов, будет опущено.</p></div> <p>Именованное форматирование поддерживается с помощью атрибута <code>place</code>. Например:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span> <span class=\"token attr-name\">path</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>info<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">tag</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>p<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\">place</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>limit<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>{{ changeLimit }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">place</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>action<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">:href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>changeUrl<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>{{ $t('change') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    info<span class=\"token operator\">:</span> <span class=\"token string\">'You can {action} until {limit} minutes from departure.'</span><span class=\"token punctuation\">,</span>\n    change<span class=\"token operator\">:</span> <span class=\"token string\">'change your flight'</span><span class=\"token punctuation\">,</span>\n    refund<span class=\"token operator\">:</span> <span class=\"token string\">'refund the ticket'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token punctuation\">,</span>\n  data<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    changeUrl<span class=\"token operator\">:</span> <span class=\"token string\">'/change'</span><span class=\"token punctuation\">,</span>\n    refundUrl<span class=\"token operator\">:</span> <span class=\"token string\">'/refund'</span><span class=\"token punctuation\">,</span>\n    changeLimit<span class=\"token operator\">:</span> <span class=\"token number\">15</span><span class=\"token punctuation\">,</span>\n    refundLimit<span class=\"token operator\">:</span> <span class=\"token number\">30</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>Результат:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n    You can <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>/change<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>change your flight<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span> until\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span><span class=\"token punctuation\">&gt;</span></span>15<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span> minutes from departure.\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><div class=\"warning custom-block\"><p class=\"custom-block-title\">Обратите внимание</p> <p>⚠️ Для использования именованного форматирования все потомки компонента <code>i18n</code> должны иметь установленный атрибут <code>place</code>. В противном случае будет использовано форматирование списком.</p></div> <p>Если всё же необходимо интерполировать текстовое содержимое с помощью именованного форматирования, можно определить свойство <code>places</code> на компоненте <code>i18n</code>. Например:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span> <span class=\"token attr-name\">path</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>info<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">tag</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>p<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">:places</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>{ limit: refundLimit }<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">place</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>action<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">:href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>refundUrl<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>{{ $t('refund') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Результат:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n    You can <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>/refund<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>refund your ticket<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span> until 30 minutes from\n    departure.\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/ru/guide/interpolation.md\" target=\"_blank\" rel=\"noopener noreferrer\">Изменить эту страницу на GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Последнее обновление: </span> <span class=\"time\">5/7/2020, 3:46:10 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/ru/guide/directive.html\" class=\"prev\">\n          Пользовательская директива\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/ru/guide/sfc.html\">\n          Однофайловые компоненты\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/32.14dc9bdc.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/ru/guide/lazy-loading.html",
    "content": "<!DOCTYPE html>\n<html lang=\"ru-RU\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Ленивая загрузка переводов | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n — плагин для интернационализации во Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/ru/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/lazy-loading.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/lazy-loading.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/lazy-loading.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/lazy-loading.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/lazy-loading.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/lazy-loading.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/ru/introduction.html\" class=\"sidebar-link\">Введение</a></li><li><a href=\"/vue-i18n/ru/started.html\" class=\"sidebar-link\">Начало работы</a></li><li><a href=\"/vue-i18n/ru/installation.html\" class=\"sidebar-link\">Установка</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Руководство</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"sidebar-link\">Формат сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/pluralization.html\" class=\"sidebar-link\">Плюрализация</a></li><li><a href=\"/vue-i18n/ru/guide/datetime.html\" class=\"sidebar-link\">Локализация дат</a></li><li><a href=\"/vue-i18n/ru/guide/number.html\" class=\"sidebar-link\">Локализация чисел</a></li><li><a href=\"/vue-i18n/ru/guide/messages.html\" class=\"sidebar-link\">Синтаксис сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/fallback.html\" class=\"sidebar-link\">Запасная локализация</a></li><li><a href=\"/vue-i18n/ru/guide/component.html\" class=\"sidebar-link\">Локализация на основе компонентов</a></li><li><a href=\"/vue-i18n/ru/guide/directive.html\" class=\"sidebar-link\">Пользовательская директива</a></li><li><a href=\"/vue-i18n/ru/guide/interpolation.html\" class=\"sidebar-link\">Интерполяция компонента</a></li><li><a href=\"/vue-i18n/ru/guide/sfc.html\" class=\"sidebar-link\">Однофайловые компоненты</a></li><li><a href=\"/vue-i18n/ru/guide/hot-reload.html\" class=\"sidebar-link\">Горячая перезагрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/locale.html\" class=\"sidebar-link\">Переключение локализации</a></li><li><a href=\"/vue-i18n/ru/guide/lazy-loading.html\" class=\"active sidebar-link\">Ленивая загрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/tooling.html\" class=\"sidebar-link\">Инструментарий</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Устаревшие версии</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/legacy/\" class=\"sidebar-link\">Миграция с версии v5.x</a></li><li><a href=\"/vue-i18n/ru/legacy/v5.html\" class=\"sidebar-link\">Документация для версии v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"ленивая-загрузка-переводов\"><a href=\"#ленивая-загрузка-переводов\" class=\"header-anchor\">#</a> Ленивая загрузка переводов</h1> <p>Одновременная загрузка всех файлов переводов может быть излишней и ненужной.</p> <p>Ленивая или асинхронная загрузка файлов переводов очень просто реализуется при использовании Webpack.</p> <p>Предположим, что у нас есть каталог проекта следующей структуры:</p> <div class=\"language- extra-class\"><pre class=\"language-text\"><code>our-cool-project\n-dist\n-src\n--routes\n--store\n--setup\n---i18n-setup.js\n--lang\n---en.js\n---it.js\n</code></pre></div><p>В каталоге <code>lang</code> располагаются все файлы переводов. В каталоге <code>setup</code> сгруппированы различные файлы настроек, например настройки i18n, регистрация глобальных компонентов, инициализации плагинов и другое.</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token comment\">// i18n-setup.js</span>\n<span class=\"token keyword\">import</span> Vue <span class=\"token keyword\">from</span> <span class=\"token string\">'vue'</span>\n<span class=\"token keyword\">import</span> VueI18n <span class=\"token keyword\">from</span> <span class=\"token string\">'vue-i18n'</span>\n<span class=\"token keyword\">import</span> messages <span class=\"token keyword\">from</span> <span class=\"token string\">'@/lang/en'</span>\n<span class=\"token keyword\">import</span> axios <span class=\"token keyword\">from</span> <span class=\"token string\">'axios'</span>\n\nVue<span class=\"token punctuation\">.</span><span class=\"token function\">use</span><span class=\"token punctuation\">(</span>VueI18n<span class=\"token punctuation\">)</span>\n\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// установка локализации</span>\n  fallbackLocale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages <span class=\"token comment\">// установка сообщений локализации</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token keyword\">const</span> loadedLanguages <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'en'</span><span class=\"token punctuation\">]</span> <span class=\"token comment\">// список локализаций, которые пред-загружены</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">setI18nLanguage</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">lang</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  i18n<span class=\"token punctuation\">.</span>locale <span class=\"token operator\">=</span> lang\n  axios<span class=\"token punctuation\">.</span>defaults<span class=\"token punctuation\">.</span>headers<span class=\"token punctuation\">.</span>common<span class=\"token punctuation\">[</span><span class=\"token string\">'Accept-Language'</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> lang\n  document<span class=\"token punctuation\">.</span><span class=\"token function\">querySelector</span><span class=\"token punctuation\">(</span><span class=\"token string\">'html'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">setAttribute</span><span class=\"token punctuation\">(</span><span class=\"token string\">'lang'</span><span class=\"token punctuation\">,</span> lang<span class=\"token punctuation\">)</span>\n  <span class=\"token keyword\">return</span> lang\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">function</span> <span class=\"token function\">loadLanguageAsync</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">lang</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// Если локализация та же</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>i18n<span class=\"token punctuation\">.</span>locale <span class=\"token operator\">===</span> lang<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> Promise<span class=\"token punctuation\">.</span><span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span><span class=\"token function\">setI18nLanguage</span><span class=\"token punctuation\">(</span>lang<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token comment\">// Если локализация уже была загружена</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>loadedLanguages<span class=\"token punctuation\">.</span><span class=\"token function\">includes</span><span class=\"token punctuation\">(</span>lang<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> Promise<span class=\"token punctuation\">.</span><span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span><span class=\"token function\">setI18nLanguage</span><span class=\"token punctuation\">(</span>lang<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token comment\">// Если локализация ещё не была загружена</span>\n  <span class=\"token keyword\">return</span> <span class=\"token keyword\">import</span><span class=\"token punctuation\">(</span>\n    <span class=\"token comment\">/* webpackChunkName: &quot;lang-[request]&quot; */</span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">@/i18n/messages/</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>lang<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\">.js</span><span class=\"token template-punctuation string\">`</span></span>\n  <span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">then</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">messages</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n    i18n<span class=\"token punctuation\">.</span><span class=\"token function\">setLocaleMessage</span><span class=\"token punctuation\">(</span>lang<span class=\"token punctuation\">,</span> messages<span class=\"token punctuation\">.</span>default<span class=\"token punctuation\">)</span>\n    loadedLanguages<span class=\"token punctuation\">.</span><span class=\"token function\">push</span><span class=\"token punctuation\">(</span>lang<span class=\"token punctuation\">)</span>\n    <span class=\"token keyword\">return</span> <span class=\"token function\">setI18nLanguage</span><span class=\"token punctuation\">(</span>lang<span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>Для начала создаём новый экземпляр VueI18n как обычно. Затем определяем массив <code>loadedLanguages</code> в котором будем хранить список загруженных языков. Далее создаём функцию <code>setI18nLanguage</code>, которая будет переключать локализацию в экземпляре vueI18n, axios и где ещё это необходимо.</p> <p>Функция <code>loadLanguageAsync</code> будет использоваться для изменения языка. Загрузка новых файлов осуществляется функцией <code>import</code>, которую предоставляет Webpack и позволяет загружать файлы динамически, а поскольку она возвращает Promise, то можем легко дождаться окончания загрузки.</p> <p>Подробнее о динамических импортах можно изучить в <a href=\"https://webpack.js.org/guides/code-splitting/#dynamic-imports\" target=\"_blank\" rel=\"noopener noreferrer\">документации Webpack<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>.</p> <p>Использовать <code>loadLanguageAsync</code> очень просто. Например, в хуке beforeEach vue-router.</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code>router<span class=\"token punctuation\">.</span><span class=\"token function\">beforeEach</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">to<span class=\"token punctuation\">,</span> <span class=\"token keyword\">from</span><span class=\"token punctuation\">,</span> next</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> lang <span class=\"token operator\">=</span> to<span class=\"token punctuation\">.</span>params<span class=\"token punctuation\">.</span>lang\n  <span class=\"token function\">loadLanguageAsync</span><span class=\"token punctuation\">(</span>lang<span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">then</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token function\">next</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>Можно доработать реализацию, например добавив проверку поддерживается ли переданный <code>lang</code> или нет и вызывать <code>reject</code> чтобы отловить подобные случаи в хуке <code>beforeEach</code> и остановить навигацию.</p></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/ru/guide/lazy-loading.md\" target=\"_blank\" rel=\"noopener noreferrer\">Изменить эту страницу на GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Последнее обновление: </span> <span class=\"time\">5/7/2020, 3:46:10 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/ru/guide/locale.html\" class=\"prev\">\n          Переключение локализации\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/ru/guide/tooling.html\">\n          Инструментарий\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/33.4d59e7bf.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/ru/guide/locale.html",
    "content": "<!DOCTYPE html>\n<html lang=\"ru-RU\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Переключение локализации | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n — плагин для интернационализации во Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/ru/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/locale.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/locale.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/locale.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/locale.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/locale.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/locale.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/ru/introduction.html\" class=\"sidebar-link\">Введение</a></li><li><a href=\"/vue-i18n/ru/started.html\" class=\"sidebar-link\">Начало работы</a></li><li><a href=\"/vue-i18n/ru/installation.html\" class=\"sidebar-link\">Установка</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Руководство</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"sidebar-link\">Формат сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/pluralization.html\" class=\"sidebar-link\">Плюрализация</a></li><li><a href=\"/vue-i18n/ru/guide/datetime.html\" class=\"sidebar-link\">Локализация дат</a></li><li><a href=\"/vue-i18n/ru/guide/number.html\" class=\"sidebar-link\">Локализация чисел</a></li><li><a href=\"/vue-i18n/ru/guide/messages.html\" class=\"sidebar-link\">Синтаксис сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/fallback.html\" class=\"sidebar-link\">Запасная локализация</a></li><li><a href=\"/vue-i18n/ru/guide/component.html\" class=\"sidebar-link\">Локализация на основе компонентов</a></li><li><a href=\"/vue-i18n/ru/guide/directive.html\" class=\"sidebar-link\">Пользовательская директива</a></li><li><a href=\"/vue-i18n/ru/guide/interpolation.html\" class=\"sidebar-link\">Интерполяция компонента</a></li><li><a href=\"/vue-i18n/ru/guide/sfc.html\" class=\"sidebar-link\">Однофайловые компоненты</a></li><li><a href=\"/vue-i18n/ru/guide/hot-reload.html\" class=\"sidebar-link\">Горячая перезагрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/locale.html\" class=\"active sidebar-link\">Переключение локализации</a></li><li><a href=\"/vue-i18n/ru/guide/lazy-loading.html\" class=\"sidebar-link\">Ленивая загрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/tooling.html\" class=\"sidebar-link\">Инструментарий</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Устаревшие версии</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/legacy/\" class=\"sidebar-link\">Миграция с версии v5.x</a></li><li><a href=\"/vue-i18n/ru/legacy/v5.html\" class=\"sidebar-link\">Документация для версии v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"перекnючение-nокаnизации\"><a href=\"#перекnючение-nокаnизации\" class=\"header-anchor\">#</a> Переключение локализации</h1> <p>Обычно используют корневой экземпляр Vue в качестве точки истины, а все дочерние компоненты используют свойство <code>locale</code> от класса <code>VueI18n</code> передаваемого по ссылке.</p> <p>Иногда может потребоваться динамически переключать локализацию. Для этого нужно изменить значение свойства <code>locale</code> экземпляра <code>VueI18n</code>.</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'ru'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// устанавливаем локализацию по умолчанию</span>\n  <span class=\"token operator\">...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// Создаём корневой экземпляр Vue</span>\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token punctuation\">,</span>\n  <span class=\"token operator\">...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// Переключаем на другую локализацию</span>\ni18n<span class=\"token punctuation\">.</span>locale <span class=\"token operator\">=</span> <span class=\"token string\">'en'</span>\n</code></pre></div><p>Каждый компонент содержит экземпляр <code>VueI18n</code>, ссылающийся на свойство <code>$i18n</code>, которое также можно использовать для переключения локализации.</p> <p>Пример:</p> <div class=\"language-vue extra-class\"><pre class=\"language-vue\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>template</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>locale-changer<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>select</span> <span class=\"token attr-name\">v-model</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>$i18n.locale<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>option</span> <span class=\"token attr-name\">v-for</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>(lang, i) in langs<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">:key</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>`Lang${i}`<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">:value</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>lang<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n        {{ lang }}\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>option</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>select</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>template</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token script\"><span class=\"token language-javascript\">\n  <span class=\"token keyword\">export</span> <span class=\"token keyword\">default</span> <span class=\"token punctuation\">{</span>\n    name<span class=\"token operator\">:</span> <span class=\"token string\">'locale-changer'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token function\">data</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span> langs<span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'ru'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">]</span> <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><div class=\"warning custom-block\"><p class=\"custom-block-title\">Обратите внимание</p> <p>⚠️ Изменение локализации игнорируется компонентами с опцией <code>sync: false</code>.</p></div> <div class=\"warning custom-block\"><p class=\"custom-block-title\">Компонент vs. корневая область видимости</p> <p>⚠️ Изменение <code>$i18n.locale</code> внутри компонента не приводит к изменению корневой локализации. Если вы полагаетесь на корневую локализацию, например, при использовании <a href=\"/vue-i18n/ru/guide/fallback.html\">корневой запасной локализации</a>, используйте <code>$root.$i18n.locale</code> вместо <code>$i18n.locale</code>.</p></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/ru/guide/locale.md\" target=\"_blank\" rel=\"noopener noreferrer\">Изменить эту страницу на GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Последнее обновление: </span> <span class=\"time\">5/7/2020, 3:46:10 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/ru/guide/hot-reload.html\" class=\"prev\">\n          Горячая перезагрузка переводов\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/ru/guide/lazy-loading.html\">\n          Ленивая загрузка переводов\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/34.adc9b2af.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/ru/guide/messages.html",
    "content": "<!DOCTYPE html>\n<html lang=\"ru-RU\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Синтаксис сообщений локализации | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n — плагин для интернационализации во Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/ru/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/messages.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/messages.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/messages.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/messages.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/messages.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/messages.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/ru/introduction.html\" class=\"sidebar-link\">Введение</a></li><li><a href=\"/vue-i18n/ru/started.html\" class=\"sidebar-link\">Начало работы</a></li><li><a href=\"/vue-i18n/ru/installation.html\" class=\"sidebar-link\">Установка</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Руководство</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"sidebar-link\">Формат сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/pluralization.html\" class=\"sidebar-link\">Плюрализация</a></li><li><a href=\"/vue-i18n/ru/guide/datetime.html\" class=\"sidebar-link\">Локализация дат</a></li><li><a href=\"/vue-i18n/ru/guide/number.html\" class=\"sidebar-link\">Локализация чисел</a></li><li><a href=\"/vue-i18n/ru/guide/messages.html\" class=\"active sidebar-link\">Синтаксис сообщений локализации</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/messages.html#структура\" class=\"sidebar-link\">Структура</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/messages.html#связанные-сообщения-nокаnизации\" class=\"sidebar-link\">Связанные сообщения локализации</a></li></ul></li><li><a href=\"/vue-i18n/ru/guide/fallback.html\" class=\"sidebar-link\">Запасная локализация</a></li><li><a href=\"/vue-i18n/ru/guide/component.html\" class=\"sidebar-link\">Локализация на основе компонентов</a></li><li><a href=\"/vue-i18n/ru/guide/directive.html\" class=\"sidebar-link\">Пользовательская директива</a></li><li><a href=\"/vue-i18n/ru/guide/interpolation.html\" class=\"sidebar-link\">Интерполяция компонента</a></li><li><a href=\"/vue-i18n/ru/guide/sfc.html\" class=\"sidebar-link\">Однофайловые компоненты</a></li><li><a href=\"/vue-i18n/ru/guide/hot-reload.html\" class=\"sidebar-link\">Горячая перезагрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/locale.html\" class=\"sidebar-link\">Переключение локализации</a></li><li><a href=\"/vue-i18n/ru/guide/lazy-loading.html\" class=\"sidebar-link\">Ленивая загрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/tooling.html\" class=\"sidebar-link\">Инструментарий</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Устаревшие версии</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/legacy/\" class=\"sidebar-link\">Миграция с версии v5.x</a></li><li><a href=\"/vue-i18n/ru/legacy/v5.html\" class=\"sidebar-link\">Документация для версии v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"синтаксис-сообщений-nокаnизации\"><a href=\"#синтаксис-сообщений-nокаnизации\" class=\"header-anchor\">#</a> Синтаксис сообщений локализации</h1> <h2 id=\"структура\"><a href=\"#структура\" class=\"header-anchor\">#</a> Структура</h2> <p>Синтаксис сообщений локализации:</p> <div class=\"language-typescript extra-class\"><pre class=\"language-typescript\"><code><span class=\"token comment\">// As Flowtype definition, Locale Messages syntax like BNF annotation</span>\n<span class=\"token keyword\">type</span> LocaleMessages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span> <span class=\"token punctuation\">[</span>key<span class=\"token operator\">:</span> Locale<span class=\"token punctuation\">]</span><span class=\"token operator\">:</span> LocaleMessageObject <span class=\"token punctuation\">}</span>\n<span class=\"token keyword\">type</span> LocaleMessageObject <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span> <span class=\"token punctuation\">[</span>key<span class=\"token operator\">:</span> Path<span class=\"token punctuation\">]</span><span class=\"token operator\">:</span> LocaleMessage <span class=\"token punctuation\">}</span>\n<span class=\"token keyword\">type</span> LocaleMessageArray <span class=\"token operator\">=</span> LocaleMessage<span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span>\n<span class=\"token keyword\">type</span> LocaleMessage <span class=\"token operator\">=</span> <span class=\"token builtin\">string</span> <span class=\"token operator\">|</span> LocaleMessageObject <span class=\"token operator\">|</span> LocaleMessageArray\n<span class=\"token keyword\">type</span> Locale <span class=\"token operator\">=</span> <span class=\"token builtin\">string</span>\n<span class=\"token keyword\">type</span> Path <span class=\"token operator\">=</span> <span class=\"token builtin\">string</span>\n</code></pre></div><p>Используя синтаксис выше, можно создать следующую структуру сообщений локализации:</p> <div class=\"language-json extra-class\"><pre class=\"language-json\"><code><span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// локализация 'en'</span>\n  <span class=\"token property\">&quot;en&quot;</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token property\">&quot;key1&quot;</span><span class=\"token operator\">:</span> <span class=\"token string\">&quot;это сообщение 1&quot;</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// обычное использование</span>\n    <span class=\"token property\">&quot;nested&quot;</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token comment\">// вложенное</span>\n      <span class=\"token property\">&quot;message1&quot;</span><span class=\"token operator\">:</span> <span class=\"token string\">&quot;это вложенное сообщение 1&quot;</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token property\">&quot;errors&quot;</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n      <span class=\"token comment\">// массив</span>\n      <span class=\"token string\">&quot;это сообщение кода ошибки 0&quot;</span><span class=\"token punctuation\">,</span>\n      <span class=\"token punctuation\">{</span>\n        <span class=\"token comment\">// объект в массиве</span>\n        <span class=\"token property\">&quot;internal1&quot;</span><span class=\"token operator\">:</span> <span class=\"token string\">&quot;это внутреннее сообщение кода ошибки 1&quot;</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      <span class=\"token punctuation\">[</span>\n        <span class=\"token comment\">// массив в массиве</span>\n        <span class=\"token string\">&quot;это вложенный массив ошибки 1&quot;</span>\n      <span class=\"token punctuation\">]</span>\n    <span class=\"token punctuation\">]</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">// локализация 'ru'</span>\n  <span class=\"token property\">&quot;ru&quot;</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">// ...</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>Для такой структуры сообщений локализации, можно переводить сообщения используя ключи:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- обычное использование --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('key1') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- вложенное --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('nested.message1') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- массив --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('errors[0]') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- объект в массиве --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('errors[1].internal1') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- массив в массиве --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('errors[2][0]') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Результат:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- обычное использование --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>это сообщение 1<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- вложенное --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>это вложенное сообщение 1<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- массив --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>это сообщение кода ошибки 0<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- объект в массиве --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>это внутреннее сообщение кода ошибки 1<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- массив в массиве --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>это вложенный массив ошибки 1<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"связанные-сообщения-nокаnизации\"><a href=\"#связанные-сообщения-nокаnизации\" class=\"header-anchor\">#</a> Связанные сообщения локализации</h2> <p>Когда есть ключ с сообщением перевода, которое в точности повторяется в сообщении по другому ключу, то вместо дублирования можно поставить ссылку на него. Для этого к его содержимому нужно добавить префикс <code>@:</code> после которого указать полное имя ключа к сообщению перевода, включая пространство имён, к которому делаем ссылку.</p> <p>Сообщения локализации:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      the_world<span class=\"token operator\">:</span> <span class=\"token string\">'the world'</span><span class=\"token punctuation\">,</span>\n      dio<span class=\"token operator\">:</span> <span class=\"token string\">'DIO:'</span><span class=\"token punctuation\">,</span>\n      linked<span class=\"token operator\">:</span> <span class=\"token string\">'@:message.dio @:message.the_world !!!!'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>Шаблон:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('message.linked') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Результат:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>DIO: the world !!!!<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h3 id=\"форматирование-связанных-сообщений-nокаnизации\"><a href=\"#форматирование-связанных-сообщений-nокаnизации\" class=\"header-anchor\">#</a> Форматирование связанных сообщений локализации</h3> <p>Если важен регистр символов в переводе, то можно управлять регистром связанного сообщения локализации. Связанные сообщения можно отформатировать используя модификатор <code>@.modifier:key</code></p> <p>Доступны следующие модификаторы:</p> <ul><li><code>upper</code>: Форматирование в верхний регистр всех символов в связанном сообщении.</li> <li><code>lower</code>: Форматирование в нижний регистр всех символов в связанном сообщении.</li> <li><code>capitalize</code>: Форматирование заглавной первой буквы в связанном сообщении.</li></ul> <p>Сообщения локализации:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      homeAddress<span class=\"token operator\">:</span> <span class=\"token string\">'Home address'</span><span class=\"token punctuation\">,</span>\n      missingHomeAddress<span class=\"token operator\">:</span> <span class=\"token string\">'Please provide @.lower:message.homeAddress'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  ru<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      homeAddress<span class=\"token operator\">:</span> <span class=\"token string\">'Домашний адрес'</span><span class=\"token punctuation\">,</span>\n      missingHomeAddress<span class=\"token operator\">:</span> <span class=\"token string\">'Пожалуйста укажите @.lower:message.homeAddress'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>label</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('message.homeAddress') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>label</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>error<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>{{ $t('message.missingHomeAddress') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Результат:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>label</span><span class=\"token punctuation\">&gt;</span></span>Домашний адрес<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>label</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>error<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>Пожалуйста укажите домашний адрес<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>При необходимости можно добавлять новые модификаторы или перезаписывать существующие через опцию <code>modifiers</code> в конструкторе <code>VueI18n</code>.</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'ru'</span><span class=\"token punctuation\">,</span>\n  modifiers<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">// Добавление нового модификатора</span>\n    <span class=\"token function-variable function\">snakeCase</span><span class=\"token operator\">:</span> <span class=\"token parameter\">str</span> <span class=\"token operator\">=&gt;</span> str<span class=\"token punctuation\">.</span><span class=\"token function\">split</span><span class=\"token punctuation\">(</span><span class=\"token string\">' '</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">join</span><span class=\"token punctuation\">(</span><span class=\"token string\">'-'</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">// ...</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n</code></pre></div><h3 id=\"группировка-с-помощью-скобок\"><a href=\"#группировка-с-помощью-скобок\" class=\"header-anchor\">#</a> Группировка с помощью скобок</h3> <p>Ключ связанного сообщения также можно указывать в виде <code>@:(message.foo.bar.baz)</code>, где ссылка на другой ключ перевода обрамляется в скобки <code>()</code>.</p> <p>Подобное может потребоваться, если за ссылкой на другое сообщение <code>@:message.something</code> требуется поставить точку <code>.</code>, которая в противном случае считалась бы частью ссылки.</p> <p>Сообщения локализации:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      dio<span class=\"token operator\">:</span> <span class=\"token string\">'DIO'</span><span class=\"token punctuation\">,</span>\n      linked<span class=\"token operator\">:</span> <span class=\"token string\">&quot;There's a reason, you lost, @:(message.dio).&quot;</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  ru<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      dio<span class=\"token operator\">:</span> <span class=\"token string\">'DIO'</span><span class=\"token punctuation\">,</span>\n      linked<span class=\"token operator\">:</span> <span class=\"token string\">&quot;Есть причина по которой ты проиграл, @:(message.dio).&quot;</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>Шаблон:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('message.linked') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Результат:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>There's a reason, you lost, DIO.<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/ru/guide/messages.md\" target=\"_blank\" rel=\"noopener noreferrer\">Изменить эту страницу на GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Последнее обновление: </span> <span class=\"time\">5/7/2020, 3:46:10 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/ru/guide/number.html\" class=\"prev\">\n          Локализация чисел\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/ru/guide/fallback.html\">\n          Запасная локализация\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/35.4e6e5ad7.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/ru/guide/number.html",
    "content": "<!DOCTYPE html>\n<html lang=\"ru-RU\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Локализация чисел | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n — плагин для интернационализации во Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/ru/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/number.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/number.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/number.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/number.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/number.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/number.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/ru/introduction.html\" class=\"sidebar-link\">Введение</a></li><li><a href=\"/vue-i18n/ru/started.html\" class=\"sidebar-link\">Начало работы</a></li><li><a href=\"/vue-i18n/ru/installation.html\" class=\"sidebar-link\">Установка</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Руководство</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"sidebar-link\">Формат сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/pluralization.html\" class=\"sidebar-link\">Плюрализация</a></li><li><a href=\"/vue-i18n/ru/guide/datetime.html\" class=\"sidebar-link\">Локализация дат</a></li><li><a href=\"/vue-i18n/ru/guide/number.html\" class=\"active sidebar-link\">Локализация чисел</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/number.html#поnьзоватеnьское-форматирование\" class=\"sidebar-link\">Пользовательское форматирование</a></li></ul></li><li><a href=\"/vue-i18n/ru/guide/messages.html\" class=\"sidebar-link\">Синтаксис сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/fallback.html\" class=\"sidebar-link\">Запасная локализация</a></li><li><a href=\"/vue-i18n/ru/guide/component.html\" class=\"sidebar-link\">Локализация на основе компонентов</a></li><li><a href=\"/vue-i18n/ru/guide/directive.html\" class=\"sidebar-link\">Пользовательская директива</a></li><li><a href=\"/vue-i18n/ru/guide/interpolation.html\" class=\"sidebar-link\">Интерполяция компонента</a></li><li><a href=\"/vue-i18n/ru/guide/sfc.html\" class=\"sidebar-link\">Однофайловые компоненты</a></li><li><a href=\"/vue-i18n/ru/guide/hot-reload.html\" class=\"sidebar-link\">Горячая перезагрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/locale.html\" class=\"sidebar-link\">Переключение локализации</a></li><li><a href=\"/vue-i18n/ru/guide/lazy-loading.html\" class=\"sidebar-link\">Ленивая загрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/tooling.html\" class=\"sidebar-link\">Инструментарий</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Устаревшие версии</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/legacy/\" class=\"sidebar-link\">Миграция с версии v5.x</a></li><li><a href=\"/vue-i18n/ru/legacy/v5.html\" class=\"sidebar-link\">Документация для версии v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"локаnизация-чисеn\"><a href=\"#локаnизация-чисеn\" class=\"header-anchor\">#</a> Локализация чисел</h1> <div class=\"tip custom-block\"><p class=\"custom-block-title\">Поддержка с версии</p> <p>🆕 7.0+</p></div> <p>Можно выполнять локализацию чисел по соответствующему формату.</p> <p>Пример формата для чисел:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> numberFormats <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token string\">'en-US'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    currency<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      style<span class=\"token operator\">:</span> <span class=\"token string\">'currency'</span><span class=\"token punctuation\">,</span>\n      currency<span class=\"token operator\">:</span> <span class=\"token string\">'USD'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token string\">'ru-RU'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    currency<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      style<span class=\"token operator\">:</span> <span class=\"token string\">'currency'</span><span class=\"token punctuation\">,</span>\n      currency<span class=\"token operator\">:</span> <span class=\"token string\">'RUB'</span><span class=\"token punctuation\">,</span>\n      currencyDisplay<span class=\"token operator\">:</span> <span class=\"token string\">'symbol'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>Как указано выше, можно задать числовые форматы (например, <code>currency</code> для валюты) используя <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat\" target=\"_blank\" rel=\"noopener noreferrer\">опции ECMA-402 Intl.NumberFormat<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>.</p> <p>После этого, для возможности использования данного формата в сообщениях локализации, необходимо задать опцию <code>numberFormats</code> конструктора <code>VueI18n</code>:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  numberFormats\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>Шаблон:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $n(100, 'currency') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $n(100, 'currency', 'ru-RU') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Результат:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>$100.00<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>100,00 ₽<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"поnьзоватеnьское-форматирование\"><a href=\"#поnьзоватеnьское-форматирование\" class=\"header-anchor\">#</a> Пользовательское форматирование</h2> <div class=\"tip custom-block\"><p class=\"custom-block-title\">Поддержка с версии</p> <p>🆕 8.10+</p></div> <p>Метод <code>$n</code> возвращает результат в виде строки с полностью отформатированным числом, которую можно использовать лишь целиком. В случаях, когда нужно стилизовать некоторую часть отформатированного числа (например, дробную часть), <code>$n</code> будет недостаточно. В таких случаях необходимо использовать функциональный компонент <code>&lt;i18n-n&gt;</code>.</p> <p>При минимальном наборе свойств <code>&lt;i18n-n&gt;</code> генерирует тот же результат, что и <code>$n</code> обернутый в сконфигурированный DOM-элемент.</p> <p>Шаблон:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n-n</span> <span class=\"token attr-name\">:value</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>100<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n-n</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n-n</span> <span class=\"token attr-name\">:value</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>100<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">format</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>currency<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n-n</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n-n</span> <span class=\"token attr-name\">:value</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>100<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">format</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>currency<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">locale</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>ru-RU<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n-n</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Результат:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span><span class=\"token punctuation\">&gt;</span></span>100<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span><span class=\"token punctuation\">&gt;</span></span>$100.00<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span><span class=\"token punctuation\">&gt;</span></span>100,00 ₽<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Но по-настоящему оценить удобство компонента можно лишь тогда, когда он применяется с использованием <a href=\"https://ru.vuejs.org/v2/guide/components-slots.html#%D0%A1%D0%BB%D0%BE%D1%82%D1%8B-%D1%81-%D0%BE%D0%B3%D1%80%D0%B0%D0%BD%D0%B8%D1%87%D0%B5%D0%BD%D0%BD%D0%BE%D0%B9-%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D1%8C%D1%8E-%D0%B2%D0%B8%D0%B4%D0%B8%D0%BC%D0%BE%D1%81%D1%82%D0%B8\" target=\"_blank\" rel=\"noopener noreferrer\">слотов с ограниченной областью видимости<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>.</p> <p>Допустим, есть требование выводить целую часть числа полужирным шрифтом. Реализовать это можно с помощью слота <code>integer</code>:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n-n</span> <span class=\"token attr-name\">:value</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>100<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">format</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>currency<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\"><span class=\"token namespace\">v-slot:</span>integer</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>slotProps<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">styles</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>font-weight: bold<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    {{ slotProps.integer }}\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n-n</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Результат:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span><span class=\"token punctuation\">&gt;</span></span>$<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\">styles</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>font-weight: bold<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>100<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>.00<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Можно использовать несколько слотов одновременно:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n-n</span> <span class=\"token attr-name\">:value</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>1234<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">:format</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>{ key: 'currency', currency: 'EUR' }<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\"><span class=\"token namespace\">v-slot:</span>currency</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>slotProps<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">styles</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>color: green<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    {{ slotProps.currency }}\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\"><span class=\"token namespace\">v-slot:</span>integer</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>slotProps<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">styles</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>font-weight: bold<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    {{ slotProps.integer }}\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\"><span class=\"token namespace\">v-slot:</span>group</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>slotProps<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">styles</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>font-weight: bold<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    {{ slotProps.group }}\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\"><span class=\"token namespace\">v-slot:</span>fraction</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>slotProps<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">styles</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>font-size: small<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    {{ slotProps.fraction }}\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n-n</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>(Полученный HTML ниже отформатирован для лучшей читаемости)</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\">styles</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>color: green<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>€<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\">styles</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>font-weight: bold<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>1<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\">styles</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>font-weight: bold<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>,<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\">styles</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>font-weight: bold<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>234<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n  .\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\">styles</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>font-size: small<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>00<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Полный список поддерживаемых слотов, а также другие свойства <code>&lt;i18n-n&gt;</code> можно найти <a href=\"/vue-i18n/ru/api/#i18n-n-functional-component\">на странице справочника API</a>.</p></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/ru/guide/number.md\" target=\"_blank\" rel=\"noopener noreferrer\">Изменить эту страницу на GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Последнее обновление: </span> <span class=\"time\">5/7/2020, 3:46:10 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/ru/guide/datetime.html\" class=\"prev\">\n          Локализация дат\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/ru/guide/messages.html\">\n          Синтаксис сообщений локализации\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/36.7b1eb244.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/ru/guide/pluralization.html",
    "content": "<!DOCTYPE html>\n<html lang=\"ru-RU\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Плюрализация | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n — плагин для интернационализации во Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/37.6584773d.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/ru/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/pluralization.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/pluralization.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/pluralization.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/pluralization.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/pluralization.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/pluralization.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/ru/introduction.html\" class=\"sidebar-link\">Введение</a></li><li><a href=\"/vue-i18n/ru/started.html\" class=\"sidebar-link\">Начало работы</a></li><li><a href=\"/vue-i18n/ru/installation.html\" class=\"sidebar-link\">Установка</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Руководство</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"sidebar-link\">Формат сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/pluralization.html\" class=\"active sidebar-link\">Плюрализация</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/pluralization.html#аргумент-дnя-доступа-к-чисnу\" class=\"sidebar-link\">Аргумент для доступа к числу</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/pluralization.html#поnьзоватеnьская-пnюраnизация\" class=\"sidebar-link\">Пользовательская плюрализация</a></li></ul></li><li><a href=\"/vue-i18n/ru/guide/datetime.html\" class=\"sidebar-link\">Локализация дат</a></li><li><a href=\"/vue-i18n/ru/guide/number.html\" class=\"sidebar-link\">Локализация чисел</a></li><li><a href=\"/vue-i18n/ru/guide/messages.html\" class=\"sidebar-link\">Синтаксис сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/fallback.html\" class=\"sidebar-link\">Запасная локализация</a></li><li><a href=\"/vue-i18n/ru/guide/component.html\" class=\"sidebar-link\">Локализация на основе компонентов</a></li><li><a href=\"/vue-i18n/ru/guide/directive.html\" class=\"sidebar-link\">Пользовательская директива</a></li><li><a href=\"/vue-i18n/ru/guide/interpolation.html\" class=\"sidebar-link\">Интерполяция компонента</a></li><li><a href=\"/vue-i18n/ru/guide/sfc.html\" class=\"sidebar-link\">Однофайловые компоненты</a></li><li><a href=\"/vue-i18n/ru/guide/hot-reload.html\" class=\"sidebar-link\">Горячая перезагрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/locale.html\" class=\"sidebar-link\">Переключение локализации</a></li><li><a href=\"/vue-i18n/ru/guide/lazy-loading.html\" class=\"sidebar-link\">Ленивая загрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/tooling.html\" class=\"sidebar-link\">Инструментарий</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Устаревшие версии</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/legacy/\" class=\"sidebar-link\">Миграция с версии v5.x</a></li><li><a href=\"/vue-i18n/ru/legacy/v5.html\" class=\"sidebar-link\">Документация для версии v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"пnюраnизация\"><a href=\"#пnюраnизация\" class=\"header-anchor\">#</a> Плюрализация</h1> <p>Для переводимых сообщений есть возможность использовать плюрализацию. Для этого необходимо указывать строки переводов для различных случаев через разделитель <code>|</code>.</p> <p><em>В шаблоне в таких случаях необходимо использовать метод <code>$tc()</code> вместо <code>$t()</code>.</em></p> <p>Сообщения локализации:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    car<span class=\"token operator\">:</span> <span class=\"token string\">'car | cars'</span><span class=\"token punctuation\">,</span>\n    apple<span class=\"token operator\">:</span> <span class=\"token string\">'no apples | one apple | {count} apples'</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  ru<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    car<span class=\"token operator\">:</span> <span class=\"token string\">'машина | машины'</span><span class=\"token punctuation\">,</span>\n    apple<span class=\"token operator\">:</span> <span class=\"token string\">'нет яблок | одно яблоко | {count} яблок'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>Шаблон:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('car', 1) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('car', 2) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('apple', 0) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('apple', 1) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('apple', 10, { count: 10 }) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Результат:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>машина<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>машины<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>нет яблок<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>одно яблоко<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>10 яблок<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"аргумент-дnя-доступа-к-чисnу\"><a href=\"#аргумент-дnя-доступа-к-чисnу\" class=\"header-anchor\">#</a> Аргумент для доступа к числу</h2> <p>Нет необходимости явно передавать число для плюрализации. В сообщениях локализации число доступно через именованные аргументы <code>{count}</code> и/или <code>{n}</code>. При желании их можно переопределить.</p> <p>Сообщения локализации:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    apple<span class=\"token operator\">:</span> <span class=\"token string\">'no apples | one apple | {count} apples'</span><span class=\"token punctuation\">,</span>\n    banana<span class=\"token operator\">:</span> <span class=\"token string\">'no bananas | {n} banana | {n} bananas'</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  ru<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    apple<span class=\"token operator\">:</span> <span class=\"token string\">'нет яблок | одно яблоко | {count} яблок'</span><span class=\"token punctuation\">,</span>\n    banana<span class=\"token operator\">:</span> <span class=\"token string\">'нет бананов | {n} банан | {n} бананов'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>Шаблон:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('apple', 10, { count: 10 }) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('apple', 10) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('banana', 1, { n: 1 }) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('banana', 1) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('banana', 100, { n: 'слишком много' }) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Результат:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>10 яблок<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>10 яблок<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>1 банан<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>1 банан<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>слишком много бананов<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"поnьзоватеnьская-пnюраnизация\"><a href=\"#поnьзоватеnьская-пnюраnизация\" class=\"header-anchor\">#</a> Пользовательская плюрализация</h2> <p>Стандартная реализация плюрализации может быть не применима ко всем языкам (к примеру, в Славянских языках другие правила множественности).</p> <p>Можно указать собственную реализацию переопределив функцию <code>VueI18n.prototype.getChoiceIndex</code>.</p> <p>Очень упрощённый пример правил для Славянских языков (Русский, Украинский и другие):</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> defaultImpl <span class=\"token operator\">=</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">.</span>prototype<span class=\"token punctuation\">.</span>getChoiceIndex\n\n<span class=\"token comment\">/**\n * @param choice {number} индекс выбора, переданный в $tc: `$tc('path.to.rule', choiceIndex)`\n * @param choicesLength {number} общее количество доступных вариантов\n * @returns финальный индекс для выбора соответственного варианта слова\n **/</span>\n<span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">.</span>prototype<span class=\"token punctuation\">.</span><span class=\"token function-variable function\">getChoiceIndex</span> <span class=\"token operator\">=</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">choice<span class=\"token punctuation\">,</span> choicesLength</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// this === экземпляр VueI18n, поэтому свойство locale также здесь существует</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>locale <span class=\"token operator\">!==</span> <span class=\"token string\">'ru'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">// возвращаемся к реализации по умолчанию</span>\n    <span class=\"token keyword\">return</span> <span class=\"token function\">defaultImpl</span><span class=\"token punctuation\">.</span><span class=\"token function\">apply</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">,</span> arguments<span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>choice <span class=\"token operator\">===</span> <span class=\"token number\">0</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token number\">0</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">const</span> teen <span class=\"token operator\">=</span> choice <span class=\"token operator\">&gt;</span> <span class=\"token number\">10</span> <span class=\"token operator\">&amp;&amp;</span> choice <span class=\"token operator\">&lt;</span> <span class=\"token number\">20</span>\n  <span class=\"token keyword\">const</span> endsWithOne <span class=\"token operator\">=</span> choice <span class=\"token operator\">%</span> <span class=\"token number\">10</span> <span class=\"token operator\">===</span> <span class=\"token number\">1</span>\n\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token operator\">!</span>teen <span class=\"token operator\">&amp;&amp;</span> endsWithOne<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token number\">1</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token operator\">!</span>teen <span class=\"token operator\">&amp;&amp;</span> choice <span class=\"token operator\">%</span> <span class=\"token number\">10</span> <span class=\"token operator\">&gt;=</span> <span class=\"token number\">2</span> <span class=\"token operator\">&amp;&amp;</span> choice <span class=\"token operator\">%</span> <span class=\"token number\">10</span> <span class=\"token operator\">&lt;=</span> <span class=\"token number\">4</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token number\">2</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">return</span> choicesLength <span class=\"token operator\">&lt;</span> <span class=\"token number\">4</span> <span class=\"token operator\">?</span> <span class=\"token number\">2</span> <span class=\"token operator\">:</span> <span class=\"token number\">3</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>Такая реализация позволит использовать:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  ru<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    car<span class=\"token operator\">:</span> <span class=\"token string\">'0 машин | {n} машина | {n} машины | {n} машин'</span><span class=\"token punctuation\">,</span>\n    banana<span class=\"token operator\">:</span> <span class=\"token string\">'нет бананов | {n} банан | {n} банана | {n} бананов'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>Для такого формата вариантов <code>0 вещей | 1 вещь | несколько вещей | множество вещей</code>.</p> <p>В шаблоне, по-прежнему, необходимо использовать <code>$tc()</code> вместо <code>$t()</code>:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('car', 1) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('car', 2) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('car', 4) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('car', 12) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('car', 21) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('banana', 0) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('banana', 4) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('banana', 11) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('banana', 31) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Результат:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>1 машина<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>2 машины<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>4 машины<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>12 машин<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>21 машина<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>нет бананов<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>4 банана<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>11 бананов<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>31 банан<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/ru/guide/pluralization.md\" target=\"_blank\" rel=\"noopener noreferrer\">Изменить эту страницу на GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Последнее обновление: </span> <span class=\"time\">5/7/2020, 3:46:10 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"prev\">\n          Формат сообщений локализации\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/ru/guide/datetime.html\">\n          Локализация дат\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/37.6584773d.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/ru/guide/sfc.html",
    "content": "<!DOCTYPE html>\n<html lang=\"ru-RU\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Однофайловые компоненты | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n — плагин для интернационализации во Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/38.7879de31.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/ru/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/sfc.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/sfc.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/sfc.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/sfc.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/sfc.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/sfc.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/ru/introduction.html\" class=\"sidebar-link\">Введение</a></li><li><a href=\"/vue-i18n/ru/started.html\" class=\"sidebar-link\">Начало работы</a></li><li><a href=\"/vue-i18n/ru/installation.html\" class=\"sidebar-link\">Установка</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Руководство</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"sidebar-link\">Формат сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/pluralization.html\" class=\"sidebar-link\">Плюрализация</a></li><li><a href=\"/vue-i18n/ru/guide/datetime.html\" class=\"sidebar-link\">Локализация дат</a></li><li><a href=\"/vue-i18n/ru/guide/number.html\" class=\"sidebar-link\">Локализация чисел</a></li><li><a href=\"/vue-i18n/ru/guide/messages.html\" class=\"sidebar-link\">Синтаксис сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/fallback.html\" class=\"sidebar-link\">Запасная локализация</a></li><li><a href=\"/vue-i18n/ru/guide/component.html\" class=\"sidebar-link\">Локализация на основе компонентов</a></li><li><a href=\"/vue-i18n/ru/guide/directive.html\" class=\"sidebar-link\">Пользовательская директива</a></li><li><a href=\"/vue-i18n/ru/guide/interpolation.html\" class=\"sidebar-link\">Интерполяция компонента</a></li><li><a href=\"/vue-i18n/ru/guide/sfc.html\" class=\"active sidebar-link\">Однофайловые компоненты</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/sfc.html#базовое-испоnьзование\" class=\"sidebar-link\">Базовое использование</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/sfc.html#установка-vue-i18n-loader\" class=\"sidebar-link\">Установка vue-i18n-loader</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/sfc.html#webpack\" class=\"sidebar-link\">Webpack</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/sfc.html#vue-cli-3-0\" class=\"sidebar-link\">Vue CLI 3.0</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/sfc.html#laravel-mix\" class=\"sidebar-link\">Laravel-Mix</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/sfc.html#загрузка-yaml\" class=\"sidebar-link\">Загрузка YAML</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/sfc.html#нескоnько-поnьзоватеnьских-бnоков\" class=\"sidebar-link\">Несколько пользовательских блоков</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/sfc.html#локаnьные-стиnи\" class=\"sidebar-link\">Локальные стили</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/sfc.html#поnьзоватеnьские-бnоки-в-функционаnьном-компоненте\" class=\"sidebar-link\">Пользовательские блоки в функциональном компоненте</a></li></ul></li><li><a href=\"/vue-i18n/ru/guide/hot-reload.html\" class=\"sidebar-link\">Горячая перезагрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/locale.html\" class=\"sidebar-link\">Переключение локализации</a></li><li><a href=\"/vue-i18n/ru/guide/lazy-loading.html\" class=\"sidebar-link\">Ленивая загрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/tooling.html\" class=\"sidebar-link\">Инструментарий</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Устаревшие версии</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/legacy/\" class=\"sidebar-link\">Миграция с версии v5.x</a></li><li><a href=\"/vue-i18n/ru/legacy/v5.html\" class=\"sidebar-link\">Документация для версии v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"однофайnовые-компоненты\"><a href=\"#однофайnовые-компоненты\" class=\"header-anchor\">#</a> Однофайловые компоненты</h1> <h2 id=\"базовое-испоnьзование\"><a href=\"#базовое-испоnьзование\" class=\"header-anchor\">#</a> Базовое использование</h2> <p>В компоненте Vue или приложении Vue с использованием однофайловых компонентов, можно управлять сообщениями локализации с помощью пользовательского блока <code>i18n</code>.</p> <p>Код компонента из <a href=\"https://github.com/kazupon/vue-i18n/tree/dev/examples/sfc\" target=\"_blank\" rel=\"noopener noreferrer\">примера использования с однофайловыми компонентами<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>:</p> <div class=\"language-vue extra-class\"><pre class=\"language-vue\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n{\n  &quot;en&quot;: {\n    &quot;hello&quot;: &quot;hello world!&quot;\n  },\n  &quot;ru&quot;: {\n    &quot;hello&quot;: &quot;Привет мир!&quot;\n  }\n}\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>template</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>label</span> <span class=\"token attr-name\">for</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>locale<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>Язык<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>label</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>select</span> <span class=\"token attr-name\">v-model</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>locale<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>option</span><span class=\"token punctuation\">&gt;</span></span>en<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>option</span><span class=\"token punctuation\">&gt;</span></span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>option</span><span class=\"token punctuation\">&gt;</span></span>ru<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>option</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>select</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>Сообщение: {{ $t('hello') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>template</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token script\"><span class=\"token language-javascript\">\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">default</span> <span class=\"token punctuation\">{</span>\n  name<span class=\"token operator\">:</span> <span class=\"token string\">'app'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token function\">data</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>$i18n<span class=\"token punctuation\">.</span>locale <span class=\"token operator\">=</span> <span class=\"token string\">'ru'</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span> locale<span class=\"token operator\">:</span> <span class=\"token string\">'ru'</span> <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  watch<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token function\">locale</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">val</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>$i18n<span class=\"token punctuation\">.</span>locale <span class=\"token operator\">=</span> val\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"установка-vue-i18n-loader\"><a href=\"#установка-vue-i18n-loader\" class=\"header-anchor\">#</a> Установка vue-i18n-loader</h2> <p>Требуется установить <code>vue-loader</code> и <code>vue-i18n-loader</code> чтобы использовать пользовательские блоки <code>&lt;i18n&gt;</code>. Скорее всего <a href=\"https://github.com/vuejs/vue-loader\" target=\"_blank\" rel=\"noopener noreferrer\">vue-loader<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> уже используется в проекте, если уже работаете с однофайловыми компонентами, но необходимо дополнительно установить <a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\">vue-i18n-loader<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>:</p> <div class=\"language-bash extra-class\"><pre class=\"language-bash\"><code><span class=\"token function\">npm</span> i --save-dev @kazupon/vue-i18n-loader\n</code></pre></div><h2 id=\"webpack\"><a href=\"#webpack\" class=\"header-anchor\">#</a> Webpack</h2> <p>Для Webpack требуется следующая конфигурация:</p> <p>Для vue-loader v15 или более поздних версий:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code>module<span class=\"token punctuation\">.</span>exports <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// ...</span>\n  module<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    rules<span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n      <span class=\"token punctuation\">{</span>\n        test<span class=\"token operator\">:</span> <span class=\"token regex\">/\\.vue$/</span><span class=\"token punctuation\">,</span>\n        loader<span class=\"token operator\">:</span> <span class=\"token string\">'vue-loader'</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      <span class=\"token punctuation\">{</span>\n        resourceQuery<span class=\"token operator\">:</span> <span class=\"token regex\">/blockType=i18n/</span><span class=\"token punctuation\">,</span>\n        type<span class=\"token operator\">:</span> <span class=\"token string\">'javascript/auto'</span><span class=\"token punctuation\">,</span>\n        loader<span class=\"token operator\">:</span> <span class=\"token string\">'@kazupon/vue-i18n-loader'</span>\n      <span class=\"token punctuation\">}</span>\n      <span class=\"token comment\">// ...</span>\n    <span class=\"token punctuation\">]</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>Для vue-loader v14:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code>module<span class=\"token punctuation\">.</span>exports <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// ...</span>\n  module<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    rules<span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n      <span class=\"token punctuation\">{</span>\n        test<span class=\"token operator\">:</span> <span class=\"token regex\">/\\.vue$/</span><span class=\"token punctuation\">,</span>\n        loader<span class=\"token operator\">:</span> <span class=\"token string\">'vue-loader'</span><span class=\"token punctuation\">,</span>\n        options<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n          loaders<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token comment\">// необходимо указать ключ `i18n` для загрузчика `vue-i18n-loader`</span>\n            <span class=\"token comment\">// (https://github.com/kazupon/vue-i18n-loader)</span>\n            i18n<span class=\"token operator\">:</span> <span class=\"token string\">'@kazupon/vue-i18n-loader'</span>\n          <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span>\n      <span class=\"token punctuation\">}</span>\n      <span class=\"token comment\">// ...</span>\n    <span class=\"token punctuation\">]</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><h2 id=\"vue-cli-3-0\"><a href=\"#vue-cli-3-0\" class=\"header-anchor\">#</a> Vue CLI 3.0</h2> <p><a href=\"https://github.com/vuejs/vue-cli\" target=\"_blank\" rel=\"noopener noreferrer\">Vue CLI 3.0<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> скрывает конфигурацию Webpack, поэтому для добавления поддержки тегов <code>&lt;i18n&gt;</code> в однофайловых компонентах необходимо изменить существующую конфигурацию.</p> <p>Для этого нужно создать файл <code>vue.config.js</code> в корне проекта и добавить в него следующее:</p> <p>Для vue-loader v15 или более поздних версий:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code>module<span class=\"token punctuation\">.</span>exports <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function-variable function\">chainWebpack</span><span class=\"token operator\">:</span> <span class=\"token parameter\">config</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n    config<span class=\"token punctuation\">.</span>module\n      <span class=\"token punctuation\">.</span><span class=\"token function\">rule</span><span class=\"token punctuation\">(</span><span class=\"token string\">'i18n'</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">resourceQuery</span><span class=\"token punctuation\">(</span><span class=\"token regex\">/blockType=i18n/</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">type</span><span class=\"token punctuation\">(</span><span class=\"token string\">'javascript/auto'</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">use</span><span class=\"token punctuation\">(</span><span class=\"token string\">'i18n'</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">loader</span><span class=\"token punctuation\">(</span><span class=\"token string\">'@kazupon/vue-i18n-loader'</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">end</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>Для vue-loader v14:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> merge <span class=\"token operator\">=</span> <span class=\"token function\">require</span><span class=\"token punctuation\">(</span><span class=\"token string\">'deepmerge'</span><span class=\"token punctuation\">)</span>\n\nmodule<span class=\"token punctuation\">.</span>exports <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function-variable function\">chainWebpack</span><span class=\"token operator\">:</span> <span class=\"token parameter\">config</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n    config<span class=\"token punctuation\">.</span>module\n      <span class=\"token punctuation\">.</span><span class=\"token function\">rule</span><span class=\"token punctuation\">(</span><span class=\"token string\">'vue'</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">use</span><span class=\"token punctuation\">(</span><span class=\"token string\">'vue-loader'</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">tap</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">options</span> <span class=\"token operator\">=&gt;</span>\n        <span class=\"token function\">merge</span><span class=\"token punctuation\">(</span>options<span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n          loaders<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n            i18n<span class=\"token operator\">:</span> <span class=\"token string\">'@kazupon/vue-i18n-loader'</span>\n          <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p><em>Не забудьте установить <a href=\"https://github.com/KyleAMathews/deepmerge\" target=\"_blank\" rel=\"noopener noreferrer\">deepmerge<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>! (<code>npm i deepmerge -D</code> или <code>yarn add deepmerge -D</code>)</em></p> <p>Подробнее о возможностях изменения существующей конфигурации Webpack можно изучить <a href=\"https://cli.vuejs.org/ru/guide/webpack.html\" target=\"_blank\" rel=\"noopener noreferrer\">здесь<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>.</p> <h2 id=\"laravel-mix\"><a href=\"#laravel-mix\" class=\"header-anchor\">#</a> Laravel-Mix</h2> <p>Для Laravel-mix 4 с vue-loader v15 или более поздней версии:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token comment\">// Расширяем Mix с помощью метода &quot;i18n&quot;, который загрузит vue-i18n-loader</span>\nmix<span class=\"token punctuation\">.</span><span class=\"token function\">extend</span><span class=\"token punctuation\">(</span> <span class=\"token string\">'i18n'</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">class</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token function\">webpackRules</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token keyword\">return</span> <span class=\"token punctuation\">[</span>\n                <span class=\"token punctuation\">{</span>\n                    resourceQuery<span class=\"token operator\">:</span> <span class=\"token regex\">/blockType=i18n/</span><span class=\"token punctuation\">,</span>\n                    type<span class=\"token operator\">:</span>          <span class=\"token string\">'javascript/auto'</span><span class=\"token punctuation\">,</span>\n                    loader<span class=\"token operator\">:</span>        <span class=\"token string\">'@kazupon/vue-i18n-loader'</span><span class=\"token punctuation\">,</span>\n                <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n            <span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// Убедитесь что вызвали .i18n() (для загрузки загрузчика) перед .js(..., ...)</span>\nmix<span class=\"token punctuation\">.</span><span class=\"token function\">i18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n   <span class=\"token punctuation\">.</span><span class=\"token function\">js</span><span class=\"token punctuation\">(</span> <span class=\"token string\">'resources/js/App.js'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'public/js/app.js'</span> <span class=\"token punctuation\">)</span>\n   <span class=\"token operator\">...</span>\n</code></pre></div><p>Для Laravel-mix 2 с vue-loader v14:</p> <p>В Laravel-mix, начиная с версии <a href=\"https://github.com/JeffreyWay/laravel-mix/releases/tag/v2.1\" target=\"_blank\" rel=\"noopener noreferrer\">V2.1<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>, можно добавлять пользовательские правила с помощью <code>mix.extend()</code>. Laravel-mix уже имеет собственные правила для обработки <code>.vue</code> файлов. Чтобы добавить <code>vue-i18n-loader</code>, нужно добавить в <code>webpack.mix.js</code> следующее:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token comment\">// Код ниже внедрит загрузчик i18n (@kazupon/vue-i18n-loader) в качестве загрузчика .vue файлов.</span>\nmix<span class=\"token punctuation\">.</span><span class=\"token function\">extend</span><span class=\"token punctuation\">(</span> <span class=\"token string\">'i18n'</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span> <span class=\"token parameter\">webpackConfig<span class=\"token punctuation\">,</span> <span class=\"token operator\">...</span>args</span> <span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    webpackConfig<span class=\"token punctuation\">.</span>module<span class=\"token punctuation\">.</span>rules<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span> <span class=\"token punctuation\">(</span> <span class=\"token parameter\">module</span> <span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token comment\">// Поиск компонента &quot;vue-loader&quot;, который обрабатывает .vue файлы.</span>\n        <span class=\"token keyword\">if</span><span class=\"token punctuation\">(</span> module<span class=\"token punctuation\">.</span>loader <span class=\"token operator\">!==</span> <span class=\"token string\">'vue-loader'</span> <span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token keyword\">return</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n\n        <span class=\"token comment\">// В этом модуле добавляем vue-i18n-loader для тега i18n.</span>\n        module<span class=\"token punctuation\">.</span>options<span class=\"token punctuation\">.</span>loaders<span class=\"token punctuation\">.</span>i18n <span class=\"token operator\">=</span> <span class=\"token string\">'@kazupon/vue-i18n-loader'</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span> <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span> <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// Убедитесь что вызвали .i18n() (для загрузки загрузчика) перед .js(..., ...)</span>\nmix<span class=\"token punctuation\">.</span><span class=\"token function\">i18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n   <span class=\"token punctuation\">.</span><span class=\"token function\">js</span><span class=\"token punctuation\">(</span> <span class=\"token string\">'resources/assets/js/App.js'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'public/js/app.js'</span> <span class=\"token punctuation\">)</span>\n   <span class=\"token operator\">...</span>\n</code></pre></div><h2 id=\"загрузка-yaml\"><a href=\"#загрузка-yaml\" class=\"header-anchor\">#</a> Загрузка YAML</h2> <p>Пользовательские блоки <code>i18n</code> можно указывать в формате <code>JSON</code> или <code>YAML</code> (используя функцию предварительного загрузчика <code>vue-loader</code>).</p> <p>Пользовательский блок <code>i18n</code> в формате <code>YAML</code>:</p> <div class=\"language-vue extra-class\"><pre class=\"language-vue\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n  en:\n    hello: &quot;hello world!&quot;\n  ru:\n    hello: &quot;привет мир!&quot;\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Конфигурация Webpack:</p> <p>Для vue-loader v15 или более поздних версий:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token comment\">// Vue CLI 3.0</span>\nmodule<span class=\"token punctuation\">.</span>exports <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function-variable function\">chainWebpack</span><span class=\"token operator\">:</span> <span class=\"token parameter\">config</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n    config<span class=\"token punctuation\">.</span>module\n      <span class=\"token punctuation\">.</span><span class=\"token function\">rule</span><span class=\"token punctuation\">(</span><span class=\"token string\">'i18n'</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">resourceQuery</span><span class=\"token punctuation\">(</span><span class=\"token regex\">/blockType=i18n/</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">type</span><span class=\"token punctuation\">(</span><span class=\"token string\">'javascript/auto'</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">use</span><span class=\"token punctuation\">(</span><span class=\"token string\">'i18n'</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">loader</span><span class=\"token punctuation\">(</span><span class=\"token string\">'@kazupon/vue-i18n-loader'</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">end</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">use</span><span class=\"token punctuation\">(</span><span class=\"token string\">'yaml'</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">loader</span><span class=\"token punctuation\">(</span><span class=\"token string\">'yaml-loader'</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">end</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>Для vue-loader v14:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code>module<span class=\"token punctuation\">.</span>exports <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// ...</span>\n  module<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    rules<span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n      <span class=\"token punctuation\">{</span>\n        test<span class=\"token operator\">:</span> <span class=\"token regex\">/\\.vue$/</span><span class=\"token punctuation\">,</span>\n        loader<span class=\"token operator\">:</span> <span class=\"token string\">'vue-loader'</span><span class=\"token punctuation\">,</span>\n        options<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n          preLoaders<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n            i18n<span class=\"token operator\">:</span> <span class=\"token string\">'yaml-loader'</span>\n          <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n          loaders<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n            i18n<span class=\"token operator\">:</span> <span class=\"token string\">'@kazupon/vue-i18n-loader'</span>\n          <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span>\n      <span class=\"token punctuation\">}</span>\n      <span class=\"token comment\">// ...</span>\n    <span class=\"token punctuation\">]</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><h2 id=\"нескоnько-поnьзоватеnьских-бnоков\"><a href=\"#нескоnько-поnьзоватеnьских-бnоков\" class=\"header-anchor\">#</a> Несколько пользовательских блоков</h2> <p>Можно использовать сообщения локализации из нескольких пользовательских блоков <code>i18n</code>.</p> <div class=\"language-vue extra-class\"><pre class=\"language-vue\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>./common/locales.json<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n  {\n    &quot;en&quot;: {\n      &quot;hello&quot;: &quot;hello world!&quot;\n    },\n    &quot;ru&quot;: {\n      &quot;hello&quot;: &quot;Привет мир!&quot;\n    }\n  }\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>В примере выше, первый пользовательский блок загружает общие сообщения локализации с помощью атрибута <code>src</code>, второй пользовательский блок загружает сообщения локализации, которые определены только в этом однофайловом компоненте. Все они будут объединены в качестве сообщений локализации компонента.</p> <p>Несколько пользовательских блоков полезны, когда использовать их в качестве модулей.</p> <h2 id=\"локаnьные-стиnи\"><a href=\"#локаnьные-стиnи\" class=\"header-anchor\">#</a> Локальные стили</h2> <p>При использовании <code>vue-i18n</code> с локальными стилями (<code>style scoped</code>) необходимо помнить и использовать <a href=\"https://vue-loader.vuejs.org/ru/guide/scoped-css.html#%D0%BA%D0%BE%D1%80%D0%BD%D0%B5%D0%B2%D0%BE%D0%B9-%D1%8Dn%D0%B5%D0%BC%D0%B5%D0%BD%D1%82-%D0%B4%D0%BE%D1%87%D0%B5%D1%80%D0%BD%D0%B5%D0%B3%D0%BE-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0\" target=\"_blank\" rel=\"noopener noreferrer\">глубокий селектор<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> для стилизации элемента <strong><em>внутри</em></strong> строки перевода. Например:</p> <p><strong>Когда перевод содержит только текст</strong> (работает без глубокого селектора)</p> <div class=\"language-vue extra-class\"><pre class=\"language-vue\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n  {\n    &quot;en&quot;: {\n      &quot;hello&quot;: &quot;hello world!&quot;\n    },\n    &quot;ru&quot;: {\n      &quot;hello&quot;: &quot;Привет мир!&quot;\n    }\n  }\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>template</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>parent<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>Сообщение: {{ $t('hello') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>template</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token comment\">&lt;!-- Будет работать --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>style</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token style\"><span class=\"token language-css\">\n  <span class=\"token selector\">.parent p</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token property\">color</span><span class=\"token punctuation\">:</span> #42b883<span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>style</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p><strong>Когда перевод содержит HTML-элемент</strong> (необходимо использовать глубокий селектор)</p> <div class=\"language-vue extra-class\"><pre class=\"language-vue\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n  {\n    &quot;en&quot;: {\n      &quot;hello&quot;: &quot;hello<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span><span class=\"token punctuation\">&gt;</span></span>world!<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>&quot;\n    },\n    &quot;ru&quot;: {\n      &quot;hello&quot;: &quot;привет <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span><span class=\"token punctuation\">&gt;</span></span>мир!<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>&quot;\n    }\n  }\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>template</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>parent<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">v-html</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>$t('hello')<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>template</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token comment\">&lt;!-- НЕ БУДЕТ РАБОТАТЬ! --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>style</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token style\"><span class=\"token language-css\">\n  <span class=\"token selector\">.parent p</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token property\">color</span><span class=\"token punctuation\">:</span> #42b883<span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token selector\">.parent p span</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token property\">color</span><span class=\"token punctuation\">:</span> red<span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>style</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token comment\">&lt;!-- Будет работать --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>style</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token style\"><span class=\"token language-css\">\n  <span class=\"token selector\">.parent p</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token property\">color</span><span class=\"token punctuation\">:</span> #42b883<span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token selector\">.parent p &gt;&gt;&gt; span</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token property\">color</span><span class=\"token punctuation\">:</span> red<span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>style</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"поnьзоватеnьские-бnоки-в-функционаnьном-компоненте\"><a href=\"#поnьзоватеnьские-бnоки-в-функционаnьном-компоненте\" class=\"header-anchor\">#</a> Пользовательские блоки в функциональном компоненте</h2> <p>Если в шаблоне однофайловых компонентов используется функциональный компонент и определены пользовательские блоки <code>i18n</code>, то обратите внимание что невозможно локализовать с помощью сообщений локализации.</p> <p>Например, следующий код не может использовать сообщения локализации из блока <code>i18n</code>.</p> <div class=\"language-vue extra-class\"><pre class=\"language-vue\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n  {\n    &quot;en&quot;: {\n      &quot;hello&quot;: &quot;hello world&quot;\n    },\n    &quot;ru&quot;: {\n      &quot;hello&quot;: &quot;привет мир&quot;\n    }\n  }\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>template</span> <span class=\"token attr-name\">functional</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- Сообщение локализации 'hello' из родительского экземпляра --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ parent.$t('hello') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>template</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/ru/guide/sfc.md\" target=\"_blank\" rel=\"noopener noreferrer\">Изменить эту страницу на GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Последнее обновление: </span> <span class=\"time\">5/7/2020, 3:46:10 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/ru/guide/interpolation.html\" class=\"prev\">\n          Интерполяция компонента\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/ru/guide/hot-reload.html\">\n          Горячая перезагрузка переводов\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/38.7879de31.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/ru/guide/tooling.html",
    "content": "<!DOCTYPE html>\n<html lang=\"ru-RU\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Инструментарий | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n — плагин для интернационализации во Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/39.f7496f35.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/ru/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/tooling.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/tooling.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/tooling.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/tooling.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/tooling.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/tooling.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/ru/introduction.html\" class=\"sidebar-link\">Введение</a></li><li><a href=\"/vue-i18n/ru/started.html\" class=\"sidebar-link\">Начало работы</a></li><li><a href=\"/vue-i18n/ru/installation.html\" class=\"sidebar-link\">Установка</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Руководство</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"sidebar-link\">Формат сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/pluralization.html\" class=\"sidebar-link\">Плюрализация</a></li><li><a href=\"/vue-i18n/ru/guide/datetime.html\" class=\"sidebar-link\">Локализация дат</a></li><li><a href=\"/vue-i18n/ru/guide/number.html\" class=\"sidebar-link\">Локализация чисел</a></li><li><a href=\"/vue-i18n/ru/guide/messages.html\" class=\"sidebar-link\">Синтаксис сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/fallback.html\" class=\"sidebar-link\">Запасная локализация</a></li><li><a href=\"/vue-i18n/ru/guide/component.html\" class=\"sidebar-link\">Локализация на основе компонентов</a></li><li><a href=\"/vue-i18n/ru/guide/directive.html\" class=\"sidebar-link\">Пользовательская директива</a></li><li><a href=\"/vue-i18n/ru/guide/interpolation.html\" class=\"sidebar-link\">Интерполяция компонента</a></li><li><a href=\"/vue-i18n/ru/guide/sfc.html\" class=\"sidebar-link\">Однофайловые компоненты</a></li><li><a href=\"/vue-i18n/ru/guide/hot-reload.html\" class=\"sidebar-link\">Горячая перезагрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/locale.html\" class=\"sidebar-link\">Переключение локализации</a></li><li><a href=\"/vue-i18n/ru/guide/lazy-loading.html\" class=\"sidebar-link\">Ленивая загрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/tooling.html\" class=\"active sidebar-link\">Инструментарий</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/tooling.html#официаnьный-инструментарий\" class=\"sidebar-link\">Официальный инструментарий</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/guide/tooling.html#сторонние-разработки\" class=\"sidebar-link\">Сторонние разработки</a></li></ul></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Устаревшие версии</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/legacy/\" class=\"sidebar-link\">Миграция с версии v5.x</a></li><li><a href=\"/vue-i18n/ru/legacy/v5.html\" class=\"sidebar-link\">Документация для версии v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"инструментарий\"><a href=\"#инструментарий\" class=\"header-anchor\">#</a> Инструментарий</h1> <p>Для поддержки i18n приложений Vue некоторые инструменты предоставляются официально.</p> <p>Также есть инструменты от сторонних разработчиков, которые интегрируются в Vue I18n.</p> <h2 id=\"официаnьный-инструментарий\"><a href=\"#официаnьный-инструментарий\" class=\"header-anchor\">#</a> Официальный инструментарий</h2> <h3 id=\"пnагин-дnя-vue-cli\"><a href=\"#пnагин-дnя-vue-cli\" class=\"header-anchor\">#</a> Плагин для Vue CLI</h3> <p><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\">vue-cli-plugin-i18n<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> — официальный плагин для Vue CLI.</p> <p>С помощью этого плагина можно настроить среду i18n для приложения Vue и поддерживать среду разработки i18n.</p> <h3 id=\"модуnь-дnя-nuxt\"><a href=\"#модуnь-дnя-nuxt\" class=\"header-anchor\">#</a> Модуль для Nuxt</h3> <p><a href=\"https://github.com/nuxt-community/nuxt-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\">nuxt-i18n<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> — соответствующий модуль для Nuxt.js.</p> <h3 id=\"загрузчик-дnя-webpack\"><a href=\"#загрузчик-дnя-webpack\" class=\"header-anchor\">#</a> Загрузчик для Webpack</h3> <p><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\">vue-i18n-loader<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> — официальный загрузчик для webpack.</p> <p>С помощью этого загрузчика можно использовать пользовательские блоки <code>i18n</code> в однофайловых компонентах.</p> <p>Подробнее о пользовательских блоках <code>i18n</code> можно изучить в разделе <a href=\"/vue-i18n/ru/guide/sfc.html\">Однофайловых компонентов</a></p> <h3 id=\"пnагин-дnя-eslint\"><a href=\"#пnагин-дnя-eslint\" class=\"header-anchor\">#</a> Плагин для ESLint</h3> <p><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\">eslint-plugin-vue-i18n<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> — ESLint-плагин для Vue I18n.</p> <p>Позволяет легко интегрировать функции проверки локализацией в ваше приложение Vue.js.</p> <h3 id=\"расширения\"><a href=\"#расширения\" class=\"header-anchor\">#</a> Расширения</h3> <p><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\">vue-i18n-extensions<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> — предоставляет некоторые расширения дляVue I18n.</p> <p>Эти расширения позволяет использовать в рендеринге на стороне сервера (SSR) и улучшить производительность i18n.</p> <h2 id=\"сторонние-разработки\"><a href=\"#сторонние-разработки\" class=\"header-anchor\">#</a> Сторонние разработки</h2> <h3 id=\"babeledit\"><a href=\"#babeledit\" class=\"header-anchor\">#</a> BabelEdit</h3> <p><a href=\"https://www.codeandweb.com/babeledit\" target=\"_blank\" rel=\"noopener noreferrer\">BabelEdit<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> — редактор переводов для веб-приложений.</p> <p>BabelEdit может переводить файлы <code>json</code>, а также умеет работать с пользовательскими блоками <code>i18n</code> однофайловых компонентов.</p> <p>Подробнее про BabelEdit можно узнать <a href=\"https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-vue-app-with-vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\">на странице введения<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>.</p> <h3 id=\"i18n-ally\"><a href=\"#i18n-ally\" class=\"header-anchor\">#</a> i18n Ally</h3> <p><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\">i18n Ally<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> — расширение i18n для VSCode.</p> <p>i18n Ally предоставляет потрясающий DX для разработки с использованием i18n.</p> <p>Подробнее о расширении i18n Ally можно изучить в <a href=\"https://github.com/antfu/i18n-ally/blob/master/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">README<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>.</p></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/ru/guide/tooling.md\" target=\"_blank\" rel=\"noopener noreferrer\">Изменить эту страницу на GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Последнее обновление: </span> <span class=\"time\">5/7/2020, 3:46:10 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/ru/guide/lazy-loading.html\" class=\"prev\">\n          Ленивая загрузка переводов\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/ru/legacy/\">\n          Миграция с версии v5.x\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/39.f7496f35.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/ru/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"ru-RU\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n — плагин для интернационализации во Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/24.dffd1071.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/3.5e63523d.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container no-sidebar\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/ru/\" class=\"home-link router-link-exact-active router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/ru/introduction.html\" class=\"sidebar-link\">Введение</a></li><li><a href=\"/vue-i18n/ru/started.html\" class=\"sidebar-link\">Начало работы</a></li><li><a href=\"/vue-i18n/ru/installation.html\" class=\"sidebar-link\">Установка</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Руководство</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"sidebar-link\">Формат сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/pluralization.html\" class=\"sidebar-link\">Плюрализация</a></li><li><a href=\"/vue-i18n/ru/guide/datetime.html\" class=\"sidebar-link\">Локализация дат</a></li><li><a href=\"/vue-i18n/ru/guide/number.html\" class=\"sidebar-link\">Локализация чисел</a></li><li><a href=\"/vue-i18n/ru/guide/messages.html\" class=\"sidebar-link\">Синтаксис сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/fallback.html\" class=\"sidebar-link\">Запасная локализация</a></li><li><a href=\"/vue-i18n/ru/guide/component.html\" class=\"sidebar-link\">Локализация на основе компонентов</a></li><li><a href=\"/vue-i18n/ru/guide/directive.html\" class=\"sidebar-link\">Пользовательская директива</a></li><li><a href=\"/vue-i18n/ru/guide/interpolation.html\" class=\"sidebar-link\">Интерполяция компонента</a></li><li><a href=\"/vue-i18n/ru/guide/sfc.html\" class=\"sidebar-link\">Однофайловые компоненты</a></li><li><a href=\"/vue-i18n/ru/guide/hot-reload.html\" class=\"sidebar-link\">Горячая перезагрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/locale.html\" class=\"sidebar-link\">Переключение локализации</a></li><li><a href=\"/vue-i18n/ru/guide/lazy-loading.html\" class=\"sidebar-link\">Ленивая загрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/tooling.html\" class=\"sidebar-link\">Инструментарий</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Устаревшие версии</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/legacy/\" class=\"sidebar-link\">Миграция с версии v5.x</a></li><li><a href=\"/vue-i18n/ru/legacy/v5.html\" class=\"sidebar-link\">Документация для версии v5.x</a></li></ul></div></li></ul> </div> <div class=\"home\"><div class=\"hero\"><img src=\"./../vue-i18n-logo.png\" alt=\"hero\"> <h1>Vue I18n</h1> <p class=\"description\">\n      Vue I18n — плагин для интернационализации во Vue.js\n    </p> <p class=\"action\"><a href=\"/vue-i18n/ru/introduction.html\" class=\"nav-link action-button\">Введение →</a></p></div> <!----> <div class=\"content custom\"><div class=\"sponsors\" style=\"text-align:center; padding: 0 0 24px 0;\"><h4>Серебряные спонсоры</h4> <a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\"><img src=\"/vue-i18n/patrons/babeledit.png\"></a></div> <div class=\"github\" style=\"text-align:center; padding: 0 0 24px 0;\"><p class=\"sponsor-button\" data-v-0a314292><span data-v-0a314292><a href=\"https://github.com/sponsors/kazupon\" aria-label=\"Sponsor @kazupon on GitHub\" data-icon=\"octicon-heart\" data-size=\"large\">\n    Sponsor on GitHub\n  </a></span></p></div> <div class=\"patreon\" style=\"padding: 0 0 24px 0;\"><p style=\"text-align: center;\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\"><img src=\"https://c5.patreon.com/external/logo/become_a_patron_button.png\" alt=\"Become a Patreon\"></a></p></div> <div class=\"features\"><div class=\"feature\"><h2>Простой</h2> <p>Позволяет легко добавить интернационализацию в приложение с помощью простого API</p></div> <div class=\"feature\"><h2>Функциональный</h2> <p>В дополнение к переводам, поддерживает плюрализацию, локализацию для чисел, дат ... и т.д.</p></div> <div class=\"feature\"><h2>Ориентированный на компоненты</h2> <p>Можно управлять сообщениями локализации в однофайловых компонентах</p></div></div></div> <div class=\"footer\">\n    MIT Licensed | Copyright © 2020 kazuya kawaguchi\n  </div></div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/24.dffd1071.js\" defer></script><script src=\"/vue-i18n/assets/js/3.5e63523d.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/ru/installation.html",
    "content": "<!DOCTYPE html>\n<html lang=\"ru-RU\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Установка | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n — плагин для интернационализации во Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/ru/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/installation.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/installation.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/installation.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/installation.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/installation.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/installation.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/ru/introduction.html\" class=\"sidebar-link\">Введение</a></li><li><a href=\"/vue-i18n/ru/started.html\" class=\"sidebar-link\">Начало работы</a></li><li><a href=\"/vue-i18n/ru/installation.html\" class=\"active sidebar-link\">Установка</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/installation.html#примечание-совместимости\" class=\"sidebar-link\">Примечание совместимости</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/installation.html#загрузка-файnа-cdn\" class=\"sidebar-link\">Загрузка файла / CDN</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/installation.html#npm\" class=\"sidebar-link\">NPM</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/installation.html#yarn\" class=\"sidebar-link\">Yarn</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/installation.html#vue-cli-3-x\" class=\"sidebar-link\">Vue CLI 3.x</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/installation.html#dev-сборка\" class=\"sidebar-link\">Dev-сборка</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/installation.html#отnичия-разnичных-сборок\" class=\"sidebar-link\">Отличия различных сборок</a></li></ul></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Руководство</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"sidebar-link\">Формат сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/pluralization.html\" class=\"sidebar-link\">Плюрализация</a></li><li><a href=\"/vue-i18n/ru/guide/datetime.html\" class=\"sidebar-link\">Локализация дат</a></li><li><a href=\"/vue-i18n/ru/guide/number.html\" class=\"sidebar-link\">Локализация чисел</a></li><li><a href=\"/vue-i18n/ru/guide/messages.html\" class=\"sidebar-link\">Синтаксис сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/fallback.html\" class=\"sidebar-link\">Запасная локализация</a></li><li><a href=\"/vue-i18n/ru/guide/component.html\" class=\"sidebar-link\">Локализация на основе компонентов</a></li><li><a href=\"/vue-i18n/ru/guide/directive.html\" class=\"sidebar-link\">Пользовательская директива</a></li><li><a href=\"/vue-i18n/ru/guide/interpolation.html\" class=\"sidebar-link\">Интерполяция компонента</a></li><li><a href=\"/vue-i18n/ru/guide/sfc.html\" class=\"sidebar-link\">Однофайловые компоненты</a></li><li><a href=\"/vue-i18n/ru/guide/hot-reload.html\" class=\"sidebar-link\">Горячая перезагрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/locale.html\" class=\"sidebar-link\">Переключение локализации</a></li><li><a href=\"/vue-i18n/ru/guide/lazy-loading.html\" class=\"sidebar-link\">Ленивая загрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/tooling.html\" class=\"sidebar-link\">Инструментарий</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Устаревшие версии</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/legacy/\" class=\"sidebar-link\">Миграция с версии v5.x</a></li><li><a href=\"/vue-i18n/ru/legacy/v5.html\" class=\"sidebar-link\">Документация для версии v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"установка\"><a href=\"#установка\" class=\"header-anchor\">#</a> Установка</h1> <h2 id=\"примечание-совместимости\"><a href=\"#примечание-совместимости\" class=\"header-anchor\">#</a> Примечание совместимости</h2> <ul><li>Vue.js версии <code>2.0.0+</code></li></ul> <h2 id=\"загрузка-файnа-cdn\"><a href=\"#загрузка-файnа-cdn\" class=\"header-anchor\">#</a> Загрузка файла / CDN</h2> <p><a href=\"https://unpkg.com/vue-i18n/dist/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\">https://unpkg.com/vue-i18n/dist/vue-i18n<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></p> <p>Сервис <a href=\"https://unpkg.com\" target=\"_blank\" rel=\"noopener noreferrer\">unpkg.com<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> предоставляет CDN-ссылки на основе NPM-пакетов. Ссылка выше будет всегда указывать на последнюю версию на NPM. Можно использовать конкретную версию или тег с помощью URL следующего вида <a href=\"https://unpkg.com/vue-i18n@8.17.3/dist/vue-i18n.js\" target=\"_blank\" rel=\"noopener noreferrer\">https://unpkg.com/vue-i18n@8.17.3/dist/vue-i18n.js<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></p> <p>При подключении vue-i18n после Vue плагин установит себя автоматически:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>https://unpkg.com/vue/dist/vue.js<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>https://unpkg.com/vue-i18n/dist/vue-i18n.js<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"npm\"><a href=\"#npm\" class=\"header-anchor\">#</a> NPM</h2> <div class=\"language-bash extra-class\"><pre class=\"language-bash\"><code><span class=\"token function\">npm</span> <span class=\"token function\">install</span> vue-i18n\n</code></pre></div><h2 id=\"yarn\"><a href=\"#yarn\" class=\"header-anchor\">#</a> Yarn</h2> <div class=\"language-bash extra-class\"><pre class=\"language-bash\"><code><span class=\"token function\">yarn</span> <span class=\"token function\">add</span> vue-i18n\n</code></pre></div><p>При использовании системы модулей нужно явно устанавливать <code>vue-i18n</code> через <code>Vue.use()</code>:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">import</span> Vue <span class=\"token keyword\">from</span> <span class=\"token string\">'vue'</span>\n<span class=\"token keyword\">import</span> VueI18n <span class=\"token keyword\">from</span> <span class=\"token string\">'vue-i18n'</span>\n\nVue<span class=\"token punctuation\">.</span><span class=\"token function\">use</span><span class=\"token punctuation\">(</span>VueI18n<span class=\"token punctuation\">)</span>\n</code></pre></div><p>Подобного не требуется делать при подключении через глобальный тег <code>&lt;script&gt;</code>.</p> <h2 id=\"vue-cli-3-x\"><a href=\"#vue-cli-3-x\" class=\"header-anchor\">#</a> Vue CLI 3.x</h2> <div class=\"language-bash extra-class\"><pre class=\"language-bash\"><code>vue <span class=\"token function\">add</span> i18n\n</code></pre></div><p>Предварительно требуется установить Vue CLI 3.x, его можно установить следующей командой:</p> <div class=\"language-bash extra-class\"><pre class=\"language-bash\"><code><span class=\"token function\">npm</span> <span class=\"token function\">install</span> @vue/cli -g\n</code></pre></div><h2 id=\"dev-сборка\"><a href=\"#dev-сборка\" class=\"header-anchor\">#</a> Dev-сборка</h2> <p>При необходимости использовать последнюю dev-сборку нужно склонировать репозиторий с GitHub и выполнить сборку <code>vue-i18n</code> самостоятельно.</p> <div class=\"language-bash extra-class\"><pre class=\"language-bash\"><code><span class=\"token function\">git</span> clone https://github.com/kazupon/vue-i18n.git node_modules/vue-i18n\n<span class=\"token builtin class-name\">cd</span> node_modules/vue-i18n\n<span class=\"token function\">npm</span> <span class=\"token function\">install</span> <span class=\"token comment\"># или `yarn`</span>\n<span class=\"token function\">npm</span> run build  <span class=\"token comment\"># или `yarn run build`</span>\n</code></pre></div><h2 id=\"отnичия-разnичных-сборок\"><a href=\"#отnичия-разnичных-сборок\" class=\"header-anchor\">#</a> Отличия различных сборок</h2> <p><a href=\"https://cdn.jsdelivr.net/npm/vue-i18n/dist/\" target=\"_blank\" rel=\"noopener noreferrer\">Внутри каталога dist / NPM-пакета<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> можно обнаружить несколько различных сборок VueI18n. Вот следующие отличия между ними:</p> <ul><li>UMD: <code>vue-i18n.js</code></li> <li>CommonJS: <code>vue-i18n.common.js</code></li> <li>ES Module для систем сборки: <code>vue-i18n.esm.js</code></li> <li>ES Module для браузеров: <code>vue-i18n.esm.browser.js</code></li></ul> <h3 id=\"термины\"><a href=\"#термины\" class=\"header-anchor\">#</a> Термины</h3> <ul><li><p><strong><a href=\"https://github.com/umdjs/umd\" target=\"_blank\" rel=\"noopener noreferrer\">UMD<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></strong>: UMD-сборки можно использовать непосредственно в браузере через тег <code>&lt;script&gt;</code>. Файл по умолчанию с Unpkg CDN <a href=\"https://unpkg.com/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\">https://unpkg.com/vue-i18n<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> указывает на UMD-сборку (<code>vue-i18n.js</code>).</p></li> <li><p><strong><a href=\"http://wiki.commonjs.org/wiki/Modules/1.1\" target=\"_blank\" rel=\"noopener noreferrer\">CommonJS<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></strong>: CommonJS сборки предназначены для использования со старыми системами сборки, такими как <a href=\"http://browserify.org/\" target=\"_blank\" rel=\"noopener noreferrer\">browserify<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> или <a href=\"https://webpack.github.io\" target=\"_blank\" rel=\"noopener noreferrer\">webpack 1<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>. Файлом по умолчанию для этих систем сборки (<code>pkg.main</code>) будет сборка CommonJS (<code>vue-i18n.common.js</code>).</p></li> <li><p><strong><a href=\"http://exploringjs.com/es6/ch_modules.html\" target=\"_blank\" rel=\"noopener noreferrer\">ES Module<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></strong>: VueI18n, начиная с версии 8.11, предоставляет две сборки ES-модулей (ESM):</p> <ul><li>ESM для систем сборки: предназначен для использования с современными системами сборки, такими как <a href=\"https://webpack.js.org\" target=\"_blank\" rel=\"noopener noreferrer\">webpack 2<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> или <a href=\"https://rollupjs.org/\" target=\"_blank\" rel=\"noopener noreferrer\">Rollup<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>. Формат ESM разработан для возможности статического анализа, чтобы системы сборки могли применять &quot;tree-shaking&quot; и удалять неиспользуемый код из финального приложения. Файлом по умолчанию для этих систем сборки (<code>pkg.module</code>) будет ES-сборка (<code>vue-i18n.esm.js</code>).</li> <li>ESM для браузеров (только для 8.11+, <code>vue-i18n.esm.browser.js</code>): предназначен для импорта напрямую в современных браузерах через тег <code>&lt;script type=&quot;module&quot;&gt;</code>.</li></ul></li></ul></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/ru/installation.md\" target=\"_blank\" rel=\"noopener noreferrer\">Изменить эту страницу на GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Последнее обновление: </span> <span class=\"time\">5/7/2020, 3:46:10 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/ru/started.html\" class=\"prev\">\n          Начало работы\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/ru/guide/formatting.html\">\n          Формат сообщений локализации\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/40.b5b5dc72.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/ru/introduction.html",
    "content": "<!DOCTYPE html>\n<html lang=\"ru-RU\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Введение | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n — плагин для интернационализации во Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/41.638a9c02.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/ru/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/introduction.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/introduction.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/introduction.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/introduction.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/introduction.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/introduction.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/ru/introduction.html\" class=\"active sidebar-link\">Введение</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/introduction.html#спонсоры\" class=\"sidebar-link\">Спонсоры</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/introduction.html#поддержите-на-patreon\" class=\"sidebar-link\">Поддержите на Patreon</a></li></ul></li><li><a href=\"/vue-i18n/ru/started.html\" class=\"sidebar-link\">Начало работы</a></li><li><a href=\"/vue-i18n/ru/installation.html\" class=\"sidebar-link\">Установка</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Руководство</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"sidebar-link\">Формат сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/pluralization.html\" class=\"sidebar-link\">Плюрализация</a></li><li><a href=\"/vue-i18n/ru/guide/datetime.html\" class=\"sidebar-link\">Локализация дат</a></li><li><a href=\"/vue-i18n/ru/guide/number.html\" class=\"sidebar-link\">Локализация чисел</a></li><li><a href=\"/vue-i18n/ru/guide/messages.html\" class=\"sidebar-link\">Синтаксис сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/fallback.html\" class=\"sidebar-link\">Запасная локализация</a></li><li><a href=\"/vue-i18n/ru/guide/component.html\" class=\"sidebar-link\">Локализация на основе компонентов</a></li><li><a href=\"/vue-i18n/ru/guide/directive.html\" class=\"sidebar-link\">Пользовательская директива</a></li><li><a href=\"/vue-i18n/ru/guide/interpolation.html\" class=\"sidebar-link\">Интерполяция компонента</a></li><li><a href=\"/vue-i18n/ru/guide/sfc.html\" class=\"sidebar-link\">Однофайловые компоненты</a></li><li><a href=\"/vue-i18n/ru/guide/hot-reload.html\" class=\"sidebar-link\">Горячая перезагрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/locale.html\" class=\"sidebar-link\">Переключение локализации</a></li><li><a href=\"/vue-i18n/ru/guide/lazy-loading.html\" class=\"sidebar-link\">Ленивая загрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/tooling.html\" class=\"sidebar-link\">Инструментарий</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Устаревшие версии</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/legacy/\" class=\"sidebar-link\">Миграция с версии v5.x</a></li><li><a href=\"/vue-i18n/ru/legacy/v5.html\" class=\"sidebar-link\">Документация для версии v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"введение\"><a href=\"#введение\" class=\"header-anchor\">#</a> Введение</h1> <div class=\"warning custom-block\"><p class=\"custom-block-title\">Предупреждение</p> <p>⚠️ Документация для Vue I18n v6.0 или более поздних версий. Если используете и ищете документацию для версии v5.x, обратитесь к разделу <a href=\"/vue-i18n/ru/legacy/\">устаревшей версии</a>.</p></div> <p>Vue I18n — плагин для интернационализации во Vue.js. Он легко интегрирует дополнительные возможности по локализации приложения Vue.js.</p> <p>Изучение лучше начинать с раздела <a href=\"/vue-i18n/ru/started.html\">Начало работы</a></p> <h2 id=\"спонсоры\"><a href=\"#спонсоры\" class=\"header-anchor\">#</a> Спонсоры</h2> <h3 id=\"серебряные\"><a href=\"#серебряные\" class=\"header-anchor\">#</a> Серебряные</h3> <p style=\"text-align: center;\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\"><img src=\"/vue-i18n/patrons/babeledit.png\"></a></p> <h2 id=\"поддержите-на-patreon\"><a href=\"#поддержите-на-patreon\" class=\"header-anchor\">#</a> Поддержите на Patreon</h2> <p>Ваша компания для создания потрясающих приложений использует vue-i18n или vue-cli-plugin-i18n? Присоединяйтесь к другим патронам или становитесь спонсором, чтобы увидеть свой логотип в документации! Поддержка на Patreon позволяет автору меньше работать и больше заниматься развитием свободным опенсорсом, таким как vue-i18n! Спасибо!</p> <p style=\"text-align: center;\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\"><img src=\"https://c5.patreon.com/external/logo/become_a_patron_button.png\" alt=\"Become a Patreon\"></a></p></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/ru/introduction.md\" target=\"_blank\" rel=\"noopener noreferrer\">Изменить эту страницу на GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Последнее обновление: </span> <span class=\"time\">5/7/2020, 3:46:10 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><!----> <span class=\"next\"><a href=\"/vue-i18n/ru/started.html\">\n          Начало работы\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/41.638a9c02.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/ru/legacy/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"ru-RU\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Миграция с версии v5.x | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n — плагин для интернационализации во Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/42.222a2780.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/ru/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/legacy/\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/legacy/\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/legacy/\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/legacy/\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/legacy/\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/legacy/\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/ru/introduction.html\" class=\"sidebar-link\">Введение</a></li><li><a href=\"/vue-i18n/ru/started.html\" class=\"sidebar-link\">Начало работы</a></li><li><a href=\"/vue-i18n/ru/installation.html\" class=\"sidebar-link\">Установка</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Руководство</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"sidebar-link\">Формат сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/pluralization.html\" class=\"sidebar-link\">Плюрализация</a></li><li><a href=\"/vue-i18n/ru/guide/datetime.html\" class=\"sidebar-link\">Локализация дат</a></li><li><a href=\"/vue-i18n/ru/guide/number.html\" class=\"sidebar-link\">Локализация чисел</a></li><li><a href=\"/vue-i18n/ru/guide/messages.html\" class=\"sidebar-link\">Синтаксис сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/fallback.html\" class=\"sidebar-link\">Запасная локализация</a></li><li><a href=\"/vue-i18n/ru/guide/component.html\" class=\"sidebar-link\">Локализация на основе компонентов</a></li><li><a href=\"/vue-i18n/ru/guide/directive.html\" class=\"sidebar-link\">Пользовательская директива</a></li><li><a href=\"/vue-i18n/ru/guide/interpolation.html\" class=\"sidebar-link\">Интерполяция компонента</a></li><li><a href=\"/vue-i18n/ru/guide/sfc.html\" class=\"sidebar-link\">Однофайловые компоненты</a></li><li><a href=\"/vue-i18n/ru/guide/hot-reload.html\" class=\"sidebar-link\">Горячая перезагрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/locale.html\" class=\"sidebar-link\">Переключение локализации</a></li><li><a href=\"/vue-i18n/ru/guide/lazy-loading.html\" class=\"sidebar-link\">Ленивая загрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/tooling.html\" class=\"sidebar-link\">Инструментарий</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Устаревшие версии</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/legacy/\" class=\"active sidebar-link\">Миграция с версии v5.x</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/legacy/#гnобаnьная-конфигурация\" class=\"sidebar-link\">Глобальная конфигурация</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/legacy/#гnобаnьные-методы\" class=\"sidebar-link\">Глобальные методы</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/legacy/#опции-конструктора\" class=\"sidebar-link\">Опции конструктора</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/legacy/#свойства-экземпnяра\" class=\"sidebar-link\">Свойства экземпляра</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/legacy/#другие-возможности\" class=\"sidebar-link\">Другие возможности</a></li></ul></li><li><a href=\"/vue-i18n/ru/legacy/v5.html\" class=\"sidebar-link\">Документация для версии v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"миграция-с-версии-v5-x\"><a href=\"#миграция-с-версии-v5-x\" class=\"header-anchor\">#</a> Миграция с версии v5.x</h1> <h2 id=\"гnобаnьная-конфигурация\"><a href=\"#гnобаnьная-конфигурация\" class=\"header-anchor\">#</a> Глобальная конфигурация</h2> <h3 id=\"заменён-lang\"><a href=\"#заменён-lang\" class=\"header-anchor\">#</a> Заменён lang</h3> <p>Используйте у конструктора класса <code>VueI18n</code> опцию <code>locale</code> или свойство <code>VueI18n#locale</code>:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">const</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> i18n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// переключение локализации</span>\ni18n<span class=\"token punctuation\">.</span>locale <span class=\"token operator\">=</span> <span class=\"token string\">'ru'</span>\n<span class=\"token comment\">// или</span>\napp<span class=\"token punctuation\">.</span>$i18n<span class=\"token punctuation\">.</span>locale <span class=\"token operator\">=</span> <span class=\"token string\">'ru'</span>\n</code></pre></div><h3 id=\"заменён-fallbacklang\"><a href=\"#заменён-fallbacklang\" class=\"header-anchor\">#</a> Заменён fallbackLang</h3> <p>Используйте у конструктора класса <code>VueI18n</code> опцию <code>fallbackLocale</code> или свойство\n<code>VueI18n#fallbackLocale</code>:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'ru'</span><span class=\"token punctuation\">,</span>\n  fallbackLocale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">const</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> i18n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// изменение запасной локализации</span>\ni18n<span class=\"token punctuation\">.</span>fallbackLocale <span class=\"token operator\">=</span> <span class=\"token string\">'zh'</span>\n<span class=\"token comment\">// или</span>\napp<span class=\"token punctuation\">.</span>$i18n<span class=\"token punctuation\">.</span>fallbackLocale <span class=\"token operator\">=</span> <span class=\"token string\">'zh'</span>\n</code></pre></div><h3 id=\"заменён-missinghandler\"><a href=\"#заменён-missinghandler\" class=\"header-anchor\">#</a> Заменён missingHandler</h3> <p>Используйте у конструктора класса <code>VueI18n</code> опцию <code>missing</code> или свойство <code>VueI18n#missing</code>:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// ...</span>\n  <span class=\"token function-variable function\">missing</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">locale<span class=\"token punctuation\">,</span> key<span class=\"token punctuation\">,</span> vm<span class=\"token punctuation\">,</span> values</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">// обработка отсутствующих переводов</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">const</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> i18n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// изменение обработчика для отсутствующих переводов</span>\ni18n<span class=\"token punctuation\">.</span><span class=\"token function-variable function\">missing</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">locale<span class=\"token punctuation\">,</span> key<span class=\"token punctuation\">,</span> vm<span class=\"token punctuation\">,</span> values</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// обработка отсутствующих переводов</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token comment\">// или</span>\napp<span class=\"token punctuation\">.</span>$i18n<span class=\"token punctuation\">.</span><span class=\"token function-variable function\">missing</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">locale<span class=\"token punctuation\">,</span> key<span class=\"token punctuation\">,</span> vm<span class=\"token punctuation\">,</span> values</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// обработка отсутствующих переводов</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><h3 id=\"заменён-i18nformatter\"><a href=\"#заменён-i18nformatter\" class=\"header-anchor\">#</a> Заменён i18nFormatter</h3> <p>Используйте у конструктора класса <code>VueI18n</code> опцию <code>formatter</code> или свойство <code>VueI18n#formatter</code>:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">class</span> <span class=\"token class-name\">CustomFormatter</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function\">format</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">message<span class=\"token punctuation\">,</span> <span class=\"token operator\">...</span>values</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">// какая-то логика</span>\n    <span class=\"token keyword\">return</span> <span class=\"token string\">'something string'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// ...</span>\n  formatter<span class=\"token operator\">:</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">CustomFormatter</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">const</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> i18n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// изменение пользовательского форматтера</span>\ni18n<span class=\"token punctuation\">.</span>formatter <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function-variable function\">format</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">message<span class=\"token punctuation\">,</span> <span class=\"token operator\">...</span>values</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">// какая-то логика</span>\n    <span class=\"token keyword\">return</span> <span class=\"token string\">'something string'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token comment\">// или</span>\napp<span class=\"token punctuation\">.</span>$i18n<span class=\"token punctuation\">.</span>formatter <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function-variable function\">format</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">message<span class=\"token punctuation\">,</span> <span class=\"token operator\">...</span>values</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">// какая-то логика</span>\n    <span class=\"token keyword\">return</span> <span class=\"token string\">'something string'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><h2 id=\"гnобаnьные-методы\"><a href=\"#гnобаnьные-методы\" class=\"header-anchor\">#</a> Глобальные методы</h2> <h3 id=\"заменён-vue-locale\"><a href=\"#заменён-vue-locale\" class=\"header-anchor\">#</a> Заменён Vue.locale</h3> <p>Используйте у конструктора класса <code>VueI18n</code> опцию <code>messages</code> или методы <code>VueI18n#GetLocaleMessage</code> / <code>VueI18n#setLocaleMessage</code>:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// ...</span>\n  messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      hello<span class=\"token operator\">:</span> <span class=\"token string\">'hello world'</span>\n      <span class=\"token comment\">// ...</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    ru<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      hello<span class=\"token operator\">:</span> <span class=\"token string\">'привет мир'</span>\n      <span class=\"token comment\">// ...</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">const</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> i18n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// получение сообщений локализации</span>\n<span class=\"token keyword\">const</span> en <span class=\"token operator\">=</span> i18n<span class=\"token punctuation\">.</span><span class=\"token function\">getLocaleMessage</span><span class=\"token punctuation\">(</span><span class=\"token string\">'en'</span><span class=\"token punctuation\">)</span>\nen<span class=\"token punctuation\">.</span>greeting <span class=\"token operator\">=</span> <span class=\"token string\">'hi!'</span>\n<span class=\"token comment\">// установка сообщений локализации</span>\ni18n<span class=\"token punctuation\">.</span><span class=\"token function\">setLocaleMessage</span><span class=\"token punctuation\">(</span><span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span> en<span class=\"token punctuation\">)</span>\n<span class=\"token comment\">// или</span>\n<span class=\"token keyword\">const</span> ru <span class=\"token operator\">=</span> app<span class=\"token punctuation\">.</span>$i18n<span class=\"token punctuation\">.</span><span class=\"token function\">getLocaleMessage</span><span class=\"token punctuation\">(</span><span class=\"token string\">'ru'</span><span class=\"token punctuation\">)</span>\nru<span class=\"token punctuation\">.</span>greeting <span class=\"token operator\">=</span> <span class=\"token string\">'Привет!'</span>\napp<span class=\"token punctuation\">.</span>$i18n<span class=\"token punctuation\">.</span><span class=\"token function\">setLocaleMessage</span><span class=\"token punctuation\">(</span><span class=\"token string\">'ru'</span><span class=\"token punctuation\">,</span> ru<span class=\"token punctuation\">)</span>\n</code></pre></div><h3 id=\"заменён-vue-t\"><a href=\"#заменён-vue-t\" class=\"header-anchor\">#</a> Заменён Vue.t</h3> <p>Используйте метод <code>VueI18n#t</code>:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      greeting<span class=\"token operator\">:</span> <span class=\"token string\">'hi {name}'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\ni18n<span class=\"token punctuation\">.</span><span class=\"token function\">t</span><span class=\"token punctuation\">(</span><span class=\"token string\">'greeting'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span> name<span class=\"token operator\">:</span> <span class=\"token string\">'kazupon'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// -&gt; hi kazupon</span>\n</code></pre></div><h3 id=\"заменён-vue-tc\"><a href=\"#заменён-vue-tc\" class=\"header-anchor\">#</a> Заменён Vue.tc</h3> <p>Используйте метод <code>VueI18n#tc</code>:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      apple<span class=\"token operator\">:</span> <span class=\"token string\">'no apples | one apple | {count} apples'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token keyword\">const</span> count <span class=\"token operator\">=</span> <span class=\"token number\">10</span>\ni18n<span class=\"token punctuation\">.</span><span class=\"token function\">tc</span><span class=\"token punctuation\">(</span><span class=\"token string\">'apple'</span><span class=\"token punctuation\">,</span> count<span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span> count <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// -&gt; 10 apples</span>\n</code></pre></div><h3 id=\"заменён-vue-te\"><a href=\"#заменён-vue-te\" class=\"header-anchor\">#</a> Заменён Vue.te</h3> <p>Используйте метод <code>VueI18n#te</code>:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      hello<span class=\"token operator\">:</span> <span class=\"token string\">'hello world'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\ni18n<span class=\"token punctuation\">.</span><span class=\"token function\">te</span><span class=\"token punctuation\">(</span><span class=\"token string\">'hello'</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// -&gt; true</span>\ni18n<span class=\"token punctuation\">.</span><span class=\"token function\">te</span><span class=\"token punctuation\">(</span><span class=\"token string\">'hallo'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'ru'</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// -&gt; false</span>\ni18n<span class=\"token punctuation\">.</span><span class=\"token function\">te</span><span class=\"token punctuation\">(</span><span class=\"token string\">'hello'</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// -&gt; true</span>\n</code></pre></div><h2 id=\"опции-конструктора\"><a href=\"#опции-конструктора\" class=\"header-anchor\">#</a> Опции конструктора</h2> <h3 id=\"заменён-locales\"><a href=\"#заменён-locales\" class=\"header-anchor\">#</a> Заменён locales</h3> <p>Используйте у конструктора класса <code>VueI18n</code> опцию <code>messages</code> или <code>messages</code> из <code>i18n</code> (для компонента):</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      greeting<span class=\"token operator\">:</span> <span class=\"token string\">'hi {name}'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// для компонента</span>\n<span class=\"token keyword\">const</span> Component1 <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  i18n<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        title<span class=\"token operator\">:</span> <span class=\"token string\">'Title1'</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><h2 id=\"свойства-экземпnяра\"><a href=\"#свойства-экземпnяра\" class=\"header-anchor\">#</a> Свойства экземпляра</h2> <h3 id=\"заменён-lang-2\"><a href=\"#заменён-lang-2\" class=\"header-anchor\">#</a> Заменён $lang</h3> <p>Используйте свойство <code>VueI18n#locale</code>:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">const</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> i18n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// переключение локализации</span>\ni18n<span class=\"token punctuation\">.</span>locale <span class=\"token operator\">=</span> <span class=\"token string\">'ru'</span>\n<span class=\"token comment\">// или</span>\napp<span class=\"token punctuation\">.</span>$i18n<span class=\"token punctuation\">.</span>locale <span class=\"token operator\">=</span> <span class=\"token string\">'ru'</span>\n</code></pre></div><h2 id=\"другие-возможности\"><a href=\"#другие-возможности\" class=\"header-anchor\">#</a> Другие возможности</h2> <h3 id=\"динамическая-nокаnизация-удаnена\"><a href=\"#динамическая-nокаnизация-удаnена\" class=\"header-anchor\">#</a> Динамическая локализация удалена</h3> <p>При необходимости динамически устанавливать сообщения локализации потребуется добавить реализацию самостоятельно:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">const</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token punctuation\">,</span>\n  data<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> loading<span class=\"token operator\">:</span> <span class=\"token string\">''</span> <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">loadLocaleMessage</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">locale<span class=\"token punctuation\">,</span> cb</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">return</span> <span class=\"token function\">fetch</span><span class=\"token punctuation\">(</span><span class=\"token string\">'/locales/'</span> <span class=\"token operator\">+</span> locale<span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n    method<span class=\"token operator\">:</span> <span class=\"token string\">'get'</span><span class=\"token punctuation\">,</span>\n    headers<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      Accept<span class=\"token operator\">:</span> <span class=\"token string\">'application/json'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string\">'Content-Type'</span><span class=\"token operator\">:</span> <span class=\"token string\">'application/json'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n    <span class=\"token punctuation\">.</span><span class=\"token function\">then</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">res</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword\">return</span> res<span class=\"token punctuation\">.</span><span class=\"token function\">json</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n    <span class=\"token punctuation\">.</span><span class=\"token function\">then</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">json</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>Object<span class=\"token punctuation\">.</span><span class=\"token function\">keys</span><span class=\"token punctuation\">(</span>json<span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span>length <span class=\"token operator\">===</span> <span class=\"token number\">0</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">return</span> Promise<span class=\"token punctuation\">.</span><span class=\"token function\">reject</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">new</span> <span class=\"token class-name\">Error</span><span class=\"token punctuation\">(</span><span class=\"token string\">'locale empty !!'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">return</span> Promise<span class=\"token punctuation\">.</span><span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span>json<span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n    <span class=\"token punctuation\">.</span><span class=\"token function\">then</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">message</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token function\">cb</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">null</span><span class=\"token punctuation\">,</span> message<span class=\"token punctuation\">)</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n    <span class=\"token punctuation\">.</span><span class=\"token function\">catch</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">error</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token function\">cb</span><span class=\"token punctuation\">(</span>error<span class=\"token punctuation\">)</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\napp<span class=\"token punctuation\">.</span>loading <span class=\"token operator\">=</span> <span class=\"token string\">'loading ...'</span>\n<span class=\"token function\">loadLocaleMessage</span><span class=\"token punctuation\">(</span><span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">err<span class=\"token punctuation\">,</span> message</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>err<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    app<span class=\"token punctuation\">.</span>loading <span class=\"token operator\">=</span> <span class=\"token string\">''</span>\n    console<span class=\"token punctuation\">.</span><span class=\"token function\">error</span><span class=\"token punctuation\">(</span>err<span class=\"token punctuation\">)</span>\n    <span class=\"token keyword\">return</span>\n  <span class=\"token punctuation\">}</span>\n  i18n<span class=\"token punctuation\">.</span><span class=\"token function\">setLocaleMessage</span><span class=\"token punctuation\">(</span><span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span> message<span class=\"token punctuation\">)</span>\n  app<span class=\"token punctuation\">.</span>loading <span class=\"token operator\">=</span> <span class=\"token string\">''</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n</code></pre></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/ru/legacy/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">Изменить эту страницу на GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Последнее обновление: </span> <span class=\"time\">5/7/2020, 3:46:10 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/ru/guide/tooling.html\" class=\"prev\">\n          Инструментарий\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/ru/legacy/v5.html\">\n          Документация для версии v5.x\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/42.222a2780.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/ru/legacy/v5.html",
    "content": "<!DOCTYPE html>\n<html lang=\"ru-RU\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Документация для версии v5.x | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n — плагин для интернационализации во Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/ru/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/legacy/v5.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/legacy/v5.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/legacy/v5.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/legacy/v5.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/legacy/v5.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/legacy/v5.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/ru/introduction.html\" class=\"sidebar-link\">Введение</a></li><li><a href=\"/vue-i18n/ru/started.html\" class=\"sidebar-link\">Начало работы</a></li><li><a href=\"/vue-i18n/ru/installation.html\" class=\"sidebar-link\">Установка</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Руководство</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"sidebar-link\">Формат сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/pluralization.html\" class=\"sidebar-link\">Плюрализация</a></li><li><a href=\"/vue-i18n/ru/guide/datetime.html\" class=\"sidebar-link\">Локализация дат</a></li><li><a href=\"/vue-i18n/ru/guide/number.html\" class=\"sidebar-link\">Локализация чисел</a></li><li><a href=\"/vue-i18n/ru/guide/messages.html\" class=\"sidebar-link\">Синтаксис сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/fallback.html\" class=\"sidebar-link\">Запасная локализация</a></li><li><a href=\"/vue-i18n/ru/guide/component.html\" class=\"sidebar-link\">Локализация на основе компонентов</a></li><li><a href=\"/vue-i18n/ru/guide/directive.html\" class=\"sidebar-link\">Пользовательская директива</a></li><li><a href=\"/vue-i18n/ru/guide/interpolation.html\" class=\"sidebar-link\">Интерполяция компонента</a></li><li><a href=\"/vue-i18n/ru/guide/sfc.html\" class=\"sidebar-link\">Однофайловые компоненты</a></li><li><a href=\"/vue-i18n/ru/guide/hot-reload.html\" class=\"sidebar-link\">Горячая перезагрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/locale.html\" class=\"sidebar-link\">Переключение локализации</a></li><li><a href=\"/vue-i18n/ru/guide/lazy-loading.html\" class=\"sidebar-link\">Ленивая загрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/tooling.html\" class=\"sidebar-link\">Инструментарий</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Устаревшие версии</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/legacy/\" class=\"sidebar-link\">Миграция с версии v5.x</a></li><li><a href=\"/vue-i18n/ru/legacy/v5.html\" class=\"active sidebar-link\">Документация для версии v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"документация-дnя-версии-v5-x\"><a href=\"#документация-дnя-версии-v5-x\" class=\"header-anchor\">#</a> Документация для версии v5.x</h1> <ul><li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/installation.md\" target=\"_blank\" rel=\"noopener noreferrer\">Установка<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li> <li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/started.md\" target=\"_blank\" rel=\"noopener noreferrer\">Начало работы<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li> <li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/formatting.md\" target=\"_blank\" rel=\"noopener noreferrer\">Форматирование<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li> <li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/pluralization.md\" target=\"_blank\" rel=\"noopener noreferrer\">Плюрализация<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li> <li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/syntax.md\" target=\"_blank\" rel=\"noopener noreferrer\">Локализация и синтаксис ключей<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li> <li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/linked.md\" target=\"_blank\" rel=\"noopener noreferrer\">Связанные сообщения<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li> <li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/fallback.md\" target=\"_blank\" rel=\"noopener noreferrer\">Запасная локализация<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li> <li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/component.md\" target=\"_blank\" rel=\"noopener noreferrer\">Локализация в компонентах<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li> <li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/dynamic.md\" target=\"_blank\" rel=\"noopener noreferrer\">Динамическая локализация<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li> <li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/hot-reload.md\" target=\"_blank\" rel=\"noopener noreferrer\">Горячая перезагрузка переводов<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li> <li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/api.md\" target=\"_blank\" rel=\"noopener noreferrer\">Справочник API<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/ru/legacy/v5.md\" target=\"_blank\" rel=\"noopener noreferrer\">Изменить эту страницу на GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Последнее обновление: </span> <span class=\"time\">5/7/2020, 3:46:10 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/ru/legacy/\" class=\"prev router-link-active\">\n          Миграция с версии v5.x\n        </a></span> <!----></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/43.b28cd4fc.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/ru/started.html",
    "content": "<!DOCTYPE html>\n<html lang=\"ru-RU\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Начало работы | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n — плагин для интернационализации во Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/44.67f64685.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/ru/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/started.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/started.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/started.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Документация</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Руководство</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Справочник API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Экосистема</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Оф. инструментарий</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для Vue CLI\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Загрузчик Webpack\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Плагин для ESLint\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Расширения\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>Сторонние разработки</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  История изменений\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Переводы</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/started.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/started.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/started.html\" class=\"nav-link router-link-exact-active router-link-active\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/ru/introduction.html\" class=\"sidebar-link\">Введение</a></li><li><a href=\"/vue-i18n/ru/started.html\" class=\"active sidebar-link\">Начало работы</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/started.html#html\" class=\"sidebar-link\">HTML</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/ru/started.html#javascript\" class=\"sidebar-link\">JavaScript</a></li></ul></li><li><a href=\"/vue-i18n/ru/installation.html\" class=\"sidebar-link\">Установка</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Руководство</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"sidebar-link\">Формат сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/pluralization.html\" class=\"sidebar-link\">Плюрализация</a></li><li><a href=\"/vue-i18n/ru/guide/datetime.html\" class=\"sidebar-link\">Локализация дат</a></li><li><a href=\"/vue-i18n/ru/guide/number.html\" class=\"sidebar-link\">Локализация чисел</a></li><li><a href=\"/vue-i18n/ru/guide/messages.html\" class=\"sidebar-link\">Синтаксис сообщений локализации</a></li><li><a href=\"/vue-i18n/ru/guide/fallback.html\" class=\"sidebar-link\">Запасная локализация</a></li><li><a href=\"/vue-i18n/ru/guide/component.html\" class=\"sidebar-link\">Локализация на основе компонентов</a></li><li><a href=\"/vue-i18n/ru/guide/directive.html\" class=\"sidebar-link\">Пользовательская директива</a></li><li><a href=\"/vue-i18n/ru/guide/interpolation.html\" class=\"sidebar-link\">Интерполяция компонента</a></li><li><a href=\"/vue-i18n/ru/guide/sfc.html\" class=\"sidebar-link\">Однофайловые компоненты</a></li><li><a href=\"/vue-i18n/ru/guide/hot-reload.html\" class=\"sidebar-link\">Горячая перезагрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/locale.html\" class=\"sidebar-link\">Переключение локализации</a></li><li><a href=\"/vue-i18n/ru/guide/lazy-loading.html\" class=\"sidebar-link\">Ленивая загрузка переводов</a></li><li><a href=\"/vue-i18n/ru/guide/tooling.html\" class=\"sidebar-link\">Инструментарий</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Устаревшие версии</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/ru/legacy/\" class=\"sidebar-link\">Миграция с версии v5.x</a></li><li><a href=\"/vue-i18n/ru/legacy/v5.html\" class=\"sidebar-link\">Документация для версии v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"начаnо-работы\"><a href=\"#начаnо-работы\" class=\"header-anchor\">#</a> Начало работы</h1> <div class=\"tip custom-block\"><p class=\"custom-block-title\">ПРИМЕЧАНИЕ</p> <p>В примерах кода этого руководства используется <a href=\"https://github.com/lukehoban/es6features\" target=\"_blank\" rel=\"noopener noreferrer\">ES2015<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>.</p></div> <h2 id=\"html\"><a href=\"#html\" class=\"header-anchor\">#</a> HTML</h2> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>https://unpkg.com/vue/dist/vue.js<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>https://unpkg.com/vue-i18n/dist/vue-i18n.js<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t(&quot;message.hello&quot;) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"javascript\"><a href=\"#javascript\" class=\"header-anchor\">#</a> JavaScript</h2> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token comment\">// При использовании модульной системы (например, через vue-cli)</span>\n<span class=\"token comment\">// нужно импортировать Vue и VueI18n и вызвать Vue.use(VueI18n).</span>\n<span class=\"token comment\">//</span>\n<span class=\"token comment\">// import Vue from 'vue'</span>\n<span class=\"token comment\">// import VueI18n from 'vue-i18n'</span>\n<span class=\"token comment\">//</span>\n<span class=\"token comment\">// Vue.use(VueI18n)</span>\n\n<span class=\"token comment\">// Готовые переводы сообщений локализаций</span>\n<span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      hello<span class=\"token operator\">:</span> <span class=\"token string\">'hello world'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  ru<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      hello<span class=\"token operator\">:</span> <span class=\"token string\">'Привет мир'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token comment\">// Создание экземпляра VueI18n с настройками</span>\n<span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'ru'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// установка локализации по умолчанию</span>\n  messages <span class=\"token comment\">// установка сообщений локализаций</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// Создание экземпляра Vue с опцией `i18n`</span>\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> i18n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// Теперь можно запускать приложение!</span>\n</code></pre></div><p>Результат будет таким:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>#app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>Привет мир<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/ru/started.md\" target=\"_blank\" rel=\"noopener noreferrer\">Изменить эту страницу на GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Последнее обновление: </span> <span class=\"time\">5/7/2020, 3:46:10 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/ru/introduction.html\" class=\"prev\">\n          Введение\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/ru/installation.html\">\n          Установка\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/44.67f64685.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/started.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en-US\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Getting started | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n is internationalization plugin for Vue.js\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/45.550cbef0.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/started.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/started.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/started.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Learn</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">Guide</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Ecosystem</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>Official Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Vue CLI Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint Plugin\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Extensions\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>3rd Party Tooling</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  i18n Ally\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Patreon\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Release Notes\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">Languages</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/started.html\" class=\"nav-link router-link-exact-active router-link-active\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/started.html\" class=\"nav-link\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/started.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/introduction.html\" class=\"sidebar-link\">Introduction</a></li><li><a href=\"/vue-i18n/started.html\" class=\"active sidebar-link\">Getting started</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/started.html#html\" class=\"sidebar-link\">HTML</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/started.html#javascript\" class=\"sidebar-link\">JavaScript</a></li></ul></li><li><a href=\"/vue-i18n/installation.html\" class=\"sidebar-link\">Installation</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/guide/formatting.html\" class=\"sidebar-link\">Formatting</a></li><li><a href=\"/vue-i18n/guide/pluralization.html\" class=\"sidebar-link\">Pluralization</a></li><li><a href=\"/vue-i18n/guide/datetime.html\" class=\"sidebar-link\">DateTime localization</a></li><li><a href=\"/vue-i18n/guide/number.html\" class=\"sidebar-link\">Number localization</a></li><li><a href=\"/vue-i18n/guide/messages.html\" class=\"sidebar-link\">Locale messages syntax</a></li><li><a href=\"/vue-i18n/guide/fallback.html\" class=\"sidebar-link\">Fallback localization</a></li><li><a href=\"/vue-i18n/guide/component.html\" class=\"sidebar-link\">Component based localization</a></li><li><a href=\"/vue-i18n/guide/directive.html\" class=\"sidebar-link\">Custom directive localization</a></li><li><a href=\"/vue-i18n/guide/interpolation.html\" class=\"sidebar-link\">Component interpolation</a></li><li><a href=\"/vue-i18n/guide/sfc.html\" class=\"sidebar-link\">Single file components</a></li><li><a href=\"/vue-i18n/guide/hot-reload.html\" class=\"sidebar-link\">Hot reloading</a></li><li><a href=\"/vue-i18n/guide/locale.html\" class=\"sidebar-link\">Locale changing</a></li><li><a href=\"/vue-i18n/guide/lazy-loading.html\" class=\"sidebar-link\">Lazy loading translations</a></li><li><a href=\"/vue-i18n/guide/tooling.html\" class=\"sidebar-link\">Tooling</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/legacy/\" class=\"sidebar-link\">Migration from v5.x</a></li><li><a href=\"/vue-i18n/legacy/v5.html\" class=\"sidebar-link\">documentation for v5.x</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"getting-started\"><a href=\"#getting-started\" class=\"header-anchor\">#</a> Getting started</h1> <div class=\"tip custom-block\"><p class=\"custom-block-title\">NOTE</p> <p>We will be using <a href=\"https://github.com/lukehoban/es6features\" target=\"_blank\" rel=\"noopener noreferrer\">ES2015<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> in the\ncode samples in the guide.</p></div> <h2 id=\"html\"><a href=\"#html\" class=\"header-anchor\">#</a> HTML</h2> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>https://unpkg.com/vue/dist/vue.js<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>https://unpkg.com/vue-i18n/dist/vue-i18n.js<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t(&quot;message.hello&quot;) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"javascript\"><a href=\"#javascript\" class=\"header-anchor\">#</a> JavaScript</h2> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token comment\">// If using a module system (e.g. via vue-cli), import Vue and VueI18n and then call Vue.use(VueI18n).</span>\n<span class=\"token comment\">// import Vue from 'vue'</span>\n<span class=\"token comment\">// import VueI18n from 'vue-i18n'</span>\n<span class=\"token comment\">//</span>\n<span class=\"token comment\">// Vue.use(VueI18n)</span>\n\n<span class=\"token comment\">// Ready translated locale messages</span>\n<span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      hello<span class=\"token operator\">:</span> <span class=\"token string\">'hello world'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  ja<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      hello<span class=\"token operator\">:</span> <span class=\"token string\">'こんにちは、世界'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token comment\">// Create VueI18n instance with options</span>\n<span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'ja'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// set locale</span>\n  messages<span class=\"token punctuation\">,</span> <span class=\"token comment\">// set locale messages</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n\n<span class=\"token comment\">// Create a Vue instance with `i18n` option</span>\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> i18n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// Now the app has started!</span>\n</code></pre></div><p>Output the following:</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>#app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>こんにちは、世界<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/started.md\" target=\"_blank\" rel=\"noopener noreferrer\">Edit this page on GitHub</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">Last Updated: </span> <span class=\"time\">2/5/2019, 3:35:51 PM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/introduction.html\" class=\"prev\">\n          Introduction\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/installation.html\">\n          Installation\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/45.550cbef0.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/zh/api/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>API参考 | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n 是 Vue.js 的国际化插件\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/zh/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link router-link-exact-active router-link-active\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link router-link-exact-active router-link-active\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/api/\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/api/\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><div class=\"sidebar-group first\"><p class=\"sidebar-heading open\"><span>API参考</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/api/#扩展-vue\" class=\"sidebar-link\">扩展 Vue</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/api/#vue-构造函数选项\" class=\"sidebar-link\">Vue 构造函数选项</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/api/#vue-注入方法\" class=\"sidebar-link\">Vue 注入方法</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/api/#注入属性\" class=\"sidebar-link\">注入属性</a></li></ul></li><li><a href=\"/vue-i18n/zh/api/#vuei18n-类\" class=\"sidebar-link\">VueI18n 类</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/api/#静态属性\" class=\"sidebar-link\">静态属性</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/api/#构造函数选项\" class=\"sidebar-link\">构造函数选项</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/api/#properties\" class=\"sidebar-link\">Properties</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/api/#方法\" class=\"sidebar-link\">方法</a></li></ul></li><li><a href=\"/vue-i18n/zh/api/#指令\" class=\"sidebar-link\">指令</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/api/#v-t\" class=\"sidebar-link\">v-t</a></li></ul></li><li><a href=\"/vue-i18n/zh/api/#组件\" class=\"sidebar-link\">组件</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/api/#i18n-函数式组件\" class=\"sidebar-link\">i18n 函数式组件</a></li></ul></li><li><a href=\"/vue-i18n/zh/api/#特殊属性\" class=\"sidebar-link\">特殊属性</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/api/#地区\" class=\"sidebar-link\">地区</a></li></ul></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"api参考\"><a href=\"#api参考\" class=\"header-anchor\">#</a> API参考</h1> <h2 id=\"扩展-vue\"><a href=\"#扩展-vue\" class=\"header-anchor\">#</a> 扩展 Vue</h2> <h3 id=\"vue-构造函数选项\"><a href=\"#vue-构造函数选项\" class=\"header-anchor\">#</a> Vue 构造函数选项</h3> <h4 id=\"i18n\"><a href=\"#i18n\" class=\"header-anchor\">#</a> i18n</h4> <ul><li><strong>类型：</strong><code>I18nOptions</code></li></ul> <p>基于组件的本地化选项</p> <ul><li><strong>请参阅：</strong><code>VueI18n</code> 类构造函数选项</li></ul> <h3 id=\"vue-注入方法\"><a href=\"#vue-注入方法\" class=\"header-anchor\">#</a> Vue 注入方法</h3> <h4 id=\"t\"><a href=\"#t\" class=\"header-anchor\">#</a> $t</h4> <ul><li><p><strong>参数：</strong></p> <ul><li><code>{Path} key</code>：必填</li> <li><code>{Locale} locale</code>：可选</li> <li><code>{Array | Object} values</code>：可选</li></ul></li> <li><p><strong>返回值：</strong><code>TranslateResult</code></p></li></ul> <p>本地化语言环境信息 <code>key</code>，在本地化时组件的语言环境信息优先于全局语言环境信息。如果未指定组件的语言环境信息，就使用全局语言环境信息进行本地化。如果你指定了 <code>locale</code> 参数，则使用 <code>locale</code> 提供的语言环境进行本地化。如果你为列表/格式化的语言环境信息指定了 <code>key</code>，就必须同时指定 <code>values</code>。有关 <code>values</code> 的详细信息，请参阅<a href=\"/vue-i18n/zh/guide/formatting.html\">格式化</a>。</p> <div class=\"danger custom-block\"><p class=\"custom-block-title\">提示</p> <p>注意，你需要在生命周期方法中保证上下文是组件实例 (例如在 <code>data</code> 选项中，<code>const $t = this.$t.bind(this)</code>)。</p></div> <h4 id=\"tc\"><a href=\"#tc\" class=\"header-anchor\">#</a> $tc</h4> <ul><li><p><strong>参数：</strong></p> <ul><li><code>{Path} key</code>：必填</li> <li><code>{number} choice</code>：可选，默认为 1</li> <li><code>{Locale} locale</code>：可选</li> <li><code>{string | Array | Object} values</code>：可选</li></ul></li> <li><p><strong>返回值：</strong><code>TranslateResult</code></p></li></ul> <p>以复数形式将语言环境信息 <code>key</code> 本地化。在本地化时组件的语言环境信息优先于全局语言环境信息。如果未指定组件的语言环境信息，就使用全局语言环境信息进行本地化。如果你指定了 <code>locale</code> 参数，则使用 <code>locale</code> 提供的语言环境进行本地化。如果将 <code>values</code> 指定为字符串，则该字符串会作为语言环境信息进行本地化。如果将 <code>values</code> 指定为 Array 或 Object，则格式必须为 <code>$t</code> 的 <code>values</code>。</p> <div class=\"danger custom-block\"><p class=\"custom-block-title\">提示</p> <p>注意，你需要在生命周期方法中保证上下文是组件实例 (例如在 <code>data</code> 选项中，<code>const $tc = this.$tc.bind(this)</code>)</p></div> <h4 id=\"te\"><a href=\"#te\" class=\"header-anchor\">#</a> $te</h4> <ul><li><p><strong>参数：</strong></p> <ul><li><code>{Path} key</code>：必填</li> <li><code>{Locale} locale</code>：可选</li></ul></li> <li><p><strong>返回值：</strong><code>boolean</code></p></li></ul> <p>检查 key 是否存在。在 Vue 实例中，如果未指定组件语言环境信息，则使用全局语言环境信息。如果指定了 <code>locale</code>，则使用 <code>locale</code> 的语言环境。</p> <div class=\"danger custom-block\"><p class=\"custom-block-title\">提示</p> <p>注意，你需要在生命周期方法中保证上下文是组件实例 (例如在 <code>data</code> 选项中，<code>const $te = this.$te.bind(this)</code>)。</p></div> <h4 id=\"d\"><a href=\"#d\" class=\"header-anchor\">#</a> $d</h4> <blockquote><p>🆕 7.0 新增</p></blockquote> <ul><li><p><strong>参数：</strong></p> <ul><li><code>{number | Date} value</code>：必填</li> <li><code>{Path | Object} key</code>：可选</li> <li><code>{Locale | Object} locale</code>：可选</li></ul></li> <li><p><strong>返回值：</strong><code>DateTimeFormatResult</code></p></li></ul> <p>将日期时间 <code>value</code> 以 <code>key</code> 的格式本地化。日期时间格式 <code>key</code> 需要注册到 <code>VueI18n</code> 类的 <code>dateTimeFormats</code> 选项，并依赖于 <code>VueI18n</code> 构造函数的 <code>locale</code> 选项。如果要指定 <code>locale</code> 参数，它将优先于 <code>VueI18n</code> 构造函数的 <code>locale</code> 选项。</p> <p>如果 <code>dateTimeFormats</code> 选项中不存在日期时间格式的 <code>key</code>，则根据 <code>VueI18n</code> 构造函数的 <code>fallbackLocale</code> 选项回退。</p> <div class=\"danger custom-block\"><p class=\"custom-block-title\">提示</p> <p>注意，你需要在生命周期方法中保证上下文是组件实例 (例如在 <code>data</code> 选项中，<code>const $d = this.$d.bind(this)</code>)。</p></div> <h4 id=\"n\"><a href=\"#n\" class=\"header-anchor\">#</a> $n</h4> <blockquote><p>🆕 7.0 新增</p></blockquote> <ul><li><p><strong>参数：</strong></p> <ul><li><code>{number} value</code>：必填</li> <li><code>{Path | Object} key</code>：可选</li> <li><code>{Locale} locale</code>：可选</li></ul></li> <li><p><strong>返回值：</strong><code>NumberFormatResult</code></p></li></ul> <p>将数字 <code>value</code> 以 <code>key</code> 的格式本地化。数字格式 <code>key</code> 需要注册到 <code>VueI18n</code> 类的 <code>numberFormats</code> 选项，并依赖于 <code>VueI18n</code> 构造函数的 <code>locale</code> 选项。如果要指定 <code>locale</code> 参数，它将优先于 <code>VueI18n</code> 构造函数的 <code>locale</code> 选项。</p> <p>如果 <code>numberFormats</code> 选项中不存在用数字格式 <code>key</code>，则根据 <code>VueI18n</code> 构造函数的 <code>fallbackLocale</code> 选项回退。</p> <p>如果第二个 <code>key</code> 参数指定为对象，则它应具有以下属性：</p> <ul><li><code>key {Path}</code>：可选，数字格式</li> <li><code>locale {Locale}</code>：可选，语言环境</li> <li><code>style {string}</code>：可选，数字格式选项</li> <li><code>currency {string}</code>：可选，数字格式选项</li> <li><code>currencyDisplay {string}</code>：可选，数字格式选项</li> <li><code>useGrouping {string}</code>：可选，数字格式选项</li> <li><code>minimumIntegerDigits {string}</code>：可选，数字格式选项</li> <li><code>minimumFractionDigits {string}</code>：可选，数字格式选项</li> <li><code>maximumFractionDigits {string}</code>：可选，数字格式选项</li> <li><code>minimumSignificantDigits {string}</code>：可选，数字格式选项</li> <li><code>maximumSignificantDigits {string}</code>：可选，数字格式选项</li> <li><code>localeMatcher {string}</code>：可选，数字格式选项</li> <li><code>formatMatcher {string}</code>：可选，数字格式选项</li></ul> <p>任何指定数字的格式选项将优先于 <code>VueI18n</code> 构造函数的 <code>numberFormats</code>。</p> <div class=\"danger custom-block\"><p class=\"custom-block-title\">提示</p> <p>注意，你需要在生命周期方法中保证上下文是组件实例 (例如在 <code>data</code> 选项中，<code>const $n = this.$n.bind(this)</code>)。</p></div> <h3 id=\"注入属性\"><a href=\"#注入属性\" class=\"header-anchor\">#</a> 注入属性</h3> <h4 id=\"i18n-2\"><a href=\"#i18n-2\" class=\"header-anchor\">#</a> $i18n</h4> <ul><li><p><strong>类型：</strong><code>I18n</code></p></li> <li><p><strong>只读</strong></p></li></ul> <p>若已经指定了 <code>VueI18n</code> 实例，则将其返回。</p> <p>如果在组件选项中指定了 <code>i18n</code> 选项，则可以在组件上获得 <code>VueI18n</code> 实例，否则，你将获得 <code>VueI18n</code> 的根实例。</p> <h2 id=\"vuei18n-类\"><a href=\"#vuei18n-类\" class=\"header-anchor\">#</a> <code>VueI18n</code> 类</h2> <p><code>Vuei18n</code> 类实现了 <code>I18n</code> <a href=\"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js\" target=\"_blank\" rel=\"noopener noreferrer\">flowtype 接口<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></p> <h3 id=\"静态属性\"><a href=\"#静态属性\" class=\"header-anchor\">#</a> 静态属性</h3> <h4 id=\"版本\"><a href=\"#版本\" class=\"header-anchor\">#</a> 版本</h4> <ul><li><strong>类型：</strong><code>string</code></li></ul> <p>vue-i18n 版本</p> <h4 id=\"可用性\"><a href=\"#可用性\" class=\"header-anchor\">#</a> 可用性</h4> <blockquote><p>🆕 7.0 新增</p></blockquote> <ul><li><strong>类型：</strong><code>IntlAvailability</code></li></ul> <p>是否提供以下国际化功能：</p> <ul><li><p><code>{boolean} dateTimeFormat</code>：环境敏感的时间格式</p></li> <li><p><code>{boolean} numberFormat</code>：环境敏感的数字格式</p></li></ul> <p>由于使用 ECMAScript Internationalization API (ECMA-402) 实现，上述国际化功能取决于<a href=\"http://kangax.github.io/compat-table/esintl/\" target=\"_blank\" rel=\"noopener noreferrer\">浏览器环境<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>。</p> <h3 id=\"构造函数选项\"><a href=\"#构造函数选项\" class=\"header-anchor\">#</a> 构造函数选项</h3> <p>你可以基于<a href=\"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js\" target=\"_blank\" rel=\"noopener noreferrer\">flowtype 定义<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> 中的 <code>I18nOptions</code> 指定下列构造函数选项</p> <h4 id=\"locale\"><a href=\"#locale\" class=\"header-anchor\">#</a> locale</h4> <ul><li><p><strong>类型：</strong><code>Locale</code></p></li> <li><p><strong>默认值：</strong><code>'en-US'</code></p></li></ul> <p>语言环境。</p> <h4 id=\"fallbacklocale\"><a href=\"#fallbacklocale\" class=\"header-anchor\">#</a> fallbackLocale</h4> <ul><li><p><strong>类型：</strong><code>Locale</code></p></li> <li><p><strong>默认值：</strong><code>'en-US'</code></p></li></ul> <p>预设的语言环境。</p> <h4 id=\"messages\"><a href=\"#messages\" class=\"header-anchor\">#</a> messages</h4> <ul><li><p><strong>类型：</strong><code>LocaleMessages</code></p></li> <li><p><strong>默认值：</strong><code>{}</code></p></li></ul> <p>本地化的语言环境信息。</p> <h4 id=\"datetimeformats\"><a href=\"#datetimeformats\" class=\"header-anchor\">#</a> dateTimeFormats</h4> <blockquote><p>🆕 7.0 新增</p></blockquote> <ul><li><p><strong>类型：</strong><code>DateTimeFormats</code></p></li> <li><p><strong>默认值：</strong><code>{}</code></p></li></ul> <p>本地化的日期时间格式。</p> <ul><li><strong>请参阅：</strong><code>DateTimeFormats</code> 类型的<a href=\"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js\" target=\"_blank\" rel=\"noopener noreferrer\">flowtype 接口<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul> <h4 id=\"numberformats\"><a href=\"#numberformats\" class=\"header-anchor\">#</a> numberFormats</h4> <blockquote><p>🆕 7.0 新增</p></blockquote> <ul><li><p><strong>类型：</strong><code>NumberFormats</code></p></li> <li><p><strong>默认值：</strong><code>{}</code></p></li></ul> <p>本地化的数字格式。</p> <ul><li><strong>请参阅：</strong><code>NumberFormats</code> 类型的<a href=\"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js\" target=\"_blank\" rel=\"noopener noreferrer\">flowtype 接口<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul> <h4 id=\"availablelocales\"><a href=\"#availablelocales\" class=\"header-anchor\">#</a> availableLocales</h4> <blockquote><p>🆕 8.9.0 新增</p></blockquote> <ul><li><p><strong>类型：</strong><code>Locale[]</code></p></li> <li><p><strong>默认值：</strong><code>[]</code></p></li> <li><p><strong>示例：</strong><code>[&quot;en&quot;, &quot;ja&quot;]</code></p></li></ul> <p>以词法顺序排列的 <code>messages</code> 中的可用语言环境列表。</p> <h4 id=\"formatter\"><a href=\"#formatter\" class=\"header-anchor\">#</a> formatter</h4> <ul><li><p><strong>类型：</strong><code>Formatter</code></p></li> <li><p><strong>默认值：</strong> Built in formatter</p></li></ul> <p>使用 <code>Formatter</code> 接口实现的格式化。</p> <h4 id=\"missing\"><a href=\"#missing\" class=\"header-anchor\">#</a> missing</h4> <ul><li><p><strong>类型：</strong><code>MissingHandler</code></p></li> <li><p><strong>默认值：</strong><code>null</code></p></li></ul> <p>缺少本地化时的处理函数。该处理函数在被调用时会使用本地化目标语言环境，本地化路径关键字和 Vue 实例。</p> <p>如果设置了该函数，则本地化信息未定义时不会产生警告。</p> <h4 id=\"fallbackroot\"><a href=\"#fallbackroot\" class=\"header-anchor\">#</a> fallbackRoot</h4> <ul><li><p><strong>类型：</strong><code>Boolean</code></p></li> <li><p><strong>默认值：</strong><code>true</code></p></li></ul> <p>在组件本地化中，当本地化失败时是否回退到根级别 (全局) 本地化。</p> <p>如果为 <code>false</code>，则会发出警告，并返回 key。</p> <h4 id=\"sync\"><a href=\"#sync\" class=\"header-anchor\">#</a> sync</h4> <ul><li><p><strong>类型：</strong><code>Boolean</code></p></li> <li><p><strong>默认值：</strong><code>true</code></p></li></ul> <p>是否将根级别语言环境与组件本地化语言环境同步。</p> <p>如果为 <code>false</code>，则无论根级别语言环境如何，都要为每个组件语言环境进行本地化。</p> <h4 id=\"silenttranslationwarn\"><a href=\"#silenttranslationwarn\" class=\"header-anchor\">#</a> silentTranslationWarn</h4> <blockquote><p>6.1 新增</p></blockquote> <ul><li><p><strong>类型：</strong><code>Boolean</code></p></li> <li><p><strong>默认值：</strong><code>false</code></p></li></ul> <p>是否取消本地化失败时输出的警告。</p> <p>如果为 <code>true</code>，则禁止本地化失败警告。</p> <h4 id=\"silentfallbackwarn\"><a href=\"#silentfallbackwarn\" class=\"header-anchor\">#</a> silentFallbackWarn</h4> <blockquote><p>🆕 8.8 新增</p></blockquote> <ul><li><strong>类型：</strong><code>Boolean</code></li> <li><strong>默认值：</strong><code>false</code></li></ul> <p>是否在回退到 <code>fallbackLocale</code> 或 <code>root</code> 时取消警告。</p> <p>如果为 <code>true</code>，则仅在根本没有可用的转换时生成警告，而不是在回退时。</p> <h4 id=\"preservedirectivecontent\"><a href=\"#preservedirectivecontent\" class=\"header-anchor\">#</a> preserveDirectiveContent</h4> <blockquote><p>8.7 新增</p></blockquote> <ul><li><p><strong>类型：</strong><code>Boolean</code></p></li> <li><p><strong>默认值：</strong><code>false</code></p></li></ul> <p>在指令解除绑定后，<code>v-t</code> 指令的元素是否应该保留 <code>textContent</code>。</p> <h3 id=\"properties\"><a href=\"#properties\" class=\"header-anchor\">#</a> Properties</h3> <h4 id=\"locale-2\"><a href=\"#locale-2\" class=\"header-anchor\">#</a> locale</h4> <ul><li><p><strong>类型：</strong><code>Locale</code></p></li> <li><p><strong>可读/可写</strong></p></li></ul> <p>语言环境。</p> <h4 id=\"fallbacklocale-2\"><a href=\"#fallbacklocale-2\" class=\"header-anchor\">#</a> fallbackLocale</h4> <ul><li><p><strong>类型：</strong><code>Locale</code></p></li> <li><p><strong>可读/可写</strong></p></li></ul> <p>预设的语言环境。</p> <h4 id=\"messages-2\"><a href=\"#messages-2\" class=\"header-anchor\">#</a> messages</h4> <ul><li><p><strong>类型：</strong><code>LocaleMessages</code></p></li> <li><p><strong>只读</strong></p></li></ul> <p>本地化的语言环境信息。</p> <h4 id=\"datetimeformats-2\"><a href=\"#datetimeformats-2\" class=\"header-anchor\">#</a> dateTimeFormats</h4> <blockquote><p>🆕 7.0 新增</p></blockquote> <ul><li><p><strong>类型：</strong><code>DateTimeFormats</code></p></li> <li><p><strong>只读</strong></p></li></ul> <p>本地化的日期时间格式。</p> <h4 id=\"numberformats-2\"><a href=\"#numberformats-2\" class=\"header-anchor\">#</a> numberFormats</h4> <blockquote><p>🆕 7.0 新增</p></blockquote> <ul><li><p><strong>类型：</strong><code>NumberFormats</code></p></li> <li><p><strong>只读</strong></p></li></ul> <p>本地化的数字格式。</p> <h4 id=\"missing-2\"><a href=\"#missing-2\" class=\"header-anchor\">#</a> missing</h4> <ul><li><p><strong>类型：</strong><code>MissingHandler</code></p></li> <li><p><strong>可读/可写</strong></p></li></ul> <p>缺少本地化时的处理函数。</p> <h4 id=\"formatter-2\"><a href=\"#formatter-2\" class=\"header-anchor\">#</a> formatter</h4> <ul><li><p><strong>类型：</strong><code>Formatter</code></p></li> <li><p><strong>可读/可写</strong></p></li></ul> <p>使用 <code>Formatter</code> 接口实现的格式化。</p> <h4 id=\"silenttranslationwarn-2\"><a href=\"#silenttranslationwarn-2\" class=\"header-anchor\">#</a> silentTranslationWarn</h4> <blockquote><p>6.1 新增</p></blockquote> <ul><li><p><strong>类型：</strong><code>boolean</code></p></li> <li><p><strong>可读/可写</strong></p></li></ul> <p>是否取消本地化失败时输出的警告。</p> <h4 id=\"preservedirectivecontent-2\"><a href=\"#preservedirectivecontent-2\" class=\"header-anchor\">#</a> preserveDirectiveContent</h4> <blockquote><p>8.7 新增</p></blockquote> <ul><li><p><strong>类型：</strong><code>boolean</code></p></li> <li><p><strong>可读/可写</strong></p></li></ul> <p>在指令解除绑定后，<code>v-t</code> 指令的元素是否应该保留 <code>textContent</code>。</p> <h3 id=\"方法\"><a href=\"#方法\" class=\"header-anchor\">#</a> 方法</h3> <h4 id=\"getchoiceindex\"><a href=\"#getchoiceindex\" class=\"header-anchor\">#</a> getChoiceIndex</h4> <ul><li><p><strong>参数：</strong></p> <ul><li><code>{number} choice</code></li> <li><code>{number} choicesLength</code></li></ul></li> <li><p><strong>返回值：</strong><code>finalChoice {number}</code></p></li></ul> <p>根据当前的数字和一组给定的选项，获取其复数索引，可以通过原型变更覆盖：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">.</span>prototype<span class=\"token punctuation\">.</span>getChoiceIndex <span class=\"token operator\">=</span> <span class=\"token comment\">/* 自定义实现 */</span>\n</code></pre></div><h4 id=\"getlocalemessage-locale\"><a href=\"#getlocalemessage-locale\" class=\"header-anchor\">#</a> getLocaleMessage( locale )</h4> <ul><li><p><strong>参数：</strong></p> <ul><li><code>{Locale} locale</code></li></ul></li> <li><p><strong>返回值：</strong><code>LocaleMessageObject</code></p></li></ul> <p>获取语言环境的 <code>locale</code> 信息。</p> <h4 id=\"setlocalemessage-locale-message\"><a href=\"#setlocalemessage-locale-message\" class=\"header-anchor\">#</a> setLocaleMessage( locale, message )</h4> <ul><li><p><strong>参数：</strong></p> <ul><li><code>{Locale} locale</code></li> <li><code>{LocaleMessageObject} message</code></li></ul></li></ul> <p>设置语言环境的 <code>locale</code> 信息。</p> <h4 id=\"mergelocalemessage-locale-message\"><a href=\"#mergelocalemessage-locale-message\" class=\"header-anchor\">#</a> mergeLocaleMessage( locale, message )</h4> <blockquote><p>6.1 新增</p></blockquote> <ul><li><p><strong>参数：</strong></p> <ul><li><code>{Locale} locale</code></li> <li><code>{LocaleMessageObject} message</code></li></ul></li></ul> <p>将语言环境信息 <code>locale</code> 合并到已注册的语言环境信息中。</p> <h4 id=\"t-key-locale-values\"><a href=\"#t-key-locale-values\" class=\"header-anchor\">#</a> t( key, [locale], [values] )</h4> <ul><li><p><strong>参数：</strong></p> <ul><li><code>{Path} key</code>：必填</li> <li><code>{Locale} locale</code>：可选</li> <li><code>{Array | Object} values</code>：可选</li></ul></li> <li><p><strong>返回值：</strong>：<code>TranslateResult</code></p></li></ul> <p>这与 <code>$t</code> 方法返回的 <code>Function</code> 相同。更多细节见<a href=\"#t\">$t</a>。</p> <h4 id=\"tc-key-choice-values\"><a href=\"#tc-key-choice-values\" class=\"header-anchor\">#</a> tc( key, [choice], [values] )</h4> <ul><li><p><strong>参数：</strong></p> <ul><li><code>{Path} key</code>：必填</li> <li><code>{number} choice</code>：可选，默认为 1</li> <li><code>{string | Array | Object} values</code>：可选</li></ul></li> <li><p><strong>返回值：</strong><code>TranslateResult</code></p></li></ul> <p>这与 <code>$tc</code> 方法返回的 <code>Function</code> 相同。更多细节见<a href=\"#tc\">$tc</a>。</p> <h4 id=\"te-key-locale\"><a href=\"#te-key-locale\" class=\"header-anchor\">#</a> te( key, [locale] )</h4> <ul><li><p><strong>参数：</strong></p> <ul><li><code>{string} key</code>：必填</li> <li><code>{Locale} locale</code>：可选</li></ul></li> <li><p><strong>返回值：</strong><code>boolean</code></p></li></ul> <p>检查全局语言环境信息中是否存在键名路径。如果指定了 <code>locale</code>，请检查语言环境信息 <code>locale</code>。</p> <h4 id=\"getdatetimeformat-locale\"><a href=\"#getdatetimeformat-locale\" class=\"header-anchor\">#</a> getDateTimeFormat ( locale )</h4> <blockquote><p>🆕 7.0 新增</p></blockquote> <ul><li><p><strong>参数：</strong></p> <ul><li><code>{Locale} locale</code></li></ul></li> <li><p><strong>返回值：</strong><code>DateTimeFormat</code></p></li></ul> <p>获取语言环境的日期时间格式。</p> <h4 id=\"setdatetimeformat-locale-format\"><a href=\"#setdatetimeformat-locale-format\" class=\"header-anchor\">#</a> setDateTimeFormat ( locale, format )</h4> <blockquote><p>🆕 7.0 新增</p></blockquote> <ul><li><p><strong>参数：</strong></p> <ul><li><code>{Locale} locale</code></li> <li><code>{DateTimeFormat} format</code></li></ul></li></ul> <p>设置语言环境的日期时间格式。</p> <h4 id=\"mergedatetimeformat-locale-format\"><a href=\"#mergedatetimeformat-locale-format\" class=\"header-anchor\">#</a> mergeDateTimeFormat ( locale, format )</h4> <blockquote><p>🆕 7.0 新增</p></blockquote> <ul><li><p><strong>参数：</strong></p> <ul><li><code>{Locale} locale</code></li> <li><code>{DateTimeFormat} format</code></li></ul></li></ul> <p>将已注册的日期时间格式与语言环境的日期时间格式合并。</p> <h4 id=\"d-value-key-locale\"><a href=\"#d-value-key-locale\" class=\"header-anchor\">#</a> d( value, [key], [locale] )</h4> <blockquote><p>🆕 7.0 新增</p></blockquote> <ul><li><p><strong>参数：</strong></p> <ul><li><code>{number | Date} value</code>：必填</li> <li><code>{Path | Object} key</code>：可选</li> <li><code>{Locale | Object} locale</code>：可选</li></ul></li> <li><p><strong>返回值：</strong><code>DateTimeFormatResult</code></p></li></ul> <p>这与 Vue 实例方法的 <code>$d</code> 方法相同。更多细节见<a href=\"#d\">$d</a>。</p> <h4 id=\"getnumberformat-locale\"><a href=\"#getnumberformat-locale\" class=\"header-anchor\">#</a> getNumberFormat ( locale )</h4> <blockquote><p>🆕 7.0 新增</p></blockquote> <ul><li><p><strong>参数：</strong></p> <ul><li><code>{Locale} locale</code></li></ul></li> <li><p><strong>返回值：</strong><code>NumberFormat</code></p></li></ul> <p>获取语言环境的数字格式。</p> <h4 id=\"setnumberformat-locale-format\"><a href=\"#setnumberformat-locale-format\" class=\"header-anchor\">#</a> setNumberFormat ( locale, format )</h4> <blockquote><p>🆕 7.0 新增</p></blockquote> <ul><li><p><strong>参数：</strong></p> <ul><li><code>{Locale} locale</code></li> <li><code>{NumberFormat} format</code></li></ul></li></ul> <p>设置语言环境的数字格式。</p> <h4 id=\"mergenumberformat-locale-format\"><a href=\"#mergenumberformat-locale-format\" class=\"header-anchor\">#</a> mergeNumberFormat ( locale, format )</h4> <blockquote><p>🆕 7.0 新增</p></blockquote> <ul><li><p><strong>参数：</strong></p> <ul><li><code>{Locale} locale</code></li> <li><code>{NumberFormat} format</code></li></ul></li></ul> <p>将已注册的数字格式与语言环境的数字格式合并。</p> <h4 id=\"n-value-key-locale\"><a href=\"#n-value-key-locale\" class=\"header-anchor\">#</a> n( value, [key], [locale] )</h4> <blockquote><p>🆕 7.0 新增</p></blockquote> <ul><li><p><strong>参数：</strong></p> <ul><li><code>{number} value</code>：必填</li> <li><code>{Path | Object} key</code>：可选</li> <li><code>{Locale} locale</code>：可选</li></ul></li> <li><p><strong>返回值：</strong><code>NumberFormatResult</code></p></li></ul> <p>这与 Vue 实例方法的 <code>$n</code> 方法相同。更多细节见<a href=\"#n\">$n</a>。</p> <h2 id=\"指令\"><a href=\"#指令\" class=\"header-anchor\">#</a> 指令</h2> <blockquote><p>🆕 7.3 新增</p></blockquote> <h3 id=\"v-t\"><a href=\"#v-t\" class=\"header-anchor\">#</a> v-t</h3> <ul><li><p><strong>预期：</strong><code>string | Object</code></p></li> <li><p><strong>修饰符：</strong></p> <ul><li><code>.preserve</code>：(8.7.0 新增) 当指令解除绑定时，保留元素 <code>textContent</code>。</li></ul></li> <li><p><strong>详细：</strong></p></li></ul> <p>更新使用语言环境信息进行本地化的元素 <code>textContent</code>。你可以使用字符串语法或对象语法。字符串语法可以指定为语言环境信息的关键字路径。如果可以使用对象语法，则需要将以下参数指定为对象键：</p> <pre><code>* `path`：必填，语言环境信息的关键字\n* `locale`：可选，语言环境\n* `args`：可选，用于列表或命名格式\n</code></pre> <div class=\"tip custom-block\"><p class=\"custom-block-title\">注意</p> <p>当 <code>v-t</code> 指令解除绑定时，默认情况下将清除元素 <code>textContent</code>。在<a href=\"https://cn.vuejs.org/v2/guide/transitions.html\" target=\"_blank\" rel=\"noopener noreferrer\">过渡动画<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>内部使用的时候，可能出现不合预期的情况。为了在指令解除绑定之后保留 <code>textContent</code> 数据，可使用 <code>.preserve</code> 修饰符或全局的 <a href=\"#preservedirectivecontent\"><code>preserveDirectiveContent</code> 选项</a>。</p></div> <ul><li><strong>示例：</strong></li></ul> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token comment\">&lt;!-- 字符串语法：字面量 --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">v-t</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span><span class=\"token punctuation\">'</span>foo.bar'<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token comment\">&lt;!-- 字符串语法：通过数据或计算属性绑定 --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">v-t</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>msg<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token comment\">&lt;!-- 对象语法： 字面量 --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">v-t</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>{ path: 'hi', locale: 'ja', args: { name: 'kazupon' } }<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token comment\">&lt;!-- 对象语法： 通过数据或计算属性绑定 --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">v-t</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>{ path: greeting, args: { name: fullName } }<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token comment\">&lt;!-- `preserve` 修饰符 --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">v-t.preserve</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span><span class=\"token punctuation\">'</span>foo.bar'<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><ul><li><strong>请参阅：</strong><a href=\"/vue-i18n/zh/guide/directive.html\">自定义指令本地化</a></li></ul> <h2 id=\"组件\"><a href=\"#组件\" class=\"header-anchor\">#</a> 组件</h2> <h3 id=\"i18n-函数式组件\"><a href=\"#i18n-函数式组件\" class=\"header-anchor\">#</a> i18n 函数式组件</h3> <blockquote><p>🆕 7.0 新增</p></blockquote> <h4 id=\"参数：\"><a href=\"#参数：\" class=\"header-anchor\">#</a> 参数：</h4> <ul><li><code>path {Path}</code>：必填，关于语言环境信息的键名路径</li> <li><code>locale {Locale}</code>：可选，语言环境</li> <li><code>tag {string}</code>：可选，默认值 <code>span</code></li> <li><code>places {Array | Object}</code>：可选 (7.2 新增)</li></ul> <h4 id=\"用法：\"><a href=\"#用法：\" class=\"header-anchor\">#</a> 用法：</h4> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span> <span class=\"token attr-name\">path</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>term<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">tag</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>label<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">for</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>tos<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">:href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>url<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">target</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>_blank<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>{{ $t('tos') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    tos<span class=\"token operator\">:</span> <span class=\"token string\">'Term of Service'</span><span class=\"token punctuation\">,</span>\n    term<span class=\"token operator\">:</span> <span class=\"token string\">'I accept xxx {0}.'</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  ja<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    tos<span class=\"token operator\">:</span> <span class=\"token string\">'利用規約'</span><span class=\"token punctuation\">,</span>\n    term<span class=\"token operator\">:</span> <span class=\"token string\">'私は xxx の{0}に同意します。'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token punctuation\">,</span>\n  data<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    url<span class=\"token operator\">:</span> <span class=\"token string\">'/term'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><h4 id=\"请参阅：\"><a href=\"#请参阅：\" class=\"header-anchor\">#</a> 请参阅：</h4> <p><a href=\"/vue-i18n/zh/guide/interpolation.html\">组件插值</a></p> <h2 id=\"特殊属性\"><a href=\"#特殊属性\" class=\"header-anchor\">#</a> 特殊属性</h2> <h3 id=\"地区\"><a href=\"#地区\" class=\"header-anchor\">#</a> 地区</h3> <blockquote><p>🆕 7.2 新增</p></blockquote> <h4 id=\"预期：-number-string\"><a href=\"#预期：-number-string\" class=\"header-anchor\">#</a> 预期：<code>{number | string}</code></h4> <p>用于组件插槽，指示格式列表的索引值或具名格式的关键字。</p> <p>有关详细用法，请参阅下面链接的指南部分。</p> <h4 id=\"请参阅：-2\"><a href=\"#请参阅：-2\" class=\"header-anchor\">#</a> 请参阅：</h4> <p><a href=\"/vue-i18n/zh/guide/interpolation.html\">组件插值</a></p></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/zh/api/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">在 GitHub 上编辑此页</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">最近一次更新: </span> <span class=\"time\">5/11/2020, 7:03:20 PM</span></div></div> <!----> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/47.d7b6ca42.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/zh/guide/component.html",
    "content": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>基于组件的本地化 | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n 是 Vue.js 的国际化插件\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/48.185bface.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/zh/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/component.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/component.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/component.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/component.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/component.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/component.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/zh/introduction.html\" class=\"sidebar-link\">介绍</a></li><li><a href=\"/vue-i18n/zh/started.html\" class=\"sidebar-link\">开始</a></li><li><a href=\"/vue-i18n/zh/installation.html\" class=\"sidebar-link\">安装</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"sidebar-link\">格式化</a></li><li><a href=\"/vue-i18n/zh/guide/pluralization.html\" class=\"sidebar-link\">复数</a></li><li><a href=\"/vue-i18n/zh/guide/datetime.html\" class=\"sidebar-link\">日期时间本地化</a></li><li><a href=\"/vue-i18n/zh/guide/number.html\" class=\"sidebar-link\">数字本地化</a></li><li><a href=\"/vue-i18n/zh/guide/messages.html\" class=\"sidebar-link\">语言环境信息的语法</a></li><li><a href=\"/vue-i18n/zh/guide/fallback.html\" class=\"sidebar-link\">回退本地化</a></li><li><a href=\"/vue-i18n/zh/guide/component.html\" class=\"active sidebar-link\">基于组件的本地化</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/guide/component.html#函数式组件的翻译\" class=\"sidebar-link\">函数式组件的翻译</a></li></ul></li><li><a href=\"/vue-i18n/zh/guide/directive.html\" class=\"sidebar-link\">自定义指令本地化</a></li><li><a href=\"/vue-i18n/zh/guide/interpolation.html\" class=\"sidebar-link\">组件插值</a></li><li><a href=\"/vue-i18n/zh/guide/sfc.html\" class=\"sidebar-link\">单文件组件</a></li><li><a href=\"/vue-i18n/zh/guide/hot-reload.html\" class=\"sidebar-link\">热重载</a></li><li><a href=\"/vue-i18n/zh/guide/locale.html\" class=\"sidebar-link\">语言环境变更</a></li><li><a href=\"/vue-i18n/zh/guide/lazy-loading.html\" class=\"sidebar-link\">延迟加载翻译</a></li><li><a href=\"/vue-i18n/zh/guide/tooling.html\" class=\"sidebar-link\">工具</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/legacy/\" class=\"sidebar-link\">从 v5.x 迁移</a></li><li><a href=\"/vue-i18n/zh/legacy/v5.html\" class=\"sidebar-link\">v5.x 版本的文档</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"基于组件的本地化\"><a href=\"#基于组件的本地化\" class=\"header-anchor\">#</a> 基于组件的本地化</h1> <p>通常语言环境信息 (例如：<code>locale</code>、<code>messages</code> 等) 会被设置为 <code>VueI18n</code> 实例的构造函数选项，并且该实例会被作为 <code>i18n</code> 选项设置在 Vue 的根实例上。</p> <p>因此你可以全局地在 Vue 的根实例以及任何被组合的组件中使用 <code>$t</code> 或者 <code>$tc</code> 进行翻译。当然面向 Vue 组件的设计，你也可以更方便的分别控制每个组件的语言环境信息。</p> <p>基于组件的本地化示例：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token comment\">// 为 Vue 的根实例设置语言环境信息</span>\n<span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'ja'</span><span class=\"token punctuation\">,</span>\n  messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        hello<span class=\"token operator\">:</span> <span class=\"token string\">'hello world'</span><span class=\"token punctuation\">,</span>\n        greeting<span class=\"token operator\">:</span> <span class=\"token string\">'good morning'</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    ja<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        hello<span class=\"token operator\">:</span> <span class=\"token string\">'こんにちは、世界'</span><span class=\"token punctuation\">,</span>\n        greeting<span class=\"token operator\">:</span> <span class=\"token string\">'おはようございます'</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// 定义组件</span>\n<span class=\"token keyword\">const</span> Component1 <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  template<span class=\"token operator\">:</span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">\n    &lt;div class=&quot;container&quot;&gt;\n     &lt;p&gt;Component1 locale messages: {{ $t(&quot;message.hello&quot;) }}&lt;/p&gt;\n     &lt;p&gt;Fallback global locale messages: {{ $t(&quot;message.greeting&quot;) }}&lt;/p&gt;\n   &lt;/div&gt;</span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">,</span>\n  i18n<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> <span class=\"token comment\">// `i18n` 选项，为组件设置语言环境信息</span>\n    messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> hello<span class=\"token operator\">:</span> <span class=\"token string\">'hello component1'</span> <span class=\"token punctuation\">}</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      ja<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> hello<span class=\"token operator\">:</span> <span class=\"token string\">'こんにちは、component1'</span> <span class=\"token punctuation\">}</span> <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token punctuation\">,</span>\n  components<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    Component1\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>模板：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t(&quot;message.hello&quot;) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>component1</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>component1</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>输出如下：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>こんにちは、世界<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>container<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>Component1 locale messages: こんにちは、component1<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>Fallback global locale messages: おはようございます<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>在上面的例子中，如果组件没有语言环境信息，它将回退到全局定义的本地化信息。组件使用根实例中设置的语言 (在上面的例子中：<code>locale: 'ja'</code>)。</p> <p>注意，在默认情况下，回退到根语言环境会在控制台中生成两个警告：</p> <div class=\"language-console extra-class\"><pre class=\"language-text\"><code>[vue-i18n] Value of key 'message.greeting' is not a string!\n[vue-i18n] Fall back to translate the keypath 'message.greeting' with root locale.\n</code></pre></div><p>为避免以上警告 (同时保留那些完全没有翻译给定关键字的警告) 需初始化 <code>VueI18n</code> 实例时设置 <code>silentFallbackWarn：true</code>。</p> <p>如果你希望在组件语言环境中进行本地化，可以在 <code>i18n</code> 选项中用 <code>sync: false</code> 和 <code>locale</code>。</p> <h2 id=\"函数式组件的翻译\"><a href=\"#函数式组件的翻译\" class=\"header-anchor\">#</a> 函数式组件的翻译</h2> <p>使用函数式组件时，所有数据 (包括 prop、子内容、插槽、父级内容等) 都通过包含属性的 <code>context</code> 传递，并且它无法识别 <code>this</code> 的范围，因此在函数式组件上使用 vue-i18n 时，你必须将 <code>$t</code> 称为 <code>parent.$t</code>，请查看以下示例：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code>...\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span>\n    <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>#<span class=\"token punctuation\">&quot;</span></span>\n    <span class=\"token attr-name\">target</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>_blank<span class=\"token punctuation\">&quot;</span></span>\n    <span class=\"token attr-name\">rel</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>noopener noreferrer<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>img</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span><span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">:alt</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>parent.$t('message.hello')<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n...\n</code></pre></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/zh/guide/component.md\" target=\"_blank\" rel=\"noopener noreferrer\">在 GitHub 上编辑此页</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">最近一次更新: </span> <span class=\"time\">3/27/2019, 11:07:32 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/zh/guide/fallback.html\" class=\"prev\">\n          回退本地化\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/zh/guide/directive.html\">\n          自定义指令本地化\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/48.185bface.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/zh/guide/datetime.html",
    "content": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>日期时间本地化 | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n 是 Vue.js 的国际化插件\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/49.1570bc72.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/zh/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/datetime.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/datetime.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/datetime.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/datetime.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/datetime.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/datetime.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/zh/introduction.html\" class=\"sidebar-link\">介绍</a></li><li><a href=\"/vue-i18n/zh/started.html\" class=\"sidebar-link\">开始</a></li><li><a href=\"/vue-i18n/zh/installation.html\" class=\"sidebar-link\">安装</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"sidebar-link\">格式化</a></li><li><a href=\"/vue-i18n/zh/guide/pluralization.html\" class=\"sidebar-link\">复数</a></li><li><a href=\"/vue-i18n/zh/guide/datetime.html\" class=\"active sidebar-link\">日期时间本地化</a></li><li><a href=\"/vue-i18n/zh/guide/number.html\" class=\"sidebar-link\">数字本地化</a></li><li><a href=\"/vue-i18n/zh/guide/messages.html\" class=\"sidebar-link\">语言环境信息的语法</a></li><li><a href=\"/vue-i18n/zh/guide/fallback.html\" class=\"sidebar-link\">回退本地化</a></li><li><a href=\"/vue-i18n/zh/guide/component.html\" class=\"sidebar-link\">基于组件的本地化</a></li><li><a href=\"/vue-i18n/zh/guide/directive.html\" class=\"sidebar-link\">自定义指令本地化</a></li><li><a href=\"/vue-i18n/zh/guide/interpolation.html\" class=\"sidebar-link\">组件插值</a></li><li><a href=\"/vue-i18n/zh/guide/sfc.html\" class=\"sidebar-link\">单文件组件</a></li><li><a href=\"/vue-i18n/zh/guide/hot-reload.html\" class=\"sidebar-link\">热重载</a></li><li><a href=\"/vue-i18n/zh/guide/locale.html\" class=\"sidebar-link\">语言环境变更</a></li><li><a href=\"/vue-i18n/zh/guide/lazy-loading.html\" class=\"sidebar-link\">延迟加载翻译</a></li><li><a href=\"/vue-i18n/zh/guide/tooling.html\" class=\"sidebar-link\">工具</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/legacy/\" class=\"sidebar-link\">从 v5.x 迁移</a></li><li><a href=\"/vue-i18n/zh/legacy/v5.html\" class=\"sidebar-link\">v5.x 版本的文档</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"日期时间本地化\"><a href=\"#日期时间本地化\" class=\"header-anchor\">#</a> 日期时间本地化</h1> <div class=\"tip custom-block\"><p class=\"custom-block-title\">支持版本</p> <p>🆕 7.0 新增</p></div> <p>你可以使用你定义的格式来本地化日期时间。</p> <p>日期时间格式如下：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> dateTimeFormats <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token string\">'en-US'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    short<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      year<span class=\"token operator\">:</span> <span class=\"token string\">'numeric'</span><span class=\"token punctuation\">,</span> month<span class=\"token operator\">:</span> <span class=\"token string\">'short'</span><span class=\"token punctuation\">,</span> day<span class=\"token operator\">:</span> <span class=\"token string\">'numeric'</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    long<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      year<span class=\"token operator\">:</span> <span class=\"token string\">'numeric'</span><span class=\"token punctuation\">,</span> month<span class=\"token operator\">:</span> <span class=\"token string\">'short'</span><span class=\"token punctuation\">,</span> day<span class=\"token operator\">:</span> <span class=\"token string\">'numeric'</span><span class=\"token punctuation\">,</span>\n      weekday<span class=\"token operator\">:</span> <span class=\"token string\">'short'</span><span class=\"token punctuation\">,</span> hour<span class=\"token operator\">:</span> <span class=\"token string\">'numeric'</span><span class=\"token punctuation\">,</span> minute<span class=\"token operator\">:</span> <span class=\"token string\">'numeric'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token string\">'ja-JP'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    short<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      year<span class=\"token operator\">:</span> <span class=\"token string\">'numeric'</span><span class=\"token punctuation\">,</span> month<span class=\"token operator\">:</span> <span class=\"token string\">'short'</span><span class=\"token punctuation\">,</span> day<span class=\"token operator\">:</span> <span class=\"token string\">'numeric'</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    long<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      year<span class=\"token operator\">:</span> <span class=\"token string\">'numeric'</span><span class=\"token punctuation\">,</span> month<span class=\"token operator\">:</span> <span class=\"token string\">'short'</span><span class=\"token punctuation\">,</span> day<span class=\"token operator\">:</span> <span class=\"token string\">'numeric'</span><span class=\"token punctuation\">,</span>\n      weekday<span class=\"token operator\">:</span> <span class=\"token string\">'short'</span><span class=\"token punctuation\">,</span> hour<span class=\"token operator\">:</span> <span class=\"token string\">'numeric'</span><span class=\"token punctuation\">,</span> minute<span class=\"token operator\">:</span> <span class=\"token string\">'numeric'</span><span class=\"token punctuation\">,</span> hour12<span class=\"token operator\">:</span> <span class=\"token boolean\">true</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>如上，你可以定义具名的 (例如：<code>short</code>、<code>long</code> 等) 日期时间格式，并需要使用 <a href=\"http://www.ecma-international.org/ecma-402/2.0/#sec-intl-datetimeformat-constructor\" target=\"_blank\" rel=\"noopener noreferrer\">ECMA-402 Intl.DateTimeFormat 的选项<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>。</p> <p>之后就像语言环境信息一样，你需要指定 <code>VueI18n</code> 构造函数的 <code>dateTimeFormats</code> 选项：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  dateTimeFormats\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>模板如下：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $d(new Date(), 'short') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $d(new Date(), 'long', 'ja-JP') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>输出如下：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>Apr 19, 2017<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>2017年4月19日(水) 午前2:19<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/zh/guide/datetime.md\" target=\"_blank\" rel=\"noopener noreferrer\">在 GitHub 上编辑此页</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">最近一次更新: </span> <span class=\"time\">3/27/2019, 11:07:32 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/zh/guide/pluralization.html\" class=\"prev\">\n          复数\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/zh/guide/number.html\">\n          数字本地化\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/49.1570bc72.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/zh/guide/directive.html",
    "content": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>自定义指令本地化 | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n 是 Vue.js 的国际化插件\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/50.0e187269.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/zh/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/directive.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/directive.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/directive.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/directive.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/directive.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/directive.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/zh/introduction.html\" class=\"sidebar-link\">介绍</a></li><li><a href=\"/vue-i18n/zh/started.html\" class=\"sidebar-link\">开始</a></li><li><a href=\"/vue-i18n/zh/installation.html\" class=\"sidebar-link\">安装</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"sidebar-link\">格式化</a></li><li><a href=\"/vue-i18n/zh/guide/pluralization.html\" class=\"sidebar-link\">复数</a></li><li><a href=\"/vue-i18n/zh/guide/datetime.html\" class=\"sidebar-link\">日期时间本地化</a></li><li><a href=\"/vue-i18n/zh/guide/number.html\" class=\"sidebar-link\">数字本地化</a></li><li><a href=\"/vue-i18n/zh/guide/messages.html\" class=\"sidebar-link\">语言环境信息的语法</a></li><li><a href=\"/vue-i18n/zh/guide/fallback.html\" class=\"sidebar-link\">回退本地化</a></li><li><a href=\"/vue-i18n/zh/guide/component.html\" class=\"sidebar-link\">基于组件的本地化</a></li><li><a href=\"/vue-i18n/zh/guide/directive.html\" class=\"active sidebar-link\">自定义指令本地化</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/guide/directive.html#字符串语法\" class=\"sidebar-link\">字符串语法</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/guide/directive.html#对象语法\" class=\"sidebar-link\">对象语法</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/guide/directive.html#使用翻译\" class=\"sidebar-link\">使用翻译</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/guide/directive.html#t-vs-v-t\" class=\"sidebar-link\">$t vs v-t</a></li></ul></li><li><a href=\"/vue-i18n/zh/guide/interpolation.html\" class=\"sidebar-link\">组件插值</a></li><li><a href=\"/vue-i18n/zh/guide/sfc.html\" class=\"sidebar-link\">单文件组件</a></li><li><a href=\"/vue-i18n/zh/guide/hot-reload.html\" class=\"sidebar-link\">热重载</a></li><li><a href=\"/vue-i18n/zh/guide/locale.html\" class=\"sidebar-link\">语言环境变更</a></li><li><a href=\"/vue-i18n/zh/guide/lazy-loading.html\" class=\"sidebar-link\">延迟加载翻译</a></li><li><a href=\"/vue-i18n/zh/guide/tooling.html\" class=\"sidebar-link\">工具</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/legacy/\" class=\"sidebar-link\">从 v5.x 迁移</a></li><li><a href=\"/vue-i18n/zh/legacy/v5.html\" class=\"sidebar-link\">v5.x 版本的文档</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"自定义指令本地化\"><a href=\"#自定义指令本地化\" class=\"header-anchor\">#</a> 自定义指令本地化</h1> <div class=\"tip custom-block\"><p class=\"custom-block-title\">支持的版本</p> <p>🆕 7.3 新增</p></div> <p>你不仅可以使用 <code>$t</code> 方法进行翻译，还可以使用 <code>v-t</code> 自定义指令。</p> <h2 id=\"字符串语法\"><a href=\"#字符串语法\" class=\"header-anchor\">#</a> 字符串语法</h2> <p>你可以使用字符串语法传递语言环境信息的键名路径。</p> <p>JavaScript：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token operator\">:</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n    locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n    messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> hello<span class=\"token operator\">:</span> <span class=\"token string\">'hi there!'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      ja<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> hello<span class=\"token operator\">:</span> <span class=\"token string\">'こんにちは！'</span> <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  data<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> path<span class=\"token operator\">:</span> <span class=\"token string\">'hello'</span> <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#string-syntax'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>模板：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>string-syntax<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- 字符串 --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">v-t</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span><span class=\"token punctuation\">'</span>hello'<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- 通过数据进行键名路径绑定 --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">v-t</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>path<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>输出：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>string-syntax<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>hi there!<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>hi there!<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"对象语法\"><a href=\"#对象语法\" class=\"header-anchor\">#</a> 对象语法</h2> <p>你可以使用对象语法。</p> <p>Javascript：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token operator\">:</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n    locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n    messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> hello<span class=\"token operator\">:</span> <span class=\"token string\">'hi {name}!'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      ja<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> hello<span class=\"token operator\">:</span> <span class=\"token string\">'こんにちは、{name}！'</span> <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  computed<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token function\">nickName</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span> <span class=\"token keyword\">return</span> <span class=\"token string\">'kazupon'</span> <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  data<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> path<span class=\"token operator\">:</span> <span class=\"token string\">'hello'</span> <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#object-syntax'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>模板：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>object-syntax<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- 文字 --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">v-t</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>{ path: 'hello', locale: 'ja', args: { name: 'kazupon' } }<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- 通过 `data` 绑定数据 --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">v-t</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>{ path: path, args: { name: nickName } }<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>输出：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>object-syntax<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>こんにちは、kazupon！<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>hi kazupon!<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"使用翻译\"><a href=\"#使用翻译\" class=\"header-anchor\">#</a> 使用翻译</h2> <div class=\"tip custom-block\"><p class=\"custom-block-title\">支持版本</p> <p>🆕 8.7 新增</p></div> <p>当 <code>v-t</code> 指令应用于 <a href=\"https://cn.vuejs.org/v2/api/#transition\" target=\"_blank\" rel=\"noopener noreferrer\"><code>&lt;transition&gt;</code> 组件<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>内的元素时，你可能会注意到过渡动画之后的翻译过的信息会消失。这与 <code>&lt;transition&gt;</code> 组件实现的方式有关——<strong>在过渡开始之前</strong> ，<code>&lt;transition&gt;</code> 组件内消失元素中的所有指令都将被销毁。此行为可能导致内容在短过渡时闪烁，但在长过渡时最明显。</p> <p>为了确保在转换期间指令内容不会被触及，只需将<a href=\"/vue-i18n/zh/api/#v-t\"><code>.preserve</code> 修饰符</a>添加到 <code>v-t</code> 指令定义中。</p> <p>Javascript：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token operator\">:</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n    locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n    messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> preserve<span class=\"token operator\">:</span> <span class=\"token string\">'with preserve'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  data<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> toggle<span class=\"token operator\">:</span> <span class=\"token boolean\">true</span> <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#in-transitions'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>模板：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>in-transitions<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>transition</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>fade<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\">v-if</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>toggle<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">v-t.preserve</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span><span class=\"token punctuation\">'</span>preserve'<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>transition</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>button</span> <span class=\"token attr-name\">@click</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>toggle = !toggle<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>Toggle<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>button</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>也可以在 <code>VueI18n</code> 实例本身设置全局设置，这将对没有修饰符的所有 <code>v-t</code> 指令产生影响。</p> <p>Javascript：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token operator\">:</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n    locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n    messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> preserve<span class=\"token operator\">:</span> <span class=\"token string\">'with preserve'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    preserveDirectiveContent<span class=\"token operator\">:</span> <span class=\"token boolean\">true</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  data<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> toggle<span class=\"token operator\">:</span> <span class=\"token boolean\">true</span> <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#in-transitions'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>模板：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>in-transitions<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>transition</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>fade<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\">v-if</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>toggle<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">v-t</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span><span class=\"token punctuation\">'</span>preserve'<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>transition</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>button</span> <span class=\"token attr-name\">@click</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>toggle = !toggle<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>Toggle<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>button</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>关于上面的例子，请参阅<a href=\"https://github.com/kazupon/vue-i18n/tree/dev/examples/directive\" target=\"_blank\" rel=\"noopener noreferrer\">示例<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></p> <h2 id=\"t-vs-v-t\"><a href=\"#t-vs-v-t\" class=\"header-anchor\">#</a> <code>$t</code> vs <code>v-t</code></h2> <h3 id=\"t\"><a href=\"#t\" class=\"header-anchor\">#</a> <code>$t</code></h3> <p><code>$t</code> 是扩展的 Vue 实例方法， 它有以下优点和缺点：</p> <h4 id=\"优点\"><a href=\"#优点\" class=\"header-anchor\">#</a> 优点</h4> <p>你可以<strong>灵活地</strong>在模板以及 Vue 实例的计算属性和方法中使用 mustash 语法 <code>{{}}</code>。</p> <h4 id=\"缺点\"><a href=\"#缺点\" class=\"header-anchor\">#</a> 缺点</h4> <p><code>$t</code> 在<strong>每次</strong>重新渲染时都会被执行，因此它确实有翻译成本。</p> <h3 id=\"v-t\"><a href=\"#v-t\" class=\"header-anchor\">#</a> <code>v-t</code></h3> <p><code>v-t</code> 是一个自定义指令，它有以下优点和缺点：</p> <h4 id=\"优点-2\"><a href=\"#优点-2\" class=\"header-anchor\">#</a> 优点</h4> <p><code>v-t</code> 比 <code>$t</code> 方法具有<strong>更好的</strong>性能，因为在一次翻译时自定义指令会进行缓存。此外可以使用由 <a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\"><code>vue-i18n-extensions</code><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> 提供的 Vue 编译器模块进行预翻译。</p> <p>因此，可以进行<strong>更多性能优化</strong>。</p> <h4 id=\"缺点-2\"><a href=\"#缺点-2\" class=\"header-anchor\">#</a> 缺点</h4> <p><code>v-t</code> 不能像 <code>$t</code> 一样灵活使用，它更<strong>复杂</strong>。带有 <code>v-t</code> 的翻译内容会被插入到元素的 <code>textContent</code> 中。此外，当你使用服务器渲染时，你需要设置<a href=\"https://github.com/kazupon/vue-i18n-extensions#directive-v-t-custom-directive-for-server-side\" target=\"_blank\" rel=\"noopener noreferrer\">自定义指令<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>到 <code>createRenderer</code> 函数的 <code>directives</code> 选项。</p></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/zh/guide/directive.md\" target=\"_blank\" rel=\"noopener noreferrer\">在 GitHub 上编辑此页</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">最近一次更新: </span> <span class=\"time\">3/27/2019, 11:07:32 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/zh/guide/component.html\" class=\"prev\">\n          基于组件的本地化\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/zh/guide/interpolation.html\">\n          组件插值\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/50.0e187269.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/zh/guide/fallback.html",
    "content": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>回退本地化 | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n 是 Vue.js 的国际化插件\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/zh/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/fallback.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/fallback.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/fallback.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/fallback.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/fallback.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/fallback.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/zh/introduction.html\" class=\"sidebar-link\">介绍</a></li><li><a href=\"/vue-i18n/zh/started.html\" class=\"sidebar-link\">开始</a></li><li><a href=\"/vue-i18n/zh/installation.html\" class=\"sidebar-link\">安装</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"sidebar-link\">格式化</a></li><li><a href=\"/vue-i18n/zh/guide/pluralization.html\" class=\"sidebar-link\">复数</a></li><li><a href=\"/vue-i18n/zh/guide/datetime.html\" class=\"sidebar-link\">日期时间本地化</a></li><li><a href=\"/vue-i18n/zh/guide/number.html\" class=\"sidebar-link\">数字本地化</a></li><li><a href=\"/vue-i18n/zh/guide/messages.html\" class=\"sidebar-link\">语言环境信息的语法</a></li><li><a href=\"/vue-i18n/zh/guide/fallback.html\" class=\"active sidebar-link\">回退本地化</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/guide/fallback.html#回退插值\" class=\"sidebar-link\">回退插值</a></li></ul></li><li><a href=\"/vue-i18n/zh/guide/component.html\" class=\"sidebar-link\">基于组件的本地化</a></li><li><a href=\"/vue-i18n/zh/guide/directive.html\" class=\"sidebar-link\">自定义指令本地化</a></li><li><a href=\"/vue-i18n/zh/guide/interpolation.html\" class=\"sidebar-link\">组件插值</a></li><li><a href=\"/vue-i18n/zh/guide/sfc.html\" class=\"sidebar-link\">单文件组件</a></li><li><a href=\"/vue-i18n/zh/guide/hot-reload.html\" class=\"sidebar-link\">热重载</a></li><li><a href=\"/vue-i18n/zh/guide/locale.html\" class=\"sidebar-link\">语言环境变更</a></li><li><a href=\"/vue-i18n/zh/guide/lazy-loading.html\" class=\"sidebar-link\">延迟加载翻译</a></li><li><a href=\"/vue-i18n/zh/guide/tooling.html\" class=\"sidebar-link\">工具</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/legacy/\" class=\"sidebar-link\">从 v5.x 迁移</a></li><li><a href=\"/vue-i18n/zh/legacy/v5.html\" class=\"sidebar-link\">v5.x 版本的文档</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"回退本地化\"><a href=\"#回退本地化\" class=\"header-anchor\">#</a> 回退本地化</h1> <p>以下语言环境信息的 <code>ja</code> 语言环境中不存在 <code>message</code> 键：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token string\">'hello world'</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  ja<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>当为 VueI18n 构造函数选项指定 <code>fallbackLocale</code> 选项时，<code>message</code> 键使用 <code>en</code> 语言环境进行本地化：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'ja'</span><span class=\"token punctuation\">,</span>\n  fallbackLocale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>模板如下：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('message') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>输出如下：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>hello world<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>注意，默认情况下回退到 <code>fallbackLocale</code> 会产生两个控制台警告：</p> <div class=\"language-console extra-class\"><pre class=\"language-text\"><code>[vue-i18n] Value of key 'message' is not a string!\n[vue-i18n] Fall back to translate the keypath 'message' with 'en' locale.\n</code></pre></div><p>为了避免这些警告 (同时保留那些完全没有翻译给定关键字的警告)，需初始化 <code>VueI18n</code> 实例时设置 <code>silentFallbackWarn：true</code>。</p> <h2 id=\"回退插值\"><a href=\"#回退插值\" class=\"header-anchor\">#</a> 回退插值</h2> <p>由于翻译的键值是字符串，因此也可以作为翻译的值：</p> <div class=\"language-javascript extra-class\"><pre class=\"language-javascript\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  ja<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token string\">'Hello world'</span><span class=\"token operator\">:</span> <span class=\"token string\">'こんにちは、世界'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>这是一种很自然的书写方式，如果在<code>message</code>中找不到相应的键值将回退到原本的语言：</p> <p><em>注意: <code>fallbackRoot</code>的优先级高于<code>formatFallbackMessages</code></em></p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('Hello world') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>为了实现此功能，可以通过设置<code>formatFallbackMessages</code>为<code>true</code>：</p> <div class=\"language-javascript extra-class\"><pre class=\"language-javascript\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  ru<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token string\">'Hello {name}'</span><span class=\"token operator\">:</span> <span class=\"token string\">'Здравствуйте {name}'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'ru'</span><span class=\"token punctuation\">,</span>\n  fallbackLocale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  formatFallbackMessages<span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n  messages\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>当模板<code>template</code>如下时：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('Hello {name}', { name: 'John' }}) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('The weather today is {condition}!', { condition: 'sunny' }) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>将会输出：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>Здравствуйте John<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>The weather today is sunny!<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/zh/guide/fallback.md\" target=\"_blank\" rel=\"noopener noreferrer\">在 GitHub 上编辑此页</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">最近一次更新: </span> <span class=\"time\">2/25/2020, 4:17:34 PM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/zh/guide/messages.html\" class=\"prev\">\n          语言环境信息的语法\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/zh/guide/component.html\">\n          基于组件的本地化\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/51.c993f5c3.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/zh/guide/formatting.html",
    "content": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>格式化 | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n 是 Vue.js 的国际化插件\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/zh/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link router-link-exact-active router-link-active\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link router-link-exact-active router-link-active\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/formatting.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/formatting.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/zh/introduction.html\" class=\"sidebar-link\">介绍</a></li><li><a href=\"/vue-i18n/zh/started.html\" class=\"sidebar-link\">开始</a></li><li><a href=\"/vue-i18n/zh/installation.html\" class=\"sidebar-link\">安装</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"active sidebar-link\">格式化</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/guide/formatting.html#具名格式\" class=\"sidebar-link\">具名格式</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/guide/formatting.html#列表格式\" class=\"sidebar-link\">列表格式</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/guide/formatting.html#html-格式化\" class=\"sidebar-link\">HTML 格式化</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/guide/formatting.html#支持-ruby-on-rails-的-i18n-格式\" class=\"sidebar-link\">支持 ruby on rails 的 i18n 格式</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/guide/formatting.html#自定义格式\" class=\"sidebar-link\">自定义格式</a></li></ul></li><li><a href=\"/vue-i18n/zh/guide/pluralization.html\" class=\"sidebar-link\">复数</a></li><li><a href=\"/vue-i18n/zh/guide/datetime.html\" class=\"sidebar-link\">日期时间本地化</a></li><li><a href=\"/vue-i18n/zh/guide/number.html\" class=\"sidebar-link\">数字本地化</a></li><li><a href=\"/vue-i18n/zh/guide/messages.html\" class=\"sidebar-link\">语言环境信息的语法</a></li><li><a href=\"/vue-i18n/zh/guide/fallback.html\" class=\"sidebar-link\">回退本地化</a></li><li><a href=\"/vue-i18n/zh/guide/component.html\" class=\"sidebar-link\">基于组件的本地化</a></li><li><a href=\"/vue-i18n/zh/guide/directive.html\" class=\"sidebar-link\">自定义指令本地化</a></li><li><a href=\"/vue-i18n/zh/guide/interpolation.html\" class=\"sidebar-link\">组件插值</a></li><li><a href=\"/vue-i18n/zh/guide/sfc.html\" class=\"sidebar-link\">单文件组件</a></li><li><a href=\"/vue-i18n/zh/guide/hot-reload.html\" class=\"sidebar-link\">热重载</a></li><li><a href=\"/vue-i18n/zh/guide/locale.html\" class=\"sidebar-link\">语言环境变更</a></li><li><a href=\"/vue-i18n/zh/guide/lazy-loading.html\" class=\"sidebar-link\">延迟加载翻译</a></li><li><a href=\"/vue-i18n/zh/guide/tooling.html\" class=\"sidebar-link\">工具</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/legacy/\" class=\"sidebar-link\">从 v5.x 迁移</a></li><li><a href=\"/vue-i18n/zh/legacy/v5.html\" class=\"sidebar-link\">v5.x 版本的文档</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"格式化\"><a href=\"#格式化\" class=\"header-anchor\">#</a> 格式化</h1> <h2 id=\"具名格式\"><a href=\"#具名格式\" class=\"header-anchor\">#</a> 具名格式</h2> <p>语言环境信息如下：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      hello<span class=\"token operator\">:</span> <span class=\"token string\">'{msg} world'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>模板如下：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('message.hello', { msg: 'hello' }) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>输出如下：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>hello world<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"列表格式\"><a href=\"#列表格式\" class=\"header-anchor\">#</a> 列表格式</h2> <p>语言环境信息如下：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      hello<span class=\"token operator\">:</span> <span class=\"token string\">'{0} world'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>模板如下：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('message.hello', ['hello']) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>输出如下：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>hello world<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>列表格式也接受类似数组的对象：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('message.hello', {'0': 'hello'}) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>输出如下：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>hello world<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"html-格式化\"><a href=\"#html-格式化\" class=\"header-anchor\">#</a> HTML 格式化</h2> <div class=\"warning custom-block\"><p class=\"custom-block-title\">提示</p> <p>⚠️ 在你的网站上动态插入任意 HTML 可能非常危险，因为它很容易导致 XSS 攻击。仅对可信内容使用 HTML 插值，而不对用户提供的内容使用。</p> <p>我们建议使用<a href=\"/vue-i18n/zh/guide/interpolation.html\">组件插值</a> 功能。</p></div> <p>在某些情况下，你可能希望将翻译呈现为 HTML 信息而不是静态字符串。</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      hello<span class=\"token operator\">:</span> <span class=\"token string\">'hello &lt;br&gt; world'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>模板如下：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">v-html</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>$t('message.hello')<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>输出如下 (取代预先格式化的信息)</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>hello\n<span class=\"token comment\">&lt;!--&lt;br&gt; 存在，但呈现为 html 而不是字符串--&gt;</span>\nworld<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"支持-ruby-on-rails-的-i18n-格式\"><a href=\"#支持-ruby-on-rails-的-i18n-格式\" class=\"header-anchor\">#</a> 支持 ruby on rails 的 i18n 格式</h2> <p>语言环境信息如下：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      hello<span class=\"token operator\">:</span> <span class=\"token string\">'%{msg} world'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>模板如下：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('message.hello', { msg: 'hello' }) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>输出如下：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>hello world<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"自定义格式\"><a href=\"#自定义格式\" class=\"header-anchor\">#</a> 自定义格式</h2> <p>有时，你可能需要使用自定义格式进行翻译 (例如：<a href=\"http://userguide.icu-project.org/formatparse/messages\" target=\"_blank\" rel=\"noopener noreferrer\">ICU 信息语法<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>)。</p> <p>你可以使用实现<a href=\"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js#L41-L43\" target=\"_blank\" rel=\"noopener noreferrer\">格式化接口<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> 的自定义格式化函数来实现。</p> <p>以下使用 ES2015 class 语法的自定义格式化函数：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token comment\">// 实现自定义格式</span>\n<span class=\"token keyword\">class</span> <span class=\"token class-name\">CustomFormatter</span> <span class=\"token punctuation\">{</span>\n     <span class=\"token function\">constructor</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">options</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n       <span class=\"token comment\">// ...</span>\n     <span class=\"token punctuation\">}</span>\n\n     <span class=\"token comment\">//</span>\n     <span class=\"token comment\">// 插值</span>\n     <span class=\"token comment\">//</span>\n     <span class=\"token comment\">// @param {string} 信息</span>\n     <span class=\"token comment\">//   列表或具名格式的字符串。</span>\n     <span class=\"token comment\">//   例如：</span>\n     <span class=\"token comment\">//   - 具名格式：'Hi {name}'</span>\n     <span class=\"token comment\">//   - 列表格式：'Hi {0}'</span>\n     <span class=\"token comment\">//</span>\n     <span class=\"token comment\">// @param {Object | Array} 值</span>\n     <span class=\"token comment\">//   `message` 插值的值</span>\n     <span class=\"token comment\">//   使用 `$t`， `$tc` 和 `i18n` 函数式组件传递值。</span>\n     <span class=\"token comment\">//   e.g.</span>\n     <span class=\"token comment\">//   - $t('hello', { name: 'kazupon' }) -&gt; 传递值：Object `{ name: 'kazupon' }`</span>\n     <span class=\"token comment\">//   - $t('hello', ['kazupon']) -&gt; 传递值：Array `['kazupon']`</span>\n     <span class=\"token comment\">//   - `i18n` 函数式组件 (组件插值)</span>\n     <span class=\"token comment\">//     &lt;i18n path=&quot;hello&quot;&gt;</span>\n     <span class=\"token comment\">//       &lt;p&gt;kazupon&lt;/p&gt;</span>\n     <span class=\"token comment\">//       &lt;p&gt;how are you?&lt;/p&gt;</span>\n     <span class=\"token comment\">//     &lt;/i18n&gt;</span>\n     <span class=\"token comment\">//     -&gt; 传递值：Array (included VNode):</span>\n     <span class=\"token comment\">//        `[VNode{ tag: 'p', text: 'kazupon', ...}, VNode{ tag: 'p', text: 'how are you?', ...}]`</span>\n     <span class=\"token comment\">//</span>\n     <span class=\"token comment\">// @return {Array&lt;any&gt;}</span>\n     <span class=\"token comment\">//   插值，你需要返回以下内容：</span>\n     <span class=\"token comment\">//   - 当使用 `$t` 或 `$tc` 数组中应该是字符串。</span>\n     <span class=\"token comment\">//   - 当使用 `i18n` 函数式组件时 数组中应包含 VNode 对象。</span>\n     <span class=\"token comment\">//</span>\n     <span class=\"token function\">interpolate</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">message<span class=\"token punctuation\">,</span> values</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n       <span class=\"token comment\">// 在这里实现插值逻辑</span>\n       <span class=\"token comment\">// ...</span>\n\n       <span class=\"token comment\">// 返回插值数组</span>\n       <span class=\"token keyword\">return</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'resolved message string'</span><span class=\"token punctuation\">]</span>\n     <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token comment\">// 注册 `formatter` 选项</span>\n<span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en-US'</span><span class=\"token punctuation\">,</span>\n  formatter<span class=\"token operator\">:</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">CustomFormatter</span><span class=\"token punctuation\">(</span><span class=\"token comment\">/* 这里是构造函数选项 */</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token string\">'en-US'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token comment\">// ...</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token comment\">// ...</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// 启动!</span>\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> i18n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>你可以查看<a href=\"https://github.com/kazupon/vue-i18n/tree/dev/examples/formatting/custom\" target=\"_blank\" rel=\"noopener noreferrer\">自定义格式化函数的官方示例<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>。</p></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/zh/guide/formatting.md\" target=\"_blank\" rel=\"noopener noreferrer\">在 GitHub 上编辑此页</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">最近一次更新: </span> <span class=\"time\">7/22/2019, 1:03:00 PM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/zh/installation.html\" class=\"prev\">\n          安装\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/zh/guide/pluralization.html\">\n          复数\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/52.d66b2adb.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/zh/guide/hot-reload.html",
    "content": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>热重载 | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n 是 Vue.js 的国际化插件\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/zh/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/hot-reload.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/hot-reload.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/hot-reload.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/hot-reload.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/hot-reload.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/hot-reload.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/zh/introduction.html\" class=\"sidebar-link\">介绍</a></li><li><a href=\"/vue-i18n/zh/started.html\" class=\"sidebar-link\">开始</a></li><li><a href=\"/vue-i18n/zh/installation.html\" class=\"sidebar-link\">安装</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"sidebar-link\">格式化</a></li><li><a href=\"/vue-i18n/zh/guide/pluralization.html\" class=\"sidebar-link\">复数</a></li><li><a href=\"/vue-i18n/zh/guide/datetime.html\" class=\"sidebar-link\">日期时间本地化</a></li><li><a href=\"/vue-i18n/zh/guide/number.html\" class=\"sidebar-link\">数字本地化</a></li><li><a href=\"/vue-i18n/zh/guide/messages.html\" class=\"sidebar-link\">语言环境信息的语法</a></li><li><a href=\"/vue-i18n/zh/guide/fallback.html\" class=\"sidebar-link\">回退本地化</a></li><li><a href=\"/vue-i18n/zh/guide/component.html\" class=\"sidebar-link\">基于组件的本地化</a></li><li><a href=\"/vue-i18n/zh/guide/directive.html\" class=\"sidebar-link\">自定义指令本地化</a></li><li><a href=\"/vue-i18n/zh/guide/interpolation.html\" class=\"sidebar-link\">组件插值</a></li><li><a href=\"/vue-i18n/zh/guide/sfc.html\" class=\"sidebar-link\">单文件组件</a></li><li><a href=\"/vue-i18n/zh/guide/hot-reload.html\" class=\"active sidebar-link\">热重载</a></li><li><a href=\"/vue-i18n/zh/guide/locale.html\" class=\"sidebar-link\">语言环境变更</a></li><li><a href=\"/vue-i18n/zh/guide/lazy-loading.html\" class=\"sidebar-link\">延迟加载翻译</a></li><li><a href=\"/vue-i18n/zh/guide/tooling.html\" class=\"sidebar-link\">工具</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/legacy/\" class=\"sidebar-link\">从 v5.x 迁移</a></li><li><a href=\"/vue-i18n/zh/legacy/v5.html\" class=\"sidebar-link\">v5.x 版本的文档</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"热重载\"><a href=\"#热重载\" class=\"header-anchor\">#</a> 热重载</h1> <p>你可以监视本地化文件中的更改，并将更改热重载到应用程序中。</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token comment\">// 语言环境信息</span>\n<span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token comment\">// VueI18n 实例</span>\n<span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// 运行程序</span>\n<span class=\"token keyword\">const</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// 热更新</span>\n<span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>module<span class=\"token punctuation\">.</span>hot<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  module<span class=\"token punctuation\">.</span>hot<span class=\"token punctuation\">.</span><span class=\"token function\">accept</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token string\">'./en'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'./ja'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">function</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    i18n<span class=\"token punctuation\">.</span><span class=\"token function\">setLocaleMessage</span><span class=\"token punctuation\">(</span><span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span> <span class=\"token function\">require</span><span class=\"token punctuation\">(</span><span class=\"token string\">'./en'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span>default<span class=\"token punctuation\">)</span>\n    i18n<span class=\"token punctuation\">.</span><span class=\"token function\">setLocaleMessage</span><span class=\"token punctuation\">(</span><span class=\"token string\">'ja'</span><span class=\"token punctuation\">,</span> <span class=\"token function\">require</span><span class=\"token punctuation\">(</span><span class=\"token string\">'./ja'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span>default<span class=\"token punctuation\">)</span>\n    <span class=\"token comment\">// 同样可以通过 $i18n 属性进行热更新</span>\n    <span class=\"token comment\">// app.$i18n.setLocaleMessage('en', require('./en').default)</span>\n    <span class=\"token comment\">// app.$i18n.setLocaleMessage('ja', require('./ja').default)</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/zh/guide/hot-reload.md\" target=\"_blank\" rel=\"noopener noreferrer\">在 GitHub 上编辑此页</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">最近一次更新: </span> <span class=\"time\">5/11/2020, 7:03:20 PM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/zh/guide/sfc.html\" class=\"prev\">\n          单文件组件\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/zh/guide/locale.html\">\n          语言环境变更\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/53.21ae73c5.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/zh/guide/interpolation.html",
    "content": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>组件插值 | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n 是 Vue.js 的国际化插件\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/zh/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/interpolation.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/interpolation.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/interpolation.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/interpolation.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/interpolation.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/interpolation.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/zh/introduction.html\" class=\"sidebar-link\">介绍</a></li><li><a href=\"/vue-i18n/zh/started.html\" class=\"sidebar-link\">开始</a></li><li><a href=\"/vue-i18n/zh/installation.html\" class=\"sidebar-link\">安装</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"sidebar-link\">格式化</a></li><li><a href=\"/vue-i18n/zh/guide/pluralization.html\" class=\"sidebar-link\">复数</a></li><li><a href=\"/vue-i18n/zh/guide/datetime.html\" class=\"sidebar-link\">日期时间本地化</a></li><li><a href=\"/vue-i18n/zh/guide/number.html\" class=\"sidebar-link\">数字本地化</a></li><li><a href=\"/vue-i18n/zh/guide/messages.html\" class=\"sidebar-link\">语言环境信息的语法</a></li><li><a href=\"/vue-i18n/zh/guide/fallback.html\" class=\"sidebar-link\">回退本地化</a></li><li><a href=\"/vue-i18n/zh/guide/component.html\" class=\"sidebar-link\">基于组件的本地化</a></li><li><a href=\"/vue-i18n/zh/guide/directive.html\" class=\"sidebar-link\">自定义指令本地化</a></li><li><a href=\"/vue-i18n/zh/guide/interpolation.html\" class=\"active sidebar-link\">组件插值</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/guide/interpolation.html#基本用法\" class=\"sidebar-link\">基本用法</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/guide/interpolation.html#高级用法\" class=\"sidebar-link\">高级用法</a></li></ul></li><li><a href=\"/vue-i18n/zh/guide/sfc.html\" class=\"sidebar-link\">单文件组件</a></li><li><a href=\"/vue-i18n/zh/guide/hot-reload.html\" class=\"sidebar-link\">热重载</a></li><li><a href=\"/vue-i18n/zh/guide/locale.html\" class=\"sidebar-link\">语言环境变更</a></li><li><a href=\"/vue-i18n/zh/guide/lazy-loading.html\" class=\"sidebar-link\">延迟加载翻译</a></li><li><a href=\"/vue-i18n/zh/guide/tooling.html\" class=\"sidebar-link\">工具</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/legacy/\" class=\"sidebar-link\">从 v5.x 迁移</a></li><li><a href=\"/vue-i18n/zh/legacy/v5.html\" class=\"sidebar-link\">v5.x 版本的文档</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"组件插值\"><a href=\"#组件插值\" class=\"header-anchor\">#</a> 组件插值</h1> <h2 id=\"基本用法\"><a href=\"#基本用法\" class=\"header-anchor\">#</a> 基本用法</h2> <div class=\"tip custom-block\"><p class=\"custom-block-title\">支持版本</p> <p>🆕 7.0 新增</p></div> <p>有时，我们需要使用包含 HTML 标签或组件的语言环境信息进行本地化。例如：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>I accept xxx <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>/term<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>Terms of Service Agreement<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>在上面的信息中，如果你使用 <code>$t</code>，可能你会尝试编写以下语言环境信息：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    term1<span class=\"token operator\">:</span> <span class=\"token string\">'I Accept xxx\\'s'</span><span class=\"token punctuation\">,</span>\n    term2<span class=\"token operator\">:</span> <span class=\"token string\">'Terms of Service Agreement'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>你可能会尝试在以下模板中实现：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('term1') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>/term<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>{{ $t('term2') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>输出：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>I accept xxx <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>/term<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>Terms of Service Agreement<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>这是非常麻烦的，如果在语言环境信息中配置 <code>&lt;a&gt;</code> 标签，则可能由于使用了 <code>v-html=&quot;$t('term')&quot;</code> 进行本地化而存在被 XSS 攻击的可能性。</p> <p>你可以使用 <code>i18n</code> 函数式组件来避免它。例如：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span> <span class=\"token attr-name\">path</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>term<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">tag</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>label<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">for</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>tos<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">:href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>url<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">target</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>_blank<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>{{ $t('tos') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    tos<span class=\"token operator\">:</span> <span class=\"token string\">'Term of Service'</span><span class=\"token punctuation\">,</span>\n    term<span class=\"token operator\">:</span> <span class=\"token string\">'I accept xxx {0}.'</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  ja<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    tos<span class=\"token operator\">:</span> <span class=\"token string\">'利用規約'</span><span class=\"token punctuation\">,</span>\n    term<span class=\"token operator\">:</span> <span class=\"token string\">'私は xxx の{0}に同意します。'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token punctuation\">,</span>\n  data<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    url<span class=\"token operator\">:</span> <span class=\"token string\">'/term'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>输出如下：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>label</span> <span class=\"token attr-name\">for</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>tos<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    I accept xxx <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>/term<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">target</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>_blank<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>Term of Service<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span>.\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>label</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>关于上面的例子，见<a href=\"https://github.com/kazupon/vue-i18n/tree/dev/examples/interpolation\" target=\"_blank\" rel=\"noopener noreferrer\">示例<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></p> <p><code>i18n</code> 函数式组件的子元素用 <code>path</code> 属性的语言环境信息进行插值。在上面的例子中，</p> <div><p><code>&lt;a :href=&quot;url&quot; target=&quot;_blank&quot;&gt;{{ $t('tos') }}&lt;/a&gt;</code></p></div> <p>被插入了语言环境信息 <code>term</code>。</p> <p>在上面的示例中，组件插值遵循<strong>列表格式</strong>。<code>i18n</code> 函数式组件的子项按其出现顺序进行插值。</p> <h2 id=\"高级用法\"><a href=\"#高级用法\" class=\"header-anchor\">#</a> 高级用法</h2> <div class=\"tip custom-block\"><p class=\"custom-block-title\">支持版本</p> <p>🆕 7.2 新增</p></div> <div class=\"warning custom-block\"><p class=\"custom-block-title\">提示</p> <p>⚠️ 在 <code>i18n</code> 组件中，仅包含空格的文本内容将被省略。</p></div> <p>在 <code>place</code> 特性的帮助下支持具名格式。例如：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span> <span class=\"token attr-name\">path</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>info<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">tag</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>p<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\">place</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>limit<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>{{ changeLimit }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">place</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>action<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">:href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>changeUrl<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>{{ $t('change') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    info<span class=\"token operator\">:</span> <span class=\"token string\">'You can {action} until {limit} minutes from departure.'</span><span class=\"token punctuation\">,</span>\n    change<span class=\"token operator\">:</span> <span class=\"token string\">'change your flight'</span><span class=\"token punctuation\">,</span>\n    refund<span class=\"token operator\">:</span> <span class=\"token string\">'refund the ticket'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token punctuation\">,</span>\n  data<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    changeUrl<span class=\"token operator\">:</span> <span class=\"token string\">'/change'</span><span class=\"token punctuation\">,</span>\n    refundUrl<span class=\"token operator\">:</span> <span class=\"token string\">'/refund'</span><span class=\"token punctuation\">,</span>\n    changeLimit<span class=\"token operator\">:</span> <span class=\"token number\">15</span><span class=\"token punctuation\">,</span>\n    refundLimit<span class=\"token operator\">:</span> <span class=\"token number\">30</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>输出：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n    You can <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>/change<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>change your flight<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span> until <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span><span class=\"token punctuation\">&gt;</span></span>15<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span> minutes from departure.\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><div class=\"warning custom-block\"><p class=\"custom-block-title\">提示</p> <p>⚠️ <code>i18n</code> 组件的所有子项都必须设置 <code>place</code> 属性。否则它将回退到列表格式。</p></div> <p>如果你仍想在命名格式中插入文本内容，可以在 <code>i18n</code> 组件上定义 <code>places</code> 属性。例如：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span> <span class=\"token attr-name\">path</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>info<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">tag</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>p<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">:places</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>{ limit: refundLimit }<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">place</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>action<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">:href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>refundUrl<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>{{ $t('refund') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>输出：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n    You can <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>/refund<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>refund your ticket<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">&gt;</span></span> until 30 minutes from departure.\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- ... --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/zh/guide/interpolation.md\" target=\"_blank\" rel=\"noopener noreferrer\">在 GitHub 上编辑此页</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">最近一次更新: </span> <span class=\"time\">3/27/2019, 11:07:32 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/zh/guide/directive.html\" class=\"prev\">\n          自定义指令本地化\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/zh/guide/sfc.html\">\n          单文件组件\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/54.cd4c9ca8.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/zh/guide/lazy-loading.html",
    "content": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>延迟加载翻译 | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n 是 Vue.js 的国际化插件\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/55.caa71074.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/zh/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/lazy-loading.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/lazy-loading.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/lazy-loading.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/lazy-loading.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/lazy-loading.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/lazy-loading.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/zh/introduction.html\" class=\"sidebar-link\">介绍</a></li><li><a href=\"/vue-i18n/zh/started.html\" class=\"sidebar-link\">开始</a></li><li><a href=\"/vue-i18n/zh/installation.html\" class=\"sidebar-link\">安装</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"sidebar-link\">格式化</a></li><li><a href=\"/vue-i18n/zh/guide/pluralization.html\" class=\"sidebar-link\">复数</a></li><li><a href=\"/vue-i18n/zh/guide/datetime.html\" class=\"sidebar-link\">日期时间本地化</a></li><li><a href=\"/vue-i18n/zh/guide/number.html\" class=\"sidebar-link\">数字本地化</a></li><li><a href=\"/vue-i18n/zh/guide/messages.html\" class=\"sidebar-link\">语言环境信息的语法</a></li><li><a href=\"/vue-i18n/zh/guide/fallback.html\" class=\"sidebar-link\">回退本地化</a></li><li><a href=\"/vue-i18n/zh/guide/component.html\" class=\"sidebar-link\">基于组件的本地化</a></li><li><a href=\"/vue-i18n/zh/guide/directive.html\" class=\"sidebar-link\">自定义指令本地化</a></li><li><a href=\"/vue-i18n/zh/guide/interpolation.html\" class=\"sidebar-link\">组件插值</a></li><li><a href=\"/vue-i18n/zh/guide/sfc.html\" class=\"sidebar-link\">单文件组件</a></li><li><a href=\"/vue-i18n/zh/guide/hot-reload.html\" class=\"sidebar-link\">热重载</a></li><li><a href=\"/vue-i18n/zh/guide/locale.html\" class=\"sidebar-link\">语言环境变更</a></li><li><a href=\"/vue-i18n/zh/guide/lazy-loading.html\" class=\"active sidebar-link\">延迟加载翻译</a></li><li><a href=\"/vue-i18n/zh/guide/tooling.html\" class=\"sidebar-link\">工具</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/legacy/\" class=\"sidebar-link\">从 v5.x 迁移</a></li><li><a href=\"/vue-i18n/zh/legacy/v5.html\" class=\"sidebar-link\">v5.x 版本的文档</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"延迟加载翻译\"><a href=\"#延迟加载翻译\" class=\"header-anchor\">#</a> 延迟加载翻译</h1> <p>一次加载所有翻译文件是过度和不必要的。</p> <p>使用 Webpack 时，延迟加载或异步加载转换文件非常简单。</p> <p>让我们假设我们有一个类似于下面的项目目录</p> <div class=\"language- extra-class\"><pre class=\"language-text\"><code>our-cool-project\n-dist\n-src\n--routes\n--store\n--setup\n---i18n-setup.js\n--lang\n---en.js\n---it.js\n</code></pre></div><p><code>lang</code> 文件夹是我们所有翻译文件所在的位置。<code>setup</code> 文件夹是我们的任意设置的文件，如 i18n-setup，全局组件 inits，插件 inits 和其他位置。</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token comment\">//i18n-setup.js</span>\n<span class=\"token keyword\">import</span> Vue <span class=\"token keyword\">from</span> <span class=\"token string\">'vue'</span>\n<span class=\"token keyword\">import</span> VueI18n <span class=\"token keyword\">from</span> <span class=\"token string\">'vue-i18n'</span>\n<span class=\"token keyword\">import</span> messages <span class=\"token keyword\">from</span> <span class=\"token string\">'@/lang/en'</span>\n<span class=\"token keyword\">import</span> axios <span class=\"token keyword\">from</span> <span class=\"token string\">'axios'</span>\n\nVue<span class=\"token punctuation\">.</span><span class=\"token function\">use</span><span class=\"token punctuation\">(</span>VueI18n<span class=\"token punctuation\">)</span>\n\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 设置语言环境</span>\n  fallbackLocale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages <span class=\"token comment\">// 设置语言环境信息</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token keyword\">const</span> loadedLanguages <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'en'</span><span class=\"token punctuation\">]</span> <span class=\"token comment\">// 我们的预装默认语言</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">setI18nLanguage</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">lang</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  i18n<span class=\"token punctuation\">.</span>locale <span class=\"token operator\">=</span> lang\n  axios<span class=\"token punctuation\">.</span>defaults<span class=\"token punctuation\">.</span>headers<span class=\"token punctuation\">.</span>common<span class=\"token punctuation\">[</span><span class=\"token string\">'Accept-Language'</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> lang\n  document<span class=\"token punctuation\">.</span><span class=\"token function\">querySelector</span><span class=\"token punctuation\">(</span><span class=\"token string\">'html'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">setAttribute</span><span class=\"token punctuation\">(</span><span class=\"token string\">'lang'</span><span class=\"token punctuation\">,</span> lang<span class=\"token punctuation\">)</span>\n  <span class=\"token keyword\">return</span> lang\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">function</span> <span class=\"token function\">loadLanguageAsync</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">lang</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>i18n<span class=\"token punctuation\">.</span>locale <span class=\"token operator\">!==</span> lang<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token operator\">!</span>loadedLanguages<span class=\"token punctuation\">.</span><span class=\"token function\">includes</span><span class=\"token punctuation\">(</span>lang<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword\">return</span> <span class=\"token keyword\">import</span><span class=\"token punctuation\">(</span><span class=\"token comment\">/* webpackChunkName: &quot;lang-[request]&quot; */</span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">@/lang/</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>lang<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">then</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">msgs</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n        i18n<span class=\"token punctuation\">.</span><span class=\"token function\">setLocaleMessage</span><span class=\"token punctuation\">(</span>lang<span class=\"token punctuation\">,</span> msgs<span class=\"token punctuation\">.</span>default<span class=\"token punctuation\">)</span>\n        loadedLanguages<span class=\"token punctuation\">.</span><span class=\"token function\">push</span><span class=\"token punctuation\">(</span>lang<span class=\"token punctuation\">)</span>\n        <span class=\"token keyword\">return</span> <span class=\"token function\">setI18nLanguage</span><span class=\"token punctuation\">(</span>lang<span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n    <span class=\"token punctuation\">}</span>\n    <span class=\"token keyword\">return</span> Promise<span class=\"token punctuation\">.</span><span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span><span class=\"token function\">setI18nLanguage</span><span class=\"token punctuation\">(</span>lang<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token keyword\">return</span> Promise<span class=\"token punctuation\">.</span><span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span>lang<span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>简而言之，我们正在创建一个新的 VueI18n 实例。然后我们创建一个 <code>loadedLanguages</code> 数组，它将跟踪我们加载的语言。接下来是 <code>setI18nLanguage</code> 函数，它将实际更改 vueI18n 实例、axios 以及其它需要本地化的地方。</p> <p><code>loadLanguageAsync</code> 是实际用于更改语言的函数。加载新文件是通过import功能完成的，<code>import</code> 功能由 Webpack 慷慨提供，它允许我们动态加载文件，并且因为它使用 promise，我们可以轻松地等待加载完成。</p> <p>你可以在 <a href=\"https://webpack.js.org/guides/code-splitting/#dynamic-imports\" target=\"_blank\" rel=\"noopener noreferrer\">Webpack 文档<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> 中了解有关导入功能的更多信息。</p> <p>使用 <code>loadLanguageAsync</code> 函数很简单。一个常见的用例是在 vue-router beforeEach 钩子里面。</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code>router<span class=\"token punctuation\">.</span><span class=\"token function\">beforeEach</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">to<span class=\"token punctuation\">,</span> <span class=\"token keyword\">from</span><span class=\"token punctuation\">,</span> next</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> lang <span class=\"token operator\">=</span> to<span class=\"token punctuation\">.</span>params<span class=\"token punctuation\">.</span>lang\n  <span class=\"token function\">loadLanguageAsync</span><span class=\"token punctuation\">(</span>lang<span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">then</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token function\">next</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>我们可以通过检查 <code>lang</code> 实际上是否支持来改进这一点，调用 <code>reject</code> 这样我们就可以在 beforeEach 捕获路由转换。</p></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/zh/guide/lazy-loading.md\" target=\"_blank\" rel=\"noopener noreferrer\">在 GitHub 上编辑此页</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">最近一次更新: </span> <span class=\"time\">7/2/2019, 8:38:50 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/zh/guide/locale.html\" class=\"prev\">\n          语言环境变更\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/zh/guide/tooling.html\">\n          工具\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/55.caa71074.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/zh/guide/locale.html",
    "content": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>语言环境变更 | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n 是 Vue.js 的国际化插件\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/zh/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/locale.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/locale.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/locale.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/locale.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/locale.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/locale.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/zh/introduction.html\" class=\"sidebar-link\">介绍</a></li><li><a href=\"/vue-i18n/zh/started.html\" class=\"sidebar-link\">开始</a></li><li><a href=\"/vue-i18n/zh/installation.html\" class=\"sidebar-link\">安装</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"sidebar-link\">格式化</a></li><li><a href=\"/vue-i18n/zh/guide/pluralization.html\" class=\"sidebar-link\">复数</a></li><li><a href=\"/vue-i18n/zh/guide/datetime.html\" class=\"sidebar-link\">日期时间本地化</a></li><li><a href=\"/vue-i18n/zh/guide/number.html\" class=\"sidebar-link\">数字本地化</a></li><li><a href=\"/vue-i18n/zh/guide/messages.html\" class=\"sidebar-link\">语言环境信息的语法</a></li><li><a href=\"/vue-i18n/zh/guide/fallback.html\" class=\"sidebar-link\">回退本地化</a></li><li><a href=\"/vue-i18n/zh/guide/component.html\" class=\"sidebar-link\">基于组件的本地化</a></li><li><a href=\"/vue-i18n/zh/guide/directive.html\" class=\"sidebar-link\">自定义指令本地化</a></li><li><a href=\"/vue-i18n/zh/guide/interpolation.html\" class=\"sidebar-link\">组件插值</a></li><li><a href=\"/vue-i18n/zh/guide/sfc.html\" class=\"sidebar-link\">单文件组件</a></li><li><a href=\"/vue-i18n/zh/guide/hot-reload.html\" class=\"sidebar-link\">热重载</a></li><li><a href=\"/vue-i18n/zh/guide/locale.html\" class=\"active sidebar-link\">语言环境变更</a></li><li><a href=\"/vue-i18n/zh/guide/lazy-loading.html\" class=\"sidebar-link\">延迟加载翻译</a></li><li><a href=\"/vue-i18n/zh/guide/tooling.html\" class=\"sidebar-link\">工具</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/legacy/\" class=\"sidebar-link\">从 v5.x 迁移</a></li><li><a href=\"/vue-i18n/zh/legacy/v5.html\" class=\"sidebar-link\">v5.x 版本的文档</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"语言环境变更\"><a href=\"#语言环境变更\" class=\"header-anchor\">#</a> 语言环境变更</h1> <p>通常，使用 Vue 根实例作为起点，使用 <code>VueI18n</code> 类的 <code>locale</code> 属性作为参考来本地化所有子组件。</p> <p>有时你可能希望动态更改语言环境。在这种情况下，你可以更改 <code>VueI18n</code> 实例的 <code>locale</code> 属性的值。</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'ja'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 设置语言环境</span>\n  <span class=\"token operator\">...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// 创建 Vue 根实例</span>\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token punctuation\">,</span>\n  <span class=\"token operator\">...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// 更改为其它的 locale</span>\ni18n<span class=\"token punctuation\">.</span>locale <span class=\"token operator\">=</span> <span class=\"token string\">'en'</span>\n</code></pre></div><p>每个组件都包含一个引用为 <code>$i18n</code> 属性的 <code>VueI18n</code> 实例，该实例也可用于更改语言环境。</p> <p>示例：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>template</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>locale-changer<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>select</span> <span class=\"token attr-name\">v-model</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>$i18n.locale<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>option</span> <span class=\"token attr-name\">v-for</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>(lang, i) in langs<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">:key</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>`Lang${i}`<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">:value</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>lang<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>{{ lang }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>option</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>select</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>template</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token script\"><span class=\"token language-javascript\">\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">default</span> <span class=\"token punctuation\">{</span>\n  name<span class=\"token operator\">:</span> <span class=\"token string\">'locale-changer'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token function\">data</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span> langs<span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'ja'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">]</span> <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><div class=\"warning custom-block\"><p class=\"custom-block-title\">警告</p> <p>⚠️ 对于使用了 <code>sync: false</code> 的组件，语言环境的更改将被忽略。</p></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/zh/guide/locale.md\" target=\"_blank\" rel=\"noopener noreferrer\">在 GitHub 上编辑此页</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">最近一次更新: </span> <span class=\"time\">3/27/2019, 11:07:32 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/zh/guide/hot-reload.html\" class=\"prev\">\n          热重载\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/zh/guide/lazy-loading.html\">\n          延迟加载翻译\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/56.c8f906b3.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/zh/guide/messages.html",
    "content": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>语言环境信息的语法 | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n 是 Vue.js 的国际化插件\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/57.388c89dc.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/zh/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/messages.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/messages.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/messages.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/messages.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/messages.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/messages.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/zh/introduction.html\" class=\"sidebar-link\">介绍</a></li><li><a href=\"/vue-i18n/zh/started.html\" class=\"sidebar-link\">开始</a></li><li><a href=\"/vue-i18n/zh/installation.html\" class=\"sidebar-link\">安装</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"sidebar-link\">格式化</a></li><li><a href=\"/vue-i18n/zh/guide/pluralization.html\" class=\"sidebar-link\">复数</a></li><li><a href=\"/vue-i18n/zh/guide/datetime.html\" class=\"sidebar-link\">日期时间本地化</a></li><li><a href=\"/vue-i18n/zh/guide/number.html\" class=\"sidebar-link\">数字本地化</a></li><li><a href=\"/vue-i18n/zh/guide/messages.html\" class=\"active sidebar-link\">语言环境信息的语法</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/guide/messages.html#结构\" class=\"sidebar-link\">结构</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/guide/messages.html#linked-locale-messages\" class=\"sidebar-link\">Linked locale messages</a></li></ul></li><li><a href=\"/vue-i18n/zh/guide/fallback.html\" class=\"sidebar-link\">回退本地化</a></li><li><a href=\"/vue-i18n/zh/guide/component.html\" class=\"sidebar-link\">基于组件的本地化</a></li><li><a href=\"/vue-i18n/zh/guide/directive.html\" class=\"sidebar-link\">自定义指令本地化</a></li><li><a href=\"/vue-i18n/zh/guide/interpolation.html\" class=\"sidebar-link\">组件插值</a></li><li><a href=\"/vue-i18n/zh/guide/sfc.html\" class=\"sidebar-link\">单文件组件</a></li><li><a href=\"/vue-i18n/zh/guide/hot-reload.html\" class=\"sidebar-link\">热重载</a></li><li><a href=\"/vue-i18n/zh/guide/locale.html\" class=\"sidebar-link\">语言环境变更</a></li><li><a href=\"/vue-i18n/zh/guide/lazy-loading.html\" class=\"sidebar-link\">延迟加载翻译</a></li><li><a href=\"/vue-i18n/zh/guide/tooling.html\" class=\"sidebar-link\">工具</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/legacy/\" class=\"sidebar-link\">从 v5.x 迁移</a></li><li><a href=\"/vue-i18n/zh/legacy/v5.html\" class=\"sidebar-link\">v5.x 版本的文档</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"语言环境信息的语法\"><a href=\"#语言环境信息的语法\" class=\"header-anchor\">#</a> 语言环境信息的语法</h1> <h2 id=\"结构\"><a href=\"#结构\" class=\"header-anchor\">#</a> 结构</h2> <p>语言环境信息的语法如下：</p> <div class=\"language-typescript extra-class\"><pre class=\"language-typescript\"><code><span class=\"token comment\">// 作为 Flowtype 定义，语言环境信息的语法类似于 BNF 注释</span>\n<span class=\"token keyword\">type</span> LocaleMessages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span> <span class=\"token punctuation\">[</span>key<span class=\"token operator\">:</span> Locale<span class=\"token punctuation\">]</span><span class=\"token operator\">:</span> LocaleMessageObject <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">type</span> LocaleMessageObject <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span> <span class=\"token punctuation\">[</span>key<span class=\"token operator\">:</span> Path<span class=\"token punctuation\">]</span><span class=\"token operator\">:</span> LocaleMessage <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">type</span> LocaleMessageArray <span class=\"token operator\">=</span> LocaleMessage<span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">type</span> LocaleMessage <span class=\"token operator\">=</span> <span class=\"token builtin\">string</span> <span class=\"token operator\">|</span> LocaleMessageObject <span class=\"token operator\">|</span> LocaleMessageArray<span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">type</span> Locale <span class=\"token operator\">=</span> <span class=\"token builtin\">string</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">type</span> Path <span class=\"token operator\">=</span> <span class=\"token builtin\">string</span><span class=\"token punctuation\">;</span>\n</code></pre></div><p>基于以上语法，你可以配置以下结构的 Locale 信息：</p> <div class=\"language-json extra-class\"><pre class=\"language-json\"><code><span class=\"token punctuation\">{</span>\n  <span class=\"token property\">&quot;en&quot;</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>  <span class=\"token comment\">// 'en' Locale</span>\n    <span class=\"token property\">&quot;key1&quot;</span><span class=\"token operator\">:</span> <span class=\"token string\">&quot;this is message1&quot;</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 基本的</span>\n    <span class=\"token property\">&quot;nested&quot;</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> <span class=\"token comment\">// 嵌套</span>\n      <span class=\"token property\">&quot;message1&quot;</span><span class=\"token operator\">:</span> <span class=\"token string\">&quot;this is nested message1&quot;</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token property\">&quot;errors&quot;</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span> <span class=\"token comment\">// 数组</span>\n      <span class=\"token string\">&quot;this is 0 error code message&quot;</span><span class=\"token punctuation\">,</span>\n      <span class=\"token punctuation\">{</span>  <span class=\"token comment\">// 数组嵌套对象</span>\n        <span class=\"token property\">&quot;internal1&quot;</span><span class=\"token operator\">:</span> <span class=\"token string\">&quot;this is internal 1 error message&quot;</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      <span class=\"token punctuation\">[</span>  <span class=\"token comment\">// 数组嵌套数组</span>\n        <span class=\"token string\">&quot;this is nested array error 1&quot;</span>\n      <span class=\"token punctuation\">]</span>\n    <span class=\"token punctuation\">]</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token property\">&quot;ja&quot;</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> <span class=\"token comment\">// 'ja' Locale</span>\n    <span class=\"token comment\">// ...</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>在上面的语言环境信息的结构中，你可以使用以下键名路径进行翻译。</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- 基本的 --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('key1') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- 嵌套 --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('nested.message1') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- 数组 --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('errors[0]') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- 数组嵌套对象 --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('errors[1].internal1') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- 数组嵌套数组 --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('errors[2][0]') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>输出以下内容：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- 基本的 --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>this is message1<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- 嵌套 --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>this is nested message1<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- 数组 --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>this is 0 error code message<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- 数组嵌套对象 --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>this is internal 1 error message<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- 数组嵌套数组 --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>this is nested array error 1<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"linked-locale-messages\"><a href=\"#linked-locale-messages\" class=\"header-anchor\">#</a> Linked locale messages</h2> <p>如果有一个翻译关键字总是与另一个具有相同的具体文本，你可以链接到它。要链接到另一个翻译关键字，你所要做的就是在其内容前加上一个 <code>@:</code> 符号后跟完整的翻译键名，包括你要链接到的命名空间。</p> <p>语言环境信息如下：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      the_world<span class=\"token operator\">:</span> <span class=\"token string\">'the world'</span><span class=\"token punctuation\">,</span>\n      dio<span class=\"token operator\">:</span> <span class=\"token string\">'DIO:'</span><span class=\"token punctuation\">,</span>\n      linked<span class=\"token operator\">:</span> <span class=\"token string\">'@:message.dio @:message.the_world !!!!'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>模板如下：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('message.linked') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>输出如下：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>DIO: the world !!!!<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h3 id=\"按括号分组\"><a href=\"#按括号分组\" class=\"header-anchor\">#</a> 按括号分组</h3> <p>链接到的语言环境信息的键名也可以形如 <code>@:(message.foo.bar.baz)</code>，其中链接到另一段翻译的键名在括号 <code>()</code> 里。</p> <p>如果链接 <code>@:message.something</code> 后紧跟着一个点 <code>.</code>，则此选项非常有用，因为它本不该成为但却成为了链接的一部分。</p> <p>语言环境信息如下：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      dio<span class=\"token operator\">:</span> <span class=\"token string\">'DIO'</span><span class=\"token punctuation\">,</span>\n      linked<span class=\"token operator\">:</span> <span class=\"token string\">'There\\'s a reason, you lost, @:(message.dio).'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>模板如下：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t('message.linked') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>输出如下：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>There's a reason, you lost, DIO.<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/zh/guide/messages.md\" target=\"_blank\" rel=\"noopener noreferrer\">在 GitHub 上编辑此页</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">最近一次更新: </span> <span class=\"time\">3/27/2019, 11:07:32 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/zh/guide/number.html\" class=\"prev\">\n          数字本地化\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/zh/guide/fallback.html\">\n          回退本地化\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/57.388c89dc.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/zh/guide/number.html",
    "content": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>数字本地化 | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n 是 Vue.js 的国际化插件\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/zh/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/number.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/number.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/number.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/number.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/number.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/number.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/zh/introduction.html\" class=\"sidebar-link\">介绍</a></li><li><a href=\"/vue-i18n/zh/started.html\" class=\"sidebar-link\">开始</a></li><li><a href=\"/vue-i18n/zh/installation.html\" class=\"sidebar-link\">安装</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"sidebar-link\">格式化</a></li><li><a href=\"/vue-i18n/zh/guide/pluralization.html\" class=\"sidebar-link\">复数</a></li><li><a href=\"/vue-i18n/zh/guide/datetime.html\" class=\"sidebar-link\">日期时间本地化</a></li><li><a href=\"/vue-i18n/zh/guide/number.html\" class=\"active sidebar-link\">数字本地化</a></li><li><a href=\"/vue-i18n/zh/guide/messages.html\" class=\"sidebar-link\">语言环境信息的语法</a></li><li><a href=\"/vue-i18n/zh/guide/fallback.html\" class=\"sidebar-link\">回退本地化</a></li><li><a href=\"/vue-i18n/zh/guide/component.html\" class=\"sidebar-link\">基于组件的本地化</a></li><li><a href=\"/vue-i18n/zh/guide/directive.html\" class=\"sidebar-link\">自定义指令本地化</a></li><li><a href=\"/vue-i18n/zh/guide/interpolation.html\" class=\"sidebar-link\">组件插值</a></li><li><a href=\"/vue-i18n/zh/guide/sfc.html\" class=\"sidebar-link\">单文件组件</a></li><li><a href=\"/vue-i18n/zh/guide/hot-reload.html\" class=\"sidebar-link\">热重载</a></li><li><a href=\"/vue-i18n/zh/guide/locale.html\" class=\"sidebar-link\">语言环境变更</a></li><li><a href=\"/vue-i18n/zh/guide/lazy-loading.html\" class=\"sidebar-link\">延迟加载翻译</a></li><li><a href=\"/vue-i18n/zh/guide/tooling.html\" class=\"sidebar-link\">工具</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/legacy/\" class=\"sidebar-link\">从 v5.x 迁移</a></li><li><a href=\"/vue-i18n/zh/legacy/v5.html\" class=\"sidebar-link\">v5.x 版本的文档</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"数字本地化\"><a href=\"#数字本地化\" class=\"header-anchor\">#</a> 数字本地化</h1> <div class=\"tip custom-block\"><p class=\"custom-block-title\">支持版本</p> <p>🆕 7.0 新增</p></div> <p>你可以使用你定义的格式来本地化数字。</p> <p>数字格式如下：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> numberFormats <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token string\">'en-US'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    currency<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      style<span class=\"token operator\">:</span> <span class=\"token string\">'currency'</span><span class=\"token punctuation\">,</span> currency<span class=\"token operator\">:</span> <span class=\"token string\">'USD'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token string\">'ja-JP'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    currency<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      style<span class=\"token operator\">:</span> <span class=\"token string\">'currency'</span><span class=\"token punctuation\">,</span> currency<span class=\"token operator\">:</span> <span class=\"token string\">'JPY'</span><span class=\"token punctuation\">,</span> currencyDisplay<span class=\"token operator\">:</span> <span class=\"token string\">'symbol'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>如上，你可以指定具名的 (例如：<code>currency</code> 等) 的数字格式，并且需要使用 <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat\" target=\"_blank\" rel=\"noopener noreferrer\">ECMA-402 Intl.NumberFormat 的选项<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>。</p> <p>之后就像语言环境信息一样，你需要指定 <code>VueI18n</code> 构造函数的 <code>numberFormats</code> 选项：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  numberFormats\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n</code></pre></div><p>模板如下：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $n(100, 'currency') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $n(100, 'currency', 'ja-JP') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>输出如下：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>$100.00<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>￥100<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/zh/guide/number.md\" target=\"_blank\" rel=\"noopener noreferrer\">在 GitHub 上编辑此页</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">最近一次更新: </span> <span class=\"time\">3/27/2019, 11:07:32 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/zh/guide/datetime.html\" class=\"prev\">\n          日期时间本地化\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/zh/guide/messages.html\">\n          语言环境信息的语法\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/58.ad6e14bc.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/zh/guide/pluralization.html",
    "content": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>复数 | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n 是 Vue.js 的国际化插件\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/59.3d64068b.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/zh/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/pluralization.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/pluralization.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/pluralization.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/pluralization.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/pluralization.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/pluralization.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/zh/introduction.html\" class=\"sidebar-link\">介绍</a></li><li><a href=\"/vue-i18n/zh/started.html\" class=\"sidebar-link\">开始</a></li><li><a href=\"/vue-i18n/zh/installation.html\" class=\"sidebar-link\">安装</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"sidebar-link\">格式化</a></li><li><a href=\"/vue-i18n/zh/guide/pluralization.html\" class=\"active sidebar-link\">复数</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/guide/pluralization.html#通过预定义的参数访问该数字\" class=\"sidebar-link\">通过预定义的参数访问该数字</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/guide/pluralization.html#自定义复数\" class=\"sidebar-link\">自定义复数</a></li></ul></li><li><a href=\"/vue-i18n/zh/guide/datetime.html\" class=\"sidebar-link\">日期时间本地化</a></li><li><a href=\"/vue-i18n/zh/guide/number.html\" class=\"sidebar-link\">数字本地化</a></li><li><a href=\"/vue-i18n/zh/guide/messages.html\" class=\"sidebar-link\">语言环境信息的语法</a></li><li><a href=\"/vue-i18n/zh/guide/fallback.html\" class=\"sidebar-link\">回退本地化</a></li><li><a href=\"/vue-i18n/zh/guide/component.html\" class=\"sidebar-link\">基于组件的本地化</a></li><li><a href=\"/vue-i18n/zh/guide/directive.html\" class=\"sidebar-link\">自定义指令本地化</a></li><li><a href=\"/vue-i18n/zh/guide/interpolation.html\" class=\"sidebar-link\">组件插值</a></li><li><a href=\"/vue-i18n/zh/guide/sfc.html\" class=\"sidebar-link\">单文件组件</a></li><li><a href=\"/vue-i18n/zh/guide/hot-reload.html\" class=\"sidebar-link\">热重载</a></li><li><a href=\"/vue-i18n/zh/guide/locale.html\" class=\"sidebar-link\">语言环境变更</a></li><li><a href=\"/vue-i18n/zh/guide/lazy-loading.html\" class=\"sidebar-link\">延迟加载翻译</a></li><li><a href=\"/vue-i18n/zh/guide/tooling.html\" class=\"sidebar-link\">工具</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/legacy/\" class=\"sidebar-link\">从 v5.x 迁移</a></li><li><a href=\"/vue-i18n/zh/legacy/v5.html\" class=\"sidebar-link\">v5.x 版本的文档</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"复数\"><a href=\"#复数\" class=\"header-anchor\">#</a> 复数</h1> <p>你可以使用复数进行翻译。你必须定义具有管道 <code>|</code> 分隔符的语言环境，并在管道分隔符中定义复数。</p> <p>语言环境信息如下：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    car<span class=\"token operator\">:</span> <span class=\"token string\">'car | cars'</span><span class=\"token punctuation\">,</span>\n    apple<span class=\"token operator\">:</span> <span class=\"token string\">'no apples | one apple | {count} apples'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>模板如下：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('car', 1) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('car', 2) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('apple', 0) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('apple', 1) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('apple', 10, { count: 10 }) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>输出如下：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>car<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>cars<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>no apples<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>one apple<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>10 apples<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"通过预定义的参数访问该数字\"><a href=\"#通过预定义的参数访问该数字\" class=\"header-anchor\">#</a> 通过预定义的参数访问该数字</h2> <p>你无需明确指定复数的数字。可以通过预定义的命名参数 <code>{count}</code> 和/或 <code>{n}</code> 在语言环境信息中访问该数字。如有必要，你可以覆盖这些预定义的命名参数。</p> <p>语言环境信息如下：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    apple<span class=\"token operator\">:</span> <span class=\"token string\">'no apples | one apple | {count} apples'</span><span class=\"token punctuation\">,</span>\n    banana<span class=\"token operator\">:</span> <span class=\"token string\">'no bananas | {n} banana | {n} bananas'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>模板如下：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('apple', 10, { count: 10 }) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('apple', 10) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('banana', 1, { n: 1 }) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('banana', 1) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('banana', 100, { n: 'too many' }) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>输出如下：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>10 apples<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>10 apples<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>1 banana<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>1 banana<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>too many bananas<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"自定义复数\"><a href=\"#自定义复数\" class=\"header-anchor\">#</a> 自定义复数</h2> <p>然而，这种复数并不适用于所有语言 (例如，斯拉夫语言具有不同的复数规则)。</p> <p>为了实现这些规则，你可以覆盖 <code>VueI18n.prototype.getChoiceIndex</code> 函数。</p> <p>使用斯拉夫语言规则的简化示例 (俄语、乌克兰语等)：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code>\n<span class=\"token keyword\">const</span> defaultImpl <span class=\"token operator\">=</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">.</span>prototype<span class=\"token punctuation\">.</span>getChoiceIndex\n\n<span class=\"token comment\">/**\n * @param choice {number} 由 $tc 输入的选择索引：`$tc('path.to.rule', choiceIndex)`\n * @param choicesLength {number} 总体可用选择\n * @returns 选择复数单词的最终选择索引\n**/</span>\n<span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">.</span>prototype<span class=\"token punctuation\">.</span><span class=\"token function-variable function\">getChoiceIndex</span> <span class=\"token operator\">=</span> <span class=\"token keyword\">function</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">choice<span class=\"token punctuation\">,</span> choicesLength</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// this === VueI18n 实例，所以语言环境属性也存在于此处</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>locale <span class=\"token operator\">!==</span> <span class=\"token string\">'ru'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">// 继续执行默认实现</span>\n    <span class=\"token keyword\">return</span> <span class=\"token function\">defaultImpl</span><span class=\"token punctuation\">.</span><span class=\"token function\">apply</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">,</span> arguments<span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>choice <span class=\"token operator\">===</span> <span class=\"token number\">0</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">const</span> teen <span class=\"token operator\">=</span> choice <span class=\"token operator\">&gt;</span> <span class=\"token number\">10</span> <span class=\"token operator\">&amp;&amp;</span> choice <span class=\"token operator\">&lt;</span> <span class=\"token number\">20</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">const</span> endsWithOne <span class=\"token operator\">=</span> choice <span class=\"token operator\">%</span> <span class=\"token number\">10</span> <span class=\"token operator\">===</span> <span class=\"token number\">1</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token operator\">!</span>teen <span class=\"token operator\">&amp;&amp;</span> endsWithOne<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token number\">1</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token operator\">!</span>teen <span class=\"token operator\">&amp;&amp;</span> choice <span class=\"token operator\">%</span> <span class=\"token number\">10</span> <span class=\"token operator\">&gt;=</span> <span class=\"token number\">2</span> <span class=\"token operator\">&amp;&amp;</span> choice <span class=\"token operator\">%</span> <span class=\"token number\">10</span> <span class=\"token operator\">&lt;=</span> <span class=\"token number\">4</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token number\">2</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">return</span> <span class=\"token punctuation\">(</span>choicesLength <span class=\"token operator\">&lt;</span> <span class=\"token number\">4</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">?</span> <span class=\"token number\">2</span> <span class=\"token operator\">:</span> <span class=\"token number\">3</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>这将有效地实现这一目标：</p> <div class=\"language-javascript extra-class\"><pre class=\"language-javascript\"><code><span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  ru<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    car<span class=\"token operator\">:</span> <span class=\"token string\">'0 машин | 1 машина | {n} машины | {n} машин'</span><span class=\"token punctuation\">,</span>\n    banana<span class=\"token operator\">:</span> <span class=\"token string\">'нет бананов | 1 банан | {n} банана | {n} бананов'</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>格式为 <code>0 things | 1 thing | few things | multiple things</code>.</p> <p>你的模板仍然需要使用 <code>$tc()</code>，而不是 <code>$t()</code> ：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('car', 1) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('car', 2) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('car', 4) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('car', 12) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('car', 21) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('banana', 0) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('banana', 4) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('banana', 11) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $tc('banana', 31) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>结果如下：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>1 машина<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>2 машины<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>4 машины<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>12 машин<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>21 машина<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>нет бананов<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>4 банана<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>11 бананов<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>31 банан<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/zh/guide/pluralization.md\" target=\"_blank\" rel=\"noopener noreferrer\">在 GitHub 上编辑此页</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">最近一次更新: </span> <span class=\"time\">4/10/2020, 2:30:39 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"prev\">\n          格式化\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/zh/guide/datetime.html\">\n          日期时间本地化\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/59.3d64068b.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/zh/guide/sfc.html",
    "content": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>单文件组件 | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n 是 Vue.js 的国际化插件\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/zh/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/sfc.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/sfc.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/sfc.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/sfc.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/sfc.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/sfc.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/zh/introduction.html\" class=\"sidebar-link\">介绍</a></li><li><a href=\"/vue-i18n/zh/started.html\" class=\"sidebar-link\">开始</a></li><li><a href=\"/vue-i18n/zh/installation.html\" class=\"sidebar-link\">安装</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"sidebar-link\">格式化</a></li><li><a href=\"/vue-i18n/zh/guide/pluralization.html\" class=\"sidebar-link\">复数</a></li><li><a href=\"/vue-i18n/zh/guide/datetime.html\" class=\"sidebar-link\">日期时间本地化</a></li><li><a href=\"/vue-i18n/zh/guide/number.html\" class=\"sidebar-link\">数字本地化</a></li><li><a href=\"/vue-i18n/zh/guide/messages.html\" class=\"sidebar-link\">语言环境信息的语法</a></li><li><a href=\"/vue-i18n/zh/guide/fallback.html\" class=\"sidebar-link\">回退本地化</a></li><li><a href=\"/vue-i18n/zh/guide/component.html\" class=\"sidebar-link\">基于组件的本地化</a></li><li><a href=\"/vue-i18n/zh/guide/directive.html\" class=\"sidebar-link\">自定义指令本地化</a></li><li><a href=\"/vue-i18n/zh/guide/interpolation.html\" class=\"sidebar-link\">组件插值</a></li><li><a href=\"/vue-i18n/zh/guide/sfc.html\" class=\"active sidebar-link\">单文件组件</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/guide/sfc.html#基本用法\" class=\"sidebar-link\">基本用法</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/guide/sfc.html#安装-vue-i18n-loader\" class=\"sidebar-link\">安装 vue-i18n-loader</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/guide/sfc.html#webpack\" class=\"sidebar-link\">Webpack</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/guide/sfc.html#vue-cli-3-0\" class=\"sidebar-link\">Vue CLI 3.0</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/guide/sfc.html#laravel-mix\" class=\"sidebar-link\">Laravel-Mix</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/guide/sfc.html#加载-yaml\" class=\"sidebar-link\">加载 YAML</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/guide/sfc.html#多个自定义块\" class=\"sidebar-link\">多个自定义块</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/guide/sfc.html#scoped-风格\" class=\"sidebar-link\">Scoped 风格</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/guide/sfc.html#函数式组件中的自定义块\" class=\"sidebar-link\">函数式组件中的自定义块</a></li></ul></li><li><a href=\"/vue-i18n/zh/guide/hot-reload.html\" class=\"sidebar-link\">热重载</a></li><li><a href=\"/vue-i18n/zh/guide/locale.html\" class=\"sidebar-link\">语言环境变更</a></li><li><a href=\"/vue-i18n/zh/guide/lazy-loading.html\" class=\"sidebar-link\">延迟加载翻译</a></li><li><a href=\"/vue-i18n/zh/guide/tooling.html\" class=\"sidebar-link\">工具</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/legacy/\" class=\"sidebar-link\">从 v5.x 迁移</a></li><li><a href=\"/vue-i18n/zh/legacy/v5.html\" class=\"sidebar-link\">v5.x 版本的文档</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"单文件组件\"><a href=\"#单文件组件\" class=\"header-anchor\">#</a> 单文件组件</h1> <h2 id=\"基本用法\"><a href=\"#基本用法\" class=\"header-anchor\">#</a> 基本用法</h2> <p>如果使用单文件组件构建 Vue 组件或 Vue 应用程序，则可以管理 <code>i18n</code> 自定义块的语言环境信息。</p> <p>以下是<a href=\"https://github.com/kazupon/vue-i18n/tree/dev/examples/sfc\" target=\"_blank\" rel=\"noopener noreferrer\">单文件组件示例<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>:</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token operator\">&lt;</span>i18n<span class=\"token operator\">&gt;</span>\n<span class=\"token punctuation\">{</span>\n  <span class=\"token string\">&quot;en&quot;</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token string\">&quot;hello&quot;</span><span class=\"token operator\">:</span> <span class=\"token string\">&quot;hello world!&quot;</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token string\">&quot;ja&quot;</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token string\">&quot;hello&quot;</span><span class=\"token operator\">:</span> <span class=\"token string\">&quot;こんにちは、世界！&quot;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>i18n<span class=\"token operator\">&gt;</span>\n\n<span class=\"token operator\">&lt;</span>template<span class=\"token operator\">&gt;</span>\n  <span class=\"token operator\">&lt;</span>div id<span class=\"token operator\">=</span><span class=\"token string\">&quot;app&quot;</span><span class=\"token operator\">&gt;</span>\n    <span class=\"token operator\">&lt;</span>label <span class=\"token keyword\">for</span><span class=\"token operator\">=</span><span class=\"token string\">&quot;locale&quot;</span><span class=\"token operator\">&gt;</span>locale<span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>label<span class=\"token operator\">&gt;</span>\n    <span class=\"token operator\">&lt;</span>select v<span class=\"token operator\">-</span>model<span class=\"token operator\">=</span><span class=\"token string\">&quot;locale&quot;</span><span class=\"token operator\">&gt;</span>\n      <span class=\"token operator\">&lt;</span>option<span class=\"token operator\">&gt;</span>en<span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>option<span class=\"token operator\">&gt;</span>\n      <span class=\"token operator\">&lt;</span>option<span class=\"token operator\">&gt;</span>ja<span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>option<span class=\"token operator\">&gt;</span>\n    <span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>select<span class=\"token operator\">&gt;</span>\n    <span class=\"token operator\">&lt;</span>p<span class=\"token operator\">&gt;</span>message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">{</span> <span class=\"token function\">$t</span><span class=\"token punctuation\">(</span><span class=\"token string\">'hello'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span><span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>p<span class=\"token operator\">&gt;</span>\n  <span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>div<span class=\"token operator\">&gt;</span>\n<span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>template<span class=\"token operator\">&gt;</span>\n\n<span class=\"token operator\">&lt;</span>script<span class=\"token operator\">&gt;</span>\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">default</span> <span class=\"token punctuation\">{</span>\n  name<span class=\"token operator\">:</span> <span class=\"token string\">'app'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token function\">data</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span> <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span> locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span> <span class=\"token punctuation\">}</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  watch<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token function\">locale</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">val</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>$i18n<span class=\"token punctuation\">.</span>locale <span class=\"token operator\">=</span> val\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>script<span class=\"token operator\">&gt;</span>\n</code></pre></div><h2 id=\"安装-vue-i18n-loader\"><a href=\"#安装-vue-i18n-loader\" class=\"header-anchor\">#</a> 安装 vue-i18n-loader</h2> <p>为了使用 <code>&lt;i18n&gt;</code> 自定义块，你需要安装 <code>vue-loader</code> 和 <code>vue-i18n-loader</code>。如果你使用了单文件组件，<a href=\"https://github.com/vuejs/vue-loader\" target=\"_blank\" rel=\"noopener noreferrer\">vue-loader<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> 很可能已在项目中使用了，那么 <a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\">vue-i18n-loader<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> 必须另外安装：</p> <div class=\"language-sh extra-class\"><pre class=\"language-text\"><code>npm i --save-dev @kazupon/vue-i18n-loader\n</code></pre></div><h2 id=\"webpack\"><a href=\"#webpack\" class=\"header-anchor\">#</a> Webpack</h2> <p>需要对 Webpack 进行以下配置：</p> <p>对于 vue-loader v15 或更高版本：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code>module<span class=\"token punctuation\">.</span>exports <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// ...</span>\n  module<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    rules<span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n      <span class=\"token punctuation\">{</span>\n        test<span class=\"token operator\">:</span> <span class=\"token regex\">/\\.vue$/</span><span class=\"token punctuation\">,</span>\n        loader<span class=\"token operator\">:</span> <span class=\"token string\">'vue-loader'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      <span class=\"token punctuation\">{</span>\n        resourceQuery<span class=\"token operator\">:</span> <span class=\"token regex\">/blockType=i18n/</span><span class=\"token punctuation\">,</span>\n        type<span class=\"token operator\">:</span> <span class=\"token string\">'javascript/auto'</span><span class=\"token punctuation\">,</span>\n        loader<span class=\"token operator\">:</span> <span class=\"token string\">'@kazupon/vue-i18n-loader'</span>\n      <span class=\"token punctuation\">}</span>\n      <span class=\"token comment\">// ...</span>\n    <span class=\"token punctuation\">]</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>对于 vue-loader v14：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code>module<span class=\"token punctuation\">.</span>exports <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// ...</span>\n  module<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    rules<span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n      <span class=\"token punctuation\">{</span>\n        test<span class=\"token operator\">:</span> <span class=\"token regex\">/\\.vue$/</span><span class=\"token punctuation\">,</span>\n        loader<span class=\"token operator\">:</span> <span class=\"token string\">'vue-loader'</span><span class=\"token punctuation\">,</span>\n        options<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n          loaders<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token comment\">// 你需要指定 `i18n` 的值为 `vue-i18n-loader`</span>\n            i18n<span class=\"token operator\">:</span> <span class=\"token string\">'@kazupon/vue-i18n-loader'</span>\n          <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      <span class=\"token comment\">// ...</span>\n    <span class=\"token punctuation\">]</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><h2 id=\"vue-cli-3-0\"><a href=\"#vue-cli-3-0\" class=\"header-anchor\">#</a> Vue CLI 3.0</h2> <p><a href=\"https://github.com/vuejs/vue-cli\" target=\"_blank\" rel=\"noopener noreferrer\">Vue CLI 3.0<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> 隐藏了 webpack 配置，因此，如果我们想在单文件组件中添加对 <code>&lt;i18n&gt;</code> 标记的支持，我们需要修改现有配置。</p> <p>为此，我们必须在项目的根目录下创建一个 <code>vue.config.js</code>。完成后，我们必须包括以下内容：</p> <p>对于 vue-loader v15 或更高版本：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code>module<span class=\"token punctuation\">.</span>exports <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function-variable function\">chainWebpack</span><span class=\"token operator\">:</span> <span class=\"token parameter\">config</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n    config<span class=\"token punctuation\">.</span>module\n      <span class=\"token punctuation\">.</span><span class=\"token function\">rule</span><span class=\"token punctuation\">(</span><span class=\"token string\">&quot;i18n&quot;</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">resourceQuery</span><span class=\"token punctuation\">(</span><span class=\"token regex\">/blockType=i18n/</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">type</span><span class=\"token punctuation\">(</span><span class=\"token string\">'javascript/auto'</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">use</span><span class=\"token punctuation\">(</span><span class=\"token string\">&quot;i18n&quot;</span><span class=\"token punctuation\">)</span>\n        <span class=\"token punctuation\">.</span><span class=\"token function\">loader</span><span class=\"token punctuation\">(</span><span class=\"token string\">&quot;@kazupon/vue-i18n-loader&quot;</span><span class=\"token punctuation\">)</span>\n        <span class=\"token punctuation\">.</span><span class=\"token function\">end</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>对于 vue-loader v14：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> merge <span class=\"token operator\">=</span> <span class=\"token function\">require</span><span class=\"token punctuation\">(</span><span class=\"token string\">'deepmerge'</span><span class=\"token punctuation\">)</span>\n\nmodule<span class=\"token punctuation\">.</span>exports <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function-variable function\">chainWebpack</span><span class=\"token operator\">:</span> <span class=\"token parameter\">config</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n    config<span class=\"token punctuation\">.</span>module\n      <span class=\"token punctuation\">.</span><span class=\"token function\">rule</span><span class=\"token punctuation\">(</span><span class=\"token string\">'vue'</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">use</span><span class=\"token punctuation\">(</span><span class=\"token string\">'vue-loader'</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">tap</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">options</span> <span class=\"token operator\">=&gt;</span>\n        <span class=\"token function\">merge</span><span class=\"token punctuation\">(</span>options<span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n          loaders<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n            i18n<span class=\"token operator\">:</span> <span class=\"token string\">'@kazupon/vue-i18n-loader'</span>\n          <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p><em>别忘了安装<a href=\"https://github.com/KyleAMathews/deepmerge\" target=\"_blank\" rel=\"noopener noreferrer\">deepmerge<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>! (<code>npm i deepmerge -D</code> 或 <code>yarn add deepmerge -D</code>)</em></p> <p>如果你想了解有关修改现有配置的更多信息<a href=\"https://cli.vuejs.org/guide/webpack.html\" target=\"_blank\" rel=\"noopener noreferrer\">点击这里<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a>。</p> <h2 id=\"laravel-mix\"><a href=\"#laravel-mix\" class=\"header-anchor\">#</a> Laravel-Mix</h2> <p>对于带有 vue-loader v15 或更高版本的 Laravel-mix 4：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token comment\">// 使用 “i18n” 方法扩展 Mix ，加载 vue-i18n-loader</span>\nmix<span class=\"token punctuation\">.</span><span class=\"token function\">extend</span><span class=\"token punctuation\">(</span> <span class=\"token string\">'i18n'</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">class</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token function\">webpackRules</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token keyword\">return</span> <span class=\"token punctuation\">[</span>\n                <span class=\"token punctuation\">{</span>\n                    resourceQuery<span class=\"token operator\">:</span> <span class=\"token regex\">/blockType=i18n/</span><span class=\"token punctuation\">,</span>\n                    type<span class=\"token operator\">:</span>          <span class=\"token string\">'javascript/auto'</span><span class=\"token punctuation\">,</span>\n                    loader<span class=\"token operator\">:</span>        <span class=\"token string\">'@kazupon/vue-i18n-loader'</span><span class=\"token punctuation\">,</span>\n                <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n            <span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 确保在 `.js(..., ...)` 之前调用 `.i18n()` (来加载加载器)</span>\nmix<span class=\"token punctuation\">.</span><span class=\"token function\">i18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n   <span class=\"token punctuation\">.</span><span class=\"token function\">js</span><span class=\"token punctuation\">(</span> <span class=\"token string\">'resources/js/App.js'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'public/js/app.js'</span> <span class=\"token punctuation\">)</span>\n   <span class=\"token operator\">...</span>\n</code></pre></div><p>对于带有 vue-loader v14 的 Laravel-mix 2：</p> <p>从 Laravel-mix 的 <a href=\"https://github.com/JeffreyWay/laravel-mix/releases/tag/v2.1\" target=\"_blank\" rel=\"noopener noreferrer\">V2.1<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> 开始，你可以通过 <code>mix.extend()</code> 添加自定义规则。Laravel mix 已经有了处理 .vue 文件的规则。要添加 <code>vue-i18n-loader</code>，请将以下内容添加到 <code>webpack.mix.js</code>：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token comment\">// 下面的代码将注入 i18n Kazupon/vue-18-loader 作为 .vue 文件的加载器。</span>\nmix<span class=\"token punctuation\">.</span><span class=\"token function\">extend</span><span class=\"token punctuation\">(</span> <span class=\"token string\">'i18n'</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span> <span class=\"token parameter\">webpackConfig<span class=\"token punctuation\">,</span> <span class=\"token operator\">...</span>args</span> <span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    webpackConfig<span class=\"token punctuation\">.</span>module<span class=\"token punctuation\">.</span>rules<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span> <span class=\"token punctuation\">(</span> <span class=\"token parameter\">module</span> <span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token comment\">// 搜索处理 .vue 文件的 “vue-loader” 组件。</span>\n        <span class=\"token keyword\">if</span><span class=\"token punctuation\">(</span> module<span class=\"token punctuation\">.</span>loader <span class=\"token operator\">!==</span> <span class=\"token string\">'vue-loader'</span> <span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token keyword\">return</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n\n        <span class=\"token comment\">// 在此模块中，为 i18n 标记添加 vue-i18n-loader。</span>\n        module<span class=\"token punctuation\">.</span>options<span class=\"token punctuation\">.</span>loaders<span class=\"token punctuation\">.</span>i18n <span class=\"token operator\">=</span> <span class=\"token string\">'@kazupon/vue-i18n-loader'</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span> <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span> <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 确保在 `.js(...，...)` 之前调用 `.i18n()`</span>\nmix<span class=\"token punctuation\">.</span><span class=\"token function\">i18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n   <span class=\"token punctuation\">.</span><span class=\"token function\">js</span><span class=\"token punctuation\">(</span> <span class=\"token string\">'resources/assets/js/App.js'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'public/js/app.js'</span> <span class=\"token punctuation\">)</span>\n   <span class=\"token operator\">...</span>\n</code></pre></div><h2 id=\"加载-yaml\"><a href=\"#加载-yaml\" class=\"header-anchor\">#</a> 加载 YAML</h2> <p><code>i18n</code> 自定义块需要指定为 JSON 格式，你也可以通过使用 <code>vue-loader</code> 预加载器功能来使用 <code>YAML</code> 格式。</p> <p>以下是 <code>YAML</code> 格式的 <code>i18n</code> 自定义块：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\nen:\n  hello: &quot;hello world!&quot;\nja:\n  hello: &quot;こんにちは、世界！&quot;\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>Webpack 配置如下：</p> <p>对于 vue-loader v15 或更高版本：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token comment\">// Vue CLI 3.0</span>\nmodule<span class=\"token punctuation\">.</span>exports <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function-variable function\">chainWebpack</span><span class=\"token operator\">:</span> <span class=\"token parameter\">config</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n    config<span class=\"token punctuation\">.</span>module\n      <span class=\"token punctuation\">.</span><span class=\"token function\">rule</span><span class=\"token punctuation\">(</span><span class=\"token string\">&quot;i18n&quot;</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">resourceQuery</span><span class=\"token punctuation\">(</span><span class=\"token regex\">/blockType=i18n/</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">type</span><span class=\"token punctuation\">(</span><span class=\"token string\">'javascript/auto'</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">use</span><span class=\"token punctuation\">(</span><span class=\"token string\">&quot;i18n&quot;</span><span class=\"token punctuation\">)</span>\n        <span class=\"token punctuation\">.</span><span class=\"token function\">loader</span><span class=\"token punctuation\">(</span><span class=\"token string\">&quot;@kazupon/vue-i18n-loader&quot;</span><span class=\"token punctuation\">)</span>\n        <span class=\"token punctuation\">.</span><span class=\"token function\">end</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">.</span><span class=\"token function\">use</span><span class=\"token punctuation\">(</span><span class=\"token string\">'yaml'</span><span class=\"token punctuation\">)</span>\n        <span class=\"token punctuation\">.</span><span class=\"token function\">loader</span><span class=\"token punctuation\">(</span><span class=\"token string\">'yaml-loader'</span><span class=\"token punctuation\">)</span>\n        <span class=\"token punctuation\">.</span><span class=\"token function\">end</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><p>对于 vue-loader v14：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code>module<span class=\"token punctuation\">.</span>exports <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// ...</span>\n  module<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    rules<span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n      <span class=\"token punctuation\">{</span>\n        test<span class=\"token operator\">:</span> <span class=\"token regex\">/\\.vue$/</span><span class=\"token punctuation\">,</span>\n        loader<span class=\"token operator\">:</span> <span class=\"token string\">'vue-loader'</span><span class=\"token punctuation\">,</span>\n        options<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n          preLoaders<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n            i18n<span class=\"token operator\">:</span> <span class=\"token string\">'yaml-loader'</span>\n          <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n          loaders<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n            i18n<span class=\"token operator\">:</span> <span class=\"token string\">'@kazupon/vue-i18n-loader'</span>\n          <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      <span class=\"token comment\">// ...</span>\n    <span class=\"token punctuation\">]</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><h2 id=\"多个自定义块\"><a href=\"#多个自定义块\" class=\"header-anchor\">#</a> 多个自定义块</h2> <p>你可以使用具有多个 <code>i18n</code> 自定义块的语言环境信息。</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>./common/locales.json<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n  {\n    &quot;en&quot;: {\n      &quot;hello&quot;: &quot;hello world!&quot;\n    },\n    &quot;ja&quot;: {\n      &quot;hello&quot;: &quot;こんにちは、世界！&quot;\n    }\n  }\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><p>如上所见，第一个自定义块使用 <code>src</code> 特性加载常用的语言环境信息，第二个自定义块加载仅在该单文件组件中定义的语言环境信息。这些语言环境信息将合并为组件的语言环境信息。</p> <p>这样，多个自定义块在想要用作模块时非常有用。</p> <h2 id=\"scoped-风格\"><a href=\"#scoped-风格\" class=\"header-anchor\">#</a> Scoped 风格</h2> <p>当使用带有 <code>scoped style</code> <code>vue-i18n</code> 时，重要的是要记住使用<a href=\"https://vue-loader.vuejs.org/zh/guide/scoped-css.html#%E6%B7%B1%E5%BA%A6%E4%BD%9C%E7%94%A8%E9%80%89%E6%8B%A9%E5%99%A8\" target=\"_blank\" rel=\"noopener noreferrer\">深度选择器<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> 来设置嵌套转换的样式。例如：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code>...\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>template</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>parent<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>message: {{ $t('hello') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>template</span><span class=\"token punctuation\">&gt;</span></span>\n...\n<span class=\"token comment\">&lt;!-- 不可行--&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>style</span> <span class=\"token attr-name\">scoped</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token style\"><span class=\"token language-css\">\n<span class=\"token selector\">.parent p</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token property\">color</span><span class=\"token punctuation\">:</span> #42b883<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>style</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token comment\">&lt;!-- 可行 --&gt;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>style</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token style\"><span class=\"token language-css\">\n<span class=\"token selector\">.parent &gt;&gt;&gt; p</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token property\">color</span><span class=\"token punctuation\">:</span> #42b883<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>style</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"函数式组件中的自定义块\"><a href=\"#函数式组件中的自定义块\" class=\"header-anchor\">#</a> 函数式组件中的自定义块</h2> <p>如果单个文件组件具有使用函数式组件的模板，并且你已经定义了 <code>i18n</code> 自定义块，请注意你无法使用语言环境信息进行本地化。</p> <p>例如，以下代码无法使用 <code>i18n</code> 自定义块的语言环境信息进行本地化。</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n{\n  &quot;en&quot;: {\n    &quot;hello&quot;: &quot;hello world&quot;\n  },\n  &quot;ja&quot;: {\n    &quot;hello&quot;: &quot;こんにちは、世界&quot;\n  }\n}\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>i18n</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>template</span> <span class=\"token attr-name\">functional</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token comment\">&lt;!-- 'hello' 的父实例的语言环境信息 --&gt;</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ parent.$t('hello') }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>template</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/zh/guide/sfc.md\" target=\"_blank\" rel=\"noopener noreferrer\">在 GitHub 上编辑此页</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">最近一次更新: </span> <span class=\"time\">3/27/2019, 11:07:32 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/zh/guide/interpolation.html\" class=\"prev\">\n          组件插值\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/zh/guide/hot-reload.html\">\n          热重载\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/60.12bfe8e9.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/zh/guide/tooling.html",
    "content": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>工具 | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n 是 Vue.js 的国际化插件\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/61.446dac92.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/zh/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/tooling.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/tooling.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/tooling.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/guide/tooling.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/tooling.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/guide/tooling.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/zh/introduction.html\" class=\"sidebar-link\">介绍</a></li><li><a href=\"/vue-i18n/zh/started.html\" class=\"sidebar-link\">开始</a></li><li><a href=\"/vue-i18n/zh/installation.html\" class=\"sidebar-link\">安装</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"sidebar-link\">格式化</a></li><li><a href=\"/vue-i18n/zh/guide/pluralization.html\" class=\"sidebar-link\">复数</a></li><li><a href=\"/vue-i18n/zh/guide/datetime.html\" class=\"sidebar-link\">日期时间本地化</a></li><li><a href=\"/vue-i18n/zh/guide/number.html\" class=\"sidebar-link\">数字本地化</a></li><li><a href=\"/vue-i18n/zh/guide/messages.html\" class=\"sidebar-link\">语言环境信息的语法</a></li><li><a href=\"/vue-i18n/zh/guide/fallback.html\" class=\"sidebar-link\">回退本地化</a></li><li><a href=\"/vue-i18n/zh/guide/component.html\" class=\"sidebar-link\">基于组件的本地化</a></li><li><a href=\"/vue-i18n/zh/guide/directive.html\" class=\"sidebar-link\">自定义指令本地化</a></li><li><a href=\"/vue-i18n/zh/guide/interpolation.html\" class=\"sidebar-link\">组件插值</a></li><li><a href=\"/vue-i18n/zh/guide/sfc.html\" class=\"sidebar-link\">单文件组件</a></li><li><a href=\"/vue-i18n/zh/guide/hot-reload.html\" class=\"sidebar-link\">热重载</a></li><li><a href=\"/vue-i18n/zh/guide/locale.html\" class=\"sidebar-link\">语言环境变更</a></li><li><a href=\"/vue-i18n/zh/guide/lazy-loading.html\" class=\"sidebar-link\">延迟加载翻译</a></li><li><a href=\"/vue-i18n/zh/guide/tooling.html\" class=\"active sidebar-link\">工具</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/guide/tooling.html#官方工具\" class=\"sidebar-link\">官方工具</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/guide/tooling.html#第三方工具\" class=\"sidebar-link\">第三方工具</a></li></ul></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/legacy/\" class=\"sidebar-link\">从 v5.x 迁移</a></li><li><a href=\"/vue-i18n/zh/legacy/v5.html\" class=\"sidebar-link\">v5.x 版本的文档</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"工具\"><a href=\"#工具\" class=\"header-anchor\">#</a> 工具</h1> <p>为了支持开发，我们官方提供了一些工具。</p> <p>此外，还有第三方供应商提供的集成了 Vue I18n 的工具。</p> <h2 id=\"官方工具\"><a href=\"#官方工具\" class=\"header-anchor\">#</a> 官方工具</h2> <h3 id=\"vue-cli-插件\"><a href=\"#vue-cli-插件\" class=\"header-anchor\">#</a> Vue Cli 插件</h3> <p><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\">vue-cli-plugin-i18n<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> 是官方提供的 Vue Cli 插件。</p> <p>使用此插件，您可以为Vue应用程序设置 i18n 环境，并支持 i18n 开发环境。</p> <h3 id=\"webpack-loader\"><a href=\"#webpack-loader\" class=\"header-anchor\">#</a> Webpack Loader</h3> <p><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\">vue-i18n-loader<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> 是官方提供的 Webpack Loader。\n使用此加载程序，您可以在单个文件组件中使用 <code>i18n</code> 自定义块。</p> <p>关于 <code>i18n</code> 自定义块，请参见 <a href=\"/vue-i18n/zh/guide/sfc.html\">单文件组件</a></p> <h3 id=\"eslint-插件\"><a href=\"#eslint-插件\" class=\"header-anchor\">#</a> ESLint 插件</h3> <p><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\">eslint-plugin-vue-i18n<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> 是为 Vue I18n 编写的 ESLint 插件。</p> <p>它可以轻松地将一些本地化 lint 功能集成到 Vue.js 应用程序中。</p> <h3 id=\"extensions\"><a href=\"#extensions\" class=\"header-anchor\">#</a> Extensions</h3> <p>在<a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\">vue-i18n-extensions<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> 你可以找到为 Vue I18n 编写的插件。</p> <p>您可以使用此扩展来启用 SSR 并提高 Vue I18n 的性能。</p> <h2 id=\"第三方工具\"><a href=\"#第三方工具\" class=\"header-anchor\">#</a> 第三方工具</h2> <h3 id=\"babeledit\"><a href=\"#babeledit\" class=\"header-anchor\">#</a> BabelEdit</h3> <p><a href=\"https://www.codeandweb.com/babeledit\" target=\"_blank\" rel=\"noopener noreferrer\">BabelEdit<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> 是 Web 应用程序的翻译编辑器。</p> <p>BabelEdit可以翻译 <code>json</code> 文件，也可以翻译单文件组件的 <code>i18n</code> 自定义块。</p> <p>欲了解更多，请看<a href=\"https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-vue-app-with-vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\">教程<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></p></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/zh/guide/tooling.md\" target=\"_blank\" rel=\"noopener noreferrer\">在 GitHub 上编辑此页</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">最近一次更新: </span> <span class=\"time\">3/19/2020, 2:28:38 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/zh/guide/lazy-loading.html\" class=\"prev\">\n          延迟加载翻译\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/zh/legacy/\">\n          从 v5.x 迁移\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/61.446dac92.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/zh/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n 是 Vue.js 的国际化插件\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container no-sidebar\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/zh/\" class=\"home-link router-link-exact-active router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/zh/introduction.html\" class=\"sidebar-link\">介绍</a></li><li><a href=\"/vue-i18n/zh/started.html\" class=\"sidebar-link\">开始</a></li><li><a href=\"/vue-i18n/zh/installation.html\" class=\"sidebar-link\">安装</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"sidebar-link\">格式化</a></li><li><a href=\"/vue-i18n/zh/guide/pluralization.html\" class=\"sidebar-link\">复数</a></li><li><a href=\"/vue-i18n/zh/guide/datetime.html\" class=\"sidebar-link\">日期时间本地化</a></li><li><a href=\"/vue-i18n/zh/guide/number.html\" class=\"sidebar-link\">数字本地化</a></li><li><a href=\"/vue-i18n/zh/guide/messages.html\" class=\"sidebar-link\">语言环境信息的语法</a></li><li><a href=\"/vue-i18n/zh/guide/fallback.html\" class=\"sidebar-link\">回退本地化</a></li><li><a href=\"/vue-i18n/zh/guide/component.html\" class=\"sidebar-link\">基于组件的本地化</a></li><li><a href=\"/vue-i18n/zh/guide/directive.html\" class=\"sidebar-link\">自定义指令本地化</a></li><li><a href=\"/vue-i18n/zh/guide/interpolation.html\" class=\"sidebar-link\">组件插值</a></li><li><a href=\"/vue-i18n/zh/guide/sfc.html\" class=\"sidebar-link\">单文件组件</a></li><li><a href=\"/vue-i18n/zh/guide/hot-reload.html\" class=\"sidebar-link\">热重载</a></li><li><a href=\"/vue-i18n/zh/guide/locale.html\" class=\"sidebar-link\">语言环境变更</a></li><li><a href=\"/vue-i18n/zh/guide/lazy-loading.html\" class=\"sidebar-link\">延迟加载翻译</a></li><li><a href=\"/vue-i18n/zh/guide/tooling.html\" class=\"sidebar-link\">工具</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/legacy/\" class=\"sidebar-link\">从 v5.x 迁移</a></li><li><a href=\"/vue-i18n/zh/legacy/v5.html\" class=\"sidebar-link\">v5.x 版本的文档</a></li></ul></div></li></ul> </div> <div class=\"home\"><div class=\"hero\"><img src=\"./vue-i18n-logo.png\" alt=\"hero\"> <h1>Vue I18n</h1> <p class=\"description\">\n      Vue I18n 是 Vue.js 的国际化插件\n    </p> <p class=\"action\"><a href=\"/vue-i18n/zh/introduction.html\" class=\"nav-link action-button\">快速上手 →</a></p></div> <!----> <div class=\"content custom\"><div class=\"sponsors\" style=\"text-align:center; padding: 0 0 24px 0;\"><h4>白银赞助商</h4> <a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\"><img src=\"/vue-i18n/patrons/babeledit.png\"></a></div> <div class=\"patreon\" style=\"padding: 0 0 24px 0;\"><p style=\"text-align: center;\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\"><img src=\"https://c5.patreon.com/external/logo/become_a_patron_button.png\" alt=\"Become a Patreon\"></a></p></div> <div class=\"features\"><div class=\"feature\"><h2>简单</h2> <p>通过简单的 API 将你的应用国际化</p></div> <div class=\"feature\"><h2>强大</h2> <p>除了简单的翻译外，还支持复数，数字，日期时间等本地化处理</p></div> <div class=\"feature\"><h2>面向组件</h2> <p>你可以在单文件组件上管理语言环境信息</p></div></div></div> <div class=\"footer\">\n    MIT Licensed | Copyright © 2020 kazuya kawaguchi\n  </div></div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/46.5ab1c570.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/zh/installation.html",
    "content": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>安装 | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n 是 Vue.js 的国际化插件\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/62.88ef088f.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/zh/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/installation.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/installation.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/installation.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/installation.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/installation.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/installation.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/zh/introduction.html\" class=\"sidebar-link\">介绍</a></li><li><a href=\"/vue-i18n/zh/started.html\" class=\"sidebar-link\">开始</a></li><li><a href=\"/vue-i18n/zh/installation.html\" class=\"active sidebar-link\">安装</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/installation.html#兼容性说明\" class=\"sidebar-link\">兼容性说明</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/installation.html#直接下载-cdn\" class=\"sidebar-link\">直接下载 / CDN</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/installation.html#npm\" class=\"sidebar-link\">NPM</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/installation.html#yarn\" class=\"sidebar-link\">Yarn</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/installation.html#vue-cli-3-x\" class=\"sidebar-link\">Vue Cli 3.x</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/installation.html#开发版构建\" class=\"sidebar-link\">开发版构建</a></li></ul></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"sidebar-link\">格式化</a></li><li><a href=\"/vue-i18n/zh/guide/pluralization.html\" class=\"sidebar-link\">复数</a></li><li><a href=\"/vue-i18n/zh/guide/datetime.html\" class=\"sidebar-link\">日期时间本地化</a></li><li><a href=\"/vue-i18n/zh/guide/number.html\" class=\"sidebar-link\">数字本地化</a></li><li><a href=\"/vue-i18n/zh/guide/messages.html\" class=\"sidebar-link\">语言环境信息的语法</a></li><li><a href=\"/vue-i18n/zh/guide/fallback.html\" class=\"sidebar-link\">回退本地化</a></li><li><a href=\"/vue-i18n/zh/guide/component.html\" class=\"sidebar-link\">基于组件的本地化</a></li><li><a href=\"/vue-i18n/zh/guide/directive.html\" class=\"sidebar-link\">自定义指令本地化</a></li><li><a href=\"/vue-i18n/zh/guide/interpolation.html\" class=\"sidebar-link\">组件插值</a></li><li><a href=\"/vue-i18n/zh/guide/sfc.html\" class=\"sidebar-link\">单文件组件</a></li><li><a href=\"/vue-i18n/zh/guide/hot-reload.html\" class=\"sidebar-link\">热重载</a></li><li><a href=\"/vue-i18n/zh/guide/locale.html\" class=\"sidebar-link\">语言环境变更</a></li><li><a href=\"/vue-i18n/zh/guide/lazy-loading.html\" class=\"sidebar-link\">延迟加载翻译</a></li><li><a href=\"/vue-i18n/zh/guide/tooling.html\" class=\"sidebar-link\">工具</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/legacy/\" class=\"sidebar-link\">从 v5.x 迁移</a></li><li><a href=\"/vue-i18n/zh/legacy/v5.html\" class=\"sidebar-link\">v5.x 版本的文档</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"安装\"><a href=\"#安装\" class=\"header-anchor\">#</a> 安装</h1> <h2 id=\"兼容性说明\"><a href=\"#兼容性说明\" class=\"header-anchor\">#</a> 兼容性说明</h2> <ul><li>Vue.js <code>2.0.0</code>+</li></ul> <h2 id=\"直接下载-cdn\"><a href=\"#直接下载-cdn\" class=\"header-anchor\">#</a> 直接下载 / CDN</h2> <p><a href=\"https://unpkg.com/vue-i18n/dist/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\">https://unpkg.com/vue-i18n/dist/vue-i18n<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></p> <p><a href=\"https://unpkg.com\" target=\"_blank\" rel=\"noopener noreferrer\">unpkg.com<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以通过 <a href=\"https://unpkg.com/vue-i18n@8.9.0/dist/vue-i18n.js\" target=\"_blank\" rel=\"noopener noreferrer\">https://unpkg.com/vue-i18n@8.9.0/dist/vue-i18n.js<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> 这样的 URL 指定版本号或者 tag。</p> <p>在 Vue 之后引入 vue-i18n，它会自动安装：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>https://unpkg.com/vue/dist/vue.js<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>https://unpkg.com/vue-i18n/dist/vue-i18n.js<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"npm\"><a href=\"#npm\" class=\"header-anchor\">#</a> NPM</h2> <div class=\"language-sh extra-class\"><pre class=\"language-text\"><code>npm install vue-i18n\n</code></pre></div><h2 id=\"yarn\"><a href=\"#yarn\" class=\"header-anchor\">#</a> Yarn</h2> <div class=\"language-sh extra-class\"><pre class=\"language-text\"><code>yarn add vue-i18n\n</code></pre></div><p>如果在一个模块系统中使用它，你必须通过 <code>Vue.use()</code> 明确地安装 <code>vue-i18n</code>：</p> <div class=\"language-javascript extra-class\"><pre class=\"language-javascript\"><code><span class=\"token keyword\">import</span> Vue <span class=\"token keyword\">from</span> <span class=\"token string\">'vue'</span>\n<span class=\"token keyword\">import</span> VueI18n <span class=\"token keyword\">from</span> <span class=\"token string\">'vue-i18n'</span>\n\nVue<span class=\"token punctuation\">.</span><span class=\"token function\">use</span><span class=\"token punctuation\">(</span>VueI18n<span class=\"token punctuation\">)</span>\n</code></pre></div><p>如果使用全局的 script 标签，则无须如此 (手动安装)。</p> <h2 id=\"vue-cli-3-x\"><a href=\"#vue-cli-3-x\" class=\"header-anchor\">#</a> Vue Cli 3.x</h2> <div class=\"language-sh extra-class\"><pre class=\"language-text\"><code>vue add i18n\n</code></pre></div><p>你需要 Vue cli 3.x 作为先决条件，你可以在命令行上使用下面的命令来安装：</p> <div class=\"language-sh extra-class\"><pre class=\"language-text\"><code>npm install @vue/cli -g\n</code></pre></div><h2 id=\"开发版构建\"><a href=\"#开发版构建\" class=\"header-anchor\">#</a> 开发版构建</h2> <p>如果你想使用最新的开发版构建，就得从 GitHub 上直接 clone，然后自己构建一个 <code>vue-i18n</code>。</p> <div class=\"language-sh extra-class\"><pre class=\"language-text\"><code>git clone https://github.com/kazupon/vue-i18n.git node_modules/vue-i18n\ncd node_modules/vue-i18n\nnpm install # or `yarn`\nnpm run build  # or `yarn run build`\n</code></pre></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/zh/installation.md\" target=\"_blank\" rel=\"noopener noreferrer\">在 GitHub 上编辑此页</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">最近一次更新: </span> <span class=\"time\">3/27/2019, 11:07:32 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/zh/started.html\" class=\"prev\">\n          开始\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/zh/guide/formatting.html\">\n          格式化\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/62.88ef088f.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/zh/introduction.html",
    "content": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>介绍 | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n 是 Vue.js 的国际化插件\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/zh/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/introduction.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/introduction.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/introduction.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/introduction.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/introduction.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/introduction.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/zh/introduction.html\" class=\"active sidebar-link\">介绍</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/introduction.html#赞助商\" class=\"sidebar-link\">赞助商</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/introduction.html#成为一名-patreon-赞助商\" class=\"sidebar-link\">成为一名 Patreon 赞助商</a></li></ul></li><li><a href=\"/vue-i18n/zh/started.html\" class=\"sidebar-link\">开始</a></li><li><a href=\"/vue-i18n/zh/installation.html\" class=\"sidebar-link\">安装</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"sidebar-link\">格式化</a></li><li><a href=\"/vue-i18n/zh/guide/pluralization.html\" class=\"sidebar-link\">复数</a></li><li><a href=\"/vue-i18n/zh/guide/datetime.html\" class=\"sidebar-link\">日期时间本地化</a></li><li><a href=\"/vue-i18n/zh/guide/number.html\" class=\"sidebar-link\">数字本地化</a></li><li><a href=\"/vue-i18n/zh/guide/messages.html\" class=\"sidebar-link\">语言环境信息的语法</a></li><li><a href=\"/vue-i18n/zh/guide/fallback.html\" class=\"sidebar-link\">回退本地化</a></li><li><a href=\"/vue-i18n/zh/guide/component.html\" class=\"sidebar-link\">基于组件的本地化</a></li><li><a href=\"/vue-i18n/zh/guide/directive.html\" class=\"sidebar-link\">自定义指令本地化</a></li><li><a href=\"/vue-i18n/zh/guide/interpolation.html\" class=\"sidebar-link\">组件插值</a></li><li><a href=\"/vue-i18n/zh/guide/sfc.html\" class=\"sidebar-link\">单文件组件</a></li><li><a href=\"/vue-i18n/zh/guide/hot-reload.html\" class=\"sidebar-link\">热重载</a></li><li><a href=\"/vue-i18n/zh/guide/locale.html\" class=\"sidebar-link\">语言环境变更</a></li><li><a href=\"/vue-i18n/zh/guide/lazy-loading.html\" class=\"sidebar-link\">延迟加载翻译</a></li><li><a href=\"/vue-i18n/zh/guide/tooling.html\" class=\"sidebar-link\">工具</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/legacy/\" class=\"sidebar-link\">从 v5.x 迁移</a></li><li><a href=\"/vue-i18n/zh/legacy/v5.html\" class=\"sidebar-link\">v5.x 版本的文档</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"介绍\"><a href=\"#介绍\" class=\"header-anchor\">#</a> 介绍</h1> <div class=\"warning custom-block\"><p class=\"custom-block-title\">说明</p> <p>⚠️ 本文档适用于 Vue I18n v6.0 或更高版本. 如果你使用 v5.x，请参阅<a href=\"/vue-i18n/zh/legacy/\">旧版</a>部分。</p></div> <p>Vue I18n 是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。</p> <p>让我们<a href=\"/vue-i18n/zh/started.html\">开始吧</a></p> <h2 id=\"赞助商\"><a href=\"#赞助商\" class=\"header-anchor\">#</a> 赞助商</h2> <h3 id=\"白银赞助商\"><a href=\"#白银赞助商\" class=\"header-anchor\">#</a> 白银赞助商</h3> <p style=\"text-align: center;\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\"><img src=\"/vue-i18n/patrons/babeledit.png\"></a></p> <h2 id=\"成为一名-patreon-赞助商\"><a href=\"#成为一名-patreon-赞助商\" class=\"header-anchor\">#</a> 成为一名 Patreon 赞助商</h2> <p>贵公司是否使用 vue-i18n 或 vue-cli-plugin-i18n 来构建出色的应用程序？ 加入其他会员并成为赞助商，在此文档中添加你的徽标！在 Patreon 上支持我使我能够更少地完成工作并在免费开源软件上工作，例如 vue-i18n！ 谢谢！</p> <p style=\"text-align: center;\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\"><img src=\"https://c5.patreon.com/external/logo/become_a_patron_button.png\" alt=\"Become a Patreon\"></a></p></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/zh/introduction.md\" target=\"_blank\" rel=\"noopener noreferrer\">在 GitHub 上编辑此页</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">最近一次更新: </span> <span class=\"time\">4/29/2019, 6:44:18 PM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><!----> <span class=\"next\"><a href=\"/vue-i18n/zh/started.html\">\n          开始\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/63.b6e0a846.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/zh/legacy/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>从 v5.x 迁移 | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n 是 Vue.js 的国际化插件\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/64.f3210fad.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/zh/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/legacy/\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/legacy/\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/legacy/\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/legacy/\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/legacy/\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/legacy/\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/zh/introduction.html\" class=\"sidebar-link\">介绍</a></li><li><a href=\"/vue-i18n/zh/started.html\" class=\"sidebar-link\">开始</a></li><li><a href=\"/vue-i18n/zh/installation.html\" class=\"sidebar-link\">安装</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"sidebar-link\">格式化</a></li><li><a href=\"/vue-i18n/zh/guide/pluralization.html\" class=\"sidebar-link\">复数</a></li><li><a href=\"/vue-i18n/zh/guide/datetime.html\" class=\"sidebar-link\">日期时间本地化</a></li><li><a href=\"/vue-i18n/zh/guide/number.html\" class=\"sidebar-link\">数字本地化</a></li><li><a href=\"/vue-i18n/zh/guide/messages.html\" class=\"sidebar-link\">语言环境信息的语法</a></li><li><a href=\"/vue-i18n/zh/guide/fallback.html\" class=\"sidebar-link\">回退本地化</a></li><li><a href=\"/vue-i18n/zh/guide/component.html\" class=\"sidebar-link\">基于组件的本地化</a></li><li><a href=\"/vue-i18n/zh/guide/directive.html\" class=\"sidebar-link\">自定义指令本地化</a></li><li><a href=\"/vue-i18n/zh/guide/interpolation.html\" class=\"sidebar-link\">组件插值</a></li><li><a href=\"/vue-i18n/zh/guide/sfc.html\" class=\"sidebar-link\">单文件组件</a></li><li><a href=\"/vue-i18n/zh/guide/hot-reload.html\" class=\"sidebar-link\">热重载</a></li><li><a href=\"/vue-i18n/zh/guide/locale.html\" class=\"sidebar-link\">语言环境变更</a></li><li><a href=\"/vue-i18n/zh/guide/lazy-loading.html\" class=\"sidebar-link\">延迟加载翻译</a></li><li><a href=\"/vue-i18n/zh/guide/tooling.html\" class=\"sidebar-link\">工具</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/legacy/\" class=\"active sidebar-link\">从 v5.x 迁移</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/legacy/#全局配置\" class=\"sidebar-link\">全局配置</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/legacy/#全局方法\" class=\"sidebar-link\">全局方法</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/legacy/#构造函数选项\" class=\"sidebar-link\">构造函数选项</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/legacy/#实例属性\" class=\"sidebar-link\">实例属性</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/legacy/#特性\" class=\"sidebar-link\">特性</a></li></ul></li><li><a href=\"/vue-i18n/zh/legacy/v5.html\" class=\"sidebar-link\">v5.x 版本的文档</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"从-v5-x-迁移\"><a href=\"#从-v5-x-迁移\" class=\"header-anchor\">#</a> 从 v5.x 迁移</h1> <h2 id=\"全局配置\"><a href=\"#全局配置\" class=\"header-anchor\">#</a> 全局配置</h2> <h3 id=\"lang-已被替换\"><a href=\"#lang-已被替换\" class=\"header-anchor\">#</a> lang 已被替换</h3> <p>使用 <code>VueI18n</code> 类构造函数 <code>locale</code> 选项或 <code>VueI18n#locale</code> 属性：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code>  <span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n    locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token comment\">// ...</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n  <span class=\"token keyword\">const</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> i18n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n\n  <span class=\"token comment\">// 更改 locale</span>\n  i18n<span class=\"token punctuation\">.</span>locale <span class=\"token operator\">=</span> <span class=\"token string\">'ja'</span>\n  <span class=\"token comment\">// 或者</span>\n  app<span class=\"token punctuation\">.</span>$i18n<span class=\"token punctuation\">.</span>locale <span class=\"token operator\">=</span> <span class=\"token string\">'ja'</span>\n</code></pre></div><h3 id=\"fallbacklang-已被替换\"><a href=\"#fallbacklang-已被替换\" class=\"header-anchor\">#</a> fallbackLang 已被替换</h3> <p>使用 <code>VueI18n</code> 类构造函数 <code>fallbackLocale</code> 选项或 <code>VueI18n#fallbackLocale</code> 属性：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code>  <span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n    locale<span class=\"token operator\">:</span> <span class=\"token string\">'ja'</span><span class=\"token punctuation\">,</span>\n    fallbackLocale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token comment\">// ...</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n  <span class=\"token keyword\">const</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> i18n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n\n  <span class=\"token comment\">// 更改 fallback locale</span>\n  i18n<span class=\"token punctuation\">.</span>fallbackLocale <span class=\"token operator\">=</span> <span class=\"token string\">'zh'</span>\n  <span class=\"token comment\">// 或者</span>\n  app<span class=\"token punctuation\">.</span>$i18n<span class=\"token punctuation\">.</span>fallbackLocale <span class=\"token operator\">=</span> <span class=\"token string\">'zh'</span>\n</code></pre></div><h3 id=\"missinghandler-已被替换\"><a href=\"#missinghandler-已被替换\" class=\"header-anchor\">#</a> missingHandler 已被替换</h3> <p>使用 <code>VueI18n</code> 类构造函数 <code>missing</code> 选项或 <code>VueI18n#missing</code> 属性：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// ...</span>\n  <span class=\"token function-variable function\">missing</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">locale<span class=\"token punctuation\">,</span> key<span class=\"token punctuation\">,</span> vm</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">// 处理翻译缺失</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">const</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> i18n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// 改变丢失的处理函数</span>\ni18n<span class=\"token punctuation\">.</span><span class=\"token function-variable function\">missing</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">locale<span class=\"token punctuation\">,</span> key<span class=\"token punctuation\">,</span> vm</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// 处理翻译缺失</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token comment\">// or</span>\napp<span class=\"token punctuation\">.</span>$i18n<span class=\"token punctuation\">.</span><span class=\"token function-variable function\">missing</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">locale<span class=\"token punctuation\">,</span> key<span class=\"token punctuation\">,</span> vm</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// 处理翻译缺失</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><h3 id=\"i18nformatter-已被替换\"><a href=\"#i18nformatter-已被替换\" class=\"header-anchor\">#</a> i18nFormatter 已被替换</h3> <p>使用 <code>VueI18n</code> 类构造函数 <code>formatter</code> 选项或 <code>VueI18n#formatter</code> 属性：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code>  <span class=\"token keyword\">class</span> <span class=\"token class-name\">CustomFormatter</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token function\">format</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">message<span class=\"token punctuation\">,</span> <span class=\"token operator\">...</span>values</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token comment\">// 一些渲染逻辑</span>\n      <span class=\"token keyword\">return</span> <span class=\"token string\">'something string'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">// ...</span>\n    formatter<span class=\"token operator\">:</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">CustomFormatter</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n    <span class=\"token comment\">// ...</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n  <span class=\"token keyword\">const</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> i18n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n\n  <span class=\"token comment\">// 更改自定义格式化程序</span>\n  i18n<span class=\"token punctuation\">.</span>formatter <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token function-variable function\">format</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">message<span class=\"token punctuation\">,</span> <span class=\"token operator\">...</span>values</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token comment\">// 一些渲染逻辑</span>\n      <span class=\"token keyword\">return</span> <span class=\"token string\">'something string'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token comment\">// or</span>\n  app<span class=\"token punctuation\">.</span>$i18n<span class=\"token punctuation\">.</span>formatter <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token function-variable function\">format</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">message<span class=\"token punctuation\">,</span> <span class=\"token operator\">...</span>values</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token comment\">// 一些渲染逻辑</span>\n      <span class=\"token keyword\">return</span> <span class=\"token string\">'something string'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n</code></pre></div><h2 id=\"全局方法\"><a href=\"#全局方法\" class=\"header-anchor\">#</a> 全局方法</h2> <h3 id=\"vue-locale-已被替换\"><a href=\"#vue-locale-已被替换\" class=\"header-anchor\">#</a> Vue.locale 已被替换</h3> <p>使用 <code>VueI18n</code> 类构造函数 <code>messages</code> 选项，或者使用 <code>VueI18n#GetLocaleMessage</code> / <code>VueI18n#setLocaleMessage</code> 方法：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code>  <span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">// ...</span>\n    messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        hello<span class=\"token operator\">:</span> <span class=\"token string\">'hello world'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token comment\">// ...</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      ja<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        hello<span class=\"token operator\">:</span> <span class=\"token string\">'こんにちは、世界'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token comment\">// ...</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token comment\">// ...</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n  <span class=\"token keyword\">const</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> i18n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n\n  <span class=\"token comment\">// 获取 locale message</span>\n  <span class=\"token keyword\">const</span> en <span class=\"token operator\">=</span> i18n<span class=\"token punctuation\">.</span><span class=\"token function\">getLocaleMessage</span><span class=\"token punctuation\">(</span><span class=\"token string\">'en'</span><span class=\"token punctuation\">)</span>\n  en<span class=\"token punctuation\">.</span>greeting <span class=\"token operator\">=</span> <span class=\"token string\">'hi!'</span>\n  <span class=\"token comment\">// 设置 locale message</span>\n  i18n<span class=\"token punctuation\">.</span><span class=\"token function\">setLocaleMessage</span><span class=\"token punctuation\">(</span><span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span> en<span class=\"token punctuation\">)</span>\n  <span class=\"token comment\">// 或者</span>\n  <span class=\"token keyword\">const</span> ja <span class=\"token operator\">=</span> app<span class=\"token punctuation\">.</span>$i18n<span class=\"token punctuation\">.</span><span class=\"token function\">getLocaleMessage</span><span class=\"token punctuation\">(</span><span class=\"token string\">'ja'</span><span class=\"token punctuation\">)</span>\n  ja<span class=\"token punctuation\">.</span>greeting <span class=\"token operator\">=</span> <span class=\"token string\">'やあ！'</span>\n  app<span class=\"token punctuation\">.</span>$i18n<span class=\"token punctuation\">.</span><span class=\"token function\">setLocaleMessage</span><span class=\"token punctuation\">(</span><span class=\"token string\">'ja'</span><span class=\"token punctuation\">,</span> ja<span class=\"token punctuation\">)</span>\n</code></pre></div><h3 id=\"vue-t-已被替换\"><a href=\"#vue-t-已被替换\" class=\"header-anchor\">#</a> Vue.t 已被替换</h3> <p>使用 <code>VueI18n#t</code> 方法：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      greeting<span class=\"token operator\">:</span> <span class=\"token string\">'hi {name}'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\ni18n<span class=\"token punctuation\">.</span><span class=\"token function\">t</span><span class=\"token punctuation\">(</span><span class=\"token string\">'greeting'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span> name<span class=\"token operator\">:</span> <span class=\"token string\">'kazupon'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// -&gt; hi kazupon</span>\n</code></pre></div><h3 id=\"vue-tc-已被替换\"><a href=\"#vue-tc-已被替换\" class=\"header-anchor\">#</a> Vue.tc 已被替换</h3> <p>使用 <code>VueI18n#tc</code> 方法：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      apple<span class=\"token operator\">:</span> <span class=\"token string\">'no apples | one apple | {count} apples'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token keyword\">const</span> count <span class=\"token operator\">=</span> <span class=\"token number\">10</span>\ni18n<span class=\"token punctuation\">.</span><span class=\"token function\">tc</span><span class=\"token punctuation\">(</span><span class=\"token string\">'apple'</span><span class=\"token punctuation\">,</span> count<span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span> count <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// -&gt; 10 apples</span>\n</code></pre></div><h3 id=\"vue-te-已被替换\"><a href=\"#vue-te-已被替换\" class=\"header-anchor\">#</a> Vue.te 已被替换</h3> <p>使用 <code>VueI18n#te</code> 方法：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      hello<span class=\"token operator\">:</span> <span class=\"token string\">'hello world'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\ni18n<span class=\"token punctuation\">.</span><span class=\"token function\">te</span><span class=\"token punctuation\">(</span><span class=\"token string\">'hello'</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// -&gt; true</span>\ni18n<span class=\"token punctuation\">.</span><span class=\"token function\">te</span><span class=\"token punctuation\">(</span><span class=\"token string\">'hallo'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'ja'</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// -&gt; false</span>\ni18n<span class=\"token punctuation\">.</span><span class=\"token function\">te</span><span class=\"token punctuation\">(</span><span class=\"token string\">'hello'</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// -&gt; true</span>\n</code></pre></div><h2 id=\"构造函数选项\"><a href=\"#构造函数选项\" class=\"header-anchor\">#</a> 构造函数选项</h2> <h3 id=\"locales-已被替换\"><a href=\"#locales-已被替换\" class=\"header-anchor\">#</a> locales 已被替换</h3> <p>使用 <code>messages</code> 的 <code>VueI18n</code> 类的构造函数的选项，或 <code>messages</code> 的 <code>i18n</code> 选项 (针对组件选项)：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      greeting<span class=\"token operator\">:</span> <span class=\"token string\">'hi {name}'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// 针对组件选项</span>\n<span class=\"token keyword\">const</span> Component1 <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  i18n<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    messages<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        title<span class=\"token operator\">:</span> <span class=\"token string\">'Title1'</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div><h2 id=\"实例属性\"><a href=\"#实例属性\" class=\"header-anchor\">#</a> 实例属性</h2> <h3 id=\"lang-已被替换-2\"><a href=\"#lang-已被替换-2\" class=\"header-anchor\">#</a> $lang 已被替换</h3> <p>使用 <code>VueI18n#locale</code> 属性：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">// ...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">const</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> i18n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// 更改 locale</span>\ni18n<span class=\"token punctuation\">.</span>locale <span class=\"token operator\">=</span> <span class=\"token string\">'ja'</span>\n<span class=\"token comment\">// 或者</span>\napp<span class=\"token punctuation\">.</span>$i18n<span class=\"token punctuation\">.</span>locale <span class=\"token operator\">=</span> <span class=\"token string\">'ja'</span>\n</code></pre></div><h2 id=\"特性\"><a href=\"#特性\" class=\"header-anchor\">#</a> 特性</h2> <h3 id=\"已删除动态语言环境\"><a href=\"#已删除动态语言环境\" class=\"header-anchor\">#</a> 已删除动态语言环境</h3> <p>如果需要动态设置语言环境信息，则应实现以下内容：</p> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> locale<span class=\"token operator\">:</span> <span class=\"token string\">'en'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">const</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  i18n<span class=\"token punctuation\">,</span>\n  data<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> loading<span class=\"token operator\">:</span> <span class=\"token string\">''</span> <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">loadLocaleMessage</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">locale<span class=\"token punctuation\">,</span> cb</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">return</span> <span class=\"token function\">fetch</span><span class=\"token punctuation\">(</span><span class=\"token string\">'/locales/'</span> <span class=\"token operator\">+</span> locale<span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n    method<span class=\"token operator\">:</span> <span class=\"token string\">'get'</span><span class=\"token punctuation\">,</span>\n    headers<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token string\">'Accept'</span><span class=\"token operator\">:</span> <span class=\"token string\">'application/json'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string\">'Content-Type'</span><span class=\"token operator\">:</span> <span class=\"token string\">'application/json'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">then</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">res</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> res<span class=\"token punctuation\">.</span><span class=\"token function\">json</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">then</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">json</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>Object<span class=\"token punctuation\">.</span><span class=\"token function\">keys</span><span class=\"token punctuation\">(</span>json<span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span>length <span class=\"token operator\">===</span> <span class=\"token number\">0</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword\">return</span> Promise<span class=\"token punctuation\">.</span><span class=\"token function\">reject</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">new</span> <span class=\"token class-name\">Error</span><span class=\"token punctuation\">(</span><span class=\"token string\">'locale empty !!'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n    <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword\">return</span> Promise<span class=\"token punctuation\">.</span><span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span>json<span class=\"token punctuation\">)</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">then</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">message</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token function\">cb</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">null</span><span class=\"token punctuation\">,</span> message<span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">catch</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">error</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token function\">cb</span><span class=\"token punctuation\">(</span>error<span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\napp<span class=\"token punctuation\">.</span>loading <span class=\"token operator\">=</span> <span class=\"token string\">'loading ...'</span>\n<span class=\"token function\">loadLocaleMessage</span><span class=\"token punctuation\">(</span><span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">err<span class=\"token punctuation\">,</span> message</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>err<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    app<span class=\"token punctuation\">.</span>loading <span class=\"token operator\">=</span> <span class=\"token string\">''</span>\n    console<span class=\"token punctuation\">.</span><span class=\"token function\">error</span><span class=\"token punctuation\">(</span>err<span class=\"token punctuation\">)</span>\n    <span class=\"token keyword\">return</span>\n  <span class=\"token punctuation\">}</span>\n  i18n<span class=\"token punctuation\">.</span><span class=\"token function\">setLocaleMessage</span><span class=\"token punctuation\">(</span><span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span> message<span class=\"token punctuation\">)</span>\n  app<span class=\"token punctuation\">.</span>loading <span class=\"token operator\">=</span> <span class=\"token string\">''</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n</code></pre></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/zh/legacy/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">在 GitHub 上编辑此页</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">最近一次更新: </span> <span class=\"time\">3/27/2019, 11:07:32 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/zh/guide/tooling.html\" class=\"prev\">\n          工具\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/zh/legacy/v5.html\">\n          v5.x 版本的文档\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/64.f3210fad.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/zh/legacy/v5.html",
    "content": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>v5.x 版本的文档 | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n 是 Vue.js 的国际化插件\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/65.afac79e3.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/zh/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/legacy/v5.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/legacy/v5.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/legacy/v5.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/legacy/v5.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/legacy/v5.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/legacy/v5.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/zh/introduction.html\" class=\"sidebar-link\">介绍</a></li><li><a href=\"/vue-i18n/zh/started.html\" class=\"sidebar-link\">开始</a></li><li><a href=\"/vue-i18n/zh/installation.html\" class=\"sidebar-link\">安装</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"sidebar-link\">格式化</a></li><li><a href=\"/vue-i18n/zh/guide/pluralization.html\" class=\"sidebar-link\">复数</a></li><li><a href=\"/vue-i18n/zh/guide/datetime.html\" class=\"sidebar-link\">日期时间本地化</a></li><li><a href=\"/vue-i18n/zh/guide/number.html\" class=\"sidebar-link\">数字本地化</a></li><li><a href=\"/vue-i18n/zh/guide/messages.html\" class=\"sidebar-link\">语言环境信息的语法</a></li><li><a href=\"/vue-i18n/zh/guide/fallback.html\" class=\"sidebar-link\">回退本地化</a></li><li><a href=\"/vue-i18n/zh/guide/component.html\" class=\"sidebar-link\">基于组件的本地化</a></li><li><a href=\"/vue-i18n/zh/guide/directive.html\" class=\"sidebar-link\">自定义指令本地化</a></li><li><a href=\"/vue-i18n/zh/guide/interpolation.html\" class=\"sidebar-link\">组件插值</a></li><li><a href=\"/vue-i18n/zh/guide/sfc.html\" class=\"sidebar-link\">单文件组件</a></li><li><a href=\"/vue-i18n/zh/guide/hot-reload.html\" class=\"sidebar-link\">热重载</a></li><li><a href=\"/vue-i18n/zh/guide/locale.html\" class=\"sidebar-link\">语言环境变更</a></li><li><a href=\"/vue-i18n/zh/guide/lazy-loading.html\" class=\"sidebar-link\">延迟加载翻译</a></li><li><a href=\"/vue-i18n/zh/guide/tooling.html\" class=\"sidebar-link\">工具</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading open\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/legacy/\" class=\"sidebar-link\">从 v5.x 迁移</a></li><li><a href=\"/vue-i18n/zh/legacy/v5.html\" class=\"active sidebar-link\">v5.x 版本的文档</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"v5-x-版本的文档\"><a href=\"#v5-x-版本的文档\" class=\"header-anchor\">#</a> v5.x 版本的文档</h1> <ul><li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/installation.md\" target=\"_blank\" rel=\"noopener noreferrer\">Installation<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li> <li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/started.md\" target=\"_blank\" rel=\"noopener noreferrer\">Getting Started<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li> <li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/formatting.md\" target=\"_blank\" rel=\"noopener noreferrer\">Formatting<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li> <li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/pluralization.md\" target=\"_blank\" rel=\"noopener noreferrer\">Pluralization<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li> <li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/syntax.md\" target=\"_blank\" rel=\"noopener noreferrer\">Locale and Keypath Syntax<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li> <li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/linked.md\" target=\"_blank\" rel=\"noopener noreferrer\">Linked Translation<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li> <li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/fallback.md\" target=\"_blank\" rel=\"noopener noreferrer\">Fallback Translation<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li> <li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/component.md\" target=\"_blank\" rel=\"noopener noreferrer\">Component Locale<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li> <li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/dynamic.md\" target=\"_blank\" rel=\"noopener noreferrer\">Dynamic Locale<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li> <li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/hot-reload.md\" target=\"_blank\" rel=\"noopener noreferrer\">Hot reload<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li> <li><a href=\"https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/api.md\" target=\"_blank\" rel=\"noopener noreferrer\">API References<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/zh/legacy/v5.md\" target=\"_blank\" rel=\"noopener noreferrer\">在 GitHub 上编辑此页</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">最近一次更新: </span> <span class=\"time\">7/22/2019, 1:03:00 PM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/zh/legacy/\" class=\"prev router-link-active\">\n          从 v5.x 迁移\n        </a></span> <!----></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/65.afac79e3.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/zh/started.html",
    "content": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <title>开始 | Vue I18n</title>\n    <meta name=\"description\" content=\"Vue I18n 是 Vue.js 的国际化插件\">\n    <meta name=\"theme-color\" content=\"#3eaf7c\">\n    \n    <link rel=\"preload\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\" as=\"style\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/app.5b04e7b0.js\" as=\"script\"><link rel=\"preload\" href=\"/vue-i18n/assets/js/66.d403fc3a.js\" as=\"script\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/10.13689381.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/11.aa13f293.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/12.2b21ead8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/13.b3706367.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/14.1819508a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/15.12152ec7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/16.c251473e.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/17.311179bd.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/18.a9d0f1d4.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/19.d0288f09.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/2.aa910774.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/20.9de38e10.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/21.65715f7c.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/22.7b59f449.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/23.11ece4c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/24.dffd1071.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/25.97b69148.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/26.616f0814.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/27.adf21b94.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/28.6bf6d42b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/29.e8b42909.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/3.5e63523d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/30.24889fb9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/31.57bd94a5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/32.14dc9bdc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/33.4d59e7bf.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/34.adc9b2af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/35.4e6e5ad7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/36.7b1eb244.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/37.6584773d.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/38.7879de31.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/39.f7496f35.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/4.9735c0af.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/40.b5b5dc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/41.638a9c02.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/42.222a2780.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/43.b28cd4fc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/44.67f64685.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/45.550cbef0.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/46.5ab1c570.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/47.d7b6ca42.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/48.185bface.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/49.1570bc72.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/5.0b14e886.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/50.0e187269.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/51.c993f5c3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/52.d66b2adb.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/53.21ae73c5.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/54.cd4c9ca8.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/55.caa71074.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/56.c8f906b3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/57.388c89dc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/58.ad6e14bc.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/59.3d64068b.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/6.b88753f1.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/60.12bfe8e9.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/61.446dac92.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/62.88ef088f.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/63.b6e0a846.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/64.f3210fad.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/65.afac79e3.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/67.0bffd98a.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/7.eaeacaf7.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/8.344bd519.js\"><link rel=\"prefetch\" href=\"/vue-i18n/assets/js/9.ec02aae8.js\">\n    <link rel=\"stylesheet\" href=\"/vue-i18n/assets/css/0.styles.c299b601.css\">\n  </head>\n  <body>\n    <div id=\"app\" data-server-rendered=\"true\"><div class=\"theme-container\"><header class=\"navbar\"><div class=\"sidebar-button\"><svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" viewBox=\"0 0 448 512\" class=\"icon\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg></div> <a href=\"/vue-i18n/zh/\" class=\"home-link router-link-active\"><!----> <span class=\"site-name\">Vue I18n</span></a> <div class=\"links\" style=\"max-width:nullpx;\"><div class=\"search-box\"><input aria-label=\"Search\" autocomplete=\"off\" spellcheck=\"false\" value=\"\"> <!----></div> <nav class=\"nav-links can-hide\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/started.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/started.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/started.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav></div></header> <div class=\"sidebar-mask\"></div> <div class=\"sidebar\"><nav class=\"nav-links\"><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">学习</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"nav-link\">指南</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/api/\" class=\"nav-link\">API</a></li></ul></div></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">生态</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><h4>官方工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-cli-plugin-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  脚手架插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-loader\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  Webpack Loader\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://intlify.github.io/eslint-plugin-vue-i18n/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  ESLint 插件\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li><li class=\"dropdown-subitem\"><a href=\"https://github.com/kazupon/vue-i18n-extensions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  扩展\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li><li class=\"dropdown-item\"><h4>翻译工具</h4> <ul class=\"dropdown-subitem-wrapper\"><li class=\"dropdown-subitem\"><a href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  BabelEdit\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></li></ul></li></ul></div></div><div class=\"nav-item\"><a href=\"https://www.patreon.com/kazupon\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  赞助\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><a href=\"https://github.com/kazupon/vue-i18n/releases\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"nav-link external\">\n  发布日志\n  <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></div><div class=\"nav-item\"><div class=\"dropdown-wrapper\"><a class=\"dropdown-title\"><span class=\"title\">选择语言</span> <span class=\"arrow right\"></span></a> <ul class=\"nav-dropdown\" style=\"display:none;\"><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/started.html\" class=\"nav-link\">English</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/zh/started.html\" class=\"nav-link router-link-exact-active router-link-active\">简体中文</a></li><li class=\"dropdown-item\"><!----> <a href=\"/vue-i18n/ru/started.html\" class=\"nav-link\">Русский</a></li></ul></div></div> <a href=\"https://github.com/kazupon/vue-i18n\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"repo-link\">\n    GitHub\n    <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a></nav>  <ul class=\"sidebar-links\"><li><a href=\"/vue-i18n/zh/introduction.html\" class=\"sidebar-link\">介绍</a></li><li><a href=\"/vue-i18n/zh/started.html\" class=\"active sidebar-link\">开始</a><ul class=\"sidebar-sub-headers\"><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/started.html#html\" class=\"sidebar-link\">HTML</a></li><li class=\"sidebar-sub-header\"><a href=\"/vue-i18n/zh/started.html#javascript\" class=\"sidebar-link\">JavaScript</a></li></ul></li><li><a href=\"/vue-i18n/zh/installation.html\" class=\"sidebar-link\">安装</a></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Guide</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/guide/formatting.html\" class=\"sidebar-link\">格式化</a></li><li><a href=\"/vue-i18n/zh/guide/pluralization.html\" class=\"sidebar-link\">复数</a></li><li><a href=\"/vue-i18n/zh/guide/datetime.html\" class=\"sidebar-link\">日期时间本地化</a></li><li><a href=\"/vue-i18n/zh/guide/number.html\" class=\"sidebar-link\">数字本地化</a></li><li><a href=\"/vue-i18n/zh/guide/messages.html\" class=\"sidebar-link\">语言环境信息的语法</a></li><li><a href=\"/vue-i18n/zh/guide/fallback.html\" class=\"sidebar-link\">回退本地化</a></li><li><a href=\"/vue-i18n/zh/guide/component.html\" class=\"sidebar-link\">基于组件的本地化</a></li><li><a href=\"/vue-i18n/zh/guide/directive.html\" class=\"sidebar-link\">自定义指令本地化</a></li><li><a href=\"/vue-i18n/zh/guide/interpolation.html\" class=\"sidebar-link\">组件插值</a></li><li><a href=\"/vue-i18n/zh/guide/sfc.html\" class=\"sidebar-link\">单文件组件</a></li><li><a href=\"/vue-i18n/zh/guide/hot-reload.html\" class=\"sidebar-link\">热重载</a></li><li><a href=\"/vue-i18n/zh/guide/locale.html\" class=\"sidebar-link\">语言环境变更</a></li><li><a href=\"/vue-i18n/zh/guide/lazy-loading.html\" class=\"sidebar-link\">延迟加载翻译</a></li><li><a href=\"/vue-i18n/zh/guide/tooling.html\" class=\"sidebar-link\">工具</a></li></ul></div></li><li><div class=\"sidebar-group\"><p class=\"sidebar-heading\"><span>Legacy</span> <!----></p> <ul class=\"sidebar-group-items\"><li><a href=\"/vue-i18n/zh/legacy/\" class=\"sidebar-link\">从 v5.x 迁移</a></li><li><a href=\"/vue-i18n/zh/legacy/v5.html\" class=\"sidebar-link\">v5.x 版本的文档</a></li></ul></div></li></ul> </div> <div class=\"page\"> <div class=\"content\"><h1 id=\"开始\"><a href=\"#开始\" class=\"header-anchor\">#</a> 开始</h1> <div class=\"tip custom-block\"><p class=\"custom-block-title\">说明</p> <p>我们将在指南中的代码示例中使用 <a href=\"https://github.com/lukehoban/es6features\" target=\"_blank\" rel=\"noopener noreferrer\">ES2015<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></a> 语法。</p></div> <h2 id=\"html\"><a href=\"#html\" class=\"header-anchor\">#</a> HTML</h2> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>https://unpkg.com/vue/dist/vue.js<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>https://unpkg.com/vue-i18n/dist/vue-i18n.js<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">&gt;</span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>{{ $t(&quot;message.hello&quot;) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div><h2 id=\"javascript\"><a href=\"#javascript\" class=\"header-anchor\">#</a> JavaScript</h2> <div class=\"language-js extra-class\"><pre class=\"language-js\"><code><span class=\"token comment\">// 如果使用模块系统 (例如通过 vue-cli)，则需要导入 Vue 和 VueI18n ，然后调用 Vue.use(VueI18n)。</span>\n<span class=\"token comment\">// import Vue from 'vue'</span>\n<span class=\"token comment\">// import VueI18n from 'vue-i18n'</span>\n<span class=\"token comment\">//</span>\n<span class=\"token comment\">// Vue.use(VueI18n)</span>\n\n<span class=\"token comment\">// 准备翻译的语言环境信息</span>\n<span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  en<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      hello<span class=\"token operator\">:</span> <span class=\"token string\">'hello world'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  ja<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    message<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      hello<span class=\"token operator\">:</span> <span class=\"token string\">'こんにちは、世界'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token comment\">// 通过选项创建 VueI18n 实例</span>\n<span class=\"token keyword\">const</span> i18n <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">VueI18n</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  locale<span class=\"token operator\">:</span> <span class=\"token string\">'ja'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 设置地区</span>\n  messages<span class=\"token punctuation\">,</span> <span class=\"token comment\">// 设置地区信息</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n\n<span class=\"token comment\">// 通过 `i18n` 选项创建 Vue 实例</span>\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> i18n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">$mount</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#app'</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// 现在应用程序已经准备好了！</span>\n</code></pre></div><p>输出如下：</p> <div class=\"language-html extra-class\"><pre class=\"language-html\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">&quot;</span>#app<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">&gt;</span></span>こんにちは、世界<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre></div></div> <div class=\"page-edit\"><div class=\"edit-link\"><a href=\"https://github.com/kazupon/vue-i18n/edit/master/vuepress/zh/started.md\" target=\"_blank\" rel=\"noopener noreferrer\">在 GitHub 上编辑此页</a> <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path> <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg></div> <div class=\"last-updated\"><span class=\"prefix\">最近一次更新: </span> <span class=\"time\">3/27/2019, 11:07:32 AM</span></div></div> <div class=\"page-nav\"><p class=\"inner\"><span class=\"prev\">\n        ←\n        <a href=\"/vue-i18n/zh/introduction.html\" class=\"prev\">\n          介绍\n        </a></span> <span class=\"next\"><a href=\"/vue-i18n/zh/installation.html\">\n          安装\n        </a>\n        →\n      </span></p></div> </div> <!----></div></div>\n    <script src=\"/vue-i18n/assets/js/app.5b04e7b0.js\" defer></script><script src=\"/vue-i18n/assets/js/66.d403fc3a.js\" defer></script>\n  </body>\n</html>\n"
  },
  {
    "path": "examples/.eslintrc.js",
    "content": "module.exports = {\n  root: true,\n  parserOptions: {\n    ecmaVersion: 2018,\n  },\n  extends: [\n    'plugin:vue-libs/recommended',\n  ],\n}\n"
  },
  {
    "path": "examples/component/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"utf-8\">\n    <title>component based translation</title>\n    <script src=\"../../node_modules/vue/dist/vue.min.js\"></script>\n    <script src=\"../../dist/vue-i18n.min.js\"></script>\n  </head>\n  <body>\n    <div id=\"app\">\n      <p>{{ $t(\"message.hello\") }}</p>\n      <component1></component1>\n    </div>\n    <script>\n      Vue.use(VueI18n)\n\n      var i18n = new VueI18n({\n        locale: 'ja',\n        messages: {\n          en: {\n            message: {\n              hello: 'hello world',\n              greeting: 'good morning, world!'\n            }\n          },\n          ja: {\n            message: {\n              hello: 'こんにちは、世界',\n              greeting: 'おはよう、世界！'\n            }\n          }\n        }\n      })\n\n      var Component1 = {\n        template: '<div class=\"container\">' +\n          '<p>Component1 locale messages: {{ $t(\"message.hello\") }}</p>' +\n          '<p>Fallback global locale messages: {{ $t(\"message.greeting\") }}</p>' +\n          '</div>',\n        i18n: {\n          messages: {\n            en: { message: { hello: 'hello component1' } },\n            ja: { message: { hello: 'こんにちは、component1' } }\n          }\n        }\n      }\n      \n      new Vue({\n        i18n: i18n,\n        components: {\n          component1: Component1\n        }\n      }).$mount('#app')\n    \n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "examples/datetime/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"utf-8\">\n    <title>datetime localization</title>\n    <script src=\"../../node_modules/vue/dist/vue.min.js\"></script>\n    <script src=\"../../dist/vue-i18n.min.js\"></script>\n    <script src=\"https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.ja,Intl.~locale.en\"></script>\n  </head>\n  <body>\n    <div id=\"app\">\n      <select v-model=\"locale\">\n        <option value=\"en-US\">en-US</option>\n        <option value=\"ja-JP\">ja-JP</option>\n      </select>\n      <p>{{ $t('current_datetime')}}: {{ $d(now, 'long') }}</p>\n      <p data-testid=\"pastDatetime\">{{ $t('past_datetime')}}: {{ $d(pastDatetime, 'long') }}</p>\n      <p data-testid=\"pastYear\">{{ $t('past_year')}}: {{ $d(pastDatetime, {year: '2-digit'}) }}</p>\n    </div>\n    <script>\n      var messages = {\n        'en-US': {\n          current_datetime: 'current datetime',\n          past_datetime: 'past datetime',\n          past_year: 'past year'\n        },\n        'ja-JP': {\n          current_datetime: '現在の日時',\n          past_datetime: '過去の日時',\n          past_year: '過去の年'\n        }\n      }\n      var dateTimeFormats = {\n        'en-US': {\n          long: {\n            year: 'numeric', month: '2-digit', day: '2-digit',\n            hour: '2-digit', minute: '2-digit', second: '2-digit',\n            timeZone: 'America/Los_Angeles'\n          }\n        },\n        'ja-JP': {\n          long: {\n            year: 'numeric', month: '2-digit', day: '2-digit',\n            hour: '2-digit', minute: '2-digit', second: '2-digit',\n            hour12: true,\n            timeZone: 'Asia/Tokyo'\n          }\n        }\n      }\n      \n      Vue.use(VueI18n)\n\n      var initial = 'ja-JP'\n      var i18n = new VueI18n({\n        locale: initial,\n        messages: messages,\n        dateTimeFormats: dateTimeFormats\n      })\n\n      var vm = new Vue({\n        i18n: i18n,\n        data: {\n          locale: initial,\n          now: new Date(),\n          pastDatetime: new Date(Date.UTC(2012, 11, 20, 3, 0, 0))\n        },\n        watch: {\n          locale: function (val) {\n            this.$i18n.locale = val\n          }\n        }\n      }).$mount('#app')\n      \n      setInterval(function () {\n        vm.now = new Date()\n      }, 1000)\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "examples/directive/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"utf-8\">\n    <title>custom directive example</title>\n    <script src=\"../../node_modules/vue/dist/vue.js\"></script>\n    <script src=\"../../dist/vue-i18n.js\"></script>\n  </head>\n  <body>\n    <div id=\"string-syntax\">\n      <p v-t=\"'hello'\"></p>\n      <p v-t=\"path\"></p>\n    </div>\n    <div id=\"object-syntax\">\n      <p v-t=\"{ path: 'hello', locale: 'ja', args: { name: 'kazupon' } }\"></p>\n      <p v-t=\"{ path: path, args: { name: nickName } }\"></p>\n    </div>\n    <div id=\"in-transitions\">\n      <p>\n        <transition name=\"fade\">\n          <span v-if=\"toggle\" v-t=\"'clean'\" class=\"red-bg\"></span>\n        </transition>\n        <transition name=\"fade\">\n          <span v-if=\"toggle\" v-t.preserve=\"'preserve'\" class=\"red-bg\"></span>\n        </transition>\n      </p>\n      <button @click=\"toggle = !toggle\">Toggle</button>\n    </div>\n    <script>\n      // string syntax example\n      new Vue({\n        i18n: new VueI18n({\n          locale: 'en',\n          messages: {\n            en: { hello: 'hi there!' },\n            ja: { hello: 'こんにちは！' }\n          }\n        }),\n        data: { path: 'hello' }\n      }).$mount('#string-syntax')\n\n      // object syntax example\n      new Vue({\n        i18n: new VueI18n({\n          locale: 'en',\n          messages: {\n            en: { hello: 'hi {name}!' },\n            ja: { hello: 'こんにちは、{name}！' }\n          }\n        }),\n        computed: {\n          nickName () { return 'kazupon' }\n        },\n        data: { path: 'hello' }\n      }).$mount('#object-syntax')\n\n      // use in transitions example\n      new Vue({\n        i18n: new VueI18n({\n          locale: 'en',\n          messages: {\n            en: {\n              clean: 'without preserve',\n              preserve: 'with preserve'\n            },\n          }\n        }),\n        data: { toggle: true }\n      }).$mount('#in-transitions')\n    </script>\n    <style>\n      .fade-enter-active,\n      .fade-leave-active {\n        transition: opacity 1s;\n      }\n      .fade-enter,\n      .fade-leave-to {\n        opacity: 0;\n      }\n\n      .red-bg {\n        background-color: red;\n        padding: 5px;\n      }\n    </style>\n  </body>\n</html>\n"
  },
  {
    "path": "examples/es-modules/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"utf-8\">\n    <title>ES modules browser example</title>\n  </head>\n  <body>\n    <div id=\"app\">\n      <p>{{ $t('message.hello') }}</p>\n    </div>\n    <script type=\"module\">\n      import Vue from 'https://unpkg.com/vue@2.6.10/dist/vue.esm.browser.js'\n      import VueI18n from 'https://unpkg.com/vue-i18n@8.11.1/dist/vue-i18n.esm.browser.js'\n\n      Vue.use(VueI18n)\n\n      new Vue({\n        i18n: new VueI18n({\n          locale: 'en',\n          messages: {\n            en: {\n              message: {\n                hello: 'hello, ES modules Vue I18n!'\n              }\n            }\n          }\n        })\n      }).$mount('#app')\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "examples/formatting/custom/.gitignore",
    "content": ".DS_Store\nnode_modules\n/dist\n\n# local env files\n.env.local\n.env.*.local\n\n# Log files\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Editor directories and files\n.idea\n.vscode\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\n"
  },
  {
    "path": "examples/formatting/custom/README.md",
    "content": "# vue-i18n-custom-formatter-example\n\nCustom formatter example for vue-i18n\n\n> :warning: You must use [the ECMA-402 (Intl) support browser](http://kangax.github.io/compat-table/esintl/) due to try this example\n\n## Project setup\n```\nnpm install\n```\n\n### Compiles and hot-reloads for development\n```\nnpm run serve\n```\n\n### Compiles and minifies for production\n```\nnpm run build\n```\n\n### Customize configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n"
  },
  {
    "path": "examples/formatting/custom/babel.config.js",
    "content": "module.exports = {\n  presets: [\n    '@vue/app'\n  ]\n}\n"
  },
  {
    "path": "examples/formatting/custom/package.json",
    "content": "{\n  \"name\": \"vue-i18n-custom-formatter-example\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"serve\": \"vue-cli-service serve\",\n    \"build\": \"vue-cli-service build\"\n  },\n  \"dependencies\": {\n    \"core-js\": \"^3.6.4\",\n    \"messageformat\": \"^3.0.0-beta.1\",\n    \"vue\": \"^2.6.11\",\n    \"vue-i18n\": \"^8.15.3\"\n  },\n  \"devDependencies\": {\n    \"@vue/cli-plugin-babel\": \"^4.2.2\",\n    \"@vue/cli-service\": \"^4.2.2\",\n    \"vue-template-compiler\": \"^2.6.11\"\n  },\n  \"postcss\": {\n    \"plugins\": {\n      \"autoprefixer\": {}\n    }\n  },\n  \"browserslist\": [\n    \"> 1%\",\n    \"last 2 versions\"\n  ]\n}\n"
  },
  {
    "path": "examples/formatting/custom/public/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">\n    <link rel=\"icon\" href=\"<%= BASE_URL %>favicon.ico\">\n    <title>custom</title>\n  </head>\n  <body>\n    <noscript>\n      <strong>We're sorry but custom doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>\n    </noscript>\n    <div id=\"app\"></div>\n    <!-- built files will be auto injected -->\n  </body>\n</html>\n"
  },
  {
    "path": "examples/formatting/custom/src/App.vue",
    "content": "<template>\n  <div id=\"app\">\n    <div class=\"locale\">\n      <select v-model=\"locale\" @change=\"$i18n.locale = locale\">\n        <option value=\"en-US\">english</option>\n        <option value=\"ja-JP\">日本語</option>\n      </select>\n    </div>\n    <div class=\"messages\">\n      <p id=\"normal\">{{ $t('message.hello') }}</p>\n      <p id=\"plural\">{{ $t('message.plural', { n: 4 }) }}</p>\n      <p id=\"select\">{{ $t('message.select', { gender: 'male' }) }}</p>\n      <p id=\"number\">{{ $t('message.number', { current: 0.5 }) }}</p>\n      <p id=\"time\">{{ $t('message.time', { current: new Date() }) }}</p>\n    </div>\n    <i18n path=\"terms\" tag=\"p\">\n      <!-- Using v-t=\"\" -->\n      I accept the <a href=\"https://google.com\" v-t=\"'tos'\" />\n    </i18n>\n\n    <i18n path=\"terms\" tag=\"p\">\n      <!-- Using $t() -->\n      I accept the <a href=\"https://google.com\">{{ $t('tos') }}</a>\n    </i18n>\n\n    <i18n path=\"fly.departure\" tag=\"p\">\n      <!-- You can {action} until {limit} minutes from departure -->\n      <template v-slot:action>\n        {{ $t('fly.board') }}\n      </template>\n      <template v-slot:limit>\n        <strong>25</strong>\n      </template>\n    </i18n>\n  </div>\n</template>\n\n<script>\n  export default {\n    name: 'app',\n    data () {\n      return { locale: 'en-US' }\n    }\n  }\n</script>\n"
  },
  {
    "path": "examples/formatting/custom/src/formatter.js",
    "content": "import MessageFormat from 'messageformat'\n\nexport default class CustomFormatter {\n  constructor (options = {}) {\n    this._locale = options.locale || 'en-US'\n    this._formatter = new MessageFormat(this._locale, {returnType: 'values'})\n    this._caches = Object.create(null)\n  }\n\n  interpolate (message, values) {\n    let fn = this._caches[message]\n    if (!fn) {\n      fn = this._formatter.compile(message, this._locale)\n      this._caches[message] = fn\n    }\n\n    if (values !== null && values !== undefined) {\n      /**\n       * Component interpolation in the following format passes `values` as an Array-like `Object`\n       *\n       * ```vue\n       * <i18n path=\"terms\" for=\"tos\">\n       *   I agree with the <a href=\"/terms\">{{ $t('tos') }}</a>\n       * </i18n>\n       * ```\n       *\n       * VNodes _may_ be found when using interpolated values with either the deprecated `places` **or** the new slot\n       * syntax\n       */\n      const valuesEntries = Object.entries(values)\n      const isNonSlotInterpolation = valuesEntries.some(entry => {\n        const [key, value] = entry\n        return value.hasOwnProperty('componentOptions') && isNaN(Number.parseFloat(key)) === false\n      })\n\n      if (isNonSlotInterpolation) {\n        /**\n         * In this case, we iterate over the VNode list and preserve **only** VNodes with tags and return them, wrapped\n         * in a list.\n         *\n         * Rationale: If text nodes are kept, the positional lookup from vue-i18n will fail, rendering the first\n         * child again (i.e `I agree with the, I agree with the`)\n         */\n        values = valuesEntries.map(entry => {\n          const [, vnode] = entry\n          if (vnode.tag !== undefined) {\n            return [vnode]\n          }\n        }).filter(Boolean)\n      }\n    }\n    const result = fn(values).map(piece => {\n      if (!Array.isArray(piece)) {\n        return piece\n      }\n\n      const hasVNodes = piece.some(part => part.hasOwnProperty('componentOptions'))\n      if (hasVNodes === false) {\n        return piece.join('')\n      }\n      return piece\n    })\n\n    return result\n  }\n}\n"
  },
  {
    "path": "examples/formatting/custom/src/i18n.js",
    "content": "import Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport Formatter from './formatter'\n\nVue.use(VueI18n)\n\nconst locale = 'en-US' // default locale\nconst formatter = new Formatter({ locale })\n\nexport default new VueI18n({\n  locale,\n  formatter,\n  messages: {\n    'en-US': {\n      tos: 'Terms of service',\n      terms: 'I accept the {0}',\n      message: {\n        hello: 'hello!!',\n        plural: 'You have {n, plural, =0{no messages} one{1 message} other{# messages}}.',\n        select: '{gender, select, male{He} female{She} other{They}} liked this.',\n        number: 'Current Percent: {current, number, percent}',\n        time: 'Current Time: {current, time, short}',\n      },\n      fly: {\n        departure: 'You can {action} until {limit} minutes from departure',\n        board: 'board'\n      }\n    },\n    'ja-JP': {\n      message: {\n        hello: 'こんにちは！！',\n        select: '{gender, select, male{彼} female{彼女} other{彼ら}} はこれを好きです。',\n        number: '現在パーセンテージ {current, number, percent}',\n        time: '現在時刻: {current, time, medium}',\n      }\n    }\n  }\n})\n"
  },
  {
    "path": "examples/formatting/custom/src/main.js",
    "content": "import Vue from 'vue'\nimport App from './App.vue'\nimport i18n from './i18n'\n\nnew Vue({\n  i18n,\n  render: h => h(App)\n}).$mount('#app')\n"
  },
  {
    "path": "examples/formatting/escape-parameter-html/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"utf-8\">\n    <title>Escape parameter HTML example</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"></script>\n    <script src=\"https://unpkg.com/vue-i18n@8.22.0/dist/vue-i18n.esm.browser.js\"></script>\n  </head>\n  <body>\n    <div id=\"app\">\n        <p v-html=\"displayMsg\"></p>\n    </div>\n    <script>\n      const i18n = new VueI18n({\n        locale: 'en',\n        escapeParameterHtml: true,\n        messages: {\n          en: {\n              message: 'User input: <b>{value}</b>',\n          }\n        }\n      })\n      new Vue({\n        el: '#app',\n        i18n: i18n,\n          computed: {\n              displayMsg() {\n                  return this.$t('message', {value: '<img src=\"\" onError=\"alert(42)\">'})\n              }\n          }\n      })\n    </script>\n  </body>\n</html>"
  },
  {
    "path": "examples/formatting/html/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"utf-8\">\n    <title>html formatting example</title>\n    <script src=\"../../../node_modules/vue/dist/vue.min.js\"></script>\n    <script src=\"../../../dist/vue-i18n.min.js\"></script>\n  </head>\n  <body>\n    <div id=\"app\">\n      <p v-html=\"$t('message.hello')\"></p>\n    </div>\n    <script>\n      Vue.use(VueI18n)\n\n      new Vue({\n        i18n: new VueI18n({\n          locale: 'en',\n          messages: {\n            en: {\n              message: {\n                hello: 'hello <br> world'\n              }\n            }\n          }\n        })\n      }).$mount('#app')\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "examples/formatting/html-warning/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"utf-8\">\n    <title>HTML locale message warning option example</title>\n  </head>\n  <body>\n    <div id=\"app\">\n      <p>{{ $t('html_message') }}</p>\n    </div>\n    <script type=\"module\">\n      import Vue from 'https://unpkg.com/vue@2.6.10/dist/vue.esm.browser.js'\n      import VueI18n from 'https://unpkg.com/vue-i18n@8.11.1/dist/vue-i18n.esm.browser.js'\n\n      Vue.use(VueI18n)\n\n      new Vue({\n        i18n: new VueI18n({\n          locale: 'en',\n          warnHtmlInMessage: 'error',\n          messages: {\n            en: {\n              html_message: '<span>hello world!</span>'\n            }\n          }\n        })\n      }).$mount('#app')\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "examples/formatting/list/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"utf-8\">\n    <title>list formatting example</title>\n    <script src=\"../../../node_modules/vue/dist/vue.min.js\"></script>\n    <script src=\"../../../dist/vue-i18n.min.js\"></script>\n  </head>\n  <body>\n    <div id=\"app\">\n      <p>{{ $t('message.hello', [\"hello\"]) }}</p>\n    </div>\n    <script>\n      Vue.use(VueI18n)\n\n      new Vue({\n        i18n: new VueI18n({\n          locale: 'en',\n          messages: {\n            en: {\n              message: {\n                hello: '{0} world'\n              }\n            }\n          }\n        })\n      }).$mount('#app')\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "examples/formatting/named/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"utf-8\">\n    <title>named formatting example</title>\n    <script src=\"../../../node_modules/vue/dist/vue.min.js\"></script>\n    <script src=\"../../../dist/vue-i18n.min.js\"></script>\n  </head>\n  <body>\n    <div id=\"app\">\n      <p>{{ $t('message.hello', { msg: \"hello\"}) }}</p>\n    </div>\n    <script>\n      Vue.use(VueI18n)\n\n      new Vue({\n        i18n: new VueI18n({\n          locale: 'en',\n          messages: {\n            en: {\n              message: {\n                hello: '{msg} world'\n              }\n            }\n          }\n        })\n      }).$mount('#app')\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "examples/formatting/rails/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"utf-8\">\n    <title>ruby on rails formatting example</title>\n    <script src=\"../../../node_modules/vue/dist/vue.min.js\"></script>\n    <script src=\"../../../dist/vue-i18n.min.js\"></script>\n  </head>\n  <body>\n    <div id=\"app\">\n      <p>{{ $t('message.hello', { msg: \"hello\"}) }}</p>\n    </div>\n    <script>\n      Vue.use(VueI18n)\n\n      new Vue({\n        i18n: new VueI18n({\n          locale: 'en',\n          messages: {\n            en: {\n              message: {\n                hello: '%{msg} world'\n              }\n            }\n          }\n        })\n      }).$mount('#app')\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "examples/hot/.gitignore",
    "content": ".DS_Store\nnode_modules\n/dist\n\n# local env files\n.env.local\n.env.*.local\n\n# Log files\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Editor directories and files\n.idea\n.vscode\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\n"
  },
  {
    "path": "examples/hot/README.md",
    "content": "# vue-i18n-hot-module-replacement\n\n## Project setup\n```\nnpm install\n```\n\n### Compiles and hot-reloads for development\n```\nnpm run serve\n```\n\n### Compiles and minifies for production\n```\nnpm run build\n```\n\n### Customize configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n"
  },
  {
    "path": "examples/hot/babel.config.js",
    "content": "module.exports = {\n  presets: [\n    '@vue/app'\n  ]\n}\n"
  },
  {
    "path": "examples/hot/package.json",
    "content": "{\n  \"name\": \"vue-i18n-hot-module-replacement\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"serve\": \"vue-cli-service serve\",\n    \"build\": \"vue-cli-service build\"\n  },\n  \"dependencies\": {\n    \"core-js\": \"^2.6.5\",\n    \"vue\": \"^2.6.10\",\n    \"vue-i18n\": \"^8.11.2\"\n  },\n  \"devDependencies\": {\n    \"@vue/cli-plugin-babel\": \"^3.8.0\",\n    \"@vue/cli-service\": \"^3.8.0\",\n    \"vue-template-compiler\": \"^2.6.10\"\n  },\n  \"postcss\": {\n    \"plugins\": {\n      \"autoprefixer\": {}\n    }\n  },\n  \"browserslist\": [\n    \"> 1%\",\n    \"last 2 versions\"\n  ]\n}\n"
  },
  {
    "path": "examples/hot/public/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">\n    <link rel=\"icon\" href=\"<%= BASE_URL %>favicon.ico\">\n    <title>hot</title>\n  </head>\n  <body>\n    <noscript>\n      <strong>We're sorry but hot doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>\n    </noscript>\n    <div id=\"app\"></div>\n    <!-- built files will be auto injected -->\n  </body>\n</html>\n"
  },
  {
    "path": "examples/hot/src/App.vue",
    "content": "<template>\n  <div id=\"app\">\n    <h1>{{ $t('hello') }}</h1>\n  </div>\n</template>\n\n<style>\nh1 {\n  color: #42b983;\n}\n</style>\n"
  },
  {
    "path": "examples/hot/src/components/HelloWorld.vue",
    "content": "<template>\n  <div class=\"hello\">\n    <h1>{{ msg }}</h1>\n    <p>\n      For a guide and recipes on how to configure / customize this project,<br>\n      check out the\n      <a href=\"https://cli.vuejs.org\" target=\"_blank\" rel=\"noopener\">vue-cli documentation</a>.\n    </p>\n    <h3>Installed CLI Plugins</h3>\n    <ul>\n      <li><a href=\"https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel\" target=\"_blank\" rel=\"noopener\">babel</a></li>\n    </ul>\n    <h3>Essential Links</h3>\n    <ul>\n      <li><a href=\"https://vuejs.org\" target=\"_blank\" rel=\"noopener\">Core Docs</a></li>\n      <li><a href=\"https://forum.vuejs.org\" target=\"_blank\" rel=\"noopener\">Forum</a></li>\n      <li><a href=\"https://chat.vuejs.org\" target=\"_blank\" rel=\"noopener\">Community Chat</a></li>\n      <li><a href=\"https://twitter.com/vuejs\" target=\"_blank\" rel=\"noopener\">Twitter</a></li>\n      <li><a href=\"https://news.vuejs.org\" target=\"_blank\" rel=\"noopener\">News</a></li>\n    </ul>\n    <h3>Ecosystem</h3>\n    <ul>\n      <li><a href=\"https://router.vuejs.org\" target=\"_blank\" rel=\"noopener\">vue-router</a></li>\n      <li><a href=\"https://vuex.vuejs.org\" target=\"_blank\" rel=\"noopener\">vuex</a></li>\n      <li><a href=\"https://github.com/vuejs/vue-devtools#vue-devtools\" target=\"_blank\" rel=\"noopener\">vue-devtools</a></li>\n      <li><a href=\"https://vue-loader.vuejs.org\" target=\"_blank\" rel=\"noopener\">vue-loader</a></li>\n      <li><a href=\"https://github.com/vuejs/awesome-vue\" target=\"_blank\" rel=\"noopener\">awesome-vue</a></li>\n    </ul>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'HelloWorld',\n  props: {\n    msg: String\n  }\n}\n</script>\n\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\n<style scoped>\nh3 {\n  margin: 40px 0 0;\n}\nul {\n  list-style-type: none;\n  padding: 0;\n}\nli {\n  display: inline-block;\n  margin: 0 10px;\n}\na {\n  color: #42b983;\n}\n</style>\n"
  },
  {
    "path": "examples/hot/src/i18n.js",
    "content": "import Vue from 'vue'\nimport VueI18n from 'vue-i18n'\n\nVue.use(VueI18n)\n\nfunction loadLocaleInfo () {\n  const locales = require.context('./locales', true, /(^|\\/)[A-Za-z0-9_,\\s-]+\\.json$/i)\n  const messages = {}\n  locales.keys().forEach(key => {\n    const matched = key.match(/([A-Za-z0-9_-]+)\\./i)\n    if (matched && matched.length > 1) {\n      const locale = matched[1]\n      messages[locale] = locales(key)\n    }\n  })\n  return { id: locales.id, messages }\n}\n\nconst { id, messages } = loadLocaleInfo()\n\nconst i18n = new VueI18n({\n  locale: 'en',\n  messages\n})\n\nif (module.hot) {\n  module.hot.accept(id, () => {\n    const { messages } = loadLocaleInfo()\n    Object.keys(messages).forEach(locale => {\n      i18n.setLocaleMessage(locale, messages[locale])\n    })\n    console.log('hot module replacemenet', arguments)\n  })\n}\n\nexport default i18n\n"
  },
  {
    "path": "examples/hot/src/locales/en.json",
    "content": "{\n  \"hello\": \"Hello World!\"\n}\n"
  },
  {
    "path": "examples/hot/src/locales/ja.json",
    "content": "{\n  \"hello\": \"こんにちは、世界！\"\n}\n"
  },
  {
    "path": "examples/hot/src/main.js",
    "content": "import Vue from 'vue'\nimport App from './App.vue'\nimport i18n from './i18n'\n\nVue.config.productionTip = false\n\nnew Vue({\n  i18n,\n  render: h => h(App)\n}).$mount('#app')\n"
  },
  {
    "path": "examples/integration/contentful/.contentful.sample.json",
    "content": "{\n  \"CTF_PERSON_ID\": \"15jwOBqpxqSAOy2eOO4S0m\",\n  \"CTF_BLOG_POST_TYPE_ID\": \"blogPost\",\n  \"CTF_SPACE_ID\": \"SPACE_ID\",\n  \"CTF_CDA_ACCESS_TOKEN\": \"CDA_ACCESS_TOKEN\",\n  \"CTF_CMA_ACCESS_TOKEN\": \"CMA_ACCESS_TOKEN\"\n}\n"
  },
  {
    "path": "examples/integration/contentful/.editorconfig",
    "content": "# editorconfig.org\nroot = true\n\n[*]\nindent_size = 2\nindent_style = space\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ninsert_final_newline = true\n\n[*.md]\ntrim_trailing_whitespace = true\n"
  },
  {
    "path": "examples/integration/contentful/.eslintrc.js",
    "content": "module.exports = {\n  root: true,\n  parser: 'babel-eslint',\n  env: {\n    browser: true,\n    node: true\n  },\n  extends: 'standard',\n  // required to lint *.vue files\n  plugins: [\n    'html'\n  ],\n  // add your custom rules here\n  rules: {},\n  globals: {}\n}\n"
  },
  {
    "path": "examples/integration/contentful/.gitignore",
    "content": "### Linux ###\n*~\n\n# temporary files which can be created if a process still has a handle open of a deleted file\n.fuse_hidden*\n\n# KDE directory preferences\n.directory\n\n# Linux trash folder which might appear on any partition or disk\n.Trash-*\n\n# .nfs files are created when an open file is removed but is still being accessed\n.nfs*\n\n### Node ###\n# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Runtime data\npids\n*.pid\n*.seed\n*.pid.lock\n\n# Directory for instrumented libs generated by jscoverage/JSCover\nlib-cov\n\n# Coverage directory used by tools like istanbul\ncoverage\n\n# nyc test coverage\n.nyc_output\n\n# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)\n.grunt\n\n# Bower dependency directory (https://bower.io/)\nbower_components\n\n# node-waf configuration\n.lock-wscript\n\n# Compiled binary addons (http://nodejs.org/api/addons.html)\nbuild/Release\n\n# Dependency directories\nnode_modules/\njspm_packages/\n\n# Typescript v1 declaration files\ntypings/\n\n# Optional npm cache directory\n.npm\n\n# Optional eslint cache\n.eslintcache\n\n# Optional REPL history\n.node_repl_history\n\n# Output of 'npm pack'\n*.tgz\n\n# Yarn Integrity file\n.yarn-integrity\n\n# dotenv environment variables file\n.env\n\n\n### OSX ###\n*.DS_Store\n.AppleDouble\n.LSOverride\n\n# Icon must end with two \\r\nIcon\n\n# Thumbnails\n._*\n\n# Files that might appear in the root of a volume\n.DocumentRevisions-V100\n.fseventsd\n.Spotlight-V100\n.TemporaryItems\n.Trashes\n.VolumeIcon.icns\n.com.apple.timemachine.donotpresent\n\n# Directories potentially created on remote AFP share\n.AppleDB\n.AppleDesktop\nNetwork Trash Folder\nTemporary Items\n.apdisk\n\n### Windows ###\n# Windows thumbnail cache files\nThumbs.db\nehthumbs.db\nehthumbs_vista.db\n\n# Folder config file\nDesktop.ini\n\n# Recycle Bin used on file shares\n$RECYCLE.BIN/\n\n# Windows Installer files\n*.cab\n*.msi\n*.msm\n*.msp\n\n# Windows shortcuts\n*.lnk\n\n\n############################################\n# 'blog in 5 minutes' files\n############################################\n\n# Nuxt build\n.nuxt\n\n# Nuxt generate\ndist\n\n# Contentful configs\n.contentful.json\n\n# data\ndata\n"
  },
  {
    "path": "examples/integration/contentful/LICENSE",
    "content": "MIT License\n\nCopyright (c) 2017 Stefan Judis\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "examples/integration/contentful/README.md",
    "content": "# vue-i18n for contentful\n\n> Example for Contentful integration\n\n## Setup\n\n### Setup contentful with tutorial\nhttps://www.contentful.com/developers/docs/tutorials/general/get-started/\n\n### Run\n```\n$ npm run dev\n```\n\n## License\n\nMIT\n"
  },
  {
    "path": "examples/integration/contentful/WHATS-NEXT.md",
    "content": "# What's next?\n\nA blog on your local machine is nice to have, but a blog on the internet is even better.\n\n## Deploying using now.sh\n\nChange directory to where you installed your application and run:\n\n`npm run deploy`\n\n## Other deployment options\n\nNuxt.js also offers guides to deploy your project to:\n\n- [Heroku](https://nuxtjs.org/faq/heroku-deployment)\n- [gh-pages](https://nuxtjs.org/faq/github-pages)\n- [surge.sh](https://nuxtjs.org/faq/surge-deployment)\n- [dokku](https://nuxtjs.org/faq/dokku-deployment)\n\nEnjoy!\n"
  },
  {
    "path": "examples/integration/contentful/assets/README.md",
    "content": "# ASSETS\n\nThis directory contains your un-compiled assets such as LESS, SASS, or JavaScript.\n\nMore information about the usage of this directory in the documentation:\nhttps://nuxtjs.org/guide/assets#webpacked\n\n**This directory is not required, you can delete it if you don't want to use it.**\n"
  },
  {
    "path": "examples/integration/contentful/bin/download-content-model.js",
    "content": "const fs = require('fs')\nconst path = require('path')\nconst zlib = require('zlib')\n\nconst fetch = require('node-fetch')\nconst Listr = require('listr')\nconst tar = require('tar')\nconst mkdirp = require('mkdirp')\nconst rimraf = require('rimraf')\n\nconst REPO_ROOT = path.resolve(__dirname, '..')\nconst DATA_DIR = path.resolve(REPO_ROOT, 'data')\n\nconst tasks = new Listr([\n  {\n    title: `Checking permissions to write files to the disk`,\n    task: (ctx) => {\n      return new Promise((resolve, reject) => {\n        fs.access(REPO_ROOT, fs.constants.W_OK, (err) => {\n          if (err) {\n            reject()\n            console.error(`Script is unable to write to project directory. Please check your users file permissions for ${REPO_ROOT}`)\n            process.exit(1)\n          }\n          resolve()\n        })\n      })\n    }\n  },\n  {\n    title: `Clean up directory`,\n    task: (ctx) => {\n      return new Promise((resolve, reject) => {\n        rimraf(DATA_DIR, (err) => {\n          if (err) {\n            reject(err)\n          }\n          resolve()\n        })\n      }).then(() => {\n        return new Promise((resolve, reject) => {\n          mkdirp(DATA_DIR, (err) => {\n            if (err) {\n              reject(err)\n            }\n            resolve()\n          })\n        })\n      })\n    }\n  },\n  {\n    title: `Fetching release information of contentful/content-models`,\n    task: (ctx) => {\n      return fetch(`https://api.github.com/repos/contentful/content-models/releases/latest`)\n      .then((response) => response.json())\n      .then((json) => {\n        ctx.latestReleaseInfo = json\n      })\n    }\n  },\n  {\n    title: `Downloading latest release of contentful/content-models`,\n    task: (ctx) => {\n      ctx.latestReleaseZipLocation = path.join(DATA_DIR, 'latest-release.tar.gz')\n      return fetch(ctx.latestReleaseInfo.tarball_url)\n      .then((response) => {\n        ctx.latestReleaseTarballStream = response.body\n      })\n    }\n  },\n  {\n    title: `Unpacking latest release of contentful/content-models`,\n    task: (ctx) => {\n      return new Promise((resolve, reject) => {\n        try {\n          ctx.latestReleaseTarballStream\n            .pipe(zlib.Unzip())\n            .pipe(new tar.Unpack({\n              cwd: DATA_DIR,\n              strip: 1\n            }))\n            .on('error', reject)\n            .on('close', resolve)\n        } catch (err) {\n          reject(err)\n        }\n      })\n    }\n  }\n])\n\ntasks.run()\n"
  },
  {
    "path": "examples/integration/contentful/components/README.md",
    "content": "# COMPONENTS\n\nThe components directory contains your Vue.js Components.\nNuxt.js doesn't supercharge these components.\n\n**This directory is not required, you can delete it if you don't want to use it.**\n"
  },
  {
    "path": "examples/integration/contentful/components/article-preview.vue",
    "content": "<template>\n  <article>\n    <nuxt-link v-if=\"post.fields.heroImage.fields.file\" :to=\"{ name: 'blog-slug', params: { slug: post.fields.slug }}\">\n      <img class=\"thumbnail\"\n        :src=\"post.fields.heroImage.fields.file.url + '?fit=scale&w=350&h=196'\"\n        :srcset=\"`${post.fields.heroImage.fields.file.url}?w=350&h=196&fit=fill 350w, ${post.fields.heroImage.fields.file.url}?w=1000&h=562&fit=fill 1000w, ${post.fields.heroImage.fields.file.url}?w=2000&h=1125&fit=fill 2000w`\"\n        sizes=\"(min-width: 1024px) 400px, 100vw\"\n      >\n    </nuxt-link>\n    <time class=\"tiny date\">\n      {{ $d(new Date(post.fields.publishDate), 'short') }}\n    </time>\n    <h4>\n      <nuxt-link :to=\"{ name: 'blog-slug', params: { slug: post.fields.slug }}\" class=\"title\">{{ post.fields.title }}</nuxt-link>\n    </h4>\n    <p>{{ post.fields.description }}</p>\n\n    <div class=\"tags\">\n      <nuxt-link\n        v-for=\"tag in post.fields.tags\"\n        :key=\"tag\"\n        :to=\"{ name: 'tags-tag', params: { tag: tag }}\" class=\"tag\">{{ tag }}</nuxt-link>\n    </div>\n  </article>\n</template>\n\n<script>\nexport default {\n  props: ['post']\n}\n</script>\n\n<style>\n.thumbnail {\n  margin-bottom: 1em;\n}\n\n.date {\n}\n\n.title {\n  text-decoration: none;\n  font-size: 22px;\n  color: #373F49;\n}\n\n.tags {\n  padding : 1em 0;\n  margin-bottom: 2em;\n}\n\n.tag:link,\n.tag:visited {\n  color: #A0A0A0;\n  text-decoration: none;\n  display: inline-block;\n  padding: .33333rem .5rem;\n  line-height: 1;\n  border-radius: 2px;\n  border: 1px solid #A0A0A0;\n  margin-right: .5em;\n}\n\n.tag:active,\n.tag:hover,\n.tag:focus {\n  color: #606060;\n  border-color: #606060;\n}\n</style>\n"
  },
  {
    "path": "examples/integration/contentful/components/language-header.vue",
    "content": "<template>\n  <section class=\"language\">\n    <p>{{ $t('components.language.current', { language: $i18n.locale }) }}</p>\n  </section>\n</template>\n\n<style>\n.language {\n  background: #fff;\n  border: 1px solid #489CF1;\n  margin: 2em 0;\n}\n</style>\n"
  },
  {
    "path": "examples/integration/contentful/components/navigation.vue",
    "content": "<template>\n  <nav role=\"navigation\" class=\"top-nav\">\n    <ul class=\"menu\">\n      <li v-if=\"!/\\/.*?\\/.*/.test(route.path)\"\n          v-for=\"route in this.$router.options.routes\">\n        <nuxt-link :to=\"{ name: route.name }\">\n          {{ $t(`components.navigation.menu.${route.name}`) }}\n        </nuxt-link>\n      </li>\n    </ul>\n  </nav>\n</template>\n\n<style>\n.person-name:link,\n.person-name:visited {\n  display: inline-block;\n  font-size: 2em;\n  text-decoration: none;\n  color: #373F49;\n}\n\n.top-nav {\n  width: 100%;\n  display: inline-block;\n  text-align: right;\n}\n\n.menu {\n  display: inline-block;\n}\n\n.menu li {\n  display: inline-block;\n  margin-left: 1em;\n}\n\n.menu a:link,\n.menu a:visited {\n  color: #373F49;\n  text-decoration: none;\n}\n</style>\n"
  },
  {
    "path": "examples/integration/contentful/docs/GETTING-STARTED.md",
    "content": "# You don't have to set this up yourself\n\nThe following steps describe what is needed to set this project up manually. **You can also follow our [Interactive getting started CLI tutorial](https://www.contentful.com/developers/docs/tutorials/general/get-started/) to save some time.** ;)\n\n## Getting started\n\nTo get you started you have to be registered at [Contentful](https://www.contentful.com).\n\n### Clone the repo and install dependencies\n\n```bash\n$ git clone git@github.com:contentful/blog-in-5-minutes.git\n$ cd blog-in-5-minutes\n$ npm install\n```\n\n### Get needed config data from Contentful\n\nTo set up and use a new space you have to create and retrieve the needed access tokens. So let's jump right into it...\n\n#### Create a new space\n\nYou can create a new space by pressing in the space overview in the top left corner of the web app.\n\n![Create new space dialog](./images/login.png \"Create new space dialog\")\n\n#### Create a Content Management API token\n\nTo create a new Content Management API token navigate to `APIs` in the top level menu and then to `Content Managements Tokens`.\n\n![Dialog to create a CMA token](./images/cma-token.png \"Dialog to create a CMA token\")\n\n*You'll need Content Management API token to write the provided data into your space.*\n\n#### Create a Content Delivery API token and get space ID\n\nTo create a new Content Management API token navigate to `APIs` in the top level menu and then to `Content Delivery / Preview tokens`.\n\n![Dialog to create a CDA token](./images/cda-create-token.png \"Dialog to create a CDA token\")\n![Dialog to copy a CDA token](./images/cda-copy-token.png \"Dialog to copy a CDA token\")\n\n*You'll need the Content Delivery API token to access the data stored in your space.*\n\n### Import data in your newly created space\n\nTo import the content model and data you can use a tool from the Contentful ecosystem - [contentful-import](https://www.npmjs.com/package/contentful-import). This tool allows you to set up a new space with before exported data. It requires at least a Content Management API token and the id of the space that should be filled with data.\n\nTo make it not necessary to install contentful-import globally it's defined as a development dependency which means that you can use it via an npm scripts command. Run `npm run import-data` with the additional parameters.\n\n*Side note: `--` is needed hand npm scripts arguments over to the actual command*\n\n```bash\n$ npm run import-data -- --space-id YOUR_SPACE_ID --management-token YOUR_MANAGEMENT_TOKEN\n```\n\n### Create a config file\n\nNow that you have the Contentful setup done, it's time to define the configuration to run the project. To make this project work locally you have to rename the `.contentful.sample.json` in the root of the directory to `.contentful.json`. You have to set two values:\n\nNeeded config data:\n- the ID of the space where your data lives - `CTF_SPACE_ID`\n- the Content Delivery API token so that you can fetch the data - `CTF_CDA_ACCESS_TOKEN`\n- the Content Management API token so that you can fetch the valid tags - `CTF_CMA_ACCESS_TOKEN`\n\n```javascript\n{\n  // these values are already correct\n  \"CTF_PERSON_ID\": \"15jwOBqpxqSAOy2eOO4S0m\",\n  \"CTF_BLOG_POST_TYPE_ID\": \"blogPost\",\n\n  // these values have to be defined by you\n  \"CTF_SPACE_ID\": \"YOUR_SPACE_ID\",\n  \"CTF_CDA_ACCESS_TOKEN\": \"YOUR_DELIVERY_ACCESS_TOKEN\",\n  \"CTF_CMA_ACCESS_TOKEN\": \"YOUR_MANAGEMENT_ACCESS_TOKEN\"\n};\n```\n**Remember:** Comments are not allowed in JSON so make sure to remove them. ;)\n\n### Preview your the site\n\nTo see the site working with your newly created data all you have to do is to run `npm run dev`. This command starts a server at `localhost:3000`.\n\n### Deploy the site to `now`\n\n`now` is a fairly new service by [zeit](https://zeit.co), which also provides static hosting. If you run `npm run deploy` you're asked for your email adress (which you have to confirm) once and then your site will find its way into the cloud.\n\n```bash\n$ npm run deploy\n```\n"
  },
  {
    "path": "examples/integration/contentful/layouts/README.md",
    "content": "# LAYOUTS\n\nThis directory contains your Application Layouts.\n\nMore information about the usage of this directory in the documentation:\nhttps://nuxtjs.org/guide/views#layouts\n\n**This directory is not required, you can delete it if you don't want to use it.**\n"
  },
  {
    "path": "examples/integration/contentful/layouts/default.vue",
    "content": "<template>\n  <div class=\"container\">\n    <language-header/>\n    <main role=\"main\">\n      <nuxt/>\n    </main>\n  </div>\n</template>\n\n<script>\nimport LanguageHeader from '~/components/language-header.vue'\n\nexport default {\n  components: {\n    LanguageHeader\n  }\n}\n</script>\n\n<style>\n@font-face {\n  font-family: \"Avenir\";\n  font-weight: 400;\n  font-style: normal;\n  src: url(\"~/static/avenir-400.woff2\") format(\"woff2\");\n  font-display: swap;\n}\n\nbody {\n  background: #E1E7EA;\n  max-width: 1180px;\n  margin: 0 auto;\n  font-family: \"Avenir\", Tahoma, Arial, Helvetica, sans-serif;\n  font-size: 16px;\n  line-height: 1.65;\n  color: #373F49;\n}\n\n.wrapper {\n  padding: 2em 0;\n  max-width: 80%;\n  margin: 0 auto;\n}\n\n.header {\n  background: #F7F9FA;\n}\n\n.page-bar {\n  max-width: 100%;\n  padding: 2em 10%;\n}\n\n.blog.header h2,\n.tag-page.header h2 {\n  text-align: center;\n  padding: 2.5em 0;\n  color: #A0A0A0;\n}\n\nimg {\n  display: block;\n  width: 100%;\n}\n\nh1,\nh2,\nh3 {\n  font-size: 2em;\n}\n\n/* Copy section */\n.body-container {\n  background: #ffffff;\n}\n\n.items-list {\n  overflow: hidden;\n}\n\n.item {\n  padding: 1em 3em 1em 0;\n}\n\n@media all and (min-width: 600px) {\n  .item {\n    float: left;\n    width: 50%;\n  }\n}\n\n@media all and (min-width: 900px) {\n  .item {\n    width: 33.333%;\n  }\n}\n\n/* Shared */\n\n.tiny {\n  text-transform: uppercase;\n  font-size: 10px;\n  letter-spacing: 1px;\n  color: #A0A0A0;\n}\n\n*[class*=\"-bar\"] {\n  border-bottom: 1px solid #EBEBEB;\n}\n</style>\n"
  },
  {
    "path": "examples/integration/contentful/locales/en-US.json",
    "content": "{\n  \"components\": {\n    \"language\": {\n      \"current\": \"Current language code: {language}\"\n    },\n    \"navigation\": {\n      \"menu\": {\n        \"blog\": \"Blog Articles\",\n        \"index\": \"Index\"\n      }\n    }\n  },\n  \"pages\": {\n    \"top\": {\n      \"recently\": \"Recent articles\"\n    },\n    \"blog\": {\n      \"title\": \"Blog\",\n      \"subtitle\": \"All articles ({count})\"\n    },\n    \"tags\": {\n      \"subtitle\": \"All articles tagged #{tag} ({count})\"\n    }\n  }\n}\n"
  },
  {
    "path": "examples/integration/contentful/locales/ja.json",
    "content": "{\n  \"components\": {\n    \"language\": {\n      \"current\": \"現在の言語コード: {language}\"\n    },\n    \"navigation\": {\n      \"menu\": {\n        \"blog\": \"ブログ一覧\",\n        \"index\": \"インデックス\"\n      }\n    }\n  },\n  \"pages\": {\n    \"top\": {\n      \"recently\": \"最近の記事\"\n    },\n    \"blog\": {\n      \"title\": \"ブログ一覧\",\n      \"subtitle\": \"全ての記事 ({count})\"\n    },\n    \"tags\": {\n      \"subtitle\": \"#{tag} でタグ付けされた全ての記事 ({count})\"\n    }\n  }\n}\n"
  },
  {
    "path": "examples/integration/contentful/middleware/README.md",
    "content": "# MIDDLEWARE\n\nThis directory contains your Application Middleware.\nThe middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts).\n\nMore information about the usage of this directory in the documentation:\nhttps://nuxtjs.org/guide/routing#middleware\n\n**This directory is not required, you can delete it if you don't want to use it.**\n"
  },
  {
    "path": "examples/integration/contentful/nuxt.config.js",
    "content": "const {getConfigForKeys} = require('./lib/config.js')\nconst ctfConfig = getConfigForKeys([\n  'CTF_BLOG_POST_TYPE_ID',\n  'CTF_SPACE_ID',\n  'CTF_CDA_ACCESS_TOKEN',\n  'CTF_CMA_ACCESS_TOKEN',\n  'CTF_PERSON_ID'\n])\nconst {createClient} = require('./plugins/contentful')\nconst cdaClient = createClient(ctfConfig)\nconst cmaContentful = require('contentful-management')\nconst cmaClient = cmaContentful.createClient({\n  accessToken: ctfConfig.CTF_CMA_ACCESS_TOKEN\n})\n\nconst config = {\n  /*\n  ** Headers of the page\n  */\n  head: {\n    title: 'Custom app with Contentful',\n    meta: [\n      { charset: 'utf-8' },\n      { name: 'viewport', content: 'width=device-width, initial-scale=1' },\n      { hid: 'description', name: 'description', content: 'Custom app in under 5 minutes' }\n    ],\n    link: [\n      { rel: 'icon', type: 'image/x-icon', href: '/favicon.png' },\n      { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/minireset.css/0.0.2/minireset.min.css' }\n    ]\n  },\n\n  /*\n  ** Customize the progress-bar color\n  */\n  loading: { color: '#2199e8' },\n\n  /*\n  ** Build configuration\n  */\n  build: {\n    /*\n    ** Run ESLINT on save\n    */\n    extend (config, ctx) {\n      if (ctx.isClient) {\n        config.module.rules.push({\n          enforce: 'pre',\n          test: /\\.(js|vue)$/,\n          loader: 'eslint-loader',\n          exclude: /(node_modules)/\n        })\n      }\n    },\n\n    postcss: [\n      require('autoprefixer')({\n        browsers: ['> 5%']\n      })\n    ]\n  },\n\n  /*\n  ** ᕕ( ᐛ )ᕗ CTF-BLOG-IN-5-MINUTES\n  ** Make client available everywhere via Nuxt plugins\n  */\n  plugins: [\n    '~/plugins/contentful',\n    '~/plugins/i18n'\n  ],\n\n  /*\n  ** ᕕ( ᐛ )ᕗ CTF-BLOG-IN-5-MINUTES\n  ** Get all blog posts from Contentful\n  ** and generate the needed files upfront\n  **\n  ** Included:\n  ** - blog posts\n  ** - available blog post tags\n  */\n  generate: {\n    routes () {\n      return Promise.all([\n        // get all blog posts\n        cdaClient.getEntries({\n          'content_type': ctfConfig.CTF_BLOG_POST_TYPE_ID\n        }),\n        // get the blog post content type\n        cmaClient.getSpace(ctfConfig.CTF_SPACE_ID)\n          .then(space => space.getContentType(ctfConfig.CTF_BLOG_POST_TYPE_ID))\n      ])\n      .then(([entries, postType]) => {\n        return [\n          // map entries to URLs\n          ...entries.items.map(entry => `/blog/${entry.fields.slug}`),\n          // map all possible tags to URLs\n          ...postType.fields.find(field => field.id === 'tags').items.validations[0].in.map(tag => `/tags/${tag}`)\n        ]\n      })\n    }\n  },\n\n  /*\n  ** Define environment variables being available\n  ** in generate and browser context\n  */\n  env: {\n    CTF_SPACE_ID: ctfConfig.CTF_SPACE_ID,\n    CTF_CDA_ACCESS_TOKEN: ctfConfig.CTF_CDA_ACCESS_TOKEN,\n    CTF_PERSON_ID: ctfConfig.CTF_PERSON_ID,\n    CTF_BLOG_POST_TYPE_ID: ctfConfig.CTF_BLOG_POST_TYPE_ID\n  }\n}\n\nmodule.exports = config\n"
  },
  {
    "path": "examples/integration/contentful/package.json",
    "content": "{\n  \"name\": \"contentful-blog-in-5-min\",\n  \"version\": \"1.1.1\",\n  \"description\": \"A static blog based on Contentful\",\n  \"author\": \"stefan judis <stefanjudis@gmail.com>\",\n  \"private\": true,\n  \"dependencies\": {\n    \"contentful\": \"^4.3.0\",\n    \"contentful-management\": \"^3.4.0\",\n    \"nuxt\": \"^1.0.0-rc4\",\n    \"vue-i18n\": \"^7.6.0\",\n    \"vue-markdown\": \"^2.1.3\"\n  },\n  \"scripts\": {\n    \"dev\": \"nuxt\",\n    \"build\": \"nuxt build\",\n    \"start\": \"nuxt start\",\n    \"generate\": \"nuxt generate\",\n    \"lint\": \"eslint --ext .js,.vue --ignore-path .gitignore .\",\n    \"precommit\": \"npm run lint\",\n    \"deploy\": \"nuxt generate && now dist\",\n    \"import-data\": \"node ./bin/download-content-model.js && contentful-import --content-file ./data/blog/contentful-export.json\"\n  },\n  \"devDependencies\": {\n    \"babel-eslint\": \"^7.1.1\",\n    \"contentful-import\": \"^4.5.4\",\n    \"cz-conventional-changelog\": \"^2.0.0\",\n    \"eslint\": \"^4.18.2\",\n    \"eslint-config-standard\": \"^6.2.1\",\n    \"eslint-loader\": \"^1.6.1\",\n    \"eslint-plugin-html\": \"^2.0.0\",\n    \"eslint-plugin-promise\": \"^3.4.1\",\n    \"eslint-plugin-standard\": \"^2.0.1\",\n    \"gh-pages\": \"^1.0.0\",\n    \"listr\": \"^0.12.0\",\n    \"node-fetch\": \"^3.1.1\",\n    \"now\": \"^5.3.0\",\n    \"rimraf\": \"^2.6.1\",\n    \"tar\": \"^4.4.18\"\n  },\n  \"config\": {\n    \"commitizen\": {\n      \"path\": \"./node_modules/cz-conventional-changelog\"\n    }\n  }\n}\n"
  },
  {
    "path": "examples/integration/contentful/pages/README.md",
    "content": "# PAGES\n\nThis directory contains your Application Views and Routes.\nThe framework reads all the .vue files inside this directory and create the router of your application.\n\nMore information about the usage of this directory in the documentation:\nhttps://nuxtjs.org/guide/routing\n"
  },
  {
    "path": "examples/integration/contentful/pages/blog/_slug.vue",
    "content": "<template>\n  <div>\n    <header class=\"article header\">\n      <div class=\"foreground\">\n        <div class=\"page-bar wrapper\">\n          <Navigation></Navigation>\n        </div>\n      </div>\n      <div>\n        <img\n          v-if=\"post.fields.heroImage.fields.file\"\n          :src=\"post.fields.heroImage.fields.file.url + '?fit=scale&w=350&h=196'\"\n          :srcset=\"`${post.fields.heroImage.fields.file.url}?w=350&h=87&fit=fill 350w, ${post.fields.heroImage.fields.file.url}?w=1000&h=250&fit=fill 1000w, ${post.fields.heroImage.fields.file.url}?w=2000&h=500&fit=fill 2000w`\"\n          size=\"100vw\"\n          :alt=\"post.fields.heroImage.fields.description\"\n        >\n      </div>\n    </header>\n\n    <section class=\"body-container\">\n      <main class=\"wrapper\">\n        <div class=\"headline\">\n          <time class=\"tiny\">{{ ( new Date(post.fields.publishDate)).toDateString() }}</time>\n          <h1>{{ post.fields.title }}</h1>\n        </div>\n        <div class=\"copy\">\n          <vue-markdown>{{post.fields.body}}</vue-markdown>\n        </div>\n      </main>\n    </section>\n\n  </div>\n</template>\n\n<script>\nimport VueMarkdown from 'vue-markdown'\nimport { createClient } from '~/plugins/contentful.js'\nimport Navigation from '~/components/navigation.vue'\n\nconst client = createClient()\n\nexport default {\n  asyncData ({ app, env, params }) {\n    return client.getEntries({\n      'content_type': env.CTF_BLOG_POST_TYPE_ID,\n      'fields.slug': params.slug,\n      locale: app.i18n.locale\n    }).then(entries => {\n      return {\n        post: entries.items[0]\n      }\n    })\n    .catch(console.error)\n  },\n  components: {\n    Navigation,\n    VueMarkdown\n  }\n}\n</script>\n\n<style>\n.foreground .page-bar {\n  border-bottom: 0;\n}\n\n.headline {\n  padding: 3em 0 0;\n}\n\n.headline h1 {\n  font-size: 3.5em;\n}\n\n.copy {\n  padding-bottom: 7em;\n}\n\n.copy *:not(div) {\n  margin: 2em 0 1em;\n}\n\n.copy h3 {\n  font-size: 1.35em;\n}\n\n.copy ul {\n  margin: 0;\n  padding-left: 1em;\n  list-style: disc;\n}\n\n.copy li {\n  margin: 0;\n}\n</style>\n"
  },
  {
    "path": "examples/integration/contentful/pages/blog/index.vue",
    "content": "<template>\n  <div>\n    <header class=\"blog header\">\n      <div class=\"foreground\">\n        <div class=\"page-bar wrapper\">\n          <Navigation></Navigation>\n        </div>\n        <div class=\"page-info wrapper\">\n          <h2>{{ $t('pages.blog.title') }}</h2>\n        </div>\n      </div>\n    </header>\n\n    <section class=\"body-container\">\n      <div class=\"items-bar wrapper\">\n        <h2>{{ $t('pages.blog.subtitle', { count: posts.length }) }}</h2>\n      </div>\n      <ul class=\"items-list wrapper\">\n        <li class=\"item\" v-for=\"post in posts\">\n          <article-preview :post=\"post\"></article-preview>\n        </li>\n      </ul>\n    </section>\n  </div>\n</template>\n\n<script>\nimport { createClient } from '~/plugins/contentful.js'\nimport Navigation from '~/components/navigation.vue'\nimport ArticlePreview from '~/components/article-preview.vue'\n\nconst client = createClient()\n\nexport default {\n  asyncData ({ app, env, params }) {\n    return client.getEntries({\n      'content_type': env.CTF_BLOG_POST_TYPE_ID,\n      locale: app.i18n.locale,\n      order: '-sys.createdAt'\n    }).then(entries => {\n      console.log('blog', entries.items)\n      return {\n        posts: entries.items\n      }\n    })\n  },\n  components: {\n    ArticlePreview,\n    Navigation\n  }\n}\n</script>\n"
  },
  {
    "path": "examples/integration/contentful/pages/index.vue",
    "content": "<template>\n  <div>\n    <section class=\"body-container\">\n      <div class=\"items-bar wrapper\">\n        <h2>{{ $t('pages.top.recently') }}</h2>\n      </div>\n      <ul class=\"items-list wrapper\">\n        <li class=\"item\" v-for=\"post in posts\">\n          <article-preview :post=\"post\"></article-preview>\n        </li>\n      </ul>\n    </section>\n  </div>\n</template>\n\n<script>\nimport { createClient } from '~/plugins/contentful.js'\nimport ArticlePreview from '~/components/article-preview.vue'\n\nconst client = createClient()\n\nexport default {\n  asyncData ({ app, env }) {\n    return Promise.all([\n      client.getEntries({\n        'content_type': env.CTF_BLOG_POST_TYPE_ID,\n        locale: app.i18n.locale,\n        order: '-sys.createdAt'\n      })\n    ]).then(([posts]) => {\n      return { posts: posts.items }\n    }).catch(console.error)\n  },\n  components: {\n    ArticlePreview\n  }\n}\n</script>\n\n<style>\n.home.header {\n  overflow: hidden;\n  position: relative;\n  height: 70vw;\n  min-height: 400px;\n  max-height: 610px;\n  background: #000;\n  color: #fff;\n}\n\n.home .person-name:link,\n.home .person-name:visited {\n  color: #fff;\n}\n\n.home .menu a:link,\n.home .menu a:visited {\n  color: #fff;\n}\n\n.home .page-bar {\n  border-bottom: 1px solid #4e4b5f;\n}\n\n.home .page-info {\n  padding-top: 12%;\n}\n\n.home .page-info h2 {\n  font-size: 1.5em;\n}\n\n.picture {\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  bottom: 0;\n  left: 0%;\n  right: 0;\n  width: 150%;\n}\n\n@media all and (min-width: 600px) {\n  .picture {\n    left: 20%;\n    width: 100%;\n  }\n}\n\n.foreground {\n  overflow: hidden;\n  position: relative;\n  z-index: 3;\n}\n\n.foreground p {\n  margin-bottom: 1em;\n}\n\n@media all and (min-width: 600px) {\n  .foreground p {\n    max-width: 250px;\n  }\n}\n\n.social-icons {\n  margin: 0;\n  padding: 0;\n}\n\n.social-icons li {\n  display: inline-block;\n  margin-right: 1em;\n}\n\n.social-icons a {\n  display: block;\n}\n\n.social-icons svg {\n  display: block;\n  max-width: 100%;\n  fill: #fff;\n  width: 1.5em;\n  height: 1.5em;\n}\n\n.social-icons svg:hover {\n  fill: #2199e8;\n}\n\n</style>\n"
  },
  {
    "path": "examples/integration/contentful/pages/tags/_tag.vue",
    "content": "<template>\n  <div>\n    <header class=\"tag-page header\">\n      <div class=\"foreground\">\n        <div class=\"page-bar wrapper\">\n          <Navigation></Navigation>\n        </div>\n        <div class=\"page-info wrapper\">\n          <h2>#{{ tag }}</h2>\n        </div>\n      </div>\n    </header>\n\n    <section class=\"body-container\">\n      <div class=\"items-bar wrapper\">\n        <h2>{{ $t('pages.tags.subtitle', { tag, count: posts.length }) }}</h2>\n      </div>\n      <ul class=\"items-list wrapper\">\n        <li class=\"item\" v-for=\"post in posts\">\n          <article-preview :post=\"post\"></article-preview>\n        </li>\n      </ul>\n    </section>\n  </div>\n</template>\n\n<script>\nimport { createClient } from '~/plugins/contentful.js'\nimport Navigation from '~/components/navigation.vue'\nimport ArticlePreview from '~/components/article-preview.vue'\n\nconst client = createClient()\n\nexport default {\n  asyncData ({ app, env, params }) {\n    return client.getEntries({\n      'content_type': env.CTF_BLOG_POST_TYPE_ID,\n      'fields.tags[in]': params.tag,\n      order: '-sys.createdAt',\n      locale: app.i18n.locale\n    }).then(entries => {\n      return {\n        posts: entries.items,\n        tag: params.tag\n      }\n    })\n  },\n  components: {\n    ArticlePreview,\n    Navigation\n  }\n}\n</script>\n"
  },
  {
    "path": "examples/integration/contentful/plugins/README.md",
    "content": "# PLUGINS\n\nThis directory contains your Javascript plugins that you want to run before instantiating the root vue.js application.\n\nMore information about the usage of this directory in the documentation:\nhttps://nuxtjs.org/guide/plugins\n\n**This directory is not required, you can delete it if you don't want to use it.**\n"
  },
  {
    "path": "examples/integration/contentful/plugins/contentful.js",
    "content": "const contentful = require('contentful')\nconst defaultConfig = {\n  CTF_SPACE_ID: process.env.CTF_SPACE_ID,\n  CTF_CDA_ACCESS_TOKEN: process.env.CTF_CDA_ACCESS_TOKEN\n}\n\nmodule.exports = {\n  createClient (config = defaultConfig) {\n    return contentful.createClient({\n      space: config.CTF_SPACE_ID,\n      accessToken: config.CTF_CDA_ACCESS_TOKEN\n    })\n  }\n}\n"
  },
  {
    "path": "examples/integration/contentful/plugins/i18n.js",
    "content": "import Vue from 'vue'\nimport VueI18n from 'vue-i18n'\n\nconst DEFAULT_LOCALE = 'en-US'\n\nVue.use(VueI18n)\n\nexport default ({ app, req }) => {\n  let locale = DEFAULT_LOCALE\n\n  if (process.client) {\n    const navigator = window.navigator\n    const languages = navigator.languages || navigator.language || navigator.browserLanguage || navigator.userLanguage\n    locale = languages[0]\n  } else if (req) {\n    locale = req.headers['accept-language'].split(',')[0]\n  }\n\n  console.log(`plugins: locale=${locale}`)\n  app.i18n = new VueI18n({\n    locale,\n    fallbackLocale: DEFAULT_LOCALE,\n    messages: {\n      'en-US': require('~/locales/en-US.json'),\n      'ja': require('~/locales/ja.json')\n    },\n    dateTimeFormats: {\n      'en-US': {\n        short: { year: 'numeric', month: 'short', day: 'numeric' }\n      },\n      'ja': {\n        short: { year: 'numeric', month: 'short', day: 'numeric' }\n      }\n    }\n  })\n}\n"
  },
  {
    "path": "examples/integration/contentful/static/README.md",
    "content": "# STATIC\n\nThis directory contains your static files.\nEach file inside this directory is mapped to /.\n\nExample: /static/robots.txt is mapped as /robots.txt.\n\nMore information about the usage of this directory in the documentation:\nhttps://nuxtjs.org/guide/assets#static\n\n**This directory is not required, you can delete it if you don't want to use it.**\n"
  },
  {
    "path": "examples/integration/contentful/store/README.md",
    "content": "# STORE\n\nThis directory contains your Vuex Store files.\nVuex Store option is implemented in the Nuxt.js framework.\nCreating a index.js file in this directory activate the option in the framework automatically.\n\nMore information about the usage of this directory in the documentation:\nhttps://nuxtjs.org/guide/vuex-store\n\n**This directory is not required, you can delete it if you don't want to use it.**\n"
  },
  {
    "path": "examples/interpolation/places/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"utf-8\">\n    <title>component interpolation</title>\n    <script src=\"../../../node_modules/vue/dist/vue.min.js\"></script>\n    <script src=\"../../../dist/vue-i18n.min.js\"></script>\n  </head>\n  <body>\n    <div id=\"app\">\n      <form>\n        <div class=\"usernam\">\n          <label for=\"username\">username:</label>\n          <input id=\"username\" type=\"text\" value=\"username\">\n        </div>\n        <div class=\"email\">\n          <label for=\"email\">email:</label>\n          <input id=\"email\" type=\"text\" value=\"foo@bar.com\">\n        </div>\n        <div class=\"agreement\">\n          <input id=\"tos\" type=\"checkbox\">\n          <i18n path=\"term\" tag=\"label\" for=\"tos\">\n            <a :href=\"url\" target=\"_blank\">{{ $t('tos') }}</a>\n          </i18n>\n        </div>\n        <input type=\"submit\" value=\"submit\">\n      </form>\n    </div>\n    <script>\n      var messages = {\n        en: {\n          tos: 'Term of Service',\n          term: 'I accept xxx {0}.'\n        },\n        ja: {\n          tos: '利用規約',\n          term: '私は xxx の{0}に同意します。'\n        }\n      }\n      \n      Vue.use(VueI18n)\n      \n      var i18n = new VueI18n({\n        locale: 'en',\n        messages: messages\n      })\n      new Vue({\n        i18n: i18n,\n        data: {\n          url: '/term'\n        }\n      }).$mount('#app')\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "examples/interpolation/slots/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"utf-8\">\n    <title>component interpolation</title>\n    <script src=\"../../../node_modules/vue/dist/vue.min.js\"></script>\n    <script src=\"../../../dist/vue-i18n.min.js\"></script>\n  </head>\n  <body>\n    <div id=\"app\">\n      <form>\n        <div class=\"usernam\">\n          <label for=\"username\">username:</label>\n          <input id=\"username\" type=\"text\" value=\"username\">\n        </div>\n        <div class=\"email\">\n          <label for=\"email\">email:</label>\n          <input id=\"email\" type=\"text\" value=\"foo@bar.com\">\n        </div>\n        <div class=\"agreement\">\n          <input id=\"tos\" type=\"checkbox\">\n          <i18n path=\"term\" tag=\"label\" for=\"tos\">\n            <a slot=\"tos\" :href=\"url\" target=\"_blank\">{{ $t('tos') }}</a>\n          </i18n>\n        </div>\n        <input type=\"submit\" value=\"submit\">\n      </form>\n    </div>\n    <script>\n      var messages = {\n        en: {\n          tos: 'Term of Service',\n          term: 'I accept xxx {tos}.'\n        },\n        ja: {\n          tos: '利用規約',\n          term: '私は xxx の{tos}に同意します。'\n        }\n      }\n      \n      Vue.use(VueI18n)\n      \n      var i18n = new VueI18n({\n        locale: 'en',\n        messages: messages\n      })\n      new Vue({\n        i18n: i18n,\n        data: {\n          url: '/term'\n        }\n      }).$mount('#app')\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "examples/module/nuxt/.gitignore",
    "content": "# Created by .ignore support plugin (hsz.mobi)\n### Node template\n# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Runtime data\npids\n*.pid\n*.seed\n*.pid.lock\n\n# Directory for instrumented libs generated by jscoverage/JSCover\nlib-cov\n\n# Coverage directory used by tools like istanbul\ncoverage\n\n# nyc test coverage\n.nyc_output\n\n# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)\n.grunt\n\n# Bower dependency directory (https://bower.io/)\nbower_components\n\n# node-waf configuration\n.lock-wscript\n\n# Compiled binary addons (https://nodejs.org/api/addons.html)\nbuild/Release\n\n# Dependency directories\nnode_modules/\njspm_packages/\n\n# TypeScript v1 declaration files\ntypings/\n\n# Optional npm cache directory\n.npm\n\n# Optional eslint cache\n.eslintcache\n\n# Optional REPL history\n.node_repl_history\n\n# Output of 'npm pack'\n*.tgz\n\n# Yarn Integrity file\n.yarn-integrity\n\n# dotenv environment variables file\n.env\n\n# parcel-bundler cache (https://parceljs.org/)\n.cache\n\n# next.js build output\n.next\n\n# nuxt.js build output\n.nuxt\n\n# Nuxt generate\ndist\n\n# vuepress build output\n.vuepress/dist\n\n# Serverless directories\n.serverless\n\n# IDE / Editor\n.idea\n.editorconfig\n\n# Service worker\nsw.*\n\n# Mac OSX\n.DS_Store"
  },
  {
    "path": "examples/module/nuxt/README.md",
    "content": "# vue-i18n-extensions-module-using-example-for-nuxt\n\n> vue-i18n-extentions module using example for Nuxt.js\n\n## Build Setup\n\n``` bash\n# install dependencies\n$ npm install\n\n# serve with hot reload at localhost:3000\n$ npm run dev\n\n# build for production and launch server\n$ npm run build\n$ npm start\n\n# generate static project\n$ npm run generate\n```\n\nFor detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org).\n"
  },
  {
    "path": "examples/module/nuxt/assets/README.md",
    "content": "# ASSETS\n\n**This directory is not required, you can delete it if you don't want to use it.**\n\nThis directory contains your un-compiled assets such as LESS, SASS, or JavaScript.\n\nMore information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).\n"
  },
  {
    "path": "examples/module/nuxt/components/Logo.vue",
    "content": "<template>\n  <div class=\"VueToNuxtLogo\">\n    <div class=\"Triangle Triangle--two\" />\n    <div class=\"Triangle Triangle--one\" />\n    <div class=\"Triangle Triangle--three\" />\n    <div class=\"Triangle Triangle--four\" />\n  </div>\n</template>\n\n<style>\n.VueToNuxtLogo {\n  display: inline-block;\n  animation: turn 2s linear forwards 1s;\n  transform: rotateX(180deg);\n  position: relative;\n  overflow: hidden;\n  height: 180px;\n  width: 245px;\n}\n\n.Triangle {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 0;\n}\n\n.Triangle--one {\n  border-left: 105px solid transparent;\n  border-right: 105px solid transparent;\n  border-bottom: 180px solid #41b883;\n}\n\n.Triangle--two {\n  top: 30px;\n  left: 35px;\n  animation: goright 0.5s linear forwards 3.5s;\n  border-left: 87.5px solid transparent;\n  border-right: 87.5px solid transparent;\n  border-bottom: 150px solid #3b8070;\n}\n\n.Triangle--three {\n  top: 60px;\n  left: 35px;\n  animation: goright 0.5s linear forwards 3.5s;\n  border-left: 70px solid transparent;\n  border-right: 70px solid transparent;\n  border-bottom: 120px solid #35495e;\n}\n\n.Triangle--four {\n  top: 120px;\n  left: 70px;\n  animation: godown 0.5s linear forwards 3s;\n  border-left: 35px solid transparent;\n  border-right: 35px solid transparent;\n  border-bottom: 60px solid #fff;\n}\n\n@keyframes turn {\n  100% {\n    transform: rotateX(0deg);\n  }\n}\n\n@keyframes godown {\n  100% {\n    top: 180px;\n  }\n}\n\n@keyframes goright {\n  100% {\n    left: 70px;\n  }\n}\n</style>\n"
  },
  {
    "path": "examples/module/nuxt/components/README.md",
    "content": "# COMPONENTS\n\n**This directory is not required, you can delete it if you don't want to use it.**\n\nThe components directory contains your Vue.js Components.\n\n_Nuxt.js doesn't supercharge these components._\n"
  },
  {
    "path": "examples/module/nuxt/layouts/README.md",
    "content": "# LAYOUTS\n\n**This directory is not required, you can delete it if you don't want to use it.**\n\nThis directory contains your Application Layouts.\n\nMore information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).\n"
  },
  {
    "path": "examples/module/nuxt/layouts/default.vue",
    "content": "<template>\n  <div>\n    <nuxt />\n  </div>\n</template>\n\n<style>\nhtml {\n  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',\n    Roboto, 'Helvetica Neue', Arial, sans-serif;\n  font-size: 16px;\n  word-spacing: 1px;\n  -ms-text-size-adjust: 100%;\n  -webkit-text-size-adjust: 100%;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  box-sizing: border-box;\n}\n\n*,\n*:before,\n*:after {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.button--green {\n  display: inline-block;\n  border-radius: 4px;\n  border: 1px solid #3b8070;\n  color: #3b8070;\n  text-decoration: none;\n  padding: 10px 30px;\n}\n\n.button--green:hover {\n  color: #fff;\n  background-color: #3b8070;\n}\n\n.button--grey {\n  display: inline-block;\n  border-radius: 4px;\n  border: 1px solid #35495e;\n  color: #35495e;\n  text-decoration: none;\n  padding: 10px 30px;\n  margin-left: 15px;\n}\n\n.button--grey:hover {\n  color: #fff;\n  background-color: #35495e;\n}\n</style>\n"
  },
  {
    "path": "examples/module/nuxt/locales/en.json",
    "content": "{\n  \"title\": {\n    \"main\": \"nuxt\",\n    \"sub\": \"Nuxt.js project\"\n  },\n  \"links\": {\n    \"docs\": \"Documentation\",\n    \"github\": \"GitHub\"\n  }\n}\n"
  },
  {
    "path": "examples/module/nuxt/locales/ja.json",
    "content": "{\n  \"title\": {\n    \"main\": \"nuxt\",\n    \"sub\": \"Nuxt.js プロジェクト\"\n  },\n  \"links\": {\n    \"docs\": \"ドキュメント\",\n    \"github\": \"GitHub\"\n  }\n}\n"
  },
  {
    "path": "examples/module/nuxt/middleware/README.md",
    "content": "# MIDDLEWARE\n\n**This directory is not required, you can delete it if you don't want to use it.**\n\nThis directory contains your application middleware.\nMiddleware let you define custom functions that can be run before rendering either a page or a group of pages.\n\nMore information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).\n"
  },
  {
    "path": "examples/module/nuxt/nuxt.config.js",
    "content": "const Vue = require('vue')\nconst VueI18n = require('vue-i18n')\nconst i18nExtensions = require('vue-i18n-extensions')\n\nVue.use(VueI18n)\n\nconst i18n = new VueI18n({\n  locale: 'en',\n  messages: {\n    en: require('./locales/en.json'),\n    ja: require('./locales/ja.json')\n  }\n})\n\nexport default {\n  mode: 'universal',\n  /*\n  ** Headers of the page\n  */\n  head: {\n    title: process.env.npm_package_name || '',\n    meta: [\n      { charset: 'utf-8' },\n      { name: 'viewport', content: 'width=device-width, initial-scale=1' },\n      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }\n    ],\n    link: [\n      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }\n    ]\n  },\n  /*\n  ** Customize the progress-bar color\n  */\n  loading: { color: '#fff' },\n  /*\n  ** Global CSS\n  */\n  css: [\n  ],\n  /*\n  ** Plugins to load before mounting the App\n  */\n  plugins: [\n  ],\n  /*\n  ** Nuxt.js modules\n  */\n  modules: [\n  ],\n  /*\n  ** Build configuration\n  */\n  build: {\n    /*\n    ** You can extend webpack config here\n    */\n    extend (config, ctx) {\n      // inject `compilerOptions` to vue-loader options\n      config.module.rules.forEach(rule => {\n        if (rule.loader === 'vue-loader') {\n          rule.options.compilerOptions = rule.options.compilerOptions || {}\n          rule.options.compilerOptions.modules = [i18nExtensions.module(i18n)]\n        }\n      })\n    }\n  }\n}\n"
  },
  {
    "path": "examples/module/nuxt/package.json",
    "content": "{\n  \"name\": \"vue-i18n-extensions-module-using-example-for-nuxt\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"nuxt\",\n    \"build\": \"nuxt build\",\n    \"start\": \"nuxt start\",\n    \"generate\": \"nuxt generate\"\n  },\n  \"dependencies\": {\n    \"nuxt\": \"^2.0.0\",\n    \"vue-i18n\": \"^8.11.2\"\n  },\n  \"devDependencies\": {\n    \"nodemon\": \"^1.18.9\",\n    \"vue-i18n-extensions\": \"^0.2.1\"\n  }\n}\n"
  },
  {
    "path": "examples/module/nuxt/pages/README.md",
    "content": "# PAGES\n\nThis directory contains your Application Views and Routes.\nThe framework reads all the `*.vue` files inside this directory and creates the router of your application.\n\nMore information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).\n"
  },
  {
    "path": "examples/module/nuxt/pages/index.vue",
    "content": "<template>\n  <div class=\"container\">\n    <div>\n      <logo />\n      <h1 class=\"title\" v-t=\"'title.main'\"></h1>\n      <h2 class=\"subtitle\" v-t=\"'title.sub'\"></h2>\n      <div class=\"links\">\n        <a\n          href=\"https://nuxtjs.org/\"\n          target=\"_blank\"\n          class=\"button--green\"\n        >Documentation</a>\n        <a\n          href=\"https://github.com/nuxt/nuxt.js\"\n          target=\"_blank\"\n          class=\"button--grey\"\n        >GitHub</a>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport Logo from '~/components/Logo.vue'\n\nexport default {\n  components: {\n    Logo\n  }\n}\n</script>\n\n<style>\n.container {\n  margin: 0 auto;\n  min-height: 100vh;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n}\n\n.title {\n  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,\n    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  display: block;\n  font-weight: 300;\n  font-size: 100px;\n  color: #35495e;\n  letter-spacing: 1px;\n}\n\n.subtitle {\n  font-weight: 300;\n  font-size: 42px;\n  color: #526488;\n  word-spacing: 5px;\n  padding-bottom: 15px;\n}\n\n.links {\n  padding-top: 15px;\n}\n</style>\n"
  },
  {
    "path": "examples/module/nuxt/plugins/README.md",
    "content": "# PLUGINS\n\n**This directory is not required, you can delete it if you don't want to use it.**\n\nThis directory contains Javascript plugins that you want to run before mounting the root Vue.js application.\n\nMore information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).\n"
  },
  {
    "path": "examples/module/nuxt/static/README.md",
    "content": "# STATIC\n\n**This directory is not required, you can delete it if you don't want to use it.**\n\nThis directory contains your static files.\nEach file inside this directory is mapped to `/`.\nThus you'd want to delete this README.md before deploying to production.\n\nExample: `/static/robots.txt` is mapped as `/robots.txt`.\n\nMore information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).\n"
  },
  {
    "path": "examples/module/nuxt/store/README.md",
    "content": "# STORE\n\n**This directory is not required, you can delete it if you don't want to use it.**\n\nThis directory contains your Vuex Store files.\nVuex Store option is implemented in the Nuxt.js framework.\n\nCreating a file in this directory automatically activates the option in the framework.\n\nMore information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).\n"
  },
  {
    "path": "examples/module/rollup/.gitignore",
    "content": ".DS_Store\nnode_modules/\ndist/bundle.css\ndist/bundle.js\nnpm-debug.log\nyarn-error.log\n\n# Editor directories and files\n.idea\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n"
  },
  {
    "path": "examples/module/rollup/README.md",
    "content": "# vue-i18n-extensions-module-using-example-for-rollup\n\n> vue-i18n-extentions module using example for rollup\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# build for production\nnpm run build\n\n# serve at localhost:5000\nnpm run serve\n\n```\n\nFor detailed explanation on how things work, consult the [docs for rollup-plugin-vue](http://vuejs.github.io/rollup-plugin-vue/)\n"
  },
  {
    "path": "examples/module/rollup/dist/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <title>vue-i18n-extensions-module-using-example-for-rollup</title>\n  </head>\n  <body>\n    <div id=\"app\"></div>\n    <script src=\"/bundle.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "examples/module/rollup/package.json",
    "content": "{\n  \"name\": \"vue-i18n-extensions-module-using-example-for-rollup\",\n  \"description\": \"vue-i18n-extensions module using example for rollup\",\n  \"version\": \"1.0.0\",\n  \"dependencies\": {\n    \"vue\": \"^2.6.10\"\n  },\n  \"devDependencies\": {\n    \"cross-env\": \"^5.2.0\",\n    \"rollup\": \"^1.14.6\",\n    \"rollup-plugin-buble\": \"^0.19.6\",\n    \"rollup-plugin-commonjs\": \"^10.0.0\",\n    \"rollup-plugin-node-resolve\": \"^5.0.1\",\n    \"rollup-plugin-replace\": \"^2.2.0\",\n    \"rollup-plugin-serve\": \"^1.0.2\",\n    \"rollup-plugin-uglify\": \"^6.0.2\",\n    \"rollup-plugin-vue\": \"^5.0.0\",\n    \"vue-i18n\": \"^8.11.2\",\n    \"vue-i18n-extensions\": \"^0.2.1\",\n    \"vue-template-compiler\": \"^2.6.10\"\n  },\n  \"license\": \"MIT\",\n  \"private\": true,\n  \"scripts\": {\n    \"build\": \"cross-env NODE_ENV=production rollup -c ./rollup.config.js --format iife\",\n    \"serve\": \"cross-env NODE_ENV=development rollup -c ./rollup.config.js --format iife\"\n  }\n}\n"
  },
  {
    "path": "examples/module/rollup/rollup.config.js",
    "content": "import vue from 'rollup-plugin-vue'\nimport buble from 'rollup-plugin-buble'\nimport resolve from 'rollup-plugin-node-resolve'\nimport replace from 'rollup-plugin-replace'\nimport commonjs from 'rollup-plugin-commonjs'\nimport { uglify } from 'rollup-plugin-uglify'\nimport serve from 'rollup-plugin-serve'\nimport Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport { module } from 'vue-i18n-extensions'\n\nVue.use(VueI18n)\n\nconst i18n = new VueI18n({\n  locale: 'en',\n  messages: {\n    en: {\n      headers: {\n        links: 'Essential Links',\n        ecosystem: 'Ecosystem'\n      },\n      items: {\n        docs: 'Core Docs',\n        forum: 'Forum',\n        chat: 'Gitter Chat',\n        twitter: 'Twitter',\n        routing: 'vue-router',\n        store: 'vuex',\n        webpack: 'vue-loader',\n        curated: 'awesome-vue'\n      }\n    },\n    ja: {\n    }\n  }\n})\n\nconst external = [\n  //'vue'\n]\nconst globals = {\n  //vue: 'Vue'\n}\n\nconst plugins = [\n  resolve({\n    customResolveOptions: {\n      moduleDirectory: 'node_modules'\n    }\n  }),\n  replace({\n    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)\n  }),\n  commonjs(),\n  vue({\n    css: true,\n    compileTemplate: true,\n    template: {\n      compilerOptions: {\n        modules: [module(i18n)]\n      }\n    }\n  }),\n  buble({ exclude: 'node_modules/**' })\n]\n\nif (process.env.NODE_ENV === 'production') {\n  plugins.push(uglify())\n} else if (process.env.NODE_ENV === 'development') {\n  plugins.push(serve({\n    contentBase: ['dist'],\n    port: 5000,\n    open: true\n  }))\n}\n\nexport default {\n  input: 'src/index.js',\n  external,\n  output: {\n    file: 'dist/bundle.js',\n    name: 'app',\n    format: 'iife',\n    sourcemap: true,\n    globals\n  },\n  plugins\n}\n"
  },
  {
    "path": "examples/module/rollup/src/App.vue",
    "content": "<template>\n  <div id=\"app\">\n    <h1>{{ msg }}</h1>\n    <h2 v-t=\"'headers.links'\"></h2>\n    <ul>\n      <li><a href=\"https://vuejs.org\" target=\"_blank\" v-t=\"'items.docs'\"></a></li>\n      <li><a href=\"https://forum.vuejs.org\" target=\"_blank\" v-t=\"'items.forum'\"></a></li>\n      <li><a href=\"https://gitter.im/vuejs/vue\" target=\"_blank\" v-t=\"'items.chat'\"></a></li>\n      <li><a href=\"https://twitter.com/vuejs\" target=\"_blank\" v-t=\"'items.twitter'\"></a></li>\n    </ul>\n    <h2 v-t=\"'headers.ecosystem'\"></h2>\n    <ul>\n      <li><a href=\"http://router.vuejs.org/\" target=\"_blank\" v-t=\"'items.routing'\"></a></li>\n      <li><a href=\"http://vuex.vuejs.org/\" target=\"_blank\" v-t=\"'items.store'\"></a></li>\n      <li><a href=\"http://vue-loader.vuejs.org/\" target=\"_blank\" v-t=\"'items.webpack'\"></a></li>\n      <li><a href=\"https://github.com/vuejs/awesome-vue\" target=\"_blank\" v-t=\"'items.curated'\"></a></li>\n    </ul>\n  </div>\n</template>\n\n<script>\n  export default {\n    name: 'app',\n    data () {\n      return {\n        msg: 'Welcome to Your Vue.js App'\n      }\n    }\n  }\n</script>\n\n<style>\n  #app {\n    font-family: 'Avenir', Helvetica, Arial, sans-serif;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    text-align: center;\n    color: #2c3e50;\n    margin-top: 60px;\n  }\n  \n  h1, h2 {\n    font-weight: normal;\n  }\n  \n  ul {\n    list-style-type: none;\n    padding: 0;\n  }\n  \n  li {\n    display: inline-block;\n    margin: 0 10px;\n  }\n  \n  a {\n    color: #42b983;\n  }\n</style>\n"
  },
  {
    "path": "examples/module/rollup/src/index.js",
    "content": "import Vue from 'vue'\nimport App from './App.vue'\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n})\n"
  },
  {
    "path": "examples/module/webpack/.gitignore",
    "content": ".DS_Store\nnode_modules\n/dist\n\n# local env files\n.env.local\n.env.*.local\n\n# Log files\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Editor directories and files\n.idea\n.vscode\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\n"
  },
  {
    "path": "examples/module/webpack/README.md",
    "content": "# vue-i18n-extensions-module-using-example-for-webpack\n\n> vue-i18n-extentions module using example for webpack\n\n## Project setup\n```\nnpm install\n```\n\n### Compiles and hot-reloads for development\n```\nnpm run serve\n```\n\n### Compiles and minifies for production\n```\nnpm run build\n```\n\n### Customize configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n"
  },
  {
    "path": "examples/module/webpack/babel.config.js",
    "content": "module.exports = {\n  presets: [\n    '@vue/app'\n  ]\n}\n"
  },
  {
    "path": "examples/module/webpack/package.json",
    "content": "{\n  \"name\": \"vue-i18n-extensions-module-using-example-for-webpack\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"serve\": \"vue-cli-service serve\",\n    \"build\": \"vue-cli-service build\"\n  },\n  \"dependencies\": {\n    \"core-js\": \"^2.6.5\",\n    \"vue\": \"^2.6.10\",\n    \"vue-i18n\": \"^8.11.2\"\n  },\n  \"devDependencies\": {\n    \"@vue/cli-plugin-babel\": \"^3.8.0\",\n    \"@vue/cli-service\": \"^3.8.0\",\n    \"vue-i18n-extensions\": \"^0.2.1\",\n    \"vue-template-compiler\": \"^2.6.10\"\n  },\n  \"postcss\": {\n    \"plugins\": {\n      \"autoprefixer\": {}\n    }\n  },\n  \"browserslist\": [\n    \"> 1%\",\n    \"last 2 versions\"\n  ]\n}\n"
  },
  {
    "path": "examples/module/webpack/public/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">\n    <link rel=\"icon\" href=\"<%= BASE_URL %>favicon.ico\">\n    <title>webpack</title>\n  </head>\n  <body>\n    <noscript>\n      <strong>We're sorry but webpack doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>\n    </noscript>\n    <div id=\"app\"></div>\n    <!-- built files will be auto injected -->\n  </body>\n</html>\n"
  },
  {
    "path": "examples/module/webpack/src/App.vue",
    "content": "<template>\n  <div id=\"app\">\n    <img src=\"./assets/logo.png\">\n    <h1>{{ msg }}</h1>\n    <h2 v-t=\"'headers.links'\"></h2>\n    <ul>\n      <li><a href=\"https://vuejs.org\" target=\"_blank\" v-t=\"'items.docs'\"></a></li>\n      <li><a href=\"https://forum.vuejs.org\" target=\"_blank\" v-t=\"'items.forum'\"></a></li>\n      <li><a href=\"https://gitter.im/vuejs/vue\" target=\"_blank\" v-t=\"'items.chat'\"></a></li>\n      <li><a href=\"https://twitter.com/vuejs\" target=\"_blank\" v-t=\"'items.twitter'\"></a></li>\n    </ul>\n    <h2 v-t=\"'headers.ecosystem'\"></h2>\n    <ul>\n      <li><a href=\"http://router.vuejs.org/\" target=\"_blank\" v-t=\"'items.routing'\"></a></li>\n      <li><a href=\"http://vuex.vuejs.org/\" target=\"_blank\" v-t=\"'items.store'\"></a></li>\n      <li><a href=\"http://vue-loader.vuejs.org/\" target=\"_blank\" v-t=\"'items.webpack'\"></a></li>\n      <li><a href=\"https://github.com/vuejs/awesome-vue\" target=\"_blank\" v-t=\"'items.curated'\"></a></li>\n    </ul>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'app',\n  data () {\n    return {\n      msg: 'Welcome to Your Vue.js App'\n    }\n  }\n}\n</script>\n\n<style>\n#app {\n  font-family: 'Avenir', Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n\nh1, h2 {\n  font-weight: normal;\n}\n\nul {\n  list-style-type: none;\n  padding: 0;\n}\n\nli {\n  display: inline-block;\n  margin: 0 10px;\n}\n\na {\n  color: #42b983;\n}\n</style>\n"
  },
  {
    "path": "examples/module/webpack/src/main.js",
    "content": "import Vue from 'vue'\nimport App from './App.vue'\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n})\n"
  },
  {
    "path": "examples/module/webpack/vue.config.js",
    "content": "const Vue = require('vue')\nvar VueI18n = require('vue-i18n')\nconst i18nExtensions = require('vue-i18n-extensions')\n\nVue.use(VueI18n)\n\nconst i18n = new VueI18n({\n  locale: 'ja',\n  messages: {\n    en: {\n      headers: {\n        links: 'Essential Links',\n        ecosystem: 'Ecosystem'\n      },\n      items: {\n        docs: 'Core Docs',\n        forum: 'Forum',\n        chat: 'Gitter Chat',\n        twitter: 'Twitter',\n        routing: 'vue-router',\n        store: 'vuex',\n        webpack: 'vue-loader',\n        curated: 'awesome-vue'\n      }\n    },\n    ja: {\n    }\n  },\n  missing: function (locale, key) {\n    console.warn('missing:', locale, key)\n  }\n})\n\nmodule.exports = {\n  chainWebpack: config => {\n    config.module\n      .rule('vue')\n      .use('vue-loader')\n      .loader('vue-loader')\n      .tap(options => {\n        options.compilerOptions.modules = [i18nExtensions.module(i18n)]\n        return options\n      })\n  }\n}\n"
  },
  {
    "path": "examples/number/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"utf-8\">\n    <title>number localization</title>\n    <script src=\"../../node_modules/vue/dist/vue.min.js\"></script>\n    <script src=\"../../dist/vue-i18n.min.js\"></script>\n    <script src=\"https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.ja,Intl.~locale.en\"></script>\n  </head>\n  <body>\n    <div id=\"app\">\n      <select v-model=\"locale\">\n        <option value=\"en-US\">en-US</option>\n        <option value=\"ja-JP\">ja-JP</option>\n      </select>\n      <p>{{ $t('money') }}: {{ $n(money, 'currency') }}</p>\n    </div>\n    <script>\n      var messages = {\n        'en-US': {\n          money: 'Money'\n        },\n        'ja-JP': {\n          money: 'お金'\n        }\n      }\n      var numberFormats = {\n        'en-US': {\n          currency: {\n            style: 'currency', currency: 'USD'\n          }\n        },\n        'ja-JP': {\n          currency: {\n            style: 'currency', currency: 'JPY', currencyDisplay: 'symbol'\n          }\n        }\n      }\n      \n      Vue.use(VueI18n)\n\n      var initial = 'ja-JP'\n      var i18n = new VueI18n({\n        locale: initial,\n        messages: messages,\n        numberFormats: numberFormats\n      })\n\n      var vm = new Vue({\n        i18n: i18n,\n        data: {\n          locale: initial,\n          money: 1000\n        },\n        watch: {\n          locale: function (val) {\n            this.$i18n.locale = val\n          }\n        }\n      }).$mount('#app')\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "examples/number-formatting/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"utf-8\">\n    <title>number custom formatting</title>\n    <script src=\"../../node_modules/vue/dist/vue.min.js\"></script>\n    <script src=\"../../dist/vue-i18n.min.js\"></script>\n    <script src=\"https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.ja,Intl.~locale.en\"></script>\n  </head>\n  <body>\n    <div id=\"app\">\n      <select v-model=\"locale\">\n        <option value=\"en-US\">en-US</option>\n        <option value=\"ja-JP\">ja-JP</option>\n      </select>\n      <div class=\"view\">\n        <p class=\"label\">{{ $t('money') }}:</p>\n        <i18n-n :value=\"money\" format=\"currency\" tag=\"p\" class=\"money\">\n          <template slot=\"decimal\" slot-scope=\"props\"><!-- do not render decimal separator --></template>\n          <span slot=\"fraction\" slot-scope=\"props\" style=\"vertical-align: super\">{{ props.fraction }}</span>\n        </i18n-n>\n      </div>\n    </div>\n    <script>\n      var messages = {\n        'en-US': {\n          money: 'Money'\n        },\n        'ja-JP': {\n          money: 'お金'\n        }\n      }\n      var numberFormats = {\n        'en-US': {\n          currency: {\n            style: 'currency', currency: 'USD'\n          }\n        },\n        'ja-JP': {\n          currency: {\n            style: 'currency', currency: 'JPY', currencyDisplay: 'symbol'\n          }\n        }\n      }\n\n      Vue.use(VueI18n)\n\n      var initial = 'ja-JP'\n      var i18n = new VueI18n({\n        locale: initial,\n        messages: messages,\n        numberFormats: numberFormats\n      })\n\n      new Vue({\n        i18n: i18n,\n        data: {\n          locale: initial,\n          money: 1000\n        },\n        watch: {\n          locale: function (val) {\n            this.$i18n.locale = val\n          }\n        },\n        el: '#app'\n      })\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "examples/perf/.gitignore",
    "content": ".DS_Store\nnode_modules/\ndist/\ngenerate/*.json\ngenerate/*.png\nnpm-debug.log\nyarn-error.log\n\n# Editor directories and files\n.idea\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n"
  },
  {
    "path": "examples/perf/README.md",
    "content": "# vue-i18n-performance-comparison-example\n\n> vue-i18n performance comparison example\n\n## Performance measurement prepare\n\n```sh\n# setup performance comparison examples\n$ npm run setup\n\n# build performance comparison examples\n$ npm run build\n```\n\n## Performance measurement\n\n```sh\n# serve perform comparison examples\n$ npm run serve\n\n# measure performance !!\n$ npm run perform\n```\n\n## Performance measurement targets\n- Plain: Render TODO items only (No translation)\n- Method: Render TODO items with `$t` method\n- Directive: Render TODO items with `v-t` custom directive\n- Compile: Render TODO items with compiler module\n\n## Measurement enviroments\n- Vue.config.performance = true\n- Builded Vue CLI v3\n- Development build (Disable Production build)\n- Headless chrome (pappeteer)\n\n## An approach to measurement\nRender 1000 TODO items, after that remove 10 TODO items.\n\n## Measurement items\n- Re-render user timing pass time, when remove TODO item.\n"
  },
  {
    "path": "examples/perf/compiler/.gitignore",
    "content": ".DS_Store\nnode_modules\n/dist\n\n# local env files\n.env.local\n.env.*.local\n\n# Log files\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Editor directories and files\n.idea\n.vscode\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\n"
  },
  {
    "path": "examples/perf/compiler/README.md",
    "content": "# compiler\n\n> List rendering with vue-i18n compiler module pre-localization\n"
  },
  {
    "path": "examples/perf/compiler/babel.config.js",
    "content": "module.exports = {\n  presets: [\n    '@vue/app'\n  ]\n}\n"
  },
  {
    "path": "examples/perf/compiler/package.json",
    "content": "{\n  \"name\": \"vue-i18n-with-compiler\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"serve\": \"vue-cli-service serve\",\n    \"build\": \"vue-cli-service build\"\n  },\n  \"dependencies\": {\n    \"core-js\": \"^2.6.5\",\n    \"vue\": \"^2.6.10\",\n    \"vue-i18n\": \"^8.11.2\"\n  },\n  \"devDependencies\": {\n    \"@vue/cli-plugin-babel\": \"^3.8.0\",\n    \"@vue/cli-service\": \"^3.8.0\",\n    \"vue-i18n-extensions\": \"^0.2.1\",\n    \"vue-template-compiler\": \"^2.6.10\"\n  },\n  \"postcss\": {\n    \"plugins\": {\n      \"autoprefixer\": {}\n    }\n  },\n  \"browserslist\": [\n    \"> 1%\",\n    \"last 2 versions\"\n  ]\n}\n"
  },
  {
    "path": "examples/perf/compiler/public/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">\n    <link rel=\"icon\" href=\"<%= BASE_URL %>favicon.ico\">\n    <title>compiler</title>\n  </head>\n  <body>\n    <noscript>\n      <strong>We're sorry but compiler doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>\n    </noscript>\n    <div id=\"app\"></div>\n    <!-- built files will be auto injected -->\n  </body>\n</html>\n"
  },
  {
    "path": "examples/perf/compiler/src/App.vue",
    "content": "<template>\n  <div id=\"app\">\n    <ul>\n      <li v-for=\"(todo, index) in todos\" >\n        {{ todo.title }}<button @click=\"removeTodo(index)\" v-t=\"{ path: 'label' }\"></button>\n      </li>\n    </ul>\n  </div>\n</template>\n\n<script>\n  const items = []\n  for (let i = 1; i <= 1000; i++) {\n    items.push({\n      id: i,\n      title: 'todo ' + i.toString()\n    })\n  }\n\n  export default {\n    name: 'app',\n    data () {\n      return {\n        todos: items,\n        nextTodoId: items.length\n      }\n    },\n    methods: {\n      addNewTodo () {\n        const id = this.nextTodoId++\n        this.todos.push({\n          id,\n          title: 'todo ' + id.toString()\n        })\n      },\n      removeTodo (index) {\n        this.todos.splice(index, 1)\n      }\n    }\n  }\n</script>\n"
  },
  {
    "path": "examples/perf/compiler/src/main.js",
    "content": "import Vue from 'vue'\nimport App from './App.vue'\n\nVue.config.performance = true\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n})\n"
  },
  {
    "path": "examples/perf/compiler/vue.config.js",
    "content": "const Vue = require('vue')\nvar VueI18n = require('vue-i18n')\nconst i18nExtensions = require('vue-i18n-extensions')\n\nVue.use(VueI18n)\n\nconst i18n = new VueI18n({\n  locale: 'jp',\n  messages: {\n    en: {\n      label: 'x'\n    },\n    jp: {\n      label: '☓'\n    }\n  }\n})\n\nmodule.exports = {\n  publicPath: '/compiler/dist',\n  chainWebpack: config => {\n    config.module\n      .rule('vue')\n      .use('vue-loader')\n      .loader('vue-loader')\n      .tap(options => {\n        options.compilerOptions.modules = [i18nExtensions.module(i18n)]\n        return options\n      })\n  }\n}\n"
  },
  {
    "path": "examples/perf/directive/.gitignore",
    "content": ".DS_Store\nnode_modules\n/dist\n\n# local env files\n.env.local\n.env.*.local\n\n# Log files\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Editor directories and files\n.idea\n.vscode\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\n"
  },
  {
    "path": "examples/perf/directive/README.md",
    "content": "# vue-i18n-with-directive\n\n> List rendering with vue-i18n `v-t` custom directive\n"
  },
  {
    "path": "examples/perf/directive/babel.config.js",
    "content": "module.exports = {\n  presets: [\n    '@vue/app'\n  ]\n}\n"
  },
  {
    "path": "examples/perf/directive/package.json",
    "content": "{\n  \"name\": \"vue-i18n-with-directive\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"serve\": \"vue-cli-service serve\",\n    \"build\": \"vue-cli-service build\"\n  },\n  \"dependencies\": {\n    \"core-js\": \"^2.6.5\",\n    \"vue\": \"^2.6.10\",\n    \"vue-i18n\": \"^8.11.2\"\n  },\n  \"devDependencies\": {\n    \"@vue/cli-plugin-babel\": \"^3.8.0\",\n    \"@vue/cli-service\": \"^3.8.0\",\n    \"vue-template-compiler\": \"^2.6.10\"\n  },\n  \"postcss\": {\n    \"plugins\": {\n      \"autoprefixer\": {}\n    }\n  },\n  \"browserslist\": [\n    \"> 1%\",\n    \"last 2 versions\"\n  ]\n}\n"
  },
  {
    "path": "examples/perf/directive/public/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">\n    <link rel=\"icon\" href=\"<%= BASE_URL %>favicon.ico\">\n    <title>directive</title>\n  </head>\n  <body>\n    <noscript>\n      <strong>We're sorry but directive doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>\n    </noscript>\n    <div id=\"app\"></div>\n    <!-- built files will be auto injected -->\n  </body>\n</html>\n"
  },
  {
    "path": "examples/perf/directive/src/App.vue",
    "content": "<template>\n  <div id=\"app\">\n    <ul>\n      <li v-for=\"(todo, index) in todos\" >\n        {{ todo.title }}<button @click=\"removeTodo(index)\" v-t=\"{ path: 'label' }\"></button>\n      </li>\n    </ul>\n  </div>\n</template>\n\n<script>\n  const items = []\n  for (let i = 1; i <= 1000; i++) {\n    items.push({\n      id: i,\n      title: 'todo ' + i.toString()\n    })\n  }\n\n  export default {\n    name: 'app',\n    data () {\n      return {\n        todos: items,\n        nextTodoId: items.length\n      }\n    },\n    methods: {\n      addNewTodo () {\n        const id = this.nextTodoId++\n        this.todos.push({\n          id,\n          title: 'todo ' + id.toString()\n        })\n      },\n      removeTodo (index) {\n        this.todos.splice(index, 1)\n      }\n    }\n  }\n</script>\n"
  },
  {
    "path": "examples/perf/directive/src/main.js",
    "content": "import Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport App from './App.vue'\n\nVue.config.performance = true\nVue.use(VueI18n)\n\nconst i18n = new VueI18n({\n  locale: 'jp',\n  messages: {\n    en: {\n      label: 'x'\n    },\n    jp: {\n      label: '☓'\n    }\n  }\n})\n\nnew Vue({\n  el: '#app',\n  i18n,\n  render: h => h(App)\n})\n"
  },
  {
    "path": "examples/perf/directive/vue.config.js",
    "content": "module.exports = {\n  publicPath: '/directive/dist'\n}\n"
  },
  {
    "path": "examples/perf/generate/.gitkeep",
    "content": ""
  },
  {
    "path": "examples/perf/index.js",
    "content": "const puppeteer = require('puppeteer')\n\nfunction parseTimings (timings) {\n  const durationPairs = []\n  let pair = null\n  timings.forEach(timing => {\n    if (timing.ph === 'b') {\n      pair = {\n        begin: timing\n      }\n    } else if (timing.ph === 'e') {\n      if (pair && pair.begin) {\n        pair.end = timing\n        durationPairs.push(pair)\n        pair = null\n      }\n    }\n  })\n  return durationPairs\n}\n\nasync function perform (browser, target, url, profileName) {\n  const page = await browser.newPage()\n  try {\n    await page.tracing.start({ path: `./generate/${profileName}.json` })\n    await page.goto(url)\n    for (let i = 0; i < 10; i++) {\n      await page.waitForSelector('#app button')\n      await page.click('#app button')\n    }\n    await page.tracing.stop()\n    await page.screenshot({ path: `./generate/${profileName}.png` });\n    const profile = require(`./generate/${profileName}.json`)\n    const traces = profile.traceEvents\n    const timings = traces.filter(timing => {\n      return timing.cat.match(/blink\\.user_timing/) && timing.name.match(/.*<App> render$/)\n    })\n    const durations = parseTimings(timings)\n    let sum = 0.0\n    durations.forEach((duration, index) => {\n      const time = (duration.end.ts - duration.begin.ts) / 1000\n      sum += time\n      console.log(`${target} ${index + 1}: ${time} ms`)\n    })\n    console.log(`${target} average: ${sum / 10} ms`)\n  } catch (e) {\n    console.error(e)\n  } finally {\n    await page.close()\n  }\n}\n\nasync function main () {\n  const browser = await puppeteer.launch()\n  try {\n    await perform(browser, 'plain', 'http://localhost:5000/plain/dist/', 'plain')\n    await perform(browser, 'method', 'http://localhost:5000/method/dist/', 'method')\n    await perform(browser, 'directive', 'http://localhost:5000/directive/dist/', 'directive')\n    await perform(browser, 'compiler', 'http://localhost:5000/compiler/dist/', 'compiler')\n  } catch (e) {\n    console.error(e)\n  } finally {\n    browser.close()\n  }\n}\n\nmain()\n"
  },
  {
    "path": "examples/perf/method/.gitignore",
    "content": ".DS_Store\nnode_modules\n/dist\n\n# local env files\n.env.local\n.env.*.local\n\n# Log files\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Editor directories and files\n.idea\n.vscode\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\n"
  },
  {
    "path": "examples/perf/method/README.md",
    "content": "# vue-i18n-with-method\n\n> List rendering with vue-i18n `$t` method \n"
  },
  {
    "path": "examples/perf/method/babel.config.js",
    "content": "module.exports = {\n  presets: [\n    '@vue/app'\n  ]\n}\n"
  },
  {
    "path": "examples/perf/method/package.json",
    "content": "{\n  \"name\": \"vue-i18n-with-method\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"serve\": \"vue-cli-service serve\",\n    \"build\": \"vue-cli-service build\"\n  },\n  \"dependencies\": {\n    \"core-js\": \"^2.6.5\",\n    \"vue\": \"^2.6.10\",\n    \"vue-i18n\": \"^8.11.2\"\n  },\n  \"devDependencies\": {\n    \"@vue/cli-plugin-babel\": \"^3.8.0\",\n    \"@vue/cli-service\": \"^3.8.0\",\n    \"vue-template-compiler\": \"^2.6.10\"\n  },\n  \"postcss\": {\n    \"plugins\": {\n      \"autoprefixer\": {}\n    }\n  },\n  \"browserslist\": [\n    \"> 1%\",\n    \"last 2 versions\"\n  ]\n}\n"
  },
  {
    "path": "examples/perf/method/public/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">\n    <link rel=\"icon\" href=\"<%= BASE_URL %>favicon.ico\">\n    <title>method</title>\n  </head>\n  <body>\n    <noscript>\n      <strong>We're sorry but method doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>\n    </noscript>\n    <div id=\"app\"></div>\n    <!-- built files will be auto injected -->\n  </body>\n</html>\n"
  },
  {
    "path": "examples/perf/method/src/App.vue",
    "content": "<template>\n  <div id=\"app\">\n    <ul>\n      <li v-for=\"(todo, index) in todos\" >\n        {{ todo.title }}<button @click=\"removeTodo(index)\">{{ $t('label') }}</button>\n      </li>\n    </ul>\n  </div>\n</template>\n\n<script>\n  const items = []\n  for (let i = 1; i <= 1000; i++) {\n    items.push({\n      id: i,\n      title: 'todo ' + i.toString()\n    })\n  }\n\n  export default {\n    name: 'app',\n    data () {\n      return {\n        todos: items,\n        nextTodoId: items.length\n      }\n    },\n    methods: {\n      addNewTodo () {\n        const id = this.nextTodoId++\n        this.todos.push({\n          id,\n          title: 'todo ' + id.toString()\n        })\n      },\n      removeTodo (index) {\n        this.todos.splice(index, 1)\n      }\n    }\n  }\n</script>\n"
  },
  {
    "path": "examples/perf/method/src/main.js",
    "content": "import Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport App from './App.vue'\n\nVue.config.performance = true\nVue.use(VueI18n)\n\nconst i18n = new VueI18n({\n  locale: 'jp',\n  messages: {\n    en: {\n      label: 'x'\n    },\n    jp: {\n      label: '☓'\n    }\n  }\n})\n\nnew Vue({\n  el: '#app',\n  i18n,\n  render: h => h(App)\n})\n"
  },
  {
    "path": "examples/perf/method/vue.config.js",
    "content": "module.exports = {\n  publicPath: '/method/dist'\n}\n"
  },
  {
    "path": "examples/perf/package.json",
    "content": "{\n  \"name\": \"vue-i18n-performance-comparison-example\",\n  \"description\": \"vue-i18n performance comparison example\",\n  \"version\": \"1.0.0\",\n  \"main\": \"./index.js\",\n  \"private\": true,\n  \"scripts\": {\n    \"setup\": \"cd plain && npm i && cd ../method && npm i && cd ../directive && npm i && cd ../compiler && npm i && cd ../\",\n    \"setup:clean\": \"cd plain && rm -rf ./node_modules ./package-lock.json && cd ../method && rm -rf ./node_modules ./package-lock.json && cd ../directive && rm -rf ./node_modules ./package-lock.json && cd ../compiler && rm -rf ./node_modules ./package-lock.json && cd ../\",\n    \"build\": \"cd plain && npm run build && cd ../method && npm run build && cd ../directive && npm run build && cd ../compiler && npm run build && cd ../\",\n    \"perform\": \"node ./index.js\",\n    \"serve\": \"serve ./\",\n    \"clean\": \"rm -rf ./generate/*.json ./generate/*.png\"\n  },\n  \"author\": \"kazuya kawaguchi <kawakazu80@gmail.com>\",\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"puppeteer\": \"^1.17.0\",\n    \"serve\": \"^11.0.1\"\n  }\n}\n"
  },
  {
    "path": "examples/perf/plain/.gitignore",
    "content": ".DS_Store\nnode_modules\n/dist\n\n# local env files\n.env.local\n.env.*.local\n\n# Log files\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Editor directories and files\n.idea\n.vscode\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\n"
  },
  {
    "path": "examples/perf/plain/README.md",
    "content": "# list-perform-comparison-for-vue-i18n\n\n> Plain list rendering (due to comparison)\n"
  },
  {
    "path": "examples/perf/plain/babel.config.js",
    "content": "module.exports = {\n  presets: [\n    '@vue/app'\n  ]\n}\n"
  },
  {
    "path": "examples/perf/plain/package.json",
    "content": "{\n  \"name\": \"list-perform-comparison-for-vue-i18n\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"serve\": \"vue-cli-service serve\",\n    \"build\": \"vue-cli-service build\"\n  },\n  \"dependencies\": {\n    \"core-js\": \"^2.6.5\",\n    \"vue\": \"^2.6.10\"\n  },\n  \"devDependencies\": {\n    \"@vue/cli-plugin-babel\": \"^3.8.0\",\n    \"@vue/cli-service\": \"^3.8.0\",\n    \"vue-template-compiler\": \"^2.6.10\"\n  },\n  \"postcss\": {\n    \"plugins\": {\n      \"autoprefixer\": {}\n    }\n  },\n  \"browserslist\": [\n    \"> 1%\",\n    \"last 2 versions\"\n  ]\n}\n"
  },
  {
    "path": "examples/perf/plain/public/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">\n    <link rel=\"icon\" href=\"<%= BASE_URL %>favicon.ico\">\n    <title>plain</title>\n  </head>\n  <body>\n    <noscript>\n      <strong>We're sorry but plain doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>\n    </noscript>\n    <div id=\"app\"></div>\n    <!-- built files will be auto injected -->\n  </body>\n</html>\n"
  },
  {
    "path": "examples/perf/plain/src/App.vue",
    "content": "<template>\n  <div id=\"app\">\n    <ul>\n      <li v-for=\"(todo, index) in todos\" >\n        {{ todo.title }}<button @click=\"removeTodo(index)\">X</button>\n      </li>\n    </ul>\n  </div>\n</template>\n\n<script>\n  const items = []\n  for (let i = 1; i <= 1000; i++) {\n    items.push({\n      id: i,\n      title: 'todo ' + i.toString()\n    })\n  }\n\n  export default {\n    name: 'app',\n    data () {\n      return {\n        todos: items,\n        nextTodoId: items.length\n      }\n    },\n    methods: {\n      addNewTodo () {\n        const id = this.nextTodoId++\n        this.todos.push({\n          id,\n          title: 'todo ' + id.toString()\n        })\n      },\n      removeTodo (index) {\n        this.todos.splice(index, 1)\n      }\n    }\n  }\n</script>\n"
  },
  {
    "path": "examples/perf/plain/src/main.js",
    "content": "import Vue from 'vue'\nimport App from './App.vue'\n\nVue.config.performance = true\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n})\n"
  },
  {
    "path": "examples/perf/plain/vue.config.js",
    "content": "module.exports = {\n  publicPath: '/plain/dist'\n}\n"
  },
  {
    "path": "examples/sfc/.gitignore",
    "content": ".DS_Store\nnode_modules\n/dist\n\n# local env files\n.env.local\n.env.*.local\n\n# Log files\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Editor directories and files\n.idea\n.vscode\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\n"
  },
  {
    "path": "examples/sfc/README.md",
    "content": "# sfc\n\n> vue-i18n custom blocks example\n\n## Project setup\n```\nnpm install\n```\n\n### Compiles and hot-reloads for development\n```\nnpm run serve\n```\n"
  },
  {
    "path": "examples/sfc/babel.config.js",
    "content": "module.exports = {\n  presets: [\n    '@vue/app'\n  ]\n}\n"
  },
  {
    "path": "examples/sfc/package.json",
    "content": "{\n  \"name\": \"sfc\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"serve\": \"vue-cli-service serve\",\n    \"build\": \"vue-cli-service build\"\n  },\n  \"dependencies\": {\n    \"core-js\": \"^2.6.5\",\n    \"vue\": \"^2.6.10\",\n    \"vue-i18n\": \"^8.11.2\"\n  },\n  \"devDependencies\": {\n    \"@kazupon/vue-i18n-loader\": \"^0.3.0\",\n    \"@vue/cli-plugin-babel\": \"^3.8.0\",\n    \"@vue/cli-service\": \"^3.8.0\",\n    \"vue-template-compiler\": \"^2.6.10\"\n  },\n  \"postcss\": {\n    \"plugins\": {\n      \"autoprefixer\": {}\n    }\n  },\n  \"browserslist\": [\n    \"> 1%\",\n    \"last 2 versions\"\n  ]\n}\n"
  },
  {
    "path": "examples/sfc/public/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">\n    <link rel=\"icon\" href=\"<%= BASE_URL %>favicon.ico\">\n    <title>sfc</title>\n  </head>\n  <body>\n    <noscript>\n      <strong>We're sorry but sfc doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>\n    </noscript>\n    <div id=\"app\"></div>\n    <!-- built files will be auto injected -->\n  </body>\n</html>\n"
  },
  {
    "path": "examples/sfc/src/App.vue",
    "content": "<template>\n  <div id=\"app\">\n    <label for=\"locale\">locale</label>\n    <select v-model=\"locale\">\n      <option>en</option>\n      <option>ja</option>\n    </select>\n    <p>message: {{ $t('hello') }}</p>\n  </div>\n</template>\n\n<i18n>\n{\n  \"en\": {\n    \"hello\": \"hello world!\"\n  },\n  \"ja\": {\n    \"hello\": \"こんにちは、世界！\"\n  }\n}\n</i18n>\n\n<script>\nexport default {\n  name: 'App',\n  data () { return { locale: 'en' } },\n  watch: {\n    locale (val) {\n      this.$i18n.locale = val\n    }\n  }\n}\n</script>\n"
  },
  {
    "path": "examples/sfc/src/main.js",
    "content": "import Vue from 'vue'\nimport App from './App.vue'\nimport VueI18n from 'vue-i18n'\n\nVue.config.productionTip = false\nVue.use(VueI18n)\n\nconst i18n = new VueI18n({\n  locale: 'en',\n  messages: {\n    en: {}\n  }\n})\n\nnew Vue({\n  i18n,\n  render: h => h(App)\n}).$mount('#app')\n"
  },
  {
    "path": "examples/sfc/vue.config.js",
    "content": "module.exports = {\n  chainWebpack: config => {\n    config.module\n      .rule('i18n')\n      .resourceQuery(/blockType=i18n/)\n      .type('javascript/auto')\n      .use('i18n')\n      .loader('@kazupon/vue-i18n-loader')\n      .end()\n  }\n}\n  "
  },
  {
    "path": "examples/ssr/hn2/.babelrc",
    "content": "{\n  \"presets\": [\n    [\"env\", { \"modules\": false }]\n  ],\n  \"plugins\": [\n    \"syntax-dynamic-import\"\n  ]\n}\n"
  },
  {
    "path": "examples/ssr/hn2/.gitignore",
    "content": ".DS_Store\nnode_modules/\ndist/\nnpm-debug.log\n.idea\n*.iml"
  },
  {
    "path": "examples/ssr/hn2/LICENSE",
    "content": "The MIT License (MIT)\n\nCopyright (c) 2013-present, Yuxi (Evan) You\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n"
  },
  {
    "path": "examples/ssr/hn2/README.md",
    "content": "# vue-i18n for Server-Side Rendering\n\n> This examples is based on vue-hackernews-2.0\n\n## Build Setup\n\n**Requires Node.js 7+**\n\n``` bash\n# install dependencies\nnpm install # or yarn\n\n# serve in dev mode, with hot reload at localhost:8080\nnpm run dev\n\n# build for production\nnpm run build\n\n# serve in production mode\nnpm start\n```\n\n## License\n\nMIT\n"
  },
  {
    "path": "examples/ssr/hn2/build/setup-dev-server.js",
    "content": "const path = require('path')\nconst webpack = require('webpack')\nconst MFS = require('memory-fs')\nconst clientConfig = require('./webpack.client.config')\nconst serverConfig = require('./webpack.server.config')\n\nconst readFile = (fs, file) => {\n  try {\n    return fs.readFileSync(path.join(clientConfig.output.path, file), 'utf-8')\n  } catch (e) {}\n}\n\nmodule.exports = function setupDevServer (app, cb) {\n  let bundle, clientManifest\n  let resolve\n  const readyPromise = new Promise(r => { resolve = r })\n  const ready = (...args) => {\n    resolve()\n    cb(...args)\n  }\n\n  // modify client config to work with hot middleware\n  clientConfig.entry.app = ['webpack-hot-middleware/client', clientConfig.entry.app]\n  clientConfig.output.filename = '[name].js'\n  clientConfig.plugins.push(\n    new webpack.HotModuleReplacementPlugin(),\n    new webpack.NoEmitOnErrorsPlugin()\n  )\n\n  // dev middleware\n  const clientCompiler = webpack(clientConfig)\n  const devMiddleware = require('webpack-dev-middleware')(clientCompiler, {\n    publicPath: clientConfig.output.publicPath,\n    noInfo: true\n  })\n  app.use(devMiddleware)\n  clientCompiler.plugin('done', stats => {\n    stats = stats.toJson()\n    stats.errors.forEach(err => console.error(err))\n    stats.warnings.forEach(err => console.warn(err))\n    if (stats.errors.length) return\n\n    clientManifest = JSON.parse(readFile(\n      devMiddleware.fileSystem,\n      'vue-ssr-client-manifest.json'\n    ))\n    if (bundle) {\n      ready(bundle, {\n        clientManifest\n      })\n    }\n  })\n\n  // hot middleware\n  app.use(require('webpack-hot-middleware')(clientCompiler, { heartbeat: 5000 }))\n\n  // watch and update server renderer\n  const serverCompiler = webpack(serverConfig)\n  const mfs = new MFS()\n  serverCompiler.outputFileSystem = mfs\n  serverCompiler.watch({}, (err, stats) => {\n    if (err) throw err\n    stats = stats.toJson()\n    if (stats.errors.length) return\n\n    // read bundle generated by vue-ssr-webpack-plugin\n    bundle = JSON.parse(readFile(mfs, 'vue-ssr-server-bundle.json'))\n    if (clientManifest) {\n      ready(bundle, {\n        clientManifest\n      })\n    }\n  })\n\n  return readyPromise\n}\n"
  },
  {
    "path": "examples/ssr/hn2/build/vue-loader.config.js",
    "content": "module.exports = {\n  extractCSS: process.env.NODE_ENV === 'production',\n  preserveWhitespace: false,\n  postcss: [\n    require('autoprefixer')({\n      browsers: ['last 3 versions']\n    })\n  ]\n}\n"
  },
  {
    "path": "examples/ssr/hn2/build/webpack.base.config.js",
    "content": "const path = require('path')\nconst webpack = require('webpack')\nconst vueConfig = require('./vue-loader.config')\nconst ExtractTextPlugin = require('extract-text-webpack-plugin')\nconst FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')\n\nconst isProd = process.env.NODE_ENV === 'production'\n\nmodule.exports = {\n  devtool: isProd\n    ? false\n    : '#cheap-module-source-map',\n  output: {\n    path: path.resolve(__dirname, '../dist'),\n    publicPath: '/dist/',\n    filename: '[name].[chunkhash].js'\n  },\n  resolve: {\n    alias: {\n      'public': path.resolve(__dirname, '../public')\n    }\n  },\n  module: {\n    noParse: /es6-promise\\.js$/, // avoid webpack shimming process\n    rules: [\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader',\n        options: vueConfig\n      },\n      {\n        test: /\\.js$/,\n        loader: 'babel-loader',\n        exclude: /node_modules/\n      },\n      {\n        test: /\\.(png|jpg|gif|svg)$/,\n        loader: 'url-loader',\n        options: {\n          limit: 10000,\n          name: '[name].[ext]?[hash]'\n        }\n      },\n      {\n        test: /\\.css$/,\n        use: isProd\n          ? ExtractTextPlugin.extract({\n              use: 'css-loader?minimize',\n              fallback: 'vue-style-loader'\n            })\n          : ['vue-style-loader', 'css-loader']\n      }\n    ]\n  },\n  performance: {\n    maxEntrypointSize: 300000,\n    hints: isProd ? 'warning' : false\n  },\n  plugins: isProd\n    ? [\n        new webpack.optimize.UglifyJsPlugin({\n          compress: { warnings: false }\n        }),\n        new ExtractTextPlugin({\n          filename: 'common.[chunkhash].css'\n        })\n      ]\n    : [\n        new FriendlyErrorsPlugin()\n      ]\n}\n"
  },
  {
    "path": "examples/ssr/hn2/build/webpack.client.config.js",
    "content": "const glob = require('glob')\nconst webpack = require('webpack')\nconst merge = require('webpack-merge')\nconst base = require('./webpack.base.config')\nconst SWPrecachePlugin = require('sw-precache-webpack-plugin')\nconst VueSSRClientPlugin = require('vue-server-renderer/client-plugin')\n\nconst config = merge({}, base, {\n  entry: {\n    app: './src/entry-client.js'\n  },\n  resolve: {\n    alias: {\n      'create-api': './create-api-client.js'\n    }\n  },\n  plugins: [\n    // strip dev-only code in Vue source\n    new webpack.DefinePlugin({\n      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),\n      'process.env.VUE_ENV': '\"client\"'\n    }),\n    // extract vendor chunks for better caching\n    new webpack.optimize.CommonsChunkPlugin({\n      name: 'vendor',\n      minChunks: function (module) {\n        // a module is extracted into the vendor chunk if...\n        return (\n          // it's inside node_modules\n          /node_modules/.test(module.context) &&\n          // and not a CSS file (due to extract-text-webpack-plugin limitation)\n          !/\\.css$/.test(module.request)\n        )\n      }\n    }),\n    // extract webpack runtime & manifest to avoid vendor chunk hash changing\n    // on every build.\n    new webpack.optimize.CommonsChunkPlugin({\n      name: 'manifest'\n    }),\n    new VueSSRClientPlugin()\n  ]\n})\n\nif (process.env.NODE_ENV === 'production') {\n  config.plugins.push(\n    // auto generate service worker\n    new SWPrecachePlugin({\n      cacheId: 'vue-hn',\n      filename: 'service-worker.js',\n      minify: true,\n      dontCacheBustUrlsMatching: /./,\n      staticFileGlobsIgnorePatterns: [/\\.map$/, /\\.json$/],\n      runtimeCaching: [\n        {\n          urlPattern: '/',\n          handler: 'networkFirst'\n        },\n        {\n          urlPattern: /\\/(top|new|show|ask|jobs)/,\n          handler: 'networkFirst'\n        },\n        {\n          urlPattern: '/item/:id',\n          handler: 'networkFirst'\n        },\n        {\n          urlPattern: '/user/:id',\n          handler: 'networkFirst'\n        }\n      ]\n    })\n  )\n}\n\nmodule.exports = config\n"
  },
  {
    "path": "examples/ssr/hn2/build/webpack.server.config.js",
    "content": "const webpack = require('webpack')\nconst merge = require('webpack-merge')\nconst base = require('./webpack.base.config')\nconst nodeExternals = require('webpack-node-externals')\nconst VueSSRServerPlugin = require('vue-server-renderer/server-plugin')\n\nmodule.exports = merge(base, {\n  target: 'node',\n  devtool: '#source-map',\n  entry: './src/entry-server.js',\n  output: {\n    filename: 'server-bundle.js',\n    libraryTarget: 'commonjs2'\n  },\n  resolve: {\n    alias: {\n      'create-api': './create-api-server.js'\n    }\n  },\n  // https://webpack.js.org/configuration/externals/#externals\n  // https://github.com/liady/webpack-node-externals\n  externals: nodeExternals({\n    // do not externalize CSS files in case we need to import it from a dep\n    whitelist: /\\.css$/\n  }),\n  plugins: [\n    new webpack.DefinePlugin({\n      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),\n      'process.env.VUE_ENV': '\"server\"'\n    }),\n    new VueSSRServerPlugin()\n  ]\n})\n"
  },
  {
    "path": "examples/ssr/hn2/manifest.json",
    "content": "{\n  \"name\": \"Vue Hackernews 2.0\",\n  \"short_name\": \"Vue HN\",\n  \"icons\": [{\n      \"src\": \"/public/logo-120.png\",\n      \"sizes\": \"120x120\",\n      \"type\": \"image/png\"\n    }, {\n      \"src\": \"/public/logo-144.png\",\n      \"sizes\": \"144x144\",\n      \"type\": \"image/png\"\n    }, {\n      \"src\": \"/public/logo-152.png\",\n      \"sizes\": \"152x152\",\n      \"type\": \"image/png\"\n    }, {\n      \"src\": \"/public/logo-192.png\",\n      \"sizes\": \"192x192\",\n      \"type\": \"image/png\"\n    },{\n      \"src\": \"/public/logo-256.png\",\n      \"sizes\": \"256x256\",\n      \"type\": \"image/png\"\n    }, {\n      \"src\": \"/public/logo-384.png\",\n      \"sizes\": \"384x384\",\n      \"type\": \"image/png\"\n    }, {\n      \"src\": \"/public/logo-512.png\",\n      \"sizes\": \"512x512\",\n      \"type\": \"image/png\"\n    }],\n  \"start_url\": \"/\",\n  \"background_color\": \"#f2f3f5\",\n  \"display\": \"standalone\",\n  \"theme_color\": \"#f60\"\n}\n"
  },
  {
    "path": "examples/ssr/hn2/package.json",
    "content": "{\n  \"name\": \"vue-i18n-ssr\",\n  \"description\": \"vue-i18n for server-side rendering\",\n  \"dependencies\": {\n    \"compression\": \"^1.6.2\",\n    \"cross-env\": \"^4.0.0\",\n    \"es6-promise\": \"^4.1.0\",\n    \"express\": \"^4.15.2\",\n    \"extract-text-webpack-plugin\": \"^2.1.0\",\n    \"firebase\": \"^3.7.2\",\n    \"lru-cache\": \"^4.0.2\",\n    \"route-cache\": \"0.4.2\",\n    \"serve-favicon\": \"^2.4.1\",\n    \"vue\": \"^2.4.2\",\n    \"vue-router\": \"^2.7.0\",\n    \"vue-server-renderer\": \"^2.4.1\",\n    \"vuex\": \"^2.3.1\",\n    \"vue-i18n\": \"^7.2.0\",\n    \"vuex-router-sync\": \"^4.1.2\"\n  },\n  \"devDependencies\": {\n    \"autoprefixer\": \"^6.7.7\",\n    \"babel-core\": \"^6.24.1\",\n    \"babel-loader\": \"^7.1.1\",\n    \"babel-preset-env\": \"^1.4.0\",\n    \"babel-plugin-syntax-dynamic-import\": \"^6.18.0\",\n    \"css-loader\": \"^0.28.0\",\n    \"file-loader\": \"^0.11.1\",\n    \"friendly-errors-webpack-plugin\": \"^1.6.1\",\n    \"glob\": \"^7.1.1\",\n    \"rimraf\": \"^2.6.1\",\n    \"stylus\": \"^0.54.5\",\n    \"stylus-loader\": \"^3.0.1\",\n    \"sw-precache-webpack-plugin\": \"^0.10.1\",\n    \"url-loader\": \"^0.5.8\",\n    \"vue-loader\": \"^13.0.1\",\n    \"vue-style-loader\": \"^3.0.0\",\n    \"vue-template-compiler\": \"^2.4.2\",\n    \"vue-i18n-extensions\": \"^0.1.0\",\n    \"webpack\": \"^3.2.0\",\n    \"webpack-dev-middleware\": \"^1.10.1\",\n    \"webpack-hot-middleware\": \"^2.17.1\",\n    \"webpack-merge\": \"^4.0.0\",\n    \"webpack-node-externals\": \"^1.5.4\"\n  },\n  \"engines\": {\n    \"node\": \">=7.0\",\n    \"npm\": \">=4.0\"\n  },\n  \"private\": true,\n  \"scripts\": {\n    \"build\": \"rimraf dist && npm run build:client && npm run build:server\",\n    \"build:client\": \"cross-env NODE_ENV=production webpack --config build/webpack.client.config.js --progress --hide-modules\",\n    \"build:server\": \"cross-env NODE_ENV=production webpack --config build/webpack.server.config.js --progress --hide-modules\",\n    \"dev\": \"node server\",\n    \"start\": \"cross-env NODE_ENV=production node server\",\n    \"postinstall\": \"npm link ../../../\"\n  }\n}\n"
  },
  {
    "path": "examples/ssr/hn2/server.js",
    "content": "const fs = require('fs')\nconst path = require('path')\nconst LRU = require('lru-cache')\nconst express = require('express')\nconst favicon = require('serve-favicon')\nconst compression = require('compression')\nconst microcache = require('route-cache')\nconst resolve = file => path.resolve(__dirname, file)\nconst { createBundleRenderer } = require('vue-server-renderer')\nconst { directive } = require('vue-i18n-extensions')\n\nconst isProd = process.env.NODE_ENV === 'production'\nconst useMicroCache = process.env.MICRO_CACHE !== 'false'\nconst serverInfo =\n  `express/${require('express/package.json').version} ` +\n  `vue-server-renderer/${require('vue-server-renderer/package.json').version}`\n\nconst app = express()\n\nconst template = fs.readFileSync(resolve('./src/index.template.html'), 'utf-8')\n\nfunction createRenderer (bundle, options) {\n  // https://github.com/vuejs/vue/blob/dev/packages/vue-server-renderer/README.md#why-use-bundlerenderer\n  return createBundleRenderer(bundle, Object.assign(options, {\n    template,\n    // for component caching\n    cache: LRU({\n      max: 1000,\n      maxAge: 1000 * 60 * 15\n    }),\n    // this is only needed when vue-server-renderer is npm-linked\n    basedir: resolve('./dist'),\n    // recommended for performance\n    runInNewContext: false,\n    directives: {\n      t: directive\n    }\n  }))\n}\n\nlet renderer\nlet readyPromise\nif (isProd) {\n  // In production: create server renderer using built server bundle.\n  // The server bundle is generated by vue-ssr-webpack-plugin.\n  const bundle = require('./dist/vue-ssr-server-bundle.json')\n  // The client manifests are optional, but it allows the renderer\n  // to automatically infer preload/prefetch links and directly add <script>\n  // tags for any async chunks used during render, avoiding waterfall requests.\n  const clientManifest = require('./dist/vue-ssr-client-manifest.json')\n  renderer = createRenderer(bundle, {\n    clientManifest\n  })\n} else {\n  // In development: setup the dev server with watch and hot-reload,\n  // and create a new renderer on bundle / index template update.\n  readyPromise = require('./build/setup-dev-server')(app, (bundle, options) => {\n    renderer = createRenderer(bundle, options)\n  })\n}\n\nconst serve = (path, cache) => express.static(resolve(path), {\n  maxAge: cache && isProd ? 1000 * 60 * 60 * 24 * 30 : 0\n})\n\napp.use(compression({ threshold: 0 }))\napp.use(favicon('./public/logo-48.png'))\napp.use('/dist', serve('./dist', true))\napp.use('/public', serve('./public', true))\napp.use('/manifest.json', serve('./manifest.json', true))\napp.use('/service-worker.js', serve('./dist/service-worker.js'))\n\n// since this app has no user-specific content, every page is micro-cacheable.\n// if your app involves user-specific content, you need to implement custom\n// logic to determine whether a request is cacheable based on its url and\n// headers.\n// 1-second microcache.\n// https://www.nginx.com/blog/benefits-of-microcaching-nginx/\napp.use(microcache.cacheSeconds(1, () => useMicroCache))\n\nfunction render (req, res) {\n  const s = Date.now()\n\n  res.setHeader(\"Content-Type\", \"text/html\")\n  res.setHeader(\"Server\", serverInfo)\n\n  const handleError = err => {\n    if (err.url) {\n      res.redirect(err.url)\n    } else if (err.code === 404) {\n      res.status(404).send('404 | Page Not Found')\n    } else {\n      // Render Error Page or Redirect\n      res.status(500).send('500 | Internal Server Error')\n      console.error(`error during render : ${req.url}`)\n      console.error(err.stack)\n    }\n  }\n\n  const context = {\n    title: 'Vue HN 2.0', // default title\n    url: req.url\n  }\n  renderer.renderToString(context, (err, html) => {\n    if (err) {\n      return handleError(err)\n    }\n    res.send(html)\n    if (!isProd) {\n      console.log(`whole request: ${Date.now() - s}ms`)\n    }\n  })\n}\n\napp.get('*', isProd ? render : (req, res) => {\n  readyPromise.then(() => render(req, res))\n})\n\nconst port = process.env.PORT || 8080\napp.listen(port, () => {\n  console.log(`server started at localhost:${port}`)\n})\n"
  },
  {
    "path": "examples/ssr/hn2/src/App.vue",
    "content": "<template>\n  <div id=\"app\">\n    <header class=\"header\">\n      <nav class=\"inner\">\n        <router-link to=\"/\" exact>\n          <img class=\"logo\" src=\"~public/logo-48.png\" alt=\"logo\">\n        </router-link>\n        <router-link to=\"/top\">{{ $t('navigation.top') }}</router-link>\n        <router-link to=\"/new\">{{ $t('navigation.new') }}</router-link>\n        <router-link to=\"/show\">{{ $t('navigation.show') }}</router-link>\n        <router-link to=\"/ask\">{{ $t('navigation.ask') }}</router-link>\n        <router-link to=\"/job\">{{ $t('navigation.job') }}</router-link>\n        <a class=\"github\" href=\"https://github.com/vuejs/vue-hackernews-2.0\" target=\"_blank\" rel=\"noopener\" v-t=\"'navigation.powered'\">\n        </a>\n        <a class=\"locale\" href=\"javascript:void(0);\"\n           v-for=\"locale in locales\"\n           :class=\"{ active: $i18n.locale === locale }\"\n           v-t=\"'locales.' + locale\"\n           @click=\"$i18n.locale = locale\"></a>\n      </nav>\n    </header>\n    <transition name=\"fade\" mode=\"out-in\">\n      <router-view class=\"view\"></router-view>\n    </transition>\n  </div>\n</template>\n\n<script>\nexport default {\n  data () {\n    return { locales: ['en-US', 'ja-JP'] }\n  }\n}\n</script>\n\n<style lang=\"stylus\">\nbody\n  font-family -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n  font-size 15px\n  background-color lighten(#eceef1, 30%)\n  margin 0\n  padding-top 55px\n  color #34495e\n  overflow-y scroll\n\na\n  color #34495e\n  text-decoration none\n\n.header\n  background-color #ff6600\n  position fixed\n  z-index 999\n  height 55px\n  top 0\n  left 0\n  right 0\n  .inner\n    max-width 800px\n    box-sizing border-box\n    margin 0px auto\n    padding 15px 5px\n  a\n    color rgba(255, 255, 255, .8)\n    line-height 24px\n    transition color .15s ease\n    display inline-block\n    vertical-align middle\n    font-weight 300\n    letter-spacing .075em\n    margin-right 1.8em\n    &:hover\n      color #fff\n    &.router-link-active\n      color #fff\n      font-weight 400\n    &:nth-child(6)\n      margin-right 0\n  .locale\n    float right\n  .active\n    color #fff\n    font-weight 400\n    border-bottom: 1px solid #fff;\n  .github\n    color #fff\n    font-size .9em\n    margin 0\n    float right\n\n.logo\n  width 24px\n  margin-right 10px\n  display inline-block\n  vertical-align middle\n\n.view\n  max-width 800px\n  margin 0 auto\n  position relative\n\n.fade-enter-active, .fade-leave-active\n  transition all .2s ease\n\n.fade-enter, .fade-leave-active\n  opacity 0\n\n@media (max-width 860px)\n  .header .inner\n    padding 15px 30px\n\n@media (max-width 600px)\n  .header\n    .inner\n      padding 15px\n    a\n      margin-right 1em\n    .github\n      display none\n</style>\n"
  },
  {
    "path": "examples/ssr/hn2/src/api/create-api-client.js",
    "content": "import Firebase from 'firebase/app'\nimport 'firebase/database'\n\nexport function createAPI ({ config, version }) {\n  Firebase.initializeApp(config)\n  return Firebase.database().ref(version)\n}\n"
  },
  {
    "path": "examples/ssr/hn2/src/api/create-api-server.js",
    "content": "import Firebase from 'firebase'\nimport LRU from 'lru-cache'\n\nexport function createAPI ({ config, version }) {\n  let api\n  // this piece of code may run multiple times in development mode,\n  // so we attach the instantiated API to `process` to avoid duplications\n  if (process.__API__) {\n    api = process.__API__\n  } else {\n    Firebase.initializeApp(config)\n    api = process.__API__ = Firebase.database().ref(version)\n\n    api.onServer = true\n\n    // fetched item cache\n    api.cachedItems = LRU({\n      max: 1000,\n      maxAge: 1000 * 60 * 15 // 15 min cache\n    })\n\n    // cache the latest story ids\n    api.cachedIds = {}\n    ;['top', 'new', 'show', 'ask', 'job'].forEach(type => {\n      api.child(`${type}stories`).on('value', snapshot => {\n        api.cachedIds[type] = snapshot.val()\n      })\n    })\n  }\n  return api\n}\n"
  },
  {
    "path": "examples/ssr/hn2/src/api/index.js",
    "content": "// this is aliased in webpack config based on server/client build\nimport { createAPI } from 'create-api'\n\nconst logRequests = !!process.env.DEBUG_API\n\nconst api = createAPI({\n  version: '/v0',\n  config: {\n    databaseURL: 'https://hacker-news.firebaseio.com'\n  }\n})\n\n// warm the front page cache every 15 min\n// make sure to do this only once across all requests\nif (api.onServer) {\n  warmCache()\n}\n\nfunction warmCache () {\n  fetchItems((api.cachedIds.top || []).slice(0, 30))\n  setTimeout(warmCache, 1000 * 60 * 15)\n}\n\nfunction fetch (child) {\n  logRequests && console.log(`fetching ${child}...`)\n  const cache = api.cachedItems\n  if (cache && cache.has(child)) {\n    logRequests && console.log(`cache hit for ${child}.`)\n    return Promise.resolve(cache.get(child))\n  } else {\n    return new Promise((resolve, reject) => {\n      api.child(child).once('value', snapshot => {\n        const val = snapshot.val()\n        // mark the timestamp when this item is cached\n        if (val) val.__lastUpdated = Date.now()\n        cache && cache.set(child, val)\n        logRequests && console.log(`fetched ${child}.`)\n        resolve(val)\n      }, reject)\n    })\n  }\n}\n\nexport function fetchIdsByType (type) {\n  return api.cachedIds && api.cachedIds[type]\n    ? Promise.resolve(api.cachedIds[type])\n    : fetch(`${type}stories`)\n}\n\nexport function fetchItem (id) {\n  return fetch(`item/${id}`)\n}\n\nexport function fetchItems (ids) {\n  return Promise.all(ids.map(id => fetchItem(id)))\n}\n\nexport function fetchUser (id) {\n  return fetch(`user/${id}`)\n}\n\nexport function watchList (type, cb) {\n  let first = true\n  const ref = api.child(`${type}stories`)\n  const handler = snapshot => {\n    if (first) {\n      first = false\n    } else {\n      cb(snapshot.val())\n    }\n  }\n  ref.on('value', handler)\n  return () => {\n    ref.off('value', handler)\n  }\n}\n"
  },
  {
    "path": "examples/ssr/hn2/src/app.js",
    "content": "import Vue from 'vue'\nimport App from './App.vue'\nimport { createStore } from './store'\nimport { createRouter } from './router'\nimport { createI18n } from './i18n'\nimport { sync } from 'vuex-router-sync'\nimport titleMixin from './util/title'\nimport * as filters from './util/filters'\n\n// mixin for handling title\nVue.mixin(titleMixin)\n\n// register global utility filters.\nObject.keys(filters).forEach(key => {\n  Vue.filter(key, filters[key])\n})\n\n// Expose a factory function that creates a fresh set of store, router,\n// app instances on each call (which is called for each SSR request)\nexport function createApp () {\n  // create store and router instances\n  const store = createStore()\n  const router = createRouter()\n  const i18n = createI18n()\n\n  // sync the router with the vuex store.\n  // this registers `store.state.route`\n  sync(store, router)\n\n  // create the app instance.\n  // here we inject the router, store and ssr context to all child components,\n  // making them available everywhere as `this.$router` and `this.$store`.\n  const app = new Vue({\n    router,\n    store,\n    i18n,\n    render: h => h(App)\n  })\n\n  // expose the app, the router and the store.\n  // note we are not mounting the app here, since bootstrapping will be\n  // different depending on whether we are in a browser or on the server.\n  return { app, router, store }\n}\n"
  },
  {
    "path": "examples/ssr/hn2/src/components/Comment.vue",
    "content": "<template>\n  <li v-if=\"comment\" class=\"comment\">\n    <div class=\"by\">\n      <router-link :to=\"'/user/' + comment.by\">{{ comment.by }}</router-link>\n      {{ time }}\n    </div>\n    <div class=\"text\" v-html=\"comment.text\"></div>\n    <div class=\"toggle\" :class=\"{ open }\" v-if=\"comment.kids && comment.kids.length\">\n      <a @click=\"open = !open\">{{\n        open\n            ? '[-]'\n            : '[+] ' + pluralize(comment.kids.length) + ' ' + $t('comment.collapsed')\n      }}</a>\n    </div>\n    <ul class=\"comment-children\" v-show=\"open\">\n      <comment v-for=\"id in comment.kids\" :key=\"id\" :id=\"id\"></comment>\n    </ul>\n  </li>\n</template>\n\n<script>\nimport { timeAgo } from '../util'\n\nexport default {\n  name: 'comment',\n  props: ['id'],\n  data () {\n    return {\n      open: true\n    }\n  },\n  computed: {\n    comment () {\n      return this.$store.state.items[this.id]\n    },\n    time () {\n      const { value, unit } = timeAgo(this.comment.time)\n      return `${value} ${this.$tc('time.units.' + unit, value)} ${this.$t('time.ago')}`\n    }\n  },\n  methods: {\n    pluralize: function (n) {\n      return n + ' ' + this.$tc('comment.reply', n)\n    }\n  }\n}\n</script>\n\n<style lang=\"stylus\">\n.comment-children\n  .comment-children\n    margin-left 1.5em\n\n.comment\n  border-top 1px solid #eee\n  position relative\n  .by, .text, .toggle\n    font-size .9em\n    margin 1em 0\n  .by\n    color #828282\n    a\n      color #828282\n      text-decoration underline\n  .text\n    overflow-wrap break-word\n    a:hover\n      color #ff6600\n    pre\n      white-space pre-wrap\n  .toggle\n    background-color #fffbf2\n    padding .3em .5em\n    border-radius 4px\n    a\n      color #828282\n      cursor pointer\n    &.open\n      padding 0\n      background-color transparent\n      margin-bottom -0.5em\n</style>\n"
  },
  {
    "path": "examples/ssr/hn2/src/components/Item.vue",
    "content": "<template>\n  <li class=\"news-item\">\n    <span class=\"score\">{{ item.score }}</span>\n    <span class=\"title\">\n      <template v-if=\"item.url\">\n        <a :href=\"item.url\" target=\"_blank\" rel=\"noopener\">{{ item.title }}</a>\n        <span class=\"host\"> ({{ item.url | host }})</span>\n      </template>\n      <template v-else>\n        <router-link :to=\"'/item/' + item.id\">{{ item.title }}</router-link>\n      </template>\n    </span>\n    <br>\n    <span class=\"meta\">\n      <span v-if=\"item.type !== 'job'\" class=\"by\">\n        by <router-link :to=\"'/user/' + item.by\">{{ item.by }}</router-link>\n      </span>\n      <span class=\"time\">\n        {{ time }}\n      </span>\n      <span v-if=\"item.type !== 'job'\" class=\"comments-link\">\n        | <router-link :to=\"'/item/' + item.id\">{{ item.descendants }} {{ $t('item.comments') }}</router-link>\n      </span>\n    </span>\n    <span class=\"label\" v-if=\"item.type !== 'story'\">{{ item.type }}</span>\n  </li>\n</template>\n\n<script>\nimport { timeAgo } from '../util'\n\nexport default {\n  name: 'news-item',\n  props: ['item'],\n  computed: {\n    time () {\n      const { value, unit } = timeAgo(this.item.time)\n      return `${value} ${this.$tc('time.units.' + unit, value)} ${this.$t('time.ago')}`\n    }\n  },\n  // http://ssr.vuejs.org/en/caching.html#component-level-caching\n  serverCacheKey: ({ item: { id, __lastUpdated, time }}) => {\n    return `${id}::${__lastUpdated}::${time}`\n  }\n}\n</script>\n\n<style lang=\"stylus\">\n.news-item\n  background-color #fff\n  padding 20px 30px 20px 80px\n  border-bottom 1px solid #eee\n  position relative\n  line-height 20px\n  .score\n    color #ff6600\n    font-size 1.1em\n    font-weight 700\n    position absolute\n    top 50%\n    left 0\n    width 80px\n    text-align center\n    margin-top -10px\n  .meta, .host\n    font-size .85em\n    color #828282\n    a\n      color #828282\n      text-decoration underline\n      &:hover\n        color #ff6600\n</style>\n"
  },
  {
    "path": "examples/ssr/hn2/src/components/ProgressBar.vue",
    "content": "<!-- borrowed from Nuxt! -->\n\n<template>\n  <div class=\"progress\" :style=\"{\n    'width': percent+'%',\n    'height': height,\n    'background-color': canSuccess? color : failedColor,\n    'opacity': show ? 1 : 0\n  }\"></div>\n</template>\n\n<script>\nexport default {\n  data () {\n    return {\n      percent: 0,\n      show: false,\n      canSuccess: true,\n      duration: 3000,\n      height: '2px',\n      color: '#ffca2b',\n      failedColor: '#ff0000',\n    }\n  },\n  methods: {\n    start () {\n      this.show = true\n      this.canSuccess = true\n      if (this._timer) {\n        clearInterval(this._timer)\n        this.percent = 0\n      }\n      this._cut = 10000 / Math.floor(this.duration)\n      this._timer = setInterval(() => {\n        this.increase(this._cut * Math.random())\n        if (this.percent > 95) {\n          this.finish()\n        }\n      }, 100)\n      return this\n    },\n    set (num) {\n      this.show = true\n      this.canSuccess = true\n      this.percent = Math.floor(num)\n      return this\n    },\n    get () {\n      return Math.floor(this.percent)\n    },\n    increase (num) {\n      this.percent = this.percent + Math.floor(num)\n      return this\n    },\n    decrease (num) {\n      this.percent = this.percent - Math.floor(num)\n      return this\n    },\n    finish () {\n      this.percent = 100\n      this.hide()\n      return this\n    },\n    pause () {\n      clearInterval(this._timer)\n      return this\n    },\n    hide () {\n      clearInterval(this._timer)\n      this._timer = null\n      setTimeout(() => {\n        this.show = false\n        this.$nextTick(() => {\n          setTimeout(() => {\n            this.percent = 0\n          }, 200)\n        })\n      }, 500)\n      return this\n    },\n    fail () {\n      this.canSuccess = false\n      return this\n    }\n  }\n}\n</script>\n\n<style scoped>\n.progress {\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  right: 0px;\n  height: 2px;\n  width: 0%;\n  transition: width 0.2s, opacity 0.4s;\n  opacity: 1;\n  background-color: #efc14e;\n  z-index: 999999;\n}\n</style>\n"
  },
  {
    "path": "examples/ssr/hn2/src/components/Spinner.vue",
    "content": "<template>\n  <transition>\n    <svg class=\"spinner\" :class=\"{ show: show }\" v-show=\"show\" width=\"44px\" height=\"44px\" viewBox=\"0 0 44 44\">\n      <circle class=\"path\" fill=\"none\" stroke-width=\"4\" stroke-linecap=\"round\" cx=\"22\" cy=\"22\" r=\"20\"></circle>\n    </svg>\n  </transition>\n</template>\n\n<script>\nexport default {\n  name: 'spinner',\n  props: ['show'],\n  serverCacheKey: props => props.show\n}\n</script>\n\n<style lang=\"stylus\">\n$offset = 126\n$duration = 1.4s\n\n.spinner\n  transition opacity .15s ease\n  animation rotator $duration linear infinite\n  animation-play-state paused\n  &.show\n    animation-play-state running\n  &.v-enter, &.v-leave-active\n    opacity 0\n  &.v-enter-active, &.v-leave\n    opacity 1\n\n@keyframes rotator\n  0%\n    transform scale(0.5) rotate(0deg)\n  100%\n    transform scale(0.5) rotate(270deg)\n\n.spinner .path\n  stroke #ff6600\n  stroke-dasharray $offset\n  stroke-dashoffset 0\n  transform-origin center\n  animation dash $duration ease-in-out infinite\n\n@keyframes dash\n  0%\n    stroke-dashoffset $offset\n  50%\n    stroke-dashoffset ($offset/2)\n    transform rotate(135deg)\n  100%\n    stroke-dashoffset $offset\n    transform rotate(450deg)\n</style>\n"
  },
  {
    "path": "examples/ssr/hn2/src/entry-client.js",
    "content": "import Vue from 'vue'\nimport 'es6-promise/auto'\nimport { createApp } from './app'\nimport ProgressBar from './components/ProgressBar.vue'\n\n// global progress bar\nconst bar = Vue.prototype.$bar = new Vue(ProgressBar).$mount()\ndocument.body.appendChild(bar.$el)\n\n// a global mixin that calls `asyncData` when a route component's params change\nVue.mixin({\n  beforeRouteUpdate (to, from, next) {\n    const { asyncData } = this.$options\n    if (asyncData) {\n      asyncData({\n        store: this.$store,\n        route: to\n      }).then(next).catch(next)\n    } else {\n      next()\n    }\n  }\n})\n\nconst { app, router, store } = createApp()\n\n// prime the store with server-initialized state.\n// the state is determined during SSR and inlined in the page markup.\nif (window.__INITIAL_STATE__) {\n  store.replaceState(window.__INITIAL_STATE__)\n}\n\n// wait until router has resolved all async before hooks\n// and async components...\nrouter.onReady(() => {\n  // Add router hook for handling asyncData.\n  // Doing it after initial route is resolved so that we don't double-fetch\n  // the data that we already have. Using router.beforeResolve() so that all\n  // async components are resolved.\n  router.beforeResolve((to, from, next) => {\n    const matched = router.getMatchedComponents(to)\n    const prevMatched = router.getMatchedComponents(from)\n    let diffed = false\n    const activated = matched.filter((c, i) => {\n      return diffed || (diffed = (prevMatched[i] !== c))\n    })\n    const asyncDataHooks = activated.map(c => c.asyncData).filter(_ => _)\n    if (!asyncDataHooks.length) {\n      return next()\n    }\n\n    bar.start()\n    Promise.all(asyncDataHooks.map(hook => hook({ store, route: to })))\n      .then(() => {\n        bar.finish()\n        next()\n      })\n      .catch(next)\n  })\n\n  // actually mount to DOM\n  app.$mount('#app')\n})\n\n// service worker\nif ('https:' === location.protocol && navigator.serviceWorker) {\n  navigator.serviceWorker.register('/service-worker.js')\n}\n"
  },
  {
    "path": "examples/ssr/hn2/src/entry-server.js",
    "content": "import { createApp } from './app'\n\nconst isDev = process.env.NODE_ENV !== 'production'\n\n// This exported function will be called by `bundleRenderer`.\n// This is where we perform data-prefetching to determine the\n// state of our application before actually rendering it.\n// Since data fetching is async, this function is expected to\n// return a Promise that resolves to the app instance.\nexport default context => {\n  return new Promise((resolve, reject) => {\n    const s = isDev && Date.now()\n    const { app, router, store } = createApp()\n\n    const { url } = context\n    const fullPath = router.resolve(url).route.fullPath\n\n    if (fullPath !== url) {\n      reject({ url: fullPath })\n    }\n\n    // set router's location\n    router.push(url)\n\n    // wait until router has resolved possible async hooks\n    router.onReady(() => {\n      const matchedComponents = router.getMatchedComponents()\n      // no matched routes\n      if (!matchedComponents.length) {\n        reject({ code: 404 })\n      }\n      // Call fetchData hooks on components matched by the route.\n      // A preFetch hook dispatches a store action and returns a Promise,\n      // which is resolved when the action is complete and store state has been\n      // updated.\n      Promise.all(matchedComponents.map(({ asyncData }) => asyncData && asyncData({\n        store,\n        route: router.currentRoute\n      }))).then(() => {\n        isDev && console.log(`data pre-fetch: ${Date.now() - s}ms`)\n        // After all preFetch hooks are resolved, our store is now\n        // filled with the state needed to render the app.\n        // Expose the state on the render context, and let the request handler\n        // inline the state in the HTML response. This allows the client-side\n        // store to pick-up the server-side state without having to duplicate\n        // the initial data fetching on the client.\n        context.state = store.state\n        resolve(app)\n      }).catch(reject)\n    }, reject)\n  })\n}\n"
  },
  {
    "path": "examples/ssr/hn2/src/i18n/en-US.json",
    "content": "{\n  \"navigation\": {\n    \"top\": \"Top\",\n    \"new\": \"New\",\n    \"show\": \"Show\",\n    \"ask\": \"Ask\",\n    \"job\": \"Jobs\",\n    \"powered\": \"Built with Vue.js\"\n  },\n  \"locales\": {\n    \"en-US\": \"EN\",\n    \"ja-JP\": \"JP\"\n  },\n  \"pagination\": {\n    \"prev\": \"prev\",\n    \"more\": \"more\"\n  },\n  \"time\": {\n    \"ago\": \"ago\",\n    \"units\": {\n      \"minute\": \"minute | minutes\",\n      \"hour\": \"hour | hours\",\n      \"day\": \"day | days\"\n    }\n  },\n  \"user\": {\n    \"id\": \"User\",\n    \"created\": \"Created\",\n    \"karma\": \"Karma\",\n    \"submissions\": \"submissions\",\n    \"comments\": \"comments\"\n  },\n  \"item\": {\n    \"no_comments\": \"No comments yet.\",\n    \"comments\": \"comments\"\n  },\n  \"comment\": {\n    \"reply\": \"reply | replies\",\n    \"collapsed\": \"collapsed\"\n  }\n}\n"
  },
  {
    "path": "examples/ssr/hn2/src/i18n/index.js",
    "content": "import Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport en from './en-US.json'\nimport jp from './ja-JP.json'\n\nVue.use(VueI18n)\n\nexport function createI18n () {\n  return new VueI18n({\n    locale: 'en-US',\n    messages: {\n      'en-US': en,\n      'ja-JP': jp\n    }\n  })\n}\n"
  },
  {
    "path": "examples/ssr/hn2/src/i18n/ja-JP.json",
    "content": "{\n  \"navigation\": {\n    \"top\": \"トップ\",\n    \"new\": \"新着\",\n    \"show\": \"出来事\",\n    \"ask\": \"質問\",\n    \"job\": \"求人\",\n    \"powered\": \"Build with Vue.js\"\n  },\n  \"locales\": {\n    \"en-US\": \"EN\",\n    \"ja-JP\": \"JP\"\n  },\n  \"pagination\": {\n    \"prev\": \"前\",\n    \"more\": \"次\"\n  },\n  \"time\": {\n    \"ago\": \"前\",\n    \"units\": {\n      \"minute\": \"分\",\n      \"hour\": \"時間\",\n      \"day\": \"日\"\n    }\n  },\n  \"user\": {\n    \"id\": \"ユーザ\",\n    \"created\": \"作成日\",\n    \"karma\": \"カルマ\",\n    \"submissions\": \"投稿\",\n    \"comments\": \"コメント\"\n  },\n  \"item\": {\n    \"no_comments\": \"まだコメントはありません。\",\n    \"comments\": \"コメント\"\n  },\n  \"comment\": {\n    \"reply\": \"返信\",\n    \"collapsed\": \"を展開する\"\n  }\n}\n"
  },
  {
    "path": "examples/ssr/hn2/src/index.template.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <title>{{ title }}</title>\n    <meta charset=\"utf-8\">\n    <meta name=\"mobile-web-app-capable\" content=\"yes\">\n    <meta name=\"apple-mobile-web-app-capable\" content=\"yes\">\n    <meta name=\"apple-mobile-web-app-status-bar-style\" content=\"default\">\n    <link rel=\"apple-touch-icon\" sizes=\"120x120\" href=\"/public/logo-120.png\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, minimal-ui\">\n    <link rel=\"shortcut icon\" sizes=\"48x48\" href=\"/public/logo-48.png\">\n    <meta name=\"theme-color\" content=\"#f60\">\n    <link rel=\"manifest\" href=\"/manifest.json\">\n    <style>\n      #skip a {  position:absolute;  left:-10000px;  top:auto;  width:1px;  height:1px;  overflow:hidden;  }\n      #skip a:focus {  position:static;  width:auto;  height:auto;  }\n    </style>\n  </head>\n  <body>\n    <div id=\"skip\"><a href=\"#app\">skip to content</a></div>\n    <!--vue-ssr-outlet-->\n  </body>\n</html>\n"
  },
  {
    "path": "examples/ssr/hn2/src/router/index.js",
    "content": "import Vue from 'vue'\nimport Router from 'vue-router'\n\nVue.use(Router)\n\n// route-level code splitting\nconst createListView = id => () => import('../views/CreateListView').then(m => m.default(id))\nconst ItemView = () => import('../views/ItemView.vue')\nconst UserView = () => import('../views/UserView.vue')\n\nexport function createRouter () {\n  return new Router({\n    mode: 'history',\n    scrollBehavior: () => ({ y: 0 }),\n    routes: [\n      { path: '/top/:page(\\\\d+)?', component: createListView('top') },\n      { path: '/new/:page(\\\\d+)?', component: createListView('new') },\n      { path: '/show/:page(\\\\d+)?', component: createListView('show') },\n      { path: '/ask/:page(\\\\d+)?', component: createListView('ask') },\n      { path: '/job/:page(\\\\d+)?', component: createListView('job') },\n      { path: '/item/:id(\\\\d+)', component: ItemView },\n      { path: '/user/:id', component: UserView },\n      { path: '/', redirect: '/top' }\n    ]\n  })\n}\n"
  },
  {
    "path": "examples/ssr/hn2/src/store/actions.js",
    "content": "import {\n  fetchUser,\n  fetchItems,\n  fetchIdsByType\n} from '../api'\n\nexport default {\n  // ensure data for rendering given list type\n  FETCH_LIST_DATA: ({ commit, dispatch, state }, { type }) => {\n    commit('SET_ACTIVE_TYPE', { type })\n    return fetchIdsByType(type)\n      .then(ids => commit('SET_LIST', { type, ids }))\n      .then(() => dispatch('ENSURE_ACTIVE_ITEMS'))\n  },\n\n  // ensure all active items are fetched\n  ENSURE_ACTIVE_ITEMS: ({ dispatch, getters }) => {\n    return dispatch('FETCH_ITEMS', {\n      ids: getters.activeIds\n    })\n  },\n\n  FETCH_ITEMS: ({ commit, state }, { ids }) => {\n    // on the client, the store itself serves as a cache.\n    // only fetch items that we do not already have, or has expired (3 minutes)\n    const now = Date.now()\n    ids = ids.filter(id => {\n      const item = state.items[id]\n      if (!item) {\n        return true\n      }\n      if (now - item.__lastUpdated > 1000 * 60 * 3) {\n        return true\n      }\n      return false\n    })\n    if (ids.length) {\n      return fetchItems(ids).then(items => commit('SET_ITEMS', { items }))\n    } else {\n      return Promise.resolve()\n    }\n  },\n\n  FETCH_USER: ({ commit, state }, { id }) => {\n    return state.users[id]\n      ? Promise.resolve(state.users[id])\n      : fetchUser(id).then(user => commit('SET_USER', { id, user }))\n  }\n}\n"
  },
  {
    "path": "examples/ssr/hn2/src/store/getters.js",
    "content": "export default {\n  // ids of the items that should be currently displayed based on\n  // current list type and current pagination\n  activeIds (state) {\n    const { activeType, itemsPerPage, lists } = state\n\n    if (!activeType) {\n      return []\n    }\n\n    const page = Number(state.route.params.page) || 1\n    const start = (page - 1) * itemsPerPage\n    const end = page * itemsPerPage\n\n    return lists[activeType].slice(start, end)\n  },\n\n  // items that should be currently displayed.\n  // this Array may not be fully fetched.\n  activeItems (state, getters) {\n    return getters.activeIds.map(id => state.items[id]).filter(_ => _)\n  }\n}\n"
  },
  {
    "path": "examples/ssr/hn2/src/store/index.js",
    "content": "import Vue from 'vue'\nimport Vuex from 'vuex'\nimport actions from './actions'\nimport mutations from './mutations'\nimport getters from './getters'\n\nVue.use(Vuex)\n\nexport function createStore () {\n  return new Vuex.Store({\n    state: {\n      activeType: null,\n      itemsPerPage: 20,\n      items: {/* [id: number]: Item */},\n      users: {/* [id: string]: User */},\n      lists: {\n        top: [/* number */],\n        new: [],\n        show: [],\n        ask: [],\n        job: []\n      }\n    },\n    actions,\n    mutations,\n    getters\n  })\n}\n"
  },
  {
    "path": "examples/ssr/hn2/src/store/mutations.js",
    "content": "import Vue from 'vue'\n\nexport default {\n  SET_ACTIVE_TYPE: (state, { type }) => {\n    state.activeType = type\n  },\n\n  SET_LIST: (state, { type, ids }) => {\n    state.lists[type] = ids\n  },\n\n  SET_ITEMS: (state, { items }) => {\n    items.forEach(item => {\n      if (item) {\n        Vue.set(state.items, item.id, item)\n      }\n    })\n  },\n\n  SET_USER: (state, { id, user }) => {\n    Vue.set(state.users, id, user || false) /* false means user not found */\n  }\n}\n"
  },
  {
    "path": "examples/ssr/hn2/src/util/filters.js",
    "content": "export function host (url) {\n  const host = url.replace(/^https?:\\/\\//, '').replace(/\\/.*$/, '')\n  const parts = host.split('.').slice(-3)\n  if (parts[0] === 'www') parts.shift()\n  return parts.join('.')\n}\n\nexport function timeAgo (time, $tc) {\n  const between = Date.now() / 1000 - Number(time)\n  if (!$tc) { return between }\n\n  let t\n  if (between < 3600) {\n    t = ~~(between / 60)\n    return `${t} ${$tc('time.units.minute', t)}`\n  } else if (between < 86400) {\n    t = ~~(between / 3600)\n    return `${t} ${$tc('time.units.hour', t)}`\n  } else {\n    t = ~~(between / 86400)\n    return `${t} ${$tc('time.units.day', t)}`\n  }\n}\n"
  },
  {
    "path": "examples/ssr/hn2/src/util/title.js",
    "content": "function getTitle (vm) {\n  const { title } = vm.$options\n  if (title) {\n    return typeof title === 'function'\n      ? title.call(vm)\n      : title\n  }\n}\n\nconst serverTitleMixin = {\n  created () {\n    const title = getTitle(this)\n    if (title) {\n      this.$ssrContext.title = `Vue HN 2.0 | ${title}`\n    }\n  }\n}\n\nconst clientTitleMixin = {\n  mounted () {\n    const title = getTitle(this)\n    if (title) {\n      document.title = `Vue HN 2.0 | ${title}`\n    }\n  }\n}\n\nexport default process.env.VUE_ENV === 'server'\n  ? serverTitleMixin\n  : clientTitleMixin\n"
  },
  {
    "path": "examples/ssr/hn2/src/util.js",
    "content": "export function timeAgo (time) {\n  const between = Date.now() / 1000 - Number(time)\n  if (between < 3600) {\n    return { value: ~~(between / 60), unit: 'minute' }\n  } else if (between < 86400) {\n    return { value: ~~(between / 3600), unit: 'hour' }\n  } else {\n    return { value: ~~(between / 86400), unit: 'day' }\n  }\n}\n"
  },
  {
    "path": "examples/ssr/hn2/src/views/CreateListView.js",
    "content": "import ItemList from './ItemList.vue'\n\nconst camelize = str => str.charAt(0).toUpperCase() + str.slice(1)\n\n// This is a factory function for dynamically creating root-level list views,\n// since they share most of the logic except for the type of items to display.\n// They are essentially higher order components wrapping ItemList.vue.\nexport default function createListView (type) {\n  return {\n    name: `${type}-stories-view`,\n\n    asyncData ({ store }) {\n      return store.dispatch('FETCH_LIST_DATA', { type })\n    },\n\n    title: camelize(type),\n\n    render (h) {\n      return h(ItemList, { props: { type }})\n    }\n  }\n}\n"
  },
  {
    "path": "examples/ssr/hn2/src/views/ItemList.vue",
    "content": "<template>\n  <div class=\"news-view\">\n    <div class=\"news-list-nav\">\n      <router-link v-if=\"page > 1\" :to=\"'/' + type + '/' + (page - 1)\">&lt; {{ $t('pagination.prev') }}</router-link>\n      <a v-else class=\"disabled\">&lt; {{ $t('pagination.prev') }}</a>\n      <span>{{ page }}/{{ maxPage }}</span>\n      <router-link v-if=\"hasMore\" :to=\"'/' + type + '/' + (page + 1)\">{{ $t('pagination.more') }} &gt;</router-link>\n      <a v-else class=\"disabled\">{{ $t('pagination.more') }} &gt;</a>\n    </div>\n    <transition :name=\"transition\">\n      <div class=\"news-list\" :key=\"displayedPage\" v-if=\"displayedPage > 0\">\n        <transition-group tag=\"ul\" name=\"item\">\n          <item v-for=\"item in displayedItems\" :key=\"item.id\" :item=\"item\">\n          </item>\n        </transition-group>\n      </div>\n    </transition>\n  </div>\n</template>\n\n<script>\nimport { watchList } from '../api'\nimport Item from '../components/Item.vue'\n\nexport default {\n  name: 'item-list',\n\n  components: {\n    Item\n  },\n\n  props: {\n    type: String\n  },\n\n  data () {\n    return {\n      transition: 'slide-right',\n      displayedPage: Number(this.$store.state.route.params.page) || 1,\n      displayedItems: this.$store.getters.activeItems\n    }\n  },\n\n  computed: {\n    page () {\n      return Number(this.$store.state.route.params.page) || 1\n    },\n    maxPage () {\n      const { itemsPerPage, lists } = this.$store.state\n      return Math.ceil(lists[this.type].length / itemsPerPage)\n    },\n    hasMore () {\n      return this.page < this.maxPage\n    }\n  },\n\n  beforeMount () {\n    if (this.$root._isMounted) {\n      this.loadItems(this.page)\n    }\n    // watch the current list for realtime updates\n    this.unwatchList = watchList(this.type, ids => {\n      this.$store.commit('SET_LIST', { type: this.type, ids })\n      this.$store.dispatch('ENSURE_ACTIVE_ITEMS').then(() => {\n        this.displayedItems = this.$store.getters.activeItems\n      })\n    })\n  },\n\n  beforeDestroy () {\n    this.unwatchList()\n  },\n\n  watch: {\n    page (to, from) {\n      this.loadItems(to, from)\n    }\n  },\n\n  methods: {\n    loadItems (to = this.page, from = -1) {\n      this.$store.dispatch('FETCH_LIST_DATA', {\n        type: this.type\n      }).then(() => {\n        if (this.page < 0 || this.page > this.maxPage) {\n          this.$router.replace(`/${this.type}/1`)\n          return\n        }\n        this.transition = from === -1\n          ? null\n          : to > from ? 'slide-left' : 'slide-right'\n        this.displayedPage = to\n        this.displayedItems = this.$store.getters.activeItems\n        this.$bar.finish()\n      })\n    }\n  }\n}\n</script>\n\n<style lang=\"stylus\">\n.news-view\n  padding-top 45px\n\n.news-list-nav, .news-list\n  background-color #fff\n  border-radius 2px\n\n.news-list-nav\n  padding 15px 30px\n  position fixed\n  text-align center\n  top 55px\n  left 0\n  right 0\n  z-index 998\n  box-shadow 0 1px 2px rgba(0,0,0,.1)\n  a\n    margin 0 1em\n  .disabled\n    color #ccc\n\n.news-list\n  position absolute\n  margin 30px 0\n  width 100%\n  transition all .5s cubic-bezier(.55,0,.1,1)\n  ul\n    list-style-type none\n    padding 0\n    margin 0\n\n.slide-left-enter, .slide-right-leave-to\n  opacity 0\n  transform translate(30px, 0)\n\n.slide-left-leave-to, .slide-right-enter\n  opacity 0\n  transform translate(-30px, 0)\n\n.item-move, .item-enter-active, .item-leave-active\n  transition all .5s cubic-bezier(.55,0,.1,1)\n\n.item-enter\n  opacity 0\n  transform translate(30px, 0)\n\n.item-leave-active\n  position absolute\n  opacity 0\n  transform translate(30px, 0)\n\n@media (max-width 600px)\n  .news-list\n    margin 10px 0\n</style>\n"
  },
  {
    "path": "examples/ssr/hn2/src/views/ItemView.vue",
    "content": "<template>\n  <div class=\"item-view\" v-if=\"item\">\n    <template v-if=\"item\">\n      <div class=\"item-view-header\">\n        <a :href=\"item.url\" target=\"_blank\">\n          <h1>{{ item.title }}</h1>\n        </a>\n        <span v-if=\"item.url\" class=\"host\">\n          ({{ item.url | host }})\n        </span>\n        <p class=\"meta\">\n          {{ item.score }} points\n          | by <router-link :to=\"'/user/' + item.by\">{{ item.by }}</router-link>\n          {{ time }}\n        </p>\n      </div>\n      <div class=\"item-view-comments\">\n        <p class=\"item-view-comments-header\">\n          {{ item.kids ? item.descendants + ' ' + $t('item.comments') : $t('item.no_comments') }}\n          <spinner :show=\"loading\"></spinner>\n        </p>\n        <ul v-if=\"!loading\" class=\"comment-children\">\n          <comment v-for=\"id in item.kids\" :key=\"id\" :id=\"id\"></comment>\n        </ul>\n      </div>\n    </template>\n  </div>\n</template>\n\n<script>\nimport Spinner from '../components/Spinner.vue'\nimport Comment from '../components/Comment.vue'\nimport { timeAgo } from '../util'\n\nexport default {\n  name: 'item-view',\n  components: { Spinner, Comment },\n\n  data: () => ({\n    loading: true\n  }),\n\n  computed: {\n    item () {\n      return this.$store.state.items[this.$route.params.id]\n    },\n    time () {\n      const { value, unit } = timeAgo(this.item.time)\n      return `${value} ${this.$tc('time.units.' + unit, value)} ${this.$t('time.ago')}`\n    }\n  },\n\n  // We only fetch the item itself before entering the view, because\n  // it might take a long time to load threads with hundreds of comments\n  // due to how the HN Firebase API works.\n  asyncData ({ store, route: { params: { id }}}) {\n    return store.dispatch('FETCH_ITEMS', { ids: [id] })\n  },\n\n  title () {\n    return this.item.title\n  },\n\n  // Fetch comments when mounted on the client\n  beforeMount () {\n    this.fetchComments()\n  },\n\n  // refetch comments if item changed\n  watch: {\n    item: 'fetchComments'\n  },\n\n  methods: {\n    fetchComments () {\n      this.loading = true\n      fetchComments(this.$store, this.item).then(() => {\n        this.loading = false\n      })\n    }\n  }\n}\n\n// recursively fetch all descendent comments\nfunction fetchComments (store, item) {\n  if (item && item.kids) {\n    return store.dispatch('FETCH_ITEMS', {\n      ids: item.kids\n    }).then(() => Promise.all(item.kids.map(id => {\n      return fetchComments(store, store.state.items[id])\n    })))\n  }\n}\n</script>\n\n<style lang=\"stylus\">\n.item-view-header\n  background-color #fff\n  padding 1.8em 2em 1em\n  box-shadow 0 1px 2px rgba(0,0,0,.1)\n  h1\n    display inline\n    font-size 1.5em\n    margin 0\n    margin-right .5em\n  .host, .meta, .meta a\n    color #828282\n  .meta a\n    text-decoration underline\n\n.item-view-comments\n  background-color #fff\n  margin-top 10px\n  padding 0 2em .5em\n\n.item-view-comments-header\n  margin 0\n  font-size 1.1em\n  padding 1em 0\n  position relative\n  .spinner\n    display inline-block\n    margin -15px 0\n\n.comment-children\n  list-style-type none\n  padding 0\n  margin 0\n\n@media (max-width 600px)\n  .item-view-header\n    h1\n      font-size 1.25em\n</style>\n"
  },
  {
    "path": "examples/ssr/hn2/src/views/UserView.vue",
    "content": "<template>\n  <div class=\"user-view\">\n    <template v-if=\"user\">\n      <h1>{{ $t('user.id') }} : {{ user.id }}</h1>\n      <ul class=\"meta\">\n        <li><span class=\"label\">{{ $t('user.created') }}:</span> {{ time }}</li>\n        <li><span class=\"label\">{{ $t('user.karma') }}:</span> {{user.karma }}</li>\n        <li v-if=\"user.about\" v-html=\"user.about\" class=\"about\"></li>\n      </ul>\n      <p class=\"links\">\n      <a :href=\"'https://news.ycombinator.com/submitted?id=' + user.id\">{{ $t('user.submissions') }}</a> |\n      <a :href=\"'https://news.ycombinator.com/threads?id=' + user.id\">{{ $t('user.comments') }}</a>\n      </p>\n    </template>\n    <template v-else-if=\"user === false\">\n      <h1>User not found.</h1>\n    </template>\n  </div>\n</template>\n\n<script>\nimport { timeAgo } from '../util'\n\nexport default {\n  name: 'user-view',\n\n  computed: {\n    user () {\n      return this.$store.state.users[this.$route.params.id]\n    },\n    time () {\n      const { value, unit } = timeAgo(this.user.created)\n      return `${value} ${this.$tc('time.units.' + unit, value)} ${this.$t('time.ago')}`\n    }\n  },\n\n  asyncData ({ store, route: { params: { id }}}) {\n    return store.dispatch('FETCH_USER', { id })\n  },\n\n  title () {\n    return this.user\n      ? this.user.id\n      : 'User not found'\n  }\n}\n</script>\n\n<style lang=\"stylus\">\n.user-view\n  background-color #fff\n  box-sizing border-box\n  padding 2em 3em\n  h1\n    margin 0\n    font-size 1.5em\n  .meta\n    list-style-type none\n    padding 0\n  .label\n    display inline-block\n    min-width 4em\n  .about\n    margin 1em 0\n  .links a\n    text-decoration underline\n</style>\n"
  },
  {
    "path": "examples/ssr/nuxt/.editorconfig",
    "content": "# editorconfig.org\nroot = true\n\n[*]\nindent_size = 2\nindent_style = space\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ninsert_final_newline = true\n\n[*.md]\ntrim_trailing_whitespace = false\n"
  },
  {
    "path": "examples/ssr/nuxt/.eslintrc.js",
    "content": "module.exports = {\n  root: true,\n  parser: 'babel-eslint',\n  env: {\n    browser: true,\n    node: true\n  },\n  extends: 'standard',\n  // required to lint *.vue files\n  plugins: [\n    'html'\n  ],\n  // add your custom rules here\n  rules: {},\n  globals: {}\n}\n"
  },
  {
    "path": "examples/ssr/nuxt/.gitignore",
    "content": "# dependencies\nnode_modules\n\n# logs\nnpm-debug.log\n\n# Nuxt build\n.nuxt\n\n# Nuxt generate\ndist\n"
  },
  {
    "path": "examples/ssr/nuxt/README.md",
    "content": "# ssr-for-nuxt\n\n> Server-Side Rendering for Nuxt.js\n\n## Build Setup\n\n``` bash\n# install dependencies\n$ npm install # Or yarn install\n\n# serve with hot reload at localhost:3000\n$ npm run dev\n\n# build for production and launch server\n$ npm run build\n$ npm start\n\n# generate static project\n$ npm run generate\n```\n\nFor detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js).\n"
  },
  {
    "path": "examples/ssr/nuxt/assets/README.md",
    "content": "# ASSETS\n\nThis directory contains your un-compiled assets such as LESS, SASS, or JavaScript.\n\nMore information about the usage of this directory in the documentation:\nhttps://nuxtjs.org/guide/assets#webpacked\n\n**This directory is not required, you can delete it if you don't want to use it.**\n"
  },
  {
    "path": "examples/ssr/nuxt/components/Logo.vue",
    "content": "<template>\n  <div class=\"VueToNuxtLogo\">\n    <div class=\"Triangle Triangle--two\"></div>\n    <div class=\"Triangle Triangle--one\"></div>\n    <div class=\"Triangle Triangle--three\"></div>\n    <div class=\"Triangle Triangle--four\"></div>\n  </div>\n</template>\n\n<style>\n.VueToNuxtLogo {\n  display: inline-block;\n  animation: turn 2s linear forwards 1s;\n  transform: rotateX(180deg);\n  position: relative;\n  overflow: hidden;\n  height: 180px;\n  width: 245px;\n}\n\n.Triangle {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 0;\n}\n\n.Triangle--one {\n  border-left: 105px solid transparent;\n  border-right: 105px solid transparent;\n  border-bottom: 180px solid #41B883;\n}\n\n.Triangle--two {\n  top: 30px;\n  left: 35px;\n  animation: goright 0.5s linear forwards 3.5s;\n  border-left: 87.5px solid transparent;\n  border-right: 87.5px solid transparent;\n  border-bottom: 150px solid #3B8070;\n}\n\n.Triangle--three {\n  top: 60px;\n  left: 35px;\n  animation: goright 0.5s linear forwards 3.5s;\n  border-left: 70px solid transparent;\n  border-right: 70px solid transparent;\n  border-bottom: 120px solid #35495E;\n}\n\n.Triangle--four {\n  top: 120px;\n  left: 70px;\n  animation: godown 0.5s linear forwards 3s;\n  border-left: 35px solid transparent;\n  border-right: 35px solid transparent;\n  border-bottom: 60px solid #fff;\n}\n\n@keyframes turn {\n  100% {\n    transform: rotateX(0deg);\n  }\n}\n\n@keyframes godown {\n  100% {\n    top: 180px;\n  }\n}\n\n@keyframes goright {\n  100% {\n    left: 70px;\n  }\n}\n</style>\n"
  },
  {
    "path": "examples/ssr/nuxt/components/README.md",
    "content": "# COMPONENTS\n\nThe components directory contains your Vue.js Components.\nNuxt.js doesn't supercharge these components.\n\n**This directory is not required, you can delete it if you don't want to use it.**\n"
  },
  {
    "path": "examples/ssr/nuxt/layouts/README.md",
    "content": "# LAYOUTS\n\nThis directory contains your Application Layouts.\n\nMore information about the usage of this directory in the documentation:\nhttps://nuxtjs.org/guide/views#layouts\n\n**This directory is not required, you can delete it if you don't want to use it.**\n"
  },
  {
    "path": "examples/ssr/nuxt/layouts/default.vue",
    "content": "<template>\n  <div>\n    <nuxt/>\n  </div>\n</template>\n\n<style>\nhtml {\n  font-family: \"Source Sans Pro\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  font-size: 16px;\n  word-spacing: 1px;\n  -ms-text-size-adjust: 100%;\n  -webkit-text-size-adjust: 100%;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  box-sizing: border-box;\n}\n\n*, *:before, *:after {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.button--green {\n  display: inline-block;\n  border-radius: 4px;\n  border: 1px solid #3b8070;\n  color: #3b8070;\n  text-decoration: none;\n  padding: 10px 30px;\n}\n\n.button--green:hover {\n  color: #fff;\n  background-color: #3b8070;\n}\n\n.button--grey {\n  display: inline-block;\n  border-radius: 4px;\n  border: 1px solid #35495e;\n  color: #35495e;\n  text-decoration: none;\n  padding: 10px 30px;\n  margin-left: 15px;\n}\n\n.button--grey:hover {\n  color: #fff;\n  background-color: #35495e;\n}\n</style>\n"
  },
  {
    "path": "examples/ssr/nuxt/locales/en.json",
    "content": "{\n  \"title\": {\n    \"main\": \"ssr-for-nuxt\",\n    \"sub\": \"Server-Side Rendering for Nuxt.js\"\n  },\n  \"links\": {\n    \"docs\": \"Documentation\",\n    \"github\": \"GitHub\"\n  }\n}\n"
  },
  {
    "path": "examples/ssr/nuxt/locales/ja.json",
    "content": "{\n  \"title\": {\n    \"main\": \"ssr-for-nuxt\",\n    \"sub\": \"サーバサイドレンダリング Nuxt.js プロジェクト\"\n  },\n  \"links\": {\n    \"docs\": \"ドキュメント\",\n    \"github\": \"GitHub\"\n  }\n}\n"
  },
  {
    "path": "examples/ssr/nuxt/middleware/README.md",
    "content": "# MIDDLEWARE\n\nThis directory contains your Application Middleware.\nThe middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts).\n\nMore information about the usage of this directory in the documentation:\nhttps://nuxtjs.org/guide/routing#middleware\n\n**This directory is not required, you can delete it if you don't want to use it.**\n"
  },
  {
    "path": "examples/ssr/nuxt/nuxt.config.js",
    "content": "const i18nExtensions = require('vue-i18n-extensions')\n\nmodule.exports = {\n  /*\n  ** Headers of the page\n  */\n  head: {\n    title: 'ssr-for-nuxt',\n    meta: [\n      { charset: 'utf-8' },\n      { name: 'viewport', content: 'width=device-width, initial-scale=1' },\n      { hid: 'description', name: 'description', content: 'Server-Side Rendering for Nuxt.js' }\n    ],\n    link: [\n      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }\n    ]\n  },\n  /*\n  ** Customize the progress bar color\n  */\n  loading: { color: '#3B8070' },\n  /*\n  ** Build configuration\n  */\n  build: {\n    vendor: ['vue-i18n']\n  },\n  render: {\n    // confiture `render`\n    // see Nuxt.js docs: https://nuxtjs.org/api/configuration-render#bundleRenderer\n    bundleRenderer: {\n      directives: {\n        t: i18nExtensions.directive\n      }\n    }\n  },\n  plugins: ['~/plugins/i18n.js']\n}\n"
  },
  {
    "path": "examples/ssr/nuxt/package.json",
    "content": "{\n  \"name\": \"ssr-for-nuxt\",\n  \"version\": \"1.0.0\",\n  \"description\": \"Server-Side Rendering for Nuxt.js\",\n  \"author\": \"kazuya kawaguchi <kawakazu80@gmail.com>\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"nuxt\",\n    \"build\": \"nuxt build\",\n    \"start\": \"nuxt start\",\n    \"generate\": \"nuxt generate\",\n    \"lint\": \"eslint --ext .js,.vue --ignore-path .gitignore .\",\n    \"precommit\": \"npm run lint\",\n    \"postinstall\": \"npm link ../../../\"\n  },\n  \"dependencies\": {\n    \"nuxt\": \"^1.4.0\"\n  },\n  \"devDependencies\": {\n    \"babel-eslint\": \"^7.2.3\",\n    \"eslint\": \"^4.3.0\",\n    \"eslint-config-standard\": \"^10.2.1\",\n    \"eslint-loader\": \"^1.9.0\",\n    \"eslint-plugin-html\": \"^3.1.1\",\n    \"eslint-plugin-import\": \"^2.7.0\",\n    \"eslint-plugin-node\": \"^5.1.1\",\n    \"eslint-plugin-promise\": \"^3.5.0\",\n    \"eslint-plugin-standard\": \"^3.0.1\",\n    \"vue-i18n-extensions\": \"^0.1.0\"\n  }\n}\n"
  },
  {
    "path": "examples/ssr/nuxt/pages/README.md",
    "content": "# PAGES\n\nThis directory contains your Application Views and Routes.\nThe framework reads all the .vue files inside this directory and create the router of your application.\n\nMore information about the usage of this directory in the documentation:\nhttps://nuxtjs.org/guide/routing\n"
  },
  {
    "path": "examples/ssr/nuxt/pages/index.vue",
    "content": "<template>\n  <section class=\"container\">\n    <div>\n      <logo/>\n      <h1 class=\"title\" v-t=\"'title.main'\"></h1>\n      <h2 class=\"subtitle\" v-t=\"'title.sub'\"></h2>\n      <div class=\"links\">\n        <a href=\"https://nuxtjs.org/\" target=\"_blank\" class=\"button--green\" v-t=\"'links.docs'\"></a>\n        <a href=\"https://github.com/nuxt/nuxt.js\" target=\"_blank\" class=\"button--grey\" v-t=\"'links.github'\"></a>\n      </div>\n    </div>\n  </section>\n</template>\n\n<script>\nimport Logo from '~/components/Logo.vue'\n\nexport default {\n  components: {\n    Logo\n  }\n}\n</script>\n\n<style>\n.container {\n  min-height: 100vh;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n}\n\n.title {\n  font-family: \"Quicksand\", \"Source Sans Pro\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif; /* 1 */\n  display: block;\n  font-weight: 300;\n  font-size: 100px;\n  color: #35495e;\n  letter-spacing: 1px;\n}\n\n.subtitle {\n  font-weight: 300;\n  font-size: 42px;\n  color: #526488;\n  word-spacing: 5px;\n  padding-bottom: 15px;\n}\n\n.links {\n  padding-top: 15px;\n}\n</style>\n"
  },
  {
    "path": "examples/ssr/nuxt/plugins/README.md",
    "content": "# PLUGINS\n\nThis directory contains your Javascript plugins that you want to run before instantiating the root vue.js application.\n\nMore information about the usage of this directory in the documentation:\nhttps://nuxtjs.org/guide/plugins\n\n**This directory is not required, you can delete it if you don't want to use it.**\n"
  },
  {
    "path": "examples/ssr/nuxt/plugins/i18n.js",
    "content": "import Vue from 'vue'\nimport VueI18n from 'vue-i18n'\n\nVue.use(VueI18n)\n\nexport default ({ app, store }) => {\n  app.i18n = new VueI18n({\n    locale: 'ja',\n    messages: {\n      'en': require('~/locales/en.json'),\n      'ja': require('~/locales/ja.json')\n    }\n  })\n}\n"
  },
  {
    "path": "examples/ssr/nuxt/static/README.md",
    "content": "# STATIC\n\nThis directory contains your static files.\nEach file inside this directory is mapped to /.\n\nExample: /static/robots.txt is mapped as /robots.txt.\n\nMore information about the usage of this directory in the documentation:\nhttps://nuxtjs.org/guide/assets#static\n\n**This directory is not required, you can delete it if you don't want to use it.**\n"
  },
  {
    "path": "examples/ssr/nuxt/store/README.md",
    "content": "# STORE\n\nThis directory contains your Vuex Store files.\nVuex Store option is implemented in the Nuxt.js framework.\nCreating a index.js file in this directory activate the option in the framework automatically.\n\nMore information about the usage of this directory in the documentation:\nhttps://nuxtjs.org/guide/vuex-store\n\n**This directory is not required, you can delete it if you don't want to use it.**\n"
  },
  {
    "path": "examples/started/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"utf-8\">\n    <title>getting started</title>\n    <script src=\"../../node_modules/vue/dist/vue.min.js\"></script>\n    <script src=\"../../dist/vue-i18n.min.js\"></script>\n  </head>\n  <body>\n    <div id=\"app\">\n      <p>{{ $t(\"message.hello\") }}</p>\n    </div>\n    <script>\n      var messages = {\n        en: {\n          message: {\n            hello: 'hello world'\n          }\n        },\n        ja: {\n          message: {\n            hello: 'こんにちは、世界'\n          }\n        }\n      }\n      \n      Vue.use(VueI18n)\n\n      var i18n = new VueI18n({\n        locale: 'ja',\n        messages: messages\n      })\n      new Vue({ i18n: i18n }).$mount('#app')\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "examples/storybook/.babelrc",
    "content": "{\n  \"presets\": [\n    [\"env\", { \"modules\": false }]\n  ]\n}\n"
  },
  {
    "path": "examples/storybook/.gitignore",
    "content": ".DS_Store\nnode_modules/\ndist/\nnpm-debug.log\nyarn-error.log\n\n# Editor directories and files\n.idea\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n"
  },
  {
    "path": "examples/storybook/.storybook/addons.js",
    "content": "/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */\n\nimport '@storybook/addon-actions/register'\nimport '@storybook/addon-links/register'\n"
  },
  {
    "path": "examples/storybook/.storybook/config.js",
    "content": "import { configure } from '@storybook/vue'\nimport Vue from 'vue'\nimport VueI18n from 'vue-i18n'\n\nVue.use(VueI18n)\n\nfunction loadStories() {\n  require('../src/stories')\n}\n\nconfigure(loadStories, module)\n"
  },
  {
    "path": "examples/storybook/README.md",
    "content": "# storybook\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n"
  },
  {
    "path": "examples/storybook/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <title>storybook</title>\n  </head>\n  <body>\n    <div id=\"app\"></div>\n    <script src=\"/dist/build.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "examples/storybook/package.json",
    "content": "{\n  \"name\": \"vue-i18n-storybook \",\n  \"description\": \"vue-i18n example for stroybook\",\n  \"version\": \"1.0.0\",\n  \"author\": \"kazuya kawaguchi <kawakazu80@gmail.com>\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n    \"build\": \"cross-env NODE_ENV=production webpack --progress --hide-modules\",\n    \"postinstall\": \"npm link ../../\",\n    \"storybook\": \"start-storybook -p 6006\",\n    \"build-storybook\": \"build-storybook\"\n  },\n  \"dependencies\": {\n    \"vue\": \"^2.4.2\"\n  },\n  \"devDependencies\": {\n    \"babel-core\": \"^6.0.0\",\n    \"babel-loader\": \"^6.0.0\",\n    \"babel-preset-env\": \"^1.5.1\",\n    \"cross-env\": \"^3.0.0\",\n    \"css-loader\": \"^0.25.0\",\n    \"file-loader\": \"^0.9.0\",\n    \"vue-loader\": \"^12.1.0\",\n    \"vue-template-compiler\": \"^2.4.2\",\n    \"webpack\": \"^2.6.1\",\n    \"webpack-dev-server\": \"^3.10.1\",\n    \"@storybook/vue\": \"^3.2.3\"\n  }\n}\n"
  },
  {
    "path": "examples/storybook/src/App.vue",
    "content": "<template>\n  <div id=\"app\">\n    <img src=\"./assets/logo.png\">\n    <h1>{{ msg }}</h1>\n    <h2>{{ $t('links')}}</h2>\n    <ul>\n      <li><a href=\"https://vuejs.org\" target=\"_blank\">Core Docs</a></li>\n      <li><a href=\"https://forum.vuejs.org\" target=\"_blank\">Forum</a></li>\n      <li><a href=\"https://gitter.im/vuejs/vue\" target=\"_blank\">Gitter Chat</a></li>\n      <li><a href=\"https://twitter.com/vuejs\" target=\"_blank\">Twitter</a></li>\n    </ul>\n    <h2>{{ $t('ecosystem') }}</h2>\n    <ul>\n      <li><a href=\"http://router.vuejs.org/\" target=\"_blank\">vue-router</a></li>\n      <li><a href=\"http://vuex.vuejs.org/\" target=\"_blank\">vuex</a></li>\n      <li><a href=\"http://vue-loader.vuejs.org/\" target=\"_blank\">vue-loader</a></li>\n      <li><a href=\"https://github.com/vuejs/awesome-vue\" target=\"_blank\">awesome-vue</a></li>\n    </ul>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'app',\n  data () {\n    return {\n      msg: this.$t('message')\n    }\n  }\n}\n</script>\n\n<style>\n#app {\n  font-family: 'Avenir', Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n\nh1, h2 {\n  font-weight: normal;\n}\n\nul {\n  list-style-type: none;\n  padding: 0;\n}\n\nli {\n  display: inline-block;\n  margin: 0 10px;\n}\n\na {\n  color: #42b983;\n}\n</style>\n"
  },
  {
    "path": "examples/storybook/src/main.js",
    "content": "import Vue from 'vue'\nimport App from './App.vue'\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n})\n"
  },
  {
    "path": "examples/storybook/src/stories/MyButton.vue",
    "content": "<template>\n  <button class=\"button-styles\" @click=\"onClick\">\n    <slot></slot>\n  </button>\n</template>\n\n<script>\n  export default {\n    name: 'my-button',\n  \n    methods: {\n      onClick () {\n      }\n    }\n  }\n</script>\n\n<style>\n  .button-styles {\n    border: 1px solid #eee;\n    border-radiuas: 3px;\n    background-color: #FFFFFF;\n    cursor: pointer;\n    font-size: 15pt;\n    padding: 3px 10px;\n    margin: 10px;\n  }\n</style>\n"
  },
  {
    "path": "examples/storybook/src/stories/Welcome.vue",
    "content": "<template>\n  <div class=\"main\">\n    <h1>Welcome to STORYBOOK</h1>\n    <p>\n      This is a UI component dev environment for your app.\n    </p>\n    <p>\n      We've added some basic stories inside the\n      <br />\n      <code class=\"code\">src/stories</code>\n      <br />\n      directory.\n      <br />\n      A story is a single state of one or more UI components. You can have as many stories as\n      you want.\n      <br />\n      (Basically a story is like a visual test case.)\n    </p>\n    <p>\n      See these sample\n      <br />\n      <a class=\"link\" @click=\"onClick\" role=\"button\" tabIndex=\"0\">stories</a>\n      <br />\n      for a component called\n      <br />\n      <code class=\"code\">Button</code>\n      .\n    </p>\n    <p>\n      Just like that, you can add your own components as stories.\n      <br />\n      You can also edit those components and see changes right away.\n      <br />\n      (Try editing the <code class=\"code\">Button</code> component\n      located at <code class=\"code\">src/stories/Button.js</code>.)\n    </p>\n    <p>\n      This is just one thing you can do with Storybook.\n      <br />\n      Have a look at the\n      <br />\n      <a\n        class=\"link\"\n        href=\"https://github.com/storybooks/storybook\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n      >\n        Storybook\n      </a>\n      <br />\n      repo for more information.\n    </p>\n    <p class=\"note\">\n      <b>NOTE:</b>\n      <br />\n      Have a look at the\n      <br />\n      <code class=\"code\">.storybook/webpack.config.js</code>\n      <br />\n      to add webpack\n      loaders and plugins you are using in this project.\n    </p>\n  </div>\n</template>\n\n<script>\n  const log = () => console.log('Welcome to storybook!')\n\n  export default {\n    name: 'welcome',\n\n    props: {\n      showApp: {\n        type: Function,\n        default: log\n      }\n    },\n\n    methods: {\n      onClick (event) {\n        event.preventDefault()\n        this.showApp()\n      }\n    }\n  }\n</script>\n\n<style>\n  .main {\n    margin: 15px;\n    max-width: 600px;\n    line-height: 1.4;\n    font-family: \"Helvetica Neue\", Helvetica, \"Segoe UI\", Arial, freesans, sans-serif;\n  }\n\n  .logo {\n    width: 200px;\n  }\n\n  .link {\n    color: #1474f3;\n    text-decoration: none;\n    border-bottom: 1px solid #1474f3;\n    padding-bottom: 2px;\n  }\n\n  .code {\n    font-size: 15px;\n    font-weight: 600;\n    padding: 2px 5px;\n    border: 1px solid #eae9e9;\n    border-radius: 4px;\n    background-color: #f3f2f2;\n    color: #3a3a3a;\n  }\n\n  .note {\n    opacity: 0.5;\n  }\n</style>\n"
  },
  {
    "path": "examples/storybook/src/stories/index.js",
    "content": "/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */\n\nimport { storiesOf } from '@storybook/vue'\nimport { action } from '@storybook/addon-actions'\nimport { linkTo } from '@storybook/addon-links'\n\nimport App from '../App.vue'\nimport MyButton from './MyButton.vue'\nimport Welcome from './Welcome.vue'\nimport VueI18n from 'vue-i18n'\n\nstoriesOf('App', module)\n  .add('basic', () => ({\n    components: { App },\n    template: '<App/>',\n    i18n: new VueI18n({\n      locale: 'ja',\n      messages: {\n        en: {\n          message: 'Welcome to Your Vue.js App',\n          links: 'Essential Links',\n          ecosystem: 'EcoSystem'\n        },\n        ja: {\n          message: 'ようこそ、Vue.js アプリケーションに',\n          links: '必須リンク',\n          ecosystem: 'エコシステム'\n        }\n      }\n    })\n  }))\n\nstoriesOf('Welcome', module).add('to Storybook', () => ({\n  components: { Welcome },\n  template: '<welcome :showApp=\"action\" />',\n  methods: { action: linkTo('Button') },\n}))\n\nstoriesOf('Button', module)\n  .add('with text', () => ({\n    components: { MyButton },\n    template: '<my-button @click=\"action\">Hello Button</my-button>',\n    methods: { action: action('clicked') },\n  }))\n  .add('with some emoji', () => ({\n    components: { MyButton },\n    template: '<my-button @click=\"action\">😀 😎 👍 💯</my-button>',\n    methods: { action: action('clicked') },\n  }))\n"
  },
  {
    "path": "examples/storybook/webpack.config.js",
    "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n  entry: './src/main.js',\n  output: {\n    path: path.resolve(__dirname, './dist'),\n    publicPath: '/dist/',\n    filename: 'build.js'\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader',\n        options: {\n          loaders: {\n          }\n          // other vue-loader options go here\n        }\n      },\n      {\n        test: /\\.js$/,\n        loader: 'babel-loader',\n        exclude: /node_modules/\n      },\n      {\n        test: /\\.(png|jpg|gif|svg)$/,\n        loader: 'file-loader',\n        options: {\n          name: '[name].[ext]?[hash]'\n        }\n      }\n    ]\n  },\n  resolve: {\n    alias: {\n      'vue$': 'vue/dist/vue.esm.js'\n    }\n  },\n  devServer: {\n    historyApiFallback: true,\n    noInfo: true\n  },\n  performance: {\n    hints: false\n  },\n  devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n  module.exports.devtool = '#source-map'\n  // http://vue-loader.vuejs.org/en/workflow/production.html\n  module.exports.plugins = (module.exports.plugins || []).concat([\n    new webpack.DefinePlugin({\n      'process.env': {\n        NODE_ENV: '\"production\"'\n      }\n    }),\n    new webpack.optimize.UglifyJsPlugin({\n      sourceMap: true,\n      compress: {\n        warnings: false\n      }\n    }),\n    new webpack.LoaderOptionsPlugin({\n      minimize: true\n    })\n  ])\n}\n"
  },
  {
    "path": "gitbook/LANGS.md",
    "content": "* [6.0+ Docs](en/)\n* [5.x Docs](old/)\n"
  },
  {
    "path": "gitbook/book.json",
    "content": "{\n  \"gitbook\": \"3.x.x\",\n  \"title\": \"vue-i18n\",\n  \"root\": \"./\",\n  \"plugins\": [\n    \"edit-link\",\n    \"theme-vuejs@git+https://github.com/pearofducks/gitbook-plugin-theme-vuejs.git\", \"-fontsettings\",\n    \"github\",\n    \"advanced-emoji@0.2.2\"\n  ],\n  \"pluginsConfig\": {\n    \"edit-link\": {\n      \"base\": \"https://github.com/kazupon/vue-i18n/tree/dev/gitbook\",\n      \"label\": \"Edit This Page\"\n    },\n    \"github\": {\n      \"url\": \"https://github.com/kazupon/vue-i18n/\"\n    }\n  },\n  \"links\": {\n    \"sharing\": {\n      \"facebook\": false,\n      \"twitter\": false\n    }\n  }\n}\n"
  },
  {
    "path": "gitbook/en/SUMMARY.md",
    "content": "# vue-i18n documentation\n\nInternationalization plugin of Vue.js\n\n> :warning: NOTE: This documentation is for vue-i18n v6.0 or later.\n\n* [Looking for 5.x Docs?](https://kazupon.github.io/vue-i18n/old/)\n* [Release Notes](https://github.com/kazupon/vue-i18n/releases)\n* [Installation](installation.md)\n* [Getting started](started.md)\n* [Formatting](formatting.md)\n  * [HTML formatting](formatting.md#html-formatting)\n  * [Named formatting](formatting.md#named-formatting)\n  * [List formatting](formatting.md#list-formatting)\n  * [Support ruby on rails i18n format](formatting.md#support-ruby-on-rails-i18n-format)\n  * [Custom formatting](formatting.md#custom-formatting)\n* [Pluralization](pluralization.md)\n* [DateTime localization](datetime.md)\n* [Number localization](number.md)\n* [Locale messages syntax](messages.md)\n  * [Structure](messages.md#structure)\n  * [Linked locale messages](messages.md#linked-locale-messages)\n* [Fallback localization](fallback.md)\n* [Component based localization](component.md)\n* [Custom directive localization](directive.md)\n  * [String Syntax](directive.md#string-syntax)\n  * [Object Syntax](directive.md#object-syntax)\n  * [$t vs v-t](directive.md#t-vs-v-t)\n* [Component interpolation](interpolation.md)\n  * [Basic Usage](interpolation.md#basic-usage)\n  * [Advanced Usage](interpolation.md#advanced-usage)\n* [Single file components](sfc.md)\n  * [Basic Usage](sfc.md#basic-usage)\n  * [YAML loading](sfc.md#yaml-loading)\n  * [Multiple custom blocks](sfc.md#multiple-custom-blocks)\n* [Hot reloading](hot-reload.md)\n* [Lazy loading](lazy-loading.md)\n* [Common gotchas](gotchas.md)\n* [Migrations](migrations.md)\n  * [Global config](migrations.md#global-config)\n  * [Global methods](migrations.md#global-methods)\n  * [Constructor options](migrations.md#constructor-options)\n  * [Instance properties](migrations.md#instance-properties)\n  * [Features](migrations.md#features)\n* [API references](api.md)\n  * [Extension of Vue](api.md#extension-of-vue)\n    * [Vue constructor options](api.md#vue-constructor-options)\n    * [Vue injected methods](api.md#vue-injected-methods)\n    * [Injected properties](api.md#injected-properties)\n  * [VueI18n class](api.md#vuei18n-class)\n    * [Static properties](api.md#static-properties)\n    * [Constructor options](api.md#constructor-options)\n    * [Properties](api.md#properties)\n    * [Methods](api.md#methods)\n  * [Directives](api.md#directives)\n    * [v-t](api.md#v-t)\n  * [Components](api.md#components)\n    * [i18n](api.md#i18n-functional-component)\n  * [Special Attributes](api.md#special-attributes)\n    * [place](api.md#place)\n"
  },
  {
    "path": "gitbook/en/api.md",
    "content": "# API references\n\n## Extension of Vue\n\n### Vue constructor options\n\n#### i18n\n\n- **Type:** `I18nOptions`\n\n  Component based localization option.\n\n- **See also:** [`VueI18n` class constructor options](#constructor-options)\n\n\n### Vue injected methods\n\n#### $t\n\n- **Arguments:**\n  - `{Path} key`: required\n  - `{Locale} locale`: optional\n  - `{Array | Object} values`: optional\n\n- **Return:** `TranslateResult`\n\n  Localize the locale message of `key`. Localize in preferentially component locale messages than global locale messages. If not specified component locale messages, localize with global locale messages. If you specified `locale`, localize the locale messages of `locale`. If you specified `key` of list / named formatting local messages, you must specify `values` too. For `values` more details see [Formatting](formatting.md).\n\n#### $tc\n\n- **Arguments:**\n  - `{Path} key`: required\n  - `{number} choice`: optional, default 1\n  - `{Locale} locale`: optional\n  - `{string | Array | Object} values`: optional\n\n- **Return:** `string`\n\n  Localize the locale message of `key` with pluralization. Localize in preferentially component locale messages than global locale messages. If not specified component locale messages, localize with global locale messages. If you specified `locale`, localize the locale messages of `locale`. If you will specify string value to `values`, localize the locale messages of value. If you will specify Array or Object value to `values`, you must specify with `values` of [$t](#t).\n\n  If default pluralization does not suit your needs, see [pluralization rules in constructor options](#pluralizationrules) and [custom pluralization](pluralization.md).\n\n#### getChoiceIndex\n\n- **Arguments:**\n  - `{number} choice`\n  - `{number} choicesLength`\n\n- **Return:** `finalChoice {number}`\n\n  Get pluralization index for current pluralizing number and a given amount of choices. Can be overriden through prototype mutation:\n  ```js\n    VueI18n.prototype.getChoiceIndex = /* custom implementation */\n  ```\n\n\n#### $te\n\n- **Arguments:**\n  - `{Path} key`: required\n  - `{Locale} locale`: optional\n\n- **Return:** `boolean`\n\n  Check whether key exists. In Vue instance, If not specified component locale messages, check with global locale messages. If you specified `locale`, check the locale messages of `locale`.\n\n#### $d\n\n> :new: 7.0+\n\n- **Arguments:**\n  - `{number | Date} value`: required\n  - `{Path | Object} key`: optional\n  - `{Locale | Object} locale`: optional\n\n- **Return:** `DateTimeFormatResult`\n\n  Localize the datetime of `value` with datetime format of `key`. The datetime format of `key` need to register to `dateTimeFormats` option of `VueI18n` class, and depend on `locale` option of `VueI18n` constructor. If you will specify `locale` argument, it will have priority over `locale` option of `VueI18n` constructor.\n\n  If the datetime format of `key` not exist in `dateTimeFormats` option,  fallback to depend on `fallbackLocale` option of `VueI18n` constructor.\n\n#### $n\n\n> :new: 7.0+\n\n- **Arguments:**\n  - `{number} value`: required\n  - `{Path | Object} key`: optional\n  - `{Locale} locale`: optional\n\n- **Return:** `NumberFormatResult`\n\n  Localize the number of `value` with number format of `key`. The number format of `key` need to register to `numberFormats` option of `VueI18n` class, and depend on `locale` option of `VueI18n` constructor. If you will specify `locale` argument, it will have priority over `locale` option of `VueI18n` constructor.\n\n  If the number format of `key` not exist in `numberFormats` option,  fallback to depend on `fallbackLocale` option of `VueI18n` constructor.\n\n  If the second `key` argument specified as an object, it should have the following properties:\n  - `key {Path}`: optional, number format\n  - `locale {Locale}`: optional, locale\n  - `compactDisplay {string}`: optional, number format option\n  - `currency {string}`: optional, number format option\n  - `currencyDisplay {string}`: optional, number format option\n  - `currencySign {string}`: optional, number format option\n  - `localeMatcher {string}`: optional, number format option\n  - `notation {string}`: optional, number format option\n  - `numberingSystem {string}`: optional, number format option\n  - `signDisplay {string}`: optional, number format option\n  - `style {string}`: optional, number format option\n  - `unit {string}`: optional, number format option\n  - `unitDisplay {string}`: optional, number format option\n  - `useGrouping {boolean}`: optional, number format option\n  - `minimumIntegerDigits {string}`: optional, number format option\n  - `minimumFractionDigits {string}`: optional, number format option\n  - `maximumFractionDigits {string}`: optional, number format option\n  - `minimumSignificantDigits {string}`: optional, number format option\n  - `maximumSignificantDigits {string}`: optional, number format option\n\n  Any specified number format options will have priority over `numberFormats` of `VueI18n` constructor.\n\n### Injected properties\n\n#### $i18n\n\n- **Type:** `I18n`\n\n- **Read only**\n\n  Get a `VueI18n` instance. If you are specify.\n\n  If you have specified an `i18n` option at component options, you will be able to get a `VueI18n` instance at the component, Otherwise, you will be able get root `VueI18n` instance.\n\n\n## `VueI18n` class\n\n`Vuei18n` class implement `I18n` interface of [flowtype definitions](https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js)\n\n### Static properties\n\n#### version\n\n- **Type:** `string`\n\n  vue-i18n version.\n\n#### availabilities\n\n> :new: 7.0+\n\n- **Type:** `IntlAvailability`\n\n  Whether the following internationalization features are available:\n\n- `{boolean} dateTimeFormat`: locale sensitive datetime formatting\n- `{boolean} numberFormat`: locale sensitive number formatting\n\n  The above internationalization features are depends on [the browser environments](http://kangax.github.io/compat-table/esintl/), due to implement with ECMAScript Internationalization API (ECMA-402).\n\n### Constructor options\n\nYou can specify the below some options of `I18nOptions` constructor options of [flowtype definitions](https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js)\n\n#### locale\n\n- **Type:** `Locale`\n\n- **Default:** `'en-US'`\n\n  The locale of localization. If the locale contains a territory and a dialect, this locale contains an implicit fallback.\n\n#### fallbackLocale\n\n- **Type:** `Locale`\n\n- **Default:** `'en-US'`\n\n  The locale of fallback localization. For more complex fallback definitions see fallback.\n\n#### messages\n\n- **Type:** `LocaleMessages`\n\n- **Default:** `{}`\n\n  The locale messages of localization.\n\n#### dateTimeFormats\n\n> :new: 7.0+\n\n- **Type:** `DateTimeFormats`\n\n- **Default:** `{}`\n\n  The datetime formats of localization.\n\n- **See also:** `DateTimeFormats` type of [flowtype definitions](https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js)\n\n#### numberFormats\n\n> :new: 7.0+\n\n- **Type:** `NumberFormats`\n\n- **Default:** `{}`\n\n  The number formats of localization.\n\n- **See also:** `NumberFormats` type of [flowtype definitions](https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js)\n\n#### formatter\n\n- **Type:** `Formatter`\n\n- **Default:** Built in formatter\n\n  The formatter that implemented with `Formatter` interface.\n\n#### missing\n\n- **Type:** `MissingHandler`\n\n- **Default:** `null`\n\n  A handler for localization missing. The handler gets called with the localization target locale, localization path key and the Vue instance.\n\n  If missing handler is assigned, and occurred localization missing, it's not warned.\n\n#### fallbackRoot\n\n- **Type:** `Boolean`\n\n- **Default:** `true`\n\n  In the component localization, whether to fall back to root level (global) localization when localization fails.\n\n  If `false`, it's warned, and is returned the key.\n\n#### fallbackRootWithEmptyString\n\n> :new: 8.26+\n\n- **Type:** `Boolean`\n\n- **Default:** `true`\n\n  In the component localization, whether to fall back to root level (global) localization when local message is an empty string.\n\n  Please note the default behavior in vue-i18n 9.x is to not falling back to root for local message that is empty string.\n\n  If `false`, the empty local message will not fall back to root and will be kept as empty string.\n\n#### sync\n\n- **Type:** `Boolean`\n\n- **Default:** `true`\n\n  Whether synchronize the root level locale to the component localization locale.\n\n  If `false`, regardless of the root level locale, localize for each component locale.\n\n#### silentTranslationWarn\n\n> 6.1+\n\n- **Type:** `Boolean`\n\n- **Default:** `false`\n\n  Whether suppress warnings outputted when localization fails.\n\n  If `true`, supress localization fail warnings.\n\n#### pluralizationRules\n\n> 8.5+\n\n- **Type:** `Object`\n\n- **Default:** `{}`\n\n  A set of rules for word pluralization in a following format:\n  ```js\n    {\n      // Key - locale for the rule to be applied to.\n      // Value - mapping function that maps a choice index from `$tc` to the actual choice of the plural word.\n\n      'ru': function (choice, choiceIndex) => Number/* index of the plural word */;\n      'en': function (choice, choiceIndex) => Number/* index of the plural word */;\n      'jp': function (choice, choiceIndex) => Number/* index of the plural word */;\n    }\n  ```\n\n### Properties\n\n#### locale\n\n- **Type:** `Locale`\n\n- **Read/Write**\n\n  The locale of localization.\n\n#### fallbackLocale\n\n- **Type:** `Locale`\n\n- **Read/Write**\n\n  The locale of fallback localization.\n\n#### messages\n\n- **Type:** `LocaleMessages`\n\n- **Read only**\n\n  The locale messages of localization.\n\n#### dateTimeFormats\n\n> :new: 7.0+\n\n- **Type:** `DateTimeFormats`\n\n- **Read only**\n\n  The datetime formats of localization.\n\n#### numberFormats\n\n> :new: 7.0+\n\n- **Type:** `NumberFormats`\n\n- **Read only**\n\n  The number formats of localization.\n\n#### missing\n\n- **Type:** `MissingHandler`\n\n- **Read/Write**\n\n  A handler for localization missing.\n\n#### formatter\n\n- **Type:** `Formatter`\n\n- **Read/Write**\n\n  The formatter that implemented with `Formatter` interface.\n\n#### silentTranslationWarn\n\n> 6.1+\n\n- **Type:** `boolean`\n\n- **Read/Write**\n\n  Whether suppress warnings outputted when localization fails.\n\n#### pluralizationRules\n\n> 8.5+\n\n- **Type:** `Object`\n\n- **Default:** `{}`\n\n  A set of rules for word pluralization. Key is a locale, value is the rule function for that locale.\n\n### Methods\n\n#### getLocaleMessage( locale )\n\n- **Arguments:**\n  - `{Locale} locale`\n\n- **Return:** `LocaleMessageObject`\n\n  Get the locale message of locale.\n\n#### setLocaleMessage( locale, message )\n\n- **Arguments:**\n  - `{Locale} locale`\n  - `{LocaleMessageObject} message`\n\n  Set the locale message of locale.\n\n#### mergeLocaleMessage( locale, message )\n\n> 6.1+\n\n- **Arguments:**\n  - `{Locale} locale`\n  - `{LocaleMessageObject} message`\n\n  Merge the registered locale messages with the locale message of locale.\n\n#### t( key, [locale], [values] )\n\n- **Arguments:**\n  - `{Path} key`: required\n  - `{Locale} locale`: optional\n  - `{Array | Object} values`: optional\n\n- **Return:**: `TranslateResult`\n\n  This is the same as the `Function` returned with `$t` method. More detail see [$t](#$t).\n\n#### i( key, [locale], [values] )\n\n> :new: 7.0+\n\n- **Arguments:**\n  - `{Path} key`: required\n  - `{Locale} locale`: optional\n  - `{Array} values`: optional\n\n- **Return:**: `TranslateResult`\n\n\n#### tc( key, [choice], [values] )\n\n- **Arguments:**\n  - `{Path} key`: required\n  - `{number} choice`: optional, default `1`\n  - `{string | Array | Object} values`: optional\n\n- **Return:** `TranslateResult`\n\n  This is the same as the `Function` returned `$tc` method. More detail see [$tc](#$tc).\n\n#### te( key, [locale] )\n\n- **Arguments:**\n  - `{string} key`: required\n  - `{Locale} locale`: optional\n\n- **Return:** `boolean`\n\n  Check whether key path exists in global locale message. If you specified `locale`, check the locale message of `locale`.\n\n#### getDateTimeFormat ( locale )\n\n> :new: 7.0+\n\n- **Arguments:**\n  - `{Locale} locale`\n\n- **Return:** `DateTimeFormat`\n\n  Get the datetime format of locale.\n\n#### setDateTimeFormat ( locale, format )\n\n> :new: 7.0+\n\n- **Arguments:**\n  - `{Locale} locale`\n  - `{DateTimeFormat} format`\n\n  Set the datetime format of locale.\n\n#### mergeDateTimeFormat ( locale, format )\n\n> :new: 7.0+\n\n- **Arguments:**\n  - `{Locale} locale`\n  - `{DateTimeFormat} format`\n\n  Merge the registered datetime formats with the datetime format of locale.\n\n#### d( value, [key], [locale] )\n\n> :new: 7.0+\n\n- **Arguments:**\n  - `{number | Date} value`: required\n  - `{Path | Object} key`: optional\n  - `{Locale | Object} locale`: optional\n\n- **Return:** `DateTimeFormatResult`\n\n  This is the same as `$d` method of Vue instance method. More detail see [$d](#$d).\n\n#### getNumberFormat ( locale )\n\n> :new: 7.0+\n\n- **Arguments:**\n  - `{Locale} locale`\n\n- **Return:** `NumberFormat`\n\n  Get the number format of locale.\n\n#### setNumberFormat ( locale, format )\n\n> :new: 7.0+\n\n- **Arguments:**\n  - `{Locale} locale`\n  - `{NumberFormat} format`\n\n  Set the number format of locale.\n\n#### mergeNumberFormat ( locale, format )\n\n> :new: 7.0+\n\n- **Arguments:**\n  - `{Locale} locale`\n  - `{NumberFormat} format`\n\n  Merge the registered number formats with the number format of locale.\n\n#### n( value, [key], [locale] )\n\n> :new: 7.0+\n\n- **Arguments:**\n  - `{number} value`: required\n  - `{Path | Object} key`: optional\n  - `{Locale} locale`: optional\n\n- **Return:** `NumberFormatResult`\n\n  This is the same as `$n` method of Vue instance method. More detail see [$n](#$n).\n\n## Directives\n\n> :new: 7.3+\n\n### v-t\n\n- **Expects:** `string | Object`\n\n- **Details:**\n\n  Update the element `textContent` that localized with locale messages. You can use string syntax or object syntax. string syntax can be specified as a keypath of locale messages.\n  If you can be used object syntax, you need to specify as the object key the following params:\n\n  - path: required, key of locale messages\n  - locale: optional, locale\n  - args: optional, for list or named formatting\n  - choice: optional, for pluralization\n\n- **Examples:**\n\n  ```html\n  <!-- string syntax: literal -->\n  <p v-t=\"'foo.bar'\"></p>\n\n  <!-- string syntax: binding via data or computed props -->\n  <p v-t=\"msg\"></p>\n\n  <!-- object syntax: literal -->\n  <p v-t=\"{ path: 'hi', locale: 'ja', args: { name: 'kazupon' } }\"></p>\n\n  <!-- object syntax: binding via data or computed props -->\n  <p v-t=\"{ path: greeting, args: { name: fullName } }\"></p>\n  ```\n\n- **See also:** [Custom directive localization](./directive.md)\n\n\n## Components\n\n### i18n functional component\n\n> :new: 7.0+\n\n#### Props:\n\n- `path {Path}`: required, keypath of locale messages\n- `locale {Locale}`: optional, locale\n- `tag {string}`: optional, default `span`\n- `places {Array | Object}`: optional (7.2+)\n\n#### Usage:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <i18n path=\"term\" tag=\"label\" for=\"tos\">\n    <a :href=\"url\" target=\"_blank\">{{ $t('tos') }}</a>\n  </i18n>\n  <!-- ... -->\n</div>\n```\n\n\n```javascript\nconst messages = {\n  en: {\n    tos: 'Term of Service',\n    term: 'I accept xxx {0}.'\n  },\n  ja: {\n    tos: '利用規約',\n    term: '私は xxx の{0}に同意します。'\n  }\n}\n\nconst i18n = new VueI18n({\n  locale: 'en',\n  messages\n})\nnew Vue({\n  i18n,\n  data: {\n    url: '/term'\n  }\n}).$mount('#app')\n```\n\n#### See also:\n\n[Component interpolation](./interpolation.md)\n\n\n## Special Attributes\n\n### place\n\n> :new: 7.2+\n\n\n#### Expects: `{number | string}`\n\nUsed on component interpolation to indicate which index of list formatting or key of named formatting.\n\nFor detailed usage, see the guide section linked below.\n\n#### See also:\n\n[Component interpolation](./interpolation.md)\n"
  },
  {
    "path": "gitbook/en/component.md",
    "content": "# Component based localization\n\nIn general, locale info (e.g. `locale`,`messages`, etc) is set as a constructor option of the `VueI18n` instance and it sets the `i18n` option as a root Vue instance. This means you can use translations globally by using `$t` or `$tc` in the root Vue instance and any composed component.\nYou can also manage locale info for each component separately, which might be more convenient due to Vues component oriented design.\n\nComponent based localization example:\n\n```javascript\n// setup locale info for root Vue instance\nconst i18n = new VueI18n({\n  locale: 'ja',\n  messages: {\n    en: {\n      message: {\n        hello: 'hello world',\n        greeting: 'good morning'\n      }\n    },\n    ja: {\n      message: {\n        hello: 'こんにちは、世界',\n        greeting: 'おはようございます'\n      }\n    }\n  }\n})\n\n// Define component\nconst Component1 = {\n  template: `\n    <div class=\"container\">\n     <p>Component1 locale messages: {{ $t(\"message.hello\") }}</p>\n     <p>Fallback global locale messages: {{ $t(\"message.greeting\") }}</p>\n   </div>`,\n  i18n: { // `i18n` option\n    messages: {\n      en: { message: { hello: 'hello component1' } },\n      ja: { message: { hello: 'こんにちは、component1' } }\n    }\n  }\n}\n      \nnew Vue({\n  i18n,\n  components: {\n    Component1\n  }\n}).$mount('#app')\n```\n\nTemplate:\n\n```html\n<div id=\"app\">\n  <p>{{ $t(\"message.hello\") }}</p>\n  <component1></component1>\n</div>\n```\n\nOutputs the following:\n\n```html\n<div id=\"app\">\n  <p>こんにちは、世界</p>\n  <div class=\"container\">\n    <p>Component1 locale messages: こんにちは、component1</p>\n    <p>Fallback global locale messages: おはよう、世界！</p>\n  </div>\n</div>\n```\n\nAs in the example above, if the component doesn't have the locale message, it falls back to globally defined localization info. The component uses the language set in the root instance (in the above example: `locale: 'ja'`). \n\nIf you hope localize in the component locale, you can realize with `sync: false` and `locale` in `i18n` option.\n"
  },
  {
    "path": "gitbook/en/datetime.md",
    "content": "# DateTime localization\n\n> :new: 7.0+\n\nYou can localize the datetime with your definition formats.\n\nDateTime formats the below:\n\n```javascript\nconst dateTimeFormats = {\n  'en-US': {\n    short: {\n      year: 'numeric', month: 'short', day: 'numeric'\n    },\n    long: {\n      year: 'numeric', month: 'short', day: 'numeric',\n      weekday: 'short', hour: 'numeric', minute: 'numeric'\n    }\n  },\n  'ja-JP': {\n    short: {\n      year: 'numeric', month: 'short', day: 'numeric'\n    },\n    long: {\n      year: 'numeric', month: 'short', day: 'numeric',\n      weekday: 'short', hour: 'numeric', minute: 'numeric', hour12: true\n    }\n  }\n}\n```\n\nAs the Above, You can define the datetime format with named (e.g. `short`, `long`, etc), and you need to use [the options with ECMA-402 Intl.DateTimeFormat](http://www.ecma-international.org/ecma-402/2.0/#sec-intl-datetimeformat-constructor)\n\nAfter that like the locale messages, You need to specify the `dateTimeFormats` option of `VueI18n` constructor:\n\n```javascript\nconst i18n = new VueI18n({\n  dateTimeFormats\n})\n\nnew Vue({\n  i18n\n}).$mount('#app')\n```\n\nTemplate the below:\n\n```html\n<div id=\"app\">\n  <p>{{ $d(new Date(), 'short') }}</p>\n  <p>{{ $d(new Date(), 'long', 'ja-JP') }}</p>\n</div>\n```\n\nOutput the below:\n\n```html\n<div id=\"app\">\n  <p>Apr 19, 2017</p>\n  <p>2017年4月19日(水) 午前2:19</p>\n</div>\n```\n"
  },
  {
    "path": "gitbook/en/directive.md",
    "content": "# Custom directive localization\n\n> :new: 7.3+\n\nYou can translate not only with `v-t` custom directive, but also with `$t` method.\n\n## String syntax\n\nYou can pass the keypath of locale messages with string syntax.\n\nJavascript:\n\n```javascript\nnew Vue({\n  i18n: new VueI18n({\n    locale: 'en',\n    messages: {\n      en: { hello: 'hi there!' },\n      ja: { hello: 'こんにちは！' }\n    }\n  }),\n  data: { path: 'hello' }\n}).$mount('#string-syntax')\n```\n\nTemplates:\n\n```html\n<div id=\"string-syntax\">\n  <!-- string literal -->\n  <p v-t=\"'hello'\"></p>\n  <!-- keypath binding via data -->\n  <p v-t=\"path\"></p>\n</div>\n```\n\nOutputs:\n\n```html\n<div id=\"string-syntax\">\n  <p>hi there!</p>\n  <p>hi there!</p>\n</div>\n```\n\n## Object syntax\n\nYou can use object syntax.\n\nJavascript:\n\n```javascript\nnew Vue({\n  i18n: new VueI18n({\n    locale: 'en',\n    messages: {\n      en: { hello: 'hi {name}!' },\n      ja: { hello: 'こんにちは、{name}！' }\n    }\n  }),\n  computed: {\n    nickName () { return 'kazupon' }\n  },\n  data: { path: 'hello' }\n}).$mount('#object-syntax')\n```\n\nTemplates:\n\n```html\n<div id=\"object-syntax\">\n  <!-- literal -->\n  <p v-t=\"{ path: 'hello', locale: 'ja', args: { name: 'kazupon' } }\"></p>\n  <!-- data binding via data -->\n  <p v-t=\"{ path: path, args: { name: nickName } }\"></p>\n</div>\n```\n\nOutputs:\n\n```html\n<div id=\"object-syntax\">\n  <p>こんにちは、kazupon！</p>\n  <p>hi kazupon!</p>\n</div>\n```\n\n## `$t` vs `v-t`\n\n### `$t`\n`$t` is extended Vue instance method. It has the following pros and cons:\n\n#### Pros\nYou can **flexibly** use mustash syntax `{{}}` in templates and also computed props and methods in Vue instance.\n\n#### Cons\n`$t` is executed **every time** when re-render occurs, so it does have a translation costs.\n\n### `v-t`\n`v-t` is a custom directive. It has the following pros and cons:\n\n#### Pros\n`v-t` has **better performance** than the `$t` method due to its cache with the custom directive, when translated once. Also, pre-translation is possible with the Vue compiler module which was provided by [`vue-i18n-extensions`](https://github.com/kazupon/vue-i18n-extensions). Therefore it's possible to make **more performance optimizations**.\n\n#### Cons\n`v-t` can not be flexibly used like `$t`, it's rather **complex**. The translated content with `v-t` is inserted into the `textContent` of the element. Also, when you use server-side rendering, you need to set the [custom directive](https://github.com/kazupon/vue-i18n-extensions#directive-v-t-custom-directive-for-server-side) to `directives` option of  the `createRenderer` function.\n"
  },
  {
    "path": "gitbook/en/fallback.md",
    "content": "# Fallback localization\n\n## Implicit fallback using locales\n\nIf a `locale` is given containing a territory and an optional dialect, the implicit fallback is activated automatically.\n\nFor example `de-DE-bavarian` would fallback\n1. `de-DE-bavarian`\n1. `de-DE`\n1. `de`\n\nTo supress the automatic fallback, add the postfix exclamation mark `!`, for example `de-DE!`\n\n\n## Explicit fallback with one locale\n\nWhen the `message` key does not exist in the `ja` locale:\n\n```javascript\nconst messages = {\n  en: {\n    message: 'hello world'\n  },\n  ja: {\n  }\n}\n```\n\nAnd you have specified a `fallbackLocale` in the VueI18n constructor option, the `message` key uses the corresponding `en` locale key as a fallback:\n\n```javascript\nconst i18n = new VueI18n({\n  locale: 'ja',\n  fallbackLocale: 'en',\n  messages\n})\n```\n\nWhen you template the below:\n\n```html\n<p>{{ $t('message') }}</p>\n```\n\nThe following will be the output:\n\n```html\n<p>hello world</p>\n```\n\n\n## Explicit fallback with an array of locales\n\nIt is possible to set more than one fallback locale by using an array of locales. For example\n\n```javascript\nfallbackLocale: [ 'fr', 'en' ],\n```\n\n\n## Explicit fallback with decision maps\n\nIf more complex decision maps for fallback locales are required, it is possible to define decision maps with according fallback locales.\n\nUsing the following decision map\n\n```javascript\nfallbackLocale: {\n  /* 1 */ 'de-CH':   ['fr', 'it'],\n  /* 2 */ 'zh-Hant': ['zh-Hans'],\n  /* 3 */ 'es-CL':   ['es-AR'],\n  /* 4 */ 'es':      ['en-GB'],\n  /* 5 */ 'pt':      ['es-AR'],\n  /* 6 */ 'default': ['en', 'da']\n},\n```\n\nwill result in the following fallback chains\n\n| locale | fallback chains |\n|--------|-----------------|\n| `'de-CH'`   | de-CH > fr > it > en > da |\n| `'de'`      | de > en > da |\n| `'zh-Hant'` | zh-Hant > zh-Hans > zh > en > da |\n| `'es-SP'`   | es-SP > es > en-GB > en > da |\n| `'es-SP!'`  | es-SP > en > da |\n| `'fr'`      | fr > en > da |\n| `'pt-BR'`   | pt-BR > pt > es-AR > es > en-GB > en > da |\n| `'es-CL'`   | es-CL > es-AR > es > en-GB > en > da |\n"
  },
  {
    "path": "gitbook/en/formatting.md",
    "content": "# Formatting\n\n## HTML formatting\n\n> :warning: NOTE: Dynamically localization arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use HTML interpolation on trusted content and never on user-provided content. We recommended that use [component interpolation](./interpolation.md) feature.\n\nIn some cases you might want to render your translation as an HTML message and not a static string.\n\n```javascript\nconst messages = {\n  en: {\n    message: {\n      hello: 'hello <br> world'\n    }\n  }\n}\n```\n\nTemplate the below:\n\n```html\n<p v-html=\"$t('message.hello')\"></p>\n```\n\nOutput the below (instead of the message pre formatted)\n\n```html\n<p>hello\n<!--<br> exists but is rendered as html and not a string-->\nworld</p>\n```\n\n## Named formatting\n\nLocale messages the below:\n\n```javascript\nconst messages = {\n  en: {\n    message: {\n      hello: '{msg} world'\n    }\n  }\n}\n```\n\nTemplate the below:\n\n```html\n<p>{{ $t('message.hello', { msg: 'hello' }) }}</p>\n```\n\nOutput the below:\n\n```html\n<p>hello world</p>\n```\n\n## List formatting\n\nLocale messages the below:\n\n```javascript\nconst messages = {\n  en: {\n    message: {\n      hello: '{0} world'\n    }\n  }\n}\n```\n\nTemplate the below:\n\n```html\n<p>{{ $t('message.hello', ['hello']) }}</p>\n```\n\nOutput the below:\n\n```html\n<p>hello world</p>\n```\n\nList formatting also accepts array-like object:\n\n```html\n<p>{{ $t('message.hello', {'0': 'hello'}) }}</p>\n```\n\nOutput the below:\n\n```html\n<p>hello world</p>\n```\n\n## Support ruby on rails i18n format\n\nLocale messages the below:\n\n```javascript\nconst messages = {\n  en: {\n    message: {\n      hello: '%{msg} world'\n    }\n  }\n}\n```\n\nTemplate the below:\n\n```html\n<p>{{ $t('message.hello', { msg: 'hello' }) }}</p>\n```\n\nOutput the below:\n\n```html\n<p>hello world</p>\n```\n\n## Custom formatting\nSometimes, you maybe need to translate with custom formatting (e.g. [ICU message syntax](http://userguide.icu-project.org/formatparse/messages)).\n\nYou can realize with custom formatter that implement [Formatter Interface](https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js#L41-L43).\n\nThe following custom formatter with ES2015 class syntax:\n\n```javascript\n// Custom Fromatter implementation\nclass CustomFormatter {\n constructor (options) {\n   // ...\n }\n\n //\n // interpolate\n //\n // @param {string} message\n //   string of list or named format.\n //   e.g.\n //   - named formatting: 'Hi {name}'\n //   - list formatting: 'Hi {0}'\n //\n // @param {Object | Array} values\n //   values of `message` interpolation.\n //   passed values with `$t`, `$tc` and `i18n` functional component.\n //   e.g.\n //   - $t('hello', { name: 'kazupon' }) -> passed values: Object `{ name: 'kazupon' }`\n //   - $t('hello', ['kazupon']) -> passed values: Array `['kazupon']`\n //   - `i18n` functional component (component interpolation)\n //     <i18n path=\"hello\">\n //       <p>kazupon</p>\n //       <p>how are you?</p>\n //     </i18n>\n //     -> passed values: Array (included VNode):\n //        `[VNode{ tag: 'p', text: 'kazupon', ...}, VNode{ tag: 'p', text: 'how are you?', ...}]`\n //\n // @param {string} path\n //   a path to the message, as passed into the $t/t() functions.\n //   - $t('hello.louis') -> path === 'hello.louis'\n //\n // @return {Array<any>}\n //   interpolated values. you need to return the following:\n //   - array of string, when is using `$t` or `$tc`.\n //   - array included VNode object, when is using `i18n` functional component.\n //   - null - if you want the default vue-i18n formatter to handle the case\n //\n interpolate (message, values, path) {\n   // implement interpolation logic here\n   // ...\n\n   // return the interpolated array\n   return ['resolved message string']\n }\n}\n\n// register with `formatter` option\nconst i18n = new VueI18n({\n  locale: 'en-US',\n  formatter: new CustomFormatter(/* here the constructor options */),\n  messages: {\n    'en-US': {\n      // ...\n    },\n    // ...\n  }\n})\n\n// Run!\nnew Vue({ i18n }).$mount('#app')\n```\n\nYou can check [the custom formatter official example](https://github.com/kazupon/vue-i18n/tree/dev/examples/formatting/custom).\n"
  },
  {
    "path": "gitbook/en/gotchas.md",
    "content": "# Common gotchas\n\n## About localize with `data` option\n\nThe `data` option of Vue Component evaluate once only when Vue Component is instantiated.\n\nFor this reason, if you localize with `$t`, `$n` and `$d` inside this option, cannot change it with `locale` of VueI18n instance (e.g. vm.$i18n.locale).\n\nAs a workaround, you can use the computed props.\n"
  },
  {
    "path": "gitbook/en/hot-reload.md",
    "content": "# Hot reloading\n\nYou can watch for changes in localization files and hot reload changes into your application.\n\n```javascript\n// Something locale messages\nconst messages = {\n  // ...\n}\n\n// VueI18n instance\nconst i18n = new Vuei18n({\n  locale: 'en',\n  messages\n})\n\n// Run app\nconst app = new Vue({\n  i18n,\n  // ...\n}).$mount('#app')\n\n// Hot updates\nif (module.hot) {\n  module.hot.accept(['./en', './ja'], function () {\n    i18n.setLocaleMessage('en', require('./en').default)\n    i18n.setLocaleMessage('ja', require('./ja').default)\n    // Or the following hot updates via $i18n property\n    // app.$i18n.setLocaleMessage('en', require('./en').default)\n    // app.$i18n.setLocaleMessage('ja', require('./ja').default)\n  })\n}\n```\n"
  },
  {
    "path": "gitbook/en/installation.md",
    "content": "# Installation\n\n### Compatibility Note\n- Vue.js `2.0.0`+\n\n### Direct Download / CDN\n\nhttps://unpkg.com/vue-i18n/dist/vue-i18n\n\n[unpkg.com](https://unpkg.com) provides NPM-based CDN links. The above link will always point to the latest release on NPM. You can also use a specific version/tag via URLs like https://unpkg.com/vue-i18n@7.7.0/dist/vue-i18n.js\n\nInclude vue-i18n after Vue and it will install itself automatically:\n\n```html\n<script src=\"https://unpkg.com/vue/dist/vue.js\"></script>\n<script src=\"https://unpkg.com/vue-i18n/dist/vue-i18n.js\"></script>\n```\n\n### NPM\n\n    $ npm install vue-i18n\n\n### Yarn\n\n    $ yarn add vue-i18n\n\nWhen using with a module system, you must explicitly install the `vue-i18n` via `Vue.use()`:\n\n```javascript\nimport Vue from 'vue'\nimport VueI18n from 'vue-i18n'\n\nVue.use(VueI18n)\n```\n\nYou don't need to do this when using global script tags.\n\n### Dev Build\n\nYou will have to clone directly from GitHub and build `vue-i18n` yourself if\nyou want to use the latest dev build.\n\n    $ git clone https://github.com/kazupon/vue-i18n.git node_modules/vue-i18n\n    $ cd node_modules/vue-i18n\n    $ npm install\n    $ npm run build\n\n"
  },
  {
    "path": "gitbook/en/interpolation.md",
    "content": "# Component interpolation\n\n## Basic Usage\n\n> :new: 7.0+\n\nSometimes, we need to localize with locale message that was included HTML tag or component. For example:\n\n```html\n<p>I accept xxx <a href=\"/term\">Terms of Service Agreement</a></p>\n```\n\nIn the above message, if you use with `$t`, probably you may try to compose the following locale messages:\n\n```javascript\nconst messages = {\n  en: {\n    term1: 'I Accept xxx\\'s',\n    term2: 'Terms of Service Agreement'\n  }\n}\n```\n\nAnd in the following, you may try to implement in template:\n\n```html\n<p>{{ $t('term1') }}<a href=\"/term\">{{ $t('term2') }}</a></p>\n```\n\noutput:\n\n```html\n<p>I accept xxx <a href=\"/term\">Terms of Service Agreement</a></p>\n```\n\nThis is very cumbersome, and if you configure the `<a>` tag in a locale message, there is a possibility XSS vulnerabilities due to localize with `v-html=\"$t('term')\"`.\n\nYou can avoid it with using `i18n` functional component. For example:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <i18n path=\"term\" tag=\"label\" for=\"tos\">\n    <a :href=\"url\" target=\"_blank\">{{ $t('tos') }}</a>\n  </i18n>\n  <!-- ... -->\n</div>\n```\n\n```javascript\nconst messages = {\n  en: {\n    tos: 'Term of Service',\n    term: 'I accept xxx {0}.'\n  },\n  ja: {\n    tos: '利用規約',\n    term: '私は xxx の{0}に同意します。'\n  }\n}\n\nconst i18n = new VueI18n({\n  locale: 'en',\n  messages\n})\nnew Vue({\n  i18n,\n  data: {\n    url: '/term'\n  }\n}).$mount('#app')\n```\n\nthe following output:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <label for=\"tos\">\n    I accept xxx <a href=\"/term\" target=\"_blank\">Term of Service</a>.\n  </label>\n  <!-- ... -->\n</div>\n```\n\nAbout the above example, see the [example](https://github.com/kazupon/vue-i18n/tree/dev/examples/interpolation)\n\nThe children of `i18n` functional component is interpolated with locale message of `path` prop. In the above example, `<a :href=\"url\" target=\"_blank\">{{ $t('tos') }}</a>` is interpolated with `term` locale message.\n\nIn above example, the component interpolation follows the **list formatting**. The children of `i18n` functional component are interpolated by their orders of appearance.\n\n## Advanced Usage\n\n> :new: 7.2+\n\n> :warning: NOTE: In `i18n` component, text content consists of only white spaces will be omitted.\n\nNamed formatting is supported with the help of `place` attribute. For example:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <i18n path=\"info\" tag=\"p\">\n    <span place=\"limit\">{{ changeLimit }}</span>\n    <a place=\"action\" :href=\"changeUrl\">{{ $t('change') }}</a>\n  </i18n>\n  <!-- ... -->\n</div>\n```\n\n```javascript\nconst messages = {\n  en: {\n    info: 'You can {action} until {limit} minutes from departure.',\n    change: 'change your flight',\n    refund: 'refund the ticket'\n  }\n}\n\nconst i18n = new VueI18n({\n  locale: 'en',\n  messages\n})\nnew Vue({\n  i18n,\n  data: {\n    changeUrl: '/change',\n    refundUrl: '/refund',\n    changeLimit: 15,\n    refundLimit: 30\n  }\n}).$mount('#app')\n```\n\nOutputs:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <p>\n    You can <a href=\"/change\">change your flight</a> until <span>15</span> minutes from departure.\n  </p>\n  <!-- ... -->\n</div>\n```\n\n> :warning: NOTE: To use named formatting, all children of `i18n` component must have `place` attribute set. Otherwise it will fallback to list formatting.\n\nIf you still want to interpolate text content in named formatting, you could define `places` property on `i18n` component. For example:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <i18n path=\"info\" tag=\"p\" :places=\"{ limit: refundLimit }\">\n    <a place=\"action\" :href=\"refundUrl\">{{ $t('refund') }}</a>\n  </i18n>\n  <!-- ... -->\n</div>\n```\n\nOutputs:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <p>\n    You can <a href=\"/refund\">refund your ticket</a> until 30 minutes from departure.\n  </p>\n  <!-- ... -->\n</div>\n```\n"
  },
  {
    "path": "gitbook/en/lazy-loading.md",
    "content": "# Lazy loading translations\n\nLoading all of your translation files at once is overkill and unnecessary. Lazy loading or asynchronously loading the translation files is really easy when using Webpack.\n\nLets assume we have a project directory similar to the one bellow\n\n```\nour-cool-project\n-dist\n-src\n--routes\n--store\n--setup\n---i18n-setup.js\n--lang\n---en.js\n---it.js\n```\nThe `lang` folder is where all of our translation files will reside. \nThe `setup` folder is where our arbitrary setup files like the i18n-setup, global component inits, plugin inits and other reside.\n\n```js\n//i18n-setup.js\nimport Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport messages from '@/lang'\nimport axios from 'axios'\n\nVue.use(VueI18n)\n\nexport const i18n = new VueI18n({\n  locale: 'en', // set locale\n  fallbackLocale: 'en',\n  messages // set locale messages\n})\n \nconst loadedLanguages = ['en'] // our default language that is preloaded \n\nfunction setI18nLanguage (lang) {\n  i18n.locale = lang\n  axios.defaults.headers.common['Accept-Language'] = lang\n  document.documentElement.lang = lang\n  return lang\n}\n \nexport function loadLanguageAsync (lang) {\n  if (i18n.locale !== lang) {\n    if (!loadedLanguages.includes(lang)) {\n      return import(/* webpackChunkName: \"lang-[request]\" */ `@/lang/${lang}`).then(msgs => {\n        i18n.setLocaleMessage(lang, msgs.default)\n        loadedLanguages.push(lang)\n        return setI18nLanguage(lang)\n      })\n    } \n    return Promise.resolve(setI18nLanguage(lang))\n  }\n  return Promise.resolve(lang)\n}\n \n```\n\nIn short we are creating a new VueI18n instance as we normally would. Then we are creating a `loadedLanguages` array that will keep track of our loaded languages.\nNext is the `setI18nLanguage` function that will actually change the language in our vueI18n instance, axios and where ever else is needed.\n\nThe `loadLanguageAsync` function is what we will actually use to change the languages. Loading the new files is done via the `import` function, which is generously provided by Webpack and it allows us to load files dynamically, and because it uses promises we can easily wait for the loading to finish.\n\nYou can learn more about the import function in the [Webpack documentation](https://webpack.js.org/guides/code-splitting/#dynamic-imports).\n\nUsing the `loadLanguageAsync` function is straight forward. A common use case is inside a vue-router beforeEach hook.\n\n```js\nrouter.beforeEach((to, from, next) => {\n  const lang = to.params.lang\n  loadLanguageAsync(lang).then(() => next())\n})\n```\n\nWe could improve this by checking if the `lang` is actually supported by us or not, call `reject` so we can catch that in the `beforeEach` stopping the route transition.\n"
  },
  {
    "path": "gitbook/en/messages.md",
    "content": "# Locale messages syntax\n\n## Structure\n\nLocale Messages syntax the below:\n\n```javascript\n// As Flowtype definition, Locale Messages syntax like BNF annotation\ntype LocaleMessages = { [key: Locale]: LocaleMessageObject };\ntype LocaleMessageObject = { [key: Path]: LocaleMessage };\ntype LocaleMessageArray = LocaleMessage[];\ntype LocaleMessage = string | LocaleMessageObject | LocaleMessageArray;\ntype Locale = string;\ntype Path = string;\n```\n\nBased on the above syntax, You can configure the following structure Locale Messages:\n\n```json\n{\n  \"en\": {  // 'en' Locale\n    \"key1\": \"this is message1\", // basic\n    \"nested\": { // nested\n      \"message1\": \"this is nested message1\"\n    },\n    errors: [ // array\n      \"this is 0 error code message\",\n      {  // object in array\n         \"internal1\": \"this is internal 1 error message\"\n      },\n      [  // array in array\n         \"this is nested array error 1\"\n      ]\n    ]\n  },\n  \"ja\": { // 'ja' Locale\n    // ...\n  }\n}\n```\n\nIn the above Locale Messages structure,  You can translate with using below key paths.\n\n```html\n<div id=\"app\">\n  <!-- basic -->\n  <p>{{ $t('key1') }}</p>\n  <!-- nested -->\n  <p>{{ $t('nested.message1') }}</p>\n  <!-- array -->\n  <p>{{ $t('errors[0]') }}</p>\n  <!-- object in array -->\n  <p>{{ $t('errors[1].internal1') }}</p>\n  <!-- array in array -->\n  <p>{{ $t('errors[2][0]') }}</p>\n</div>\n```\n\nOutput the following:\n\n```html\n<div id=\"app\">\n  <!-- basic -->\n  <p>this is message1</p>\n  <!-- nested -->\n  <p>this is nested message1</p>\n  <!-- array -->\n  <p>this is 0 error code message</p>\n  <!-- object in array -->\n  <p>this is internal 1 error message</p>\n  <!-- array in array -->\n  <p>this is nested array error 1</p>\n</div>\n```\n\n## Linked locale messages\n\nIf there's a translation key that will always have the same concrete text as another one you can just link to it. To link to another translation key, all you have to do is to prefix its contents with an `@:` sign followed by the full name of the translation key including the namespace you want to link to.\n\nLocale messages the below:\n\n```javascript\nconst messages = {\n  en: {\n    message: {\n      the_world: 'the world',\n      dio: 'DIO:',\n      linked: '@:message.dio @:message.the_world !!!!'\n    }\n  }\n}\n```\n\nTemplate the below:\n\n```html\n<p>{{ $t('message.linked') }}</p>\n```\n\nOutput the below:\n\n```html\n<p>DIO: the world !!!!</p>\n```\n\n### Formatting linked locale messages\n\nIf the language distinguish cases of character, you may need control the case of the linked locale messages.\nLinked messages can be formatted with modifier  `@.MODIFIER:key`\n\nThe below modifiers are available currently.\n\n* `upper`: Uppercase all characters in the linked message.\n* `lower`: Lowercase all characters in the linked message.\n* `capitalize`: Uppercase the first char in the linked message.\n\nLocale messages the below:\n\n```javascript\nconst messages = {\n  en: {\n    message: {\n      homeAddress: 'Home address',\n      phoneNumber: 'phone number',\n      missingHomeAddress: 'Please provide @.lower:message.homeAddress and @:message.phoneNumber',\n      phoneNbField: '@.capitalize:message.phoneNumber :'\n      phoneNbPlaceholder: 'Please enter your @:message.phoneNumber ...'\n    }\n  }\n}\n```\n\n```html\n<label>{{ $t('message.missingHomeAddress') }}</label>\n\n<p class=\"error\">{{ $t('message.missingHomeAddress') }}</p>\n\n<label>{{ $t('message.phoneNbField') }}</label>\n<input type=\"tel\" :placeholder=\"$t('message.phoneNbPlaceholder')\">\n```\n\nOutput the below:\n\n```html\n<label>Home address</label>\n\n<p class=\"error\">Please provide home address</p>\n\n<label>Phone number :</label>\n<input type=\"tel\" :placeholder=\"Please enter your phone number ...\">\n```\n\n### Grouping by brackets\n\nA translation key of linked locale message can also have the form of `@:(message.foo.bar.baz)` in which the link to another translation key is within brackets `()`.\n\nThis can be useful if the link `@:message.something` is following by period `.`, which can be a part of link but in case it should not be.\n\nLocale messages the below:\n\n```js\nconst messages = {\n  en: {\n    message: {\n      dio: 'DIO',\n      linked: 'There\\'s a reason, you lost, @:(message.dio).'\n    }\n  }\n}\n```\n\nTemplate the below:\n\n```html\n<p>{{ $t('message.linked') }}</p>\n```\n\nOutput the below:\n\n```html\n<p>There's a reason, you lost, DIO.</p>\n```"
  },
  {
    "path": "gitbook/en/migrations.md",
    "content": "# Migrations\n\n\n## Global config\n\n### lang <sup>replaced</sup>\n\nUse `VueI18n` class constructor `locale` option, or `VueI18n#locale` property:\n\n  ```javascript\n  const i18n = new VueI18n({\n    locale: 'en',\n    // ...\n  })\n  const app = new Vue({ i18n }).$mount('#app')\n\n  // change locale\n  i18n.locale = 'ja'\n  // or\n  app.$i18n.locale = 'ja'\n  ```\n\n### fallbackLang <sup>replaced</sup>\n\nUse `VueI18n` class constructor `fallbackLocale` option, or `VueI18n#fallbackLocale` property:\n\n  ```javascript\n  const i18n = new VueI18n({\n    locale: 'ja',\n    fallbackLocale: 'en',\n    // ...\n  })\n  const app = new Vue({ i18n }).$mount('#app')\n\n  // change fallback locale\n  i18n.fallbackLocale = 'zh'\n  // or\n  app.$i18n.fallbackLocale = 'zh'\n  ```\n\n### missingHandler <sup>replaced</sup>\n\nUse `VueI18n` class constructor `missing` option, or `VueI18n#missing` property:\n\n  ```javascript\n  const i18n = new VueI18n({\n    // ...\n    missing: (locale, key, vm) => {\n      // handle translation missing\n    },\n    // ...\n  })\n  const app = new Vue({ i18n }).$mount('#app')\n\n  // change missing handler\n  i18n.missing = (locale, key, vm) => {\n    // handle translation missing\n  }\n  // or\n  app.$i18n.missing = (locale, key, vm) => {\n    // handle translation missing\n  }\n  ```\n\n### i18nFormatter <sup>replaced</sup>\n\nUse `VueI18n` class constructor `formatter` option, or `VueI18n#formatter` property:\n\n  ```javascript\n  class CustomFormatter {\n    format (message, ...values) {\n      // something render logic\n      return 'something string'\n    }\n  }\n\n  const i18n = new VueI18n({\n    // ...\n    formatter: new CustomFormatter(),\n    // ...\n  })\n  const app = new Vue({ i18n }).$mount('#app')\n\n  // change custom formatter\n  i18n.formatter = {\n    format: (message, ...values) => {\n      // something render logic\n      return 'something string'\n    }\n  }\n  // or\n  app.$i18n.formatter = {\n    format: (message, ...values) => {\n      // something render logic\n      return 'something string'\n    }\n  }\n  ```\n\n## Global methods\n\n### Vue.locale <sup>replaced</sup>\n\nUse `VueI18n` class constructor `messages` option, or `VueI18n#GetLocaleMessage` / `VueI18n#setLocaleMessage` methods:\n\n  ```javascript\n  const i18n = new VueI18n({\n    // ...\n    messages: {\n      en: {\n        hello: 'hello world',\n        // ...\n      },\n      ja: {\n        hello: 'こんにちは、世界',\n        // ...\n      }\n    },\n    // ...\n  })\n  const app = new Vue({ i18n }).$mount('#app')\n\n  // get locale message\n  const en = i18n.getLocaleMessage('en')\n  en.greeting = 'hi!'\n  // set locale message\n  i18n.setLocaleMessage('en', en)\n  // or\n  const ja = app.$i18n.getLocaleMessage('ja')\n  ja.greeting = 'やあ！'\n  app.$i18n.setLocaleMessage('ja', ja)\n  ```\n\n### Vue.t <sup>replaced</sup>\n\nUse `VueI18n#t` method:\n\n  ```javascript\n  const i18n = new VueI18n({\n    locale: 'en',\n    messages: {\n      en: {\n        greeting: 'hi {name}'\n      }\n    },\n    // ...\n  })\n\n  i18n.t('greeting', { name: 'kazupon' }) // -> hi kazupon\n  ```\n\n### Vue.tc <sup>replaced</sup>\n\nUse `VueI18n#tc` method:\n\n  ```javascript\n  const i18n = new VueI18n({\n    locale: 'en',\n    messages: {\n      en: {\n        apple: 'no apples | one apple | {count} apples'\n      }\n    },\n    // ...\n  })\n\n  const count = 10\n  i18n.tc('apple', count, { count }) // -> 10 apples\n  ```\n\n### Vue.te <sup>replaced</sup>\n\nUse `VueI18n#te` method:\n\n  ```javascript\n  const i18n = new VueI18n({\n    locale: 'en',\n    messages: {\n      en: {\n        hello: 'hello world'\n      }\n    },\n    // ...\n  })\n\n  i18n.te('hello') // -> true\n  i18n.te('hallo', 'ja') // -> false\n  i18n.te('hello') // -> true\n  ```\n\n## Constructor options\n\n### locales <sup>replaced</sup>\n\nUse `messages` of `VueI18n` class constructor option, or `messages` of `i18n` option (for Component option):\n\n  ```javascript\n  const i18n = new VueI18n({\n    locale: 'en',\n    messages: {\n      en: {\n        greeting: 'hi {name}'\n      }\n    },\n    // ...\n  })\n\n  // for Component\n  const Component1 = {\n    i18n: {\n      messages: {\n        en: {\n          title: 'Title1'\n        }\n      }\n    }\n  }\n  ```\n\n## Instance properties\n\n### $lang <sup>replaced</sup>\n\nUse `VueI18n#locale` property:\n\n  ```javascript\n  const i18n = new VueI18n({\n    locale: 'en',\n    // ...\n  })\n  const app = new Vue({ i18n }).$mount('#app')\n\n  // change locale\n  i18n.locale = 'ja'\n  // or\n  app.$i18n.locale = 'ja'\n  ```\n\n## Features\n\n### Dynamic locale <sup>removed</sup>\n\nIf you need to dynamic set locale messages, you should implement the below:\n\n  ```javascript\n  const i18n = new VueI18n({ locale: 'en' })\n  const app = new Vue({\n    i18n,\n    data: { loading: '' }\n  }).$mount('#app')\n\n  function loadLocaleMessage (locale, cb) {\n    return fetch('/locales/' + locale, {\n      method: 'get',\n      headers: {\n        'Accept': 'application/json',\n        'Content-Type': 'application/json'\n      }\n    }).then((res) => {\n      return res.json()\n    }).then((json) => {\n      if (Object.keys(json).length === 0) {\n        return Promise.reject(new Error('locale empty !!'))\n      } else {\n        return Promise.resolve(json)\n      }\n    }).then((message) => {\n      cb(null, message)\n    }).catch((error) => {\n      cb(error)\n    })\n  }\n\n  app.loading = 'loading ...'\n  loadLocaleMessage('en', (err, message) => {\n    if (err) {\n      app.loading = ''\n      console.error(err)\n      return\n    }\n    i18n.setLocaleMessage('en', message)\n    app.loading = ''\n  })\n  ```\n"
  },
  {
    "path": "gitbook/en/number.md",
    "content": "# Number localization\n\n> :new: 7.0+\n\nYou can localize the number with your definition formats.\n\nNumber formats the below:\n\n```javascript\nconst numberFormats = {\n  'en-US': {\n    currency: {\n      style: 'currency', currency: 'USD'\n    }\n  },\n  'ja-JP': {\n    currency: {\n      style: 'currency', currency: 'JPY', currencyDisplay: 'symbol'\n    }\n  }\n}\n```\n\nAs the Above, You can define the number format with named (e.g. `currency`, etc), and you need to use [the options with ECMA-402 Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat)\n\nAfter that like the locale messages, You need to specify the `numberFormats` option of `VueI18n` constructor:\n\n```javascript\nconst i18n = new VueI18n({\n  numberFormats\n})\n\nnew Vue({\n  i18n\n}).$mount('#app')\n```\n\nTemplate the below:\n\n```html\n<div id=\"app\">\n  <p>{{ $n(100, 'currency') }}</p>\n  <p>{{ $n(100, 'currency', 'ja-JP') }}</p>\n</div>\n```\n\nOutput the below:\n\n```html\n<div id=\"app\">\n  <p>$100.00</p>\n  <p>￥100</p>\n</div>\n```\n"
  },
  {
    "path": "gitbook/en/pluralization.md",
    "content": "# Pluralization\n\nYou can translate with pluralization. You must define the locale that have a pipe `|` separator, and define plurals in pipe separator.\n\nMake your your local strings like this:\n\n```javascript\nconst messages = {\n  en: {\n    car: 'car | cars',\n    apple: 'no apples | one apple | {count} apples'\n  }\n}\n```\nWhere the format is `0 things | 1 thing | more than 1 thing`.\n\nYour template needs to use `$tc()`, not `$t()`:\n\n```html\n<p>{{ $tc('car', 1) }}</p>\n<p>{{ $tc('car', 2) }}</p>\n\n<p>{{ $tc('apple', 0) }}</p>\n<p>{{ $tc('apple', 1) }}</p>\n<p>{{ $tc('apple', 10, { count: 10 }) }}</p>\n```\nNote that if you need to pass in a variable, you might have to pass it in twice like in the last example above.\n\nThis will output the following HTML:\n\n```html\n<p>car</p>\n<p>cars</p>\n\n<p>no apples</p>\n<p>one apple</p>\n<p>10 apples</p>\n```\n\n---\n\n## Custom pluralization\n\nSuch pluralization, however, does not apply to all languages (Slavic languages, for example, have different pluralization rules).\n\nIn order to implement these rules you can pass an optional `pluralizationRules` object into `VueI18n` constructor options.\n\nVery simplified example using rules for Slavic languages (Russian, Ukrainian, etc.):\n```js\nnew VueI18n({\n  pluralizationRules: {\n    /** Key - language to use the rule for, 'ru', in this case */\n    /** Value - function\n     * @param choice {number} a choice index given by the input to $tc: `$tc('path.to.rule', choiceIndex)`\n     * @param choicesLength {number} an overall amount of available choices\n     * @returns a final choice index to select plural word by\n     **/\n    'ru': function (choice, choicesLength) {\n      // this === VueI18n instance, so the locale property also exists here\n\n      if (choice === 0) {\n        return 0;\n      }\n\n      const teen = choice > 10 && choice < 20;\n      const endsWithOne = choice % 10 === 1;\n\n      if (choicesLength < 4) {\n        return (!teen && endsWithOne) ? 1 : 2;\n      }\n      if (!teen && endsWithOne) {\n        return 1;\n      }\n      if (!teen && choice % 10 >= 2 && choice % 10 <= 4) {\n        return 2;\n      }\n\n      return (choicesLength < 4) ? 2 : 3;\n    }\n  }\n});\n```\n\nThis would effectively give this:\n\n```javascript\nconst messages = {\n  ru: {\n    car: '0 машин | 1 машина | {n} машины | {n} машин',\n    banana: 'нет бананов | 1 банан | {n} банана | {n} бананов'\n  }\n}\n```\nWhere the format is `0 things | 1 thing | few things | multiple things`.\n\nYour template still needs to use `$tc()`, not `$t()`:\n\n```html\n<p>{{ $tc('car', 1) }}</p>\n<p>{{ $tc('car', 2) }}</p>\n<p>{{ $tc('car', 4) }}</p>\n<p>{{ $tc('car', 12) }}</p>\n<p>{{ $tc('car', 21) }}</p>\n\n<p>{{ $tc('banana', 0) }}</p>\n<p>{{ $tc('banana', 4) }}</p>\n<p>{{ $tc('banana', 11) }}</p>\n<p>{{ $tc('banana', 31) }}</p>\n```\n\nWhich results in:\n\n```html\n<p>1 машина</p>\n<p>2 машины</p>\n<p>4 машины</p>\n<p>12 машин</p>\n<p>21 машина</p>\n\n<p>нет бананов</p>\n<p>4 банана</p>\n<p>11 бананов</p>\n<p>31 банан</p>\n```\n\n### Default pluralization\n\nIf your current locale is not found in a pluralization map, the [default](#pluralization) rule of the english langugage will be used.\n"
  },
  {
    "path": "gitbook/en/sfc.md",
    "content": "# Single file components\n\n## Basic Usage\n\nIf you are building Vue component or Vue application with using single file components, you can manage the locale messages `i18n` custom block.\n\nThe following in [single file components example](https://github.com/kazupon/vue-i18n/tree/dev/examples/sfc):\n\n```html\n<i18n>\n{\n  \"en\": {\n    \"hello\": \"hello world!\"\n  },\n  \"ja\": {\n    \"hello\": \"こんにちは、世界！\"\n  }\n}\n</i18n>\n\n<template>\n  <div id=\"app\">\n    <label for=\"locale\">locale</label>\n    <select v-model=\"locale\">\n      <option>en</option>\n      <option>ja</option>\n    </select>\n    <p>message: {{ $t('hello') }}</p>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'app',\n  data () { return { locale: 'en' } },\n  watch: {\n    locale (val) {\n      this.$i18n.locale = val\n    }\n  }\n}\n</script>\n```\n## Installing vue-i18n-loader\n\nYou need to install `vue-loader` and `vue-i18n-loader` due to use `<i18n>` custom blocks. While [vue-loader](https://github.com/vuejs/vue-loader) most likely is already used in your project if you are working with single file components, you must install [vue-i18n-loader](https://github.com/kazupon/vue-i18n-loader) additionally:\n\n```\n$ npm i --save-dev @kazupon/vue-i18n-loader\n```\n\n## Webpack\n\nFor Webpack the configuration below is required:\n\nfor vue-loader v15:\n```js\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader',\n      },\n      {\n        resourceQuery: /blockType=i18n/,\n        loader: '@kazupon/vue-i18n-loader'\n      }\n      // ...\n    ]\n  },\n  // ...\n}\n```\n\nfor vue-loader v14:\n```js\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader',\n        options: {\n          loaders: {\n            // you need to specify `i18n` loaders key with `vue-i18n-loader` (https://github.com/kazupon/vue-i18n-loader)\n            i18n: '@kazupon/vue-i18n-loader'\n          }\n        }\n      },\n      // ...\n    ]\n  },\n  // ...\n}\n```\n\n## Vue CLI 3.0 (beta)\n\n[Vue-cli 3.0](https://github.com/vuejs/vue-cli) hides the webpack configuration, so, if we want to add support to the `<i18n>` tag inside a single file component we need to modify the existing configuration.\n\nIn order to do that we have to create a `vue.config.js` at the root of our project. Once done that, we have to include the following:\n\n```js\nconst merge = require('deepmerge')\n\nmodule.exports = {\n  chainWebpack: config => {\n    config.module\n      .rule('vue')\n      .use('vue-loader')\n      .tap(options =>\n        merge(options, {\n          loaders: {\n            i18n: '@kazupon/vue-i18n-loader'\n          }\n        })\n      )\n  }\n}\n```\n\n_Don't forget to install [deepmerge](https://github.com/KyleAMathews/deepmerge)! (`npm i deepmerge -D` or `yarn add deepmerge -D`)_\n\nIf you want to read more about modifying the existing configuration [click here](https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md).\n\n## Laravel-Mix\n\nLaravel mix has its own rules for .vue files. To add the `vue-i18n-loader`, add the following to webpack.mix.js\n\n```js\nmix.webpackConfig({\n    // ...\n    module: {\n        rules: [\n            {\n                // Rules are copied from laravel-mix@1.5.1 /src/builder/webpack-rules.js and manually merged with the ia8n-loader. Make sure to update the rules to the latest found in webpack-rules.js\n                test: /\\.vue$/,\n                loader: 'vue-loader',\n                exclude: /bower_components/,\n                options: {\n                    // extractCSS: Config.extractVueStyles,\n                    loaders: Config.extractVueStyles ? {\n                        js: {\n                            loader: 'babel-loader',\n                            options: Config.babel()\n                        },\n\n                        scss: vueExtractPlugin.extract({\n                            use: 'css-loader!sass-loader',\n                            fallback: 'vue-style-loader'\n                        }),\n\n                        sass: vueExtractPlugin.extract({\n                            use: 'css-loader!sass-loader?indentedSyntax',\n                            fallback: 'vue-style-loader'\n                        }),\n\n                        css: vueExtractPlugin.extract({\n                            use: 'css-loader',\n                            fallback: 'vue-style-loader'\n                        }),\n\n                        stylus: vueExtractPlugin.extract({\n                            use: 'css-loader!stylus-loader?paths[]=node_modules',\n                            fallback: 'vue-style-loader'\n                        }),\n\n                        less: vueExtractPlugin.extract({\n                            use: 'css-loader!less-loader',\n                            fallback: 'vue-style-loader'\n                        }),\n\n                        i18n: '@kazupon/vue-i18n-loader',\n                    } : {\n                        js: {\n                            loader: 'babel-loader',\n                            options: Config.babel()\n                        },\n\n                        i18n: '@kazupon/vue-i18n-loader',\n                    },\n                    postcss: Config.postCss,\n                    preLoaders: Config.vue.preLoaders,\n                    postLoaders: Config.vue.postLoaders,\n                    esModule: Config.vue.esModule\n                }\n            },\n            // ...\n        ]\n    },\n    // ...\n});\n```\n\n## YAML loading\n\n`i18n` custom blocks need to specify `JSON` format, also you can use `YAML` format by using pre-loader feature of `vue-loader`.\n\nthe `i18n` custom blocks below of `YAML` format:\n\n```html\n<i18n>\nen:\n  hello: \"hello world!\"\nja:\n  hello: \"こんにちは、世界！\"\n</i18n>\n```\n\nWebpack conf the below:\n\nfor vue-loader v15:\n```js\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader',\n      },\n      {\n        resourceQuery: /blockType=i18n/,\n        use: [\n          {loader: '@kazupon/vue-i18n-loader'},\n          {loader: 'yaml-loader'}\n        ]\n      }\n      // ...\n    ]\n  },\n  // ...\n}\n```\n\nfor vue-loader v14:\n```js\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader',\n        options: {\n          preLoaders: {\n            i18n: 'yaml-loader'\n          },\n          loaders: {\n            i18n: '@kazupon/vue-i18n-loader'\n          }\n        }\n      },\n      // ...\n    ]\n  },\n  // ...\n}\n```\n\n## Multiple custom blocks\n\nyou can be used the locale messages with multiple `i18n` custom block.\n\n```html\n<i18n src='./common/locales.json'></i18n>\n<i18n>\n{\n  \"en\": {\n    \"hello\": \"hello world!\"\n  },\n  \"ja\": {\n    \"hello\": \"こんにちは、世界！\"\n  }\n}\n</i18n>\n```\n\nIn the above, first custom block load the common locale message with `src` attribute, second custom block load the locale message that defined only at single file component. These locale messages will be merged as locale message of component.\n\nIn this way, multiple custom blocks useful when want to be used as module.\n"
  },
  {
    "path": "gitbook/en/started.md",
    "content": "# Getting started\n\n> We will be using [ES2015](https://github.com/lukehoban/es6features) in the code samples in the guide.\n\n\n### HTML\n\n```html\n<script src=\"https://unpkg.com/vue/dist/vue.js\"></script>\n<script src=\"https://unpkg.com/vue-i18n/dist/vue-i18n.js\"></script>\n\n<div id=\"app\">\n  <p>{{ $t(\"message.hello\") }}</p>\n</div>\n```\n\n### JavaScript\n\n```javascript\n// If using a module system (e.g. via vue-cli), import Vue and VueI18n and then call Vue.use(VueI18n).\n// import Vue from 'vue'\n// import VueI18n from 'vue-i18n'\n//\n// Vue.use(VueI18n)\n\n// Ready translated locale messages\nconst messages = {\n  en: {\n    message: {\n      hello: 'hello world'\n    }\n  },\n  ja: {\n    message: {\n      hello: 'こんにちは、世界'\n    }\n  }\n}\n\n// Create VueI18n instance with options\nconst i18n = new VueI18n({\n  locale: 'ja', // set locale\n  messages, // set locale messages\n})\n\n\n// Create a Vue instance with `i18n` option\nnew Vue({ i18n }).$mount('#app')\n\n// Now the app has started!\n```\n\nOutput the following:\n\n```html\n<div id=\"#app\">\n  <p>こんにちは、世界</p>\n</div>\n```\n"
  },
  {
    "path": "gitbook/old/README.md",
    "content": "# vue-i18n documentation for v5.x\n\nInternationalization plugin of Vue.js\n\n* [Installation](https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/installation.md)\n* [Getting Started](https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/started.md)\n* [Formatting](https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/formatting.md)\n* [Pluralization](https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/pluralization.md)\n* [Locale and Keypath Syntax](https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/syntax.md)\n* [Linked Translation](https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/linked.md)\n* [Fallback Translation](https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/fallback.md)\n* [Component Locale](https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/component.md)\n* [Dynamic Locale](https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/dynamic.md)\n* [Hot reload](https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/hot-reload.md)\n* [API References](https://github.com/kazupon/vue-i18n/tree/5.x/gitbook/api.md)\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"vue-i18n\",\n  \"description\": \"Internationalization plugin for Vue.js\",\n  \"version\": \"8.28.2\",\n  \"author\": {\n    \"name\": \"kazuya kawaguchi\",\n    \"email\": \"kawakazu80@gmail.com\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/kazupon/vue-i18n/issues\"\n  },\n  \"changelog\": {\n    \"labels\": {\n      \"Type: Feature\": \":star: New Features\",\n      \"Type: Bug\": \":bug: Bug Fixes\",\n      \"Type: Security\": \":lock: Security Fixes\",\n      \"Type: Performance\": \":chart_with_upwards_trend: Performance Fixes\",\n      \"Type: Improvement\": \":zap: Improved Features\",\n      \"Type: Breaking\": \":boom: Breaking Change\",\n      \"Type: Deprecated\": \":warning: Deprecated Features\",\n      \"Type: I18n\": \":globe_with_meridians: Internationalization\",\n      \"Type: A11y\": \":wheelchair: Accessibility\",\n      \"Type: Documentation\": \":pencil: Documentation\"\n    }\n  },\n  \"devDependencies\": {\n    \"@babel/core\": \"^7.1.0\",\n    \"@babel/plugin-proposal-class-properties\": \"^7.1.0\",\n    \"@babel/plugin-syntax-flow\": \"^7.0.0\",\n    \"@babel/plugin-transform-flow-strip-types\": \"^7.0.0\",\n    \"@typescript-eslint/eslint-plugin\": \"^3.0.0\",\n    \"@typescript-eslint/parser\": \"^3.0.0\",\n    \"@vue/babel-preset-app\": \"^4.4.1\",\n    \"@vuepress/theme-vue\": \"^1.9.7\",\n    \"babel-eslint\": \"^10.1.0\",\n    \"babel-loader\": \"^8.1.0\",\n    \"babel-plugin-istanbul\": \"^6.0.0\",\n    \"babel-preset-power-assert\": \"^3.0.0\",\n    \"buble\": \"^0.19.3\",\n    \"chromedriver\": \"^127.0.2\",\n    \"core-js\": \"^3.6.5\",\n    \"cross-env\": \"^7.0.2\",\n    \"cross-spawn\": \"^7.0.3\",\n    \"eslint\": \"^6.8.0\",\n    \"eslint-loader\": \"^4.0.2\",\n    \"eslint-plugin-flowtype\": \"^4.7.0\",\n    \"eslint-plugin-ie11\": \"^1.0.0\",\n    \"eslint-plugin-no-autofix\": \"^1.0.1\",\n    \"eslint-plugin-vue\": \"^7.14.0\",\n    \"eslint-plugin-vue-libs\": \"^4.0.0\",\n    \"flow-bin\": \"^0.38.0\",\n    \"http-server\": \"^0.12.3\",\n    \"intl\": \"^1.2.5\",\n    \"karma\": \"^5.0.9\",\n    \"karma-chrome-launcher\": \"^3.1.0\",\n    \"karma-coverage\": \"^2.0.2\",\n    \"karma-firefox-launcher\": \"^2.1.1\",\n    \"karma-mocha\": \"^2.0.1\",\n    \"karma-mocha-reporter\": \"^2.2.5\",\n    \"karma-safari-launcher\": \"^1.0.0\",\n    \"karma-sauce-launcher\": \"^4.1.5\",\n    \"karma-sourcemap-loader\": \"^0.3.7\",\n    \"karma-webpack\": \"^4.0.2\",\n    \"lerna-changelog\": \"^1.0.0\",\n    \"lerna-changelog-label-schema\": \"^3.0.0\",\n    \"mocha\": \"^7.2.0\",\n    \"mocha-loader\": \"^5.0.0\",\n    \"nightwatch\": \"^1.3.5\",\n    \"nightwatch-helpers\": \"^1.2.0\",\n    \"power-assert\": \"^1.6.0\",\n    \"rollup\": \"^0.66.0\",\n    \"rollup-plugin-buble\": \"^0.19.2\",\n    \"rollup-plugin-commonjs\": \"^9.1.8\",\n    \"rollup-plugin-flow-no-whitespace\": \"^1.0.0\",\n    \"rollup-plugin-node-resolve\": \"^3.4.0\",\n    \"rollup-plugin-replace\": \"^2.0.0\",\n    \"selenium-server\": \"^3.141.59\",\n    \"shipjs\": \"^0.23.3\",\n    \"sinon\": \"^11.1.1\",\n    \"terser\": \"^3.17.0\",\n    \"typescript\": \"^3.9.3\",\n    \"vue\": \"^2.5.17\",\n    \"vue-github-button\": \"^1.1.2\",\n    \"vue-template-compiler\": \"^2.5.17\",\n    \"vuepress\": \"^1.8.2\",\n    \"webpack\": \"^4.43.0\",\n    \"webpack-cli\": \"^4.7.2\",\n    \"webpack-dev-middleware\": \"^5.0.0\",\n    \"webpack-dev-server\": \"^3.11.0\"\n  },\n  \"files\": [\n    \"dist/vue-i18n.js\",\n    \"dist/vue-i18n.min.js\",\n    \"dist/vue-i18n.common.js\",\n    \"dist/vue-i18n.esm.js\",\n    \"dist/vue-i18n.esm.browser.js\",\n    \"dist/vue-i18n.esm.browser.min.js\",\n    \"src/**/*.js\",\n    \"types/*.d.ts\",\n    \"decls\",\n    \"vetur/tags.json\",\n    \"vetur/attributes.json\"\n  ],\n  \"vetur\": {\n    \"tags\": \"vetur/tags.json\",\n    \"attributes\": \"vetur/attributes.json\"\n  },\n  \"homepage\": \"https://github.com/kazupon/vue-i18n#readme\",\n  \"keywords\": [\n    \"i18n\",\n    \"internationalization\",\n    \"plugin\",\n    \"vue\",\n    \"vue.js\"\n  ],\n  \"license\": \"MIT\",\n  \"main\": \"dist/vue-i18n.common.js\",\n  \"module\": \"dist/vue-i18n.esm.js\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/kazupon/vue-i18n.git\"\n  },\n  \"scripts\": {\n    \"build\": \"node config/build.js\",\n    \"clean\": \"rm -rf coverage && rm -rf dist/*.js* && rm ./*.log\",\n    \"coverage\": \"cat ./coverage/lcov.info\",\n    \"dev\": \"cross-env NODE_OPTIONS=--openssl-legacy-provider BABEL_ENV=test webpack-dev-server --inline --hot --open --content-base ./test/unit/ --config config/webpack.dev.conf.js\",\n    \"docs:build\": \"cross-env NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=production node config/version.js && cross-env NODE_ENV=production vuepress build vuepress -d docs\",\n    \"docs:clean\": \"rm -rf docs/**\",\n    \"docs:dev\": \"cross-env NODE_OPTIONS=--openssl-legacy-provider vuepress dev vuepress\",\n    \"flow\": \"flow check\",\n    \"lint\": \"eslint --fix src test types/**/*.ts\",\n    \"release:prepare\": \"shipjs prepare\",\n    \"release:trigger\": \"shipjs trigger\",\n    \"sauce\": \"npm run sauce:coolkids && npm run sauce:ie && npm run sauce:mobile\",\n    \"sauce:coolkids\": \"karma start config/karma.sauce.conf.js -- 0\",\n    \"sauce:ie\": \"karma start config/karma.sauce.conf.js -- 1\",\n    \"sauce:mobile\": \"karma start config/karma.sauce.conf.js -- 2\",\n    \"test\": \"npm run lint && npm run flow && npm run test:types && npm run test:cover && npm run test:e2e\",\n    \"test:cover\": \"cross-env NODE_OPTIONS=--openssl-legacy-provider BABEL_ENV=test karma start config/karma.cover.conf.js\",\n    \"test:e2e\": \"cross-env NODE_OPTIONS=--openssl-legacy-provider node test/e2e/runner.js\",\n    \"test:types\": \"tsc -p types\",\n    \"test:unit\": \"cross-env NODE_OPTIONS=--openssl-legacy-provider BABEL_ENV=test karma start config/karma.unit.conf.js\",\n    \"test:unit:ci\": \"cross-env NODE_OPTIONS=--openssl-legacy-provider BABEL_ENV=test karma start config/karma.unit.ci.conf.js\"\n  },\n  \"sideEffects\": false,\n  \"types\": \"types/index.d.ts\",\n  \"unpkg\": \"dist/vue-i18n.js\"\n}\n"
  },
  {
    "path": "scripts/docs-deploy.sh",
    "content": "#!/usr/bin/env sh\n\n# abort on errors\nset -e\n\n# build\nNODE_OPTIONS=--openssl-legacy-provider npm run docs:build\n\n# navigate into the build output directory\ncd docs\n\n# if you are deploying to a custom domain\n# echo 'www.example.com' > CNAME\n\ngit init\ngit add -A\ngit commit -m 'deploy'\n\ngit push -f git@github.com:kazupon/vue-i18n.git master:gh-pages\n\ncd -\n"
  },
  {
    "path": "scripts/remove.sh",
    "content": "#!/bin/bash\n\nset -xe\n\nrm -rf docs/assets/js/**.js\nrm -rf docs/assets/css/**.css\nrm -rf docs/pt/\nrm -rf docs/patrons/RapidAPI.*\nrm -rf docs/patrons/babeledit.svg\nrm -rf docs/patrons/cypress.svg\nrm -rf docs/patrons/decibel.png\nrm -rf docs/patrons/localazy.svg\nrm -rf docs/patrons/nuxt.png\nrm -rf docs/patrons/plaid.svg\nrm -rf docs/patrons/storyblok.svg\nrm -rf docs/patrons/vuemastery.*\nrm -rf docs/patrons/crowdin.png\nrm -rf docs/patrons/crowdin.svg\n"
  },
  {
    "path": "ship.config.js",
    "content": "const execa = require(require.resolve('execa'))\nconst { promisify } = require('util')\nconst fs = require('fs')\nconst path = require('path')\nconst read = promisify(fs.readFile)\nconst write = fs.writeFileSync\n\nfunction extractSpecificChangelog (changelog, version) {\n  if (!changelog) {\n    return null\n  }\n  const escapedVersion = version.replace(/\\./g, '\\\\.')\n  const regex = new RegExp(\n    `(#+?\\\\s\\\\[?v?${escapedVersion}\\\\]?[\\\\s\\\\S]*?)(#+?\\\\s\\\\[?v?\\\\d+?\\\\.\\\\d+?\\\\.\\\\d+?\\\\]?)`,\n    'g'\n  )\n  const matches = regex.exec(changelog)\n  return matches ? matches[1] : null\n}\n\nasync function commitChangelog (current, next) {\n  const { stdout } = await execa('npx', ['lerna-changelog', '--next-version', `v${next}`])\n  const escapedVersion = next.replace(/\\./g, '\\\\.')\n  const regex = new RegExp(\n    `(#+?\\\\s\\\\[?v?${escapedVersion}\\\\]?[\\\\s\\\\S]*?)(#+?\\\\s\\\\[?v?\\\\d\\\\.\\\\d\\\\.\\\\d\\\\]?)`,\n    'g'\n  )\n  const matches = regex.exec(stdout.toString())\n  const head = matches ? matches[1] : stdout\n  const changelog = await read('./CHANGELOG.md', 'utf8')\n  return write('./CHANGELOG.md', `${head}\\n\\n${changelog}`)\n}\n\nmodule.exports = {\n  mergeStrategy: { toSameBranch: ['v8.x'] },\n  monorepo: undefined,\n  updateChangelog: false,\n  beforeCommitChanges: ({ nextVersion, exec, dir }) => {\n    return new Promise(resolve => {\n      const pkg = require('./package.json')\n      commitChangelog(pkg.version, nextVersion).then(resolve)\n    })\n  },\n  formatCommitMessage: ({\n    version,\n    releaseType,\n    mergeStrategy,\n    baseBranch\n  }) => `${releaseType} release v${version}`,\n  formatPullRequestTitle: ({\n    version,\n    releaseType\n  }) => `${releaseType} release v${version}`,\n  shouldRelease: () => true,\n  releases: {\n    extractChangelog: ({ version, dir }) => {\n      const changelogPath = path.resolve(dir, 'CHANGELOG.md')\n      try {\n        const changelogFile = fs.readFileSync(changelogPath, 'utf-8').toString()\n        const ret = extractSpecificChangelog(changelogFile, version)\n        return ret\n      } catch (err) {\n        if (err.code === 'ENOENT') {\n          return null\n        }\n        throw err\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "src/components/interpolation.js",
    "content": "/* @flow */\n\nimport { warn } from '../util'\n\nexport default {\n  name: 'i18n',\n  functional: true,\n  props: {\n    tag: {\n      type: [String, Boolean, Object],\n      default: 'span'\n    },\n    path: {\n      type: String,\n      required: true\n    },\n    locale: {\n      type: String\n    },\n    places: {\n      type: [Array, Object]\n    }\n  },\n  render (h: Function, { data, parent, props, slots }: Object) {\n    const { $i18n } = parent\n    if (!$i18n) {\n      if (process.env.NODE_ENV !== 'production') {\n        warn('Cannot find VueI18n instance!')\n      }\n      return\n    }\n\n    const { path, locale, places } = props\n    const params = slots()\n    const children = $i18n.i(\n      path,\n      locale,\n      onlyHasDefaultPlace(params) || places\n        ? useLegacyPlaces(params.default, places)\n        : params\n    )\n\n    const tag = (!!props.tag && props.tag !== true) || props.tag === false ? props.tag : 'span'\n    return tag ? h(tag, data, children) : children\n  }\n}\n\nfunction onlyHasDefaultPlace (params) {\n  let prop\n  for (prop in params) {\n    if (prop !== 'default') { return false }\n  }\n  return Boolean(prop)\n}\n\nfunction useLegacyPlaces (children, places) {\n  const params = places ? createParamsFromPlaces(places) : {}\n\n  if (!children) { return params }\n\n  // Filter empty text nodes\n  children = children.filter(child => {\n    return child.tag || child.text.trim() !== ''\n  })\n\n  const everyPlace = children.every(vnodeHasPlaceAttribute)\n  if (process.env.NODE_ENV !== 'production' && everyPlace) {\n    warn('`place` attribute is deprecated in next major version. Please switch to Vue slots.')\n  }\n\n  return children.reduce(\n    everyPlace ? assignChildPlace : assignChildIndex,\n    params\n  )\n}\n\nfunction createParamsFromPlaces (places) {\n  if (process.env.NODE_ENV !== 'production') {\n    warn('`places` prop is deprecated in next major version. Please switch to Vue slots.')\n  }\n\n  return Array.isArray(places)\n    ? places.reduce(assignChildIndex, {})\n    : Object.assign({}, places)\n}\n\nfunction assignChildPlace (params, child) {\n  if (child.data && child.data.attrs && child.data.attrs.place) {\n    params[child.data.attrs.place] = child\n  }\n  return params\n}\n\nfunction assignChildIndex (params, child, index) {\n  params[index] = child\n  return params\n}\n\nfunction vnodeHasPlaceAttribute (vnode) {\n  return Boolean(vnode.data && vnode.data.attrs && vnode.data.attrs.place)\n}\n"
  },
  {
    "path": "src/components/number.js",
    "content": "/* @flow */\n\nimport { warn, isString, isObject, includes, numberFormatKeys } from '../util'\n\nexport default {\n  name: 'i18n-n',\n  functional: true,\n  props: {\n    tag: {\n      type: [String, Boolean, Object],\n      default: 'span'\n    },\n    value: {\n      type: Number,\n      required: true\n    },\n    format: {\n      type: [String, Object]\n    },\n    locale: {\n      type: String\n    }\n  },\n  render (h: Function, { props, parent, data }: Object) {\n    const i18n = parent.$i18n\n\n    if (!i18n) {\n      if (process.env.NODE_ENV !== 'production') {\n        warn('Cannot find VueI18n instance!')\n      }\n      return null\n    }\n\n    let key: ?string = null\n    let options: ?NumberFormatOptions = null\n\n    if (isString(props.format)) {\n      key = props.format\n    } else if (isObject(props.format)) {\n      if (props.format.key) {\n        key = props.format.key\n      }\n\n      // Filter out number format options only\n      options = Object.keys(props.format).reduce((acc, prop) => {\n        if (includes(numberFormatKeys, prop)) {\n          return Object.assign({}, acc, { [prop]: props.format[prop] })\n        }\n        return acc\n      }, null)\n    }\n\n    const locale: Locale = props.locale || i18n.locale\n    const parts: NumberFormatToPartsResult = i18n._ntp(props.value, locale, key, options)\n\n    const values = parts.map((part, index) => {\n      const slot: ?Function = data.scopedSlots && data.scopedSlots[part.type]\n      return slot ? slot({ [part.type]: part.value, index, parts }) : part.value\n    })\n\n    const tag = (!!props.tag && props.tag !== true) || props.tag === false ? props.tag : 'span'\n    return tag\n      ? h(tag, {\n        attrs: data.attrs,\n        'class': data['class'],\n        staticClass: data.staticClass\n      }, values)\n      : values\n  }\n}\n"
  },
  {
    "path": "src/directive.js",
    "content": "/* @flow */\n\nimport { warn, isString, isPlainObject, looseEqual } from './util'\n\nexport function bind (el: any, binding: Object, vnode: any): void {\n  if (!assert(el, vnode)) { return }\n\n  t(el, binding, vnode)\n}\n\nexport function update (el: any, binding: Object, vnode: any, oldVNode: any): void {\n  if (!assert(el, vnode)) { return }\n\n  const i18n: any = vnode.context.$i18n\n  if (localeEqual(el, vnode) &&\n    (looseEqual(binding.value, binding.oldValue) &&\n     looseEqual(el._localeMessage, i18n.getLocaleMessage(i18n.locale)))) { return }\n\n  t(el, binding, vnode)\n}\n\nexport function unbind (el: any, binding: Object, vnode: any, oldVNode: any): void {\n  const vm: any = vnode.context\n  if (!vm) {\n    warn('Vue instance does not exists in VNode context')\n    return\n  }\n\n  const i18n: any = vnode.context.$i18n || {}\n  if (!binding.modifiers.preserve && !i18n.preserveDirectiveContent) {\n    el.textContent = ''\n  }\n  el._vt = undefined\n  delete el['_vt']\n  el._locale = undefined\n  delete el['_locale']\n  el._localeMessage = undefined\n  delete el['_localeMessage']\n}\n\nfunction assert (el: any, vnode: any): boolean {\n  const vm: any = vnode.context\n  if (!vm) {\n    warn('Vue instance does not exists in VNode context')\n    return false\n  }\n\n  if (!vm.$i18n) {\n    warn('VueI18n instance does not exists in Vue instance')\n    return false\n  }\n\n  return true\n}\n\nfunction localeEqual (el: any, vnode: any): boolean {\n  const vm: any = vnode.context\n  return el._locale === vm.$i18n.locale\n}\n\nfunction t (el: any, binding: Object, vnode: any): void {\n  const value: any = binding.value\n\n  const { path, locale, args, choice } = parseValue(value)\n  if (!path && !locale && !args) {\n    warn('value type not supported')\n    return\n  }\n\n  if (!path) {\n    warn('`path` is required in v-t directive')\n    return\n  }\n\n  const vm: any = vnode.context\n  if (choice != null) {\n    el._vt = el.textContent = vm.$i18n.tc(path, choice, ...makeParams(locale, args))\n  } else {\n    el._vt = el.textContent = vm.$i18n.t(path, ...makeParams(locale, args))\n  }\n  el._locale = vm.$i18n.locale\n  el._localeMessage = vm.$i18n.getLocaleMessage(vm.$i18n.locale)\n}\n\nfunction parseValue (value: any): Object {\n  let path: ?string\n  let locale: ?Locale\n  let args: any\n  let choice: ?number\n\n  if (isString(value)) {\n    path = value\n  } else if (isPlainObject(value)) {\n    path = value.path\n    locale = value.locale\n    args = value.args\n    choice = value.choice\n  }\n\n  return { path, locale, args, choice }\n}\n\nfunction makeParams (locale: Locale, args: any): Array<any> {\n  const params: Array<any> = []\n\n  locale && params.push(locale)\n  if (args && (Array.isArray(args) || isPlainObject(args))) {\n    params.push(args)\n  }\n\n  return params\n}\n"
  },
  {
    "path": "src/extend.js",
    "content": "/* @flow */\n\nexport default function extend (Vue: any): void {\n  if (!Vue.prototype.hasOwnProperty('$i18n')) {\n    // $FlowFixMe\n    Object.defineProperty(Vue.prototype, '$i18n', {\n      get () { return this._i18n }\n    })\n  }\n\n  Vue.prototype.$t = function (key: Path, ...values: any): TranslateResult {\n    const i18n = this.$i18n\n    return i18n._t(key, i18n.locale, i18n._getMessages(), this, ...values)\n  }\n\n  Vue.prototype.$tc = function (key: Path, choice?: number, ...values: any): TranslateResult {\n    const i18n = this.$i18n\n    return i18n._tc(key, i18n.locale, i18n._getMessages(), this, choice, ...values)\n  }\n\n  Vue.prototype.$te = function (key: Path, locale?: Locale): boolean {\n    const i18n = this.$i18n\n    return i18n._te(key, i18n.locale, i18n._getMessages(), locale)\n  }\n\n  Vue.prototype.$d = function (value: number | Date, ...args: any): DateTimeFormatResult {\n    return this.$i18n.d(value, ...args)\n  }\n\n  Vue.prototype.$n = function (value: number, ...args: any): NumberFormatResult {\n    return this.$i18n.n(value, ...args)\n  }\n}\n"
  },
  {
    "path": "src/format.js",
    "content": "/* @flow */\n\nimport { warn, isObject } from './util'\n\nexport default class BaseFormatter {\n  _caches: { [key: string]: Array<Token> }\n\n  constructor () {\n    this._caches = Object.create(null)\n  }\n\n  interpolate (message: string, values: any): Array<any> {\n    if (!values) {\n      return [message]\n    }\n    let tokens: Array<Token> = this._caches[message]\n    if (!tokens) {\n      tokens = parse(message)\n      this._caches[message] = tokens\n    }\n    return compile(tokens, values)\n  }\n}\n\ntype Token = {\n  type: 'text' | 'named' | 'list' | 'unknown',\n  value: string\n}\n\nconst RE_TOKEN_LIST_VALUE: RegExp = /^(?:\\d)+/\nconst RE_TOKEN_NAMED_VALUE: RegExp = /^(?:\\w)+/\n\nexport function parse (format: string): Array<Token> {\n  const tokens: Array<Token> = []\n  let position: number = 0\n\n  let text: string = ''\n  while (position < format.length) {\n    let char: string = format[position++]\n    if (char === '{') {\n      if (text) {\n        tokens.push({ type: 'text', value: text })\n      }\n\n      text = ''\n      let sub: string = ''\n      char = format[position++]\n      while (char !== undefined && char !== '}') {\n        sub += char\n        char = format[position++]\n      }\n      const isClosed = char === '}'\n\n      const type = RE_TOKEN_LIST_VALUE.test(sub)\n        ? 'list'\n        : isClosed && RE_TOKEN_NAMED_VALUE.test(sub)\n          ? 'named'\n          : 'unknown'\n      tokens.push({ value: sub, type })\n    } else if (char === '%') {\n      // when found rails i18n syntax, skip text capture\n      if (format[(position)] !== '{') {\n        text += char\n      }\n    } else {\n      text += char\n    }\n  }\n\n  text && tokens.push({ type: 'text', value: text })\n\n  return tokens\n}\n\nexport function compile (tokens: Array<Token>, values: Object | Array<any>): Array<any> {\n  const compiled: Array<any> = []\n  let index: number = 0\n\n  const mode: string = Array.isArray(values)\n    ? 'list'\n    : isObject(values)\n      ? 'named'\n      : 'unknown'\n  if (mode === 'unknown') { return compiled }\n\n  while (index < tokens.length) {\n    const token: Token = tokens[index]\n    switch (token.type) {\n      case 'text':\n        compiled.push(token.value)\n        break\n      case 'list':\n        compiled.push(values[parseInt(token.value, 10)])\n        break\n      case 'named':\n        if (mode === 'named') {\n          compiled.push((values: any)[token.value])\n        } else {\n          if (process.env.NODE_ENV !== 'production') {\n            warn(`Type of token '${token.type}' and format of value '${mode}' don't match!`)\n          }\n        }\n        break\n      case 'unknown':\n        if (process.env.NODE_ENV !== 'production') {\n          warn(`Detect 'unknown' type of token!`)\n        }\n        break\n    }\n    index++\n  }\n\n  return compiled\n}\n"
  },
  {
    "path": "src/index.js",
    "content": "/* @flow */\n\nimport { install, Vue } from './install'\nimport {\n  warn,\n  error,\n  isNull,\n  parseArgs,\n  isPlainObject,\n  isObject,\n  isArray,\n  isBoolean,\n  isString,\n  isFunction,\n  looseClone,\n  remove,\n  arrayFrom,\n  includes,\n  merge,\n  numberFormatKeys,\n  dateTimeFormatKeys,\n  escapeParams\n} from './util'\nimport BaseFormatter from './format'\nimport I18nPath from './path'\n\nimport type { PathValue } from './path'\n\nconst htmlTagMatcher = /<\\/?[\\w\\s=\"/.':;#-\\/]+>/\nconst linkKeyMatcher = /(?:@(?:\\.[a-zA-Z]+)?:(?:[\\w\\-_|./]+|\\([\\w\\-_:|./]+\\)))/g\nconst linkKeyPrefixMatcher = /^@(?:\\.([a-zA-Z]+))?:/\nconst bracketsMatcher = /[()]/g\nconst defaultModifiers = {\n  'upper': str => str.toLocaleUpperCase(),\n  'lower': str => str.toLocaleLowerCase(),\n  'capitalize': str => `${str.charAt(0).toLocaleUpperCase()}${str.substr(1)}`\n}\n\nconst defaultFormatter = new BaseFormatter()\n\nexport default class VueI18n {\n  static install: () => void\n  static version: string\n  static availabilities: IntlAvailability\n\n  _vm: any\n  _formatter: Formatter\n  _modifiers: Modifiers\n  _root: any\n  _sync: boolean\n  _fallbackRoot: boolean\n  _fallbackRootWithEmptyString: boolean\n  _localeChainCache: { [key: string]: Array<Locale>; }\n  _missing: ?MissingHandler\n  _exist: Function\n  _silentTranslationWarn: boolean | RegExp\n  _silentFallbackWarn: boolean | RegExp\n  _formatFallbackMessages: boolean\n  _dateTimeFormatters: Object\n  _numberFormatters: Object\n  _path: I18nPath\n  _dataListeners: Set<any>\n  _componentInstanceCreatedListener: ?ComponentInstanceCreatedListener\n  _preserveDirectiveContent: boolean\n  _warnHtmlInMessage: WarnHtmlInMessageLevel\n  _escapeParameterHtml: boolean\n  _postTranslation: ?PostTranslationHandler\n  __VUE_I18N_BRIDGE__: ?string\n  pluralizationRules: {\n    [lang: string]: (choice: number, choicesLength: number) => number\n  }\n  getChoiceIndex: GetChoiceIndex\n\n  constructor (options: I18nOptions = {}) {\n    // Auto install if it is not done yet and `window` has `Vue`.\n    // To allow users to avoid auto-installation in some cases,\n    // this code should be placed here. See #290\n    /* istanbul ignore if */\n    if (!Vue && typeof window !== 'undefined' && window.Vue) {\n      install(window.Vue)\n    }\n\n    const locale: Locale = options.locale || 'en-US'\n    const fallbackLocale: FallbackLocale = options.fallbackLocale === false\n      ? false\n      : options.fallbackLocale || 'en-US'\n    const messages: LocaleMessages = options.messages || {}\n    const dateTimeFormats = options.dateTimeFormats || options.datetimeFormats || {}\n    const numberFormats = options.numberFormats || {}\n\n    this._vm = null\n    this._formatter = options.formatter || defaultFormatter\n    this._modifiers = options.modifiers || {}\n    this._missing = options.missing || null\n    this._root = options.root || null\n    this._sync = options.sync === undefined ? true : !!options.sync\n    this._fallbackRoot = options.fallbackRoot === undefined\n      ? true\n      : !!options.fallbackRoot\n    this._fallbackRootWithEmptyString = options.fallbackRootWithEmptyString === undefined\n      ? true\n      : !!options.fallbackRootWithEmptyString\n    this._formatFallbackMessages = options.formatFallbackMessages === undefined\n      ? false\n      : !!options.formatFallbackMessages\n    this._silentTranslationWarn = options.silentTranslationWarn === undefined\n      ? false\n      : options.silentTranslationWarn\n    this._silentFallbackWarn = options.silentFallbackWarn === undefined\n      ? false\n      : !!options.silentFallbackWarn\n    this._dateTimeFormatters = {}\n    this._numberFormatters = {}\n    this._path = new I18nPath()\n    this._dataListeners = new Set()\n    this._componentInstanceCreatedListener = options.componentInstanceCreatedListener || null\n    this._preserveDirectiveContent = options.preserveDirectiveContent === undefined\n      ? false\n      : !!options.preserveDirectiveContent\n    this.pluralizationRules = options.pluralizationRules || {}\n    this._warnHtmlInMessage = options.warnHtmlInMessage || 'off'\n    this._postTranslation = options.postTranslation || null\n    this._escapeParameterHtml = options.escapeParameterHtml || false\n\n    if ('__VUE_I18N_BRIDGE__' in options) {\n      this.__VUE_I18N_BRIDGE__ = options.__VUE_I18N_BRIDGE__\n    }\n\n    /**\n     * @param choice {number} a choice index given by the input to $tc: `$tc('path.to.rule', choiceIndex)`\n     * @param choicesLength {number} an overall amount of available choices\n     * @returns a final choice index\n    */\n    this.getChoiceIndex = (choice: number, choicesLength: number): number => {\n      const thisPrototype = Object.getPrototypeOf(this)\n      if (thisPrototype && thisPrototype.getChoiceIndex) {\n        const prototypeGetChoiceIndex = (thisPrototype.getChoiceIndex: any)\n        return (prototypeGetChoiceIndex: GetChoiceIndex).call(this, choice, choicesLength)\n      }\n\n      // Default (old) getChoiceIndex implementation - english-compatible\n      const defaultImpl = (_choice: number, _choicesLength: number) => {\n        _choice = Math.abs(_choice)\n\n        if (_choicesLength === 2) {\n          return _choice\n            ? _choice > 1\n              ? 1\n              : 0\n            : 1\n        }\n\n        return _choice ? Math.min(_choice, 2) : 0\n      }\n\n      if (this.locale in this.pluralizationRules) {\n        return this.pluralizationRules[this.locale].apply(this, [choice, choicesLength])\n      } else {\n        return defaultImpl(choice, choicesLength)\n      }\n    }\n\n\n    this._exist = (message: Object, key: Path): boolean => {\n      if (!message || !key) { return false }\n      if (!isNull(this._path.getPathValue(message, key))) { return true }\n      // fallback for flat key\n      if (message[key]) { return true }\n      return false\n    }\n\n    if (this._warnHtmlInMessage === 'warn' || this._warnHtmlInMessage === 'error') {\n      Object.keys(messages).forEach(locale => {\n        this._checkLocaleMessage(locale, this._warnHtmlInMessage, messages[locale])\n      })\n    }\n\n    this._initVM({\n      locale,\n      fallbackLocale,\n      messages,\n      dateTimeFormats,\n      numberFormats\n    })\n  }\n\n  _checkLocaleMessage (locale: Locale, level: WarnHtmlInMessageLevel, message: LocaleMessageObject): void {\n    const paths: Array<string> = []\n\n    const fn = (level: WarnHtmlInMessageLevel, locale: Locale, message: any, paths: Array<string>) => {\n      if (isPlainObject(message)) {\n        Object.keys(message).forEach(key => {\n          const val = message[key]\n          if (isPlainObject(val)) {\n            paths.push(key)\n            paths.push('.')\n            fn(level, locale, val, paths)\n            paths.pop()\n            paths.pop()\n          } else {\n            paths.push(key)\n            fn(level, locale, val, paths)\n            paths.pop()\n          }\n        })\n      } else if (isArray(message)) {\n        message.forEach((item, index) => {\n          if (isPlainObject(item)) {\n            paths.push(`[${index}]`)\n            paths.push('.')\n            fn(level, locale, item, paths)\n            paths.pop()\n            paths.pop()\n          } else {\n            paths.push(`[${index}]`)\n            fn(level, locale, item, paths)\n            paths.pop()\n          }\n        })\n      } else if (isString(message)) {\n        const ret = htmlTagMatcher.test(message)\n        if (ret) {\n          const msg = `Detected HTML in message '${message}' of keypath '${paths.join('')}' at '${locale}'. Consider component interpolation with '<i18n>' to avoid XSS. See https://bit.ly/2ZqJzkp`\n          if (level === 'warn') {\n            warn(msg)\n          } else if (level === 'error') {\n            error(msg)\n          }\n        }\n      }\n    }\n\n    fn(level, locale, message, paths)\n  }\n\n  _initVM (data: {\n    locale: Locale,\n    fallbackLocale: FallbackLocale,\n    messages: LocaleMessages,\n    dateTimeFormats: DateTimeFormats,\n    numberFormats: NumberFormats\n  }): void {\n    const silent = Vue.config.silent\n    Vue.config.silent = true\n    this._vm = new Vue({ data, __VUE18N__INSTANCE__: true })\n    Vue.config.silent = silent\n  }\n\n  destroyVM (): void {\n    this._vm.$destroy()\n  }\n\n  subscribeDataChanging (vm: any): void {\n    this._dataListeners.add(vm)\n  }\n\n  unsubscribeDataChanging (vm: any): void {\n    remove(this._dataListeners, vm)\n  }\n\n  watchI18nData (): Function {\n    const self = this\n    return this._vm.$watch('$data', () => {\n      const listeners = arrayFrom(this._dataListeners)\n      let i = listeners.length\n      while(i--) {\n        Vue.nextTick(() => {\n          listeners[i] && listeners[i].$forceUpdate()\n        })\n      }\n    }, { deep: true })\n  }\n\n  watchLocale (composer?: any): ?Function {\n    if (!composer) {\n      /* istanbul ignore if */\n      if (!this._sync || !this._root) { return null }\n      const target: any = this._vm\n      return this._root.$i18n.vm.$watch('locale', (val) => {\n        target.$set(target, 'locale', val)\n        target.$forceUpdate()\n      }, { immediate: true })\n    } else {\n      // deal with vue-i18n-bridge\n      if (!this.__VUE_I18N_BRIDGE__) { return null }\n      const self = this\n      const target: any = this._vm\n      return this.vm.$watch('locale', (val) => {\n        target.$set(target, 'locale', val)\n        if (self.__VUE_I18N_BRIDGE__ && composer) {\n          composer.locale.value = val\n        }\n        target.$forceUpdate()\n      }, { immediate: true })\n    }\n  }\n\n  onComponentInstanceCreated (newI18n: I18n) {\n    if (this._componentInstanceCreatedListener) {\n      this._componentInstanceCreatedListener(newI18n, this)\n    }\n  }\n\n  get vm (): any { return this._vm }\n\n  get messages (): LocaleMessages { return looseClone(this._getMessages()) }\n  get dateTimeFormats (): DateTimeFormats { return looseClone(this._getDateTimeFormats()) }\n  get numberFormats (): NumberFormats { return looseClone(this._getNumberFormats()) }\n  get availableLocales (): Locale[] { return Object.keys(this.messages).sort() }\n\n  get locale (): Locale { return this._vm.locale }\n  set locale (locale: Locale): void {\n    this._vm.$set(this._vm, 'locale', locale)\n  }\n\n  get fallbackLocale (): FallbackLocale { return this._vm.fallbackLocale }\n  set fallbackLocale (locale: FallbackLocale): void {\n    this._localeChainCache = {}\n    this._vm.$set(this._vm, 'fallbackLocale', locale)\n  }\n\n  get formatFallbackMessages (): boolean { return this._formatFallbackMessages }\n  set formatFallbackMessages (fallback: boolean): void { this._formatFallbackMessages = fallback }\n\n  get missing (): ?MissingHandler { return this._missing }\n  set missing (handler: MissingHandler): void { this._missing = handler }\n\n  get formatter (): Formatter { return this._formatter }\n  set formatter (formatter: Formatter): void { this._formatter = formatter }\n\n  get silentTranslationWarn (): boolean | RegExp { return this._silentTranslationWarn }\n  set silentTranslationWarn (silent: boolean | RegExp): void { this._silentTranslationWarn = silent }\n\n  get silentFallbackWarn (): boolean | RegExp { return this._silentFallbackWarn }\n  set silentFallbackWarn (silent: boolean | RegExp): void { this._silentFallbackWarn = silent }\n\n  get preserveDirectiveContent (): boolean { return this._preserveDirectiveContent }\n  set preserveDirectiveContent (preserve: boolean): void { this._preserveDirectiveContent = preserve }\n\n  get warnHtmlInMessage (): WarnHtmlInMessageLevel { return this._warnHtmlInMessage }\n  set warnHtmlInMessage (level: WarnHtmlInMessageLevel): void {\n    const orgLevel = this._warnHtmlInMessage\n    this._warnHtmlInMessage = level\n    if (orgLevel !== level && (level === 'warn' || level === 'error')) {\n      const messages = this._getMessages()\n      Object.keys(messages).forEach(locale => {\n        this._checkLocaleMessage(locale, this._warnHtmlInMessage, messages[locale])\n      })\n    }\n  }\n\n  get postTranslation (): ?PostTranslationHandler { return this._postTranslation }\n  set postTranslation (handler: PostTranslationHandler): void { this._postTranslation = handler }\n\n  get sync (): boolean { return this._sync }\n  set sync (val: boolean): void { this._sync = val }\n\n  _getMessages (): LocaleMessages { return this._vm.messages }\n  _getDateTimeFormats (): DateTimeFormats { return this._vm.dateTimeFormats }\n  _getNumberFormats (): NumberFormats { return this._vm.numberFormats }\n\n  _warnDefault (locale: Locale, key: Path, result: ?any, vm: ?any, values: any, interpolateMode: string): ?string {\n    if (!isNull(result)) { return result }\n    if (this._missing) {\n      const missingRet = this._missing.apply(null, [locale, key, vm, values])\n      if (isString(missingRet)) {\n        return missingRet\n      }\n    } else {\n      if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key)) {\n        warn(\n          `Cannot translate the value of keypath '${key}'. ` +\n          'Use the value of keypath as default.'\n        )\n      }\n    }\n\n    if (this._formatFallbackMessages) {\n      const parsedArgs = parseArgs(...values)\n      return this._render(key, interpolateMode, parsedArgs.params, key)\n    } else {\n      return key\n    }\n  }\n\n  _isFallbackRoot (val: any): boolean {\n    return (this._fallbackRootWithEmptyString? !val : isNull(val)) && !isNull(this._root) && this._fallbackRoot\n  }\n\n  _isSilentFallbackWarn (key: Path): boolean {\n    return this._silentFallbackWarn instanceof RegExp\n      ? this._silentFallbackWarn.test(key)\n      : this._silentFallbackWarn\n  }\n\n  _isSilentFallback (locale: Locale, key: Path): boolean {\n    return this._isSilentFallbackWarn(key) && (this._isFallbackRoot() || locale !== this.fallbackLocale)\n  }\n\n  _isSilentTranslationWarn (key: Path): boolean {\n    return this._silentTranslationWarn instanceof RegExp\n      ? this._silentTranslationWarn.test(key)\n      : this._silentTranslationWarn\n  }\n\n  _interpolate (\n    locale: Locale,\n    message: LocaleMessageObject,\n    key: Path,\n    host: any,\n    interpolateMode: string,\n    values: any,\n    visitedLinkStack: Array<string>\n  ): any {\n    if (!message) { return null }\n\n    const pathRet: PathValue = this._path.getPathValue(message, key)\n    if (isArray(pathRet) || isPlainObject(pathRet)) { return pathRet }\n\n    let ret: mixed\n    if (isNull(pathRet)) {\n      /* istanbul ignore else */\n      if (isPlainObject(message)) {\n        ret = message[key]\n        if (!(isString(ret) || isFunction(ret))) {\n          if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallback(locale, key)) {\n            warn(`Value of key '${key}' is not a string or function !`)\n          }\n          return null\n        }\n      } else {\n        return null\n      }\n    } else {\n      /* istanbul ignore else */\n      if (isString(pathRet) || isFunction(pathRet)) {\n        ret = pathRet\n      } else {\n        if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallback(locale, key)) {\n          warn(`Value of key '${key}' is not a string or function!`)\n        }\n        return null\n      }\n    }\n\n    // Check for the existence of links within the translated string\n    if (isString(ret) && (ret.indexOf('@:') >= 0 || ret.indexOf('@.') >= 0)) {\n      ret = this._link(locale, message, ret, host, 'raw', values, visitedLinkStack)\n    }\n\n    return this._render(ret, interpolateMode, values, key)\n  }\n\n  _link (\n    locale: Locale,\n    message: LocaleMessageObject,\n    str: string,\n    host: any,\n    interpolateMode: string,\n    values: any,\n    visitedLinkStack: Array<string>\n  ): any {\n    let ret: string = str\n\n    // Match all the links within the local\n    // We are going to replace each of\n    // them with its translation\n    const matches: any = ret.match(linkKeyMatcher)\n\n    // eslint-disable-next-line no-autofix/prefer-const\n    for (let idx in matches) {\n      // ie compatible: filter custom array\n      // prototype method\n      if (!matches.hasOwnProperty(idx)) {\n        continue\n      }\n      const link: string = matches[idx]\n      const linkKeyPrefixMatches: any = link.match(linkKeyPrefixMatcher)\n      const [linkPrefix, formatterName] = linkKeyPrefixMatches\n\n      // Remove the leading @:, @.case: and the brackets\n      const linkPlaceholder: string = link.replace(linkPrefix, '').replace(bracketsMatcher, '')\n\n      if (includes(visitedLinkStack, linkPlaceholder)) {\n        if (process.env.NODE_ENV !== 'production') {\n          warn(`Circular reference found. \"${link}\" is already visited in the chain of ${visitedLinkStack.reverse().join(' <- ')}`)\n        }\n        return ret\n      }\n      visitedLinkStack.push(linkPlaceholder)\n\n      // Translate the link\n      let translated: any = this._interpolate(\n        locale, message, linkPlaceholder, host,\n        interpolateMode === 'raw' ? 'string' : interpolateMode,\n        interpolateMode === 'raw' ? undefined : values,\n        visitedLinkStack\n      )\n\n      if (this._isFallbackRoot(translated)) {\n        if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(linkPlaceholder)) {\n          warn(`Fall back to translate the link placeholder '${linkPlaceholder}' with root locale.`)\n        }\n        /* istanbul ignore if */\n        if (!this._root) { throw Error('unexpected error') }\n        const root: any = this._root.$i18n\n        translated = root._translate(\n          root._getMessages(), root.locale, root.fallbackLocale,\n          linkPlaceholder, host, interpolateMode, values\n        )\n      }\n      translated = this._warnDefault(\n        locale, linkPlaceholder, translated, host,\n        isArray(values) ? values : [values],\n        interpolateMode\n      )\n\n      if (this._modifiers.hasOwnProperty(formatterName)) {\n        translated = this._modifiers[formatterName](translated)\n      } else if (defaultModifiers.hasOwnProperty(formatterName)) {\n        translated = defaultModifiers[formatterName](translated)\n      }\n\n      visitedLinkStack.pop()\n\n      // Replace the link with the translated\n      ret = !translated ? ret : ret.replace(link, translated)\n    }\n\n    return ret\n  }\n\n  _createMessageContext (values: any, formatter: Formatter, path: string, interpolateMode: string): MessageContext {\n    const _list = isArray(values) ? values : []\n    const _named = isObject(values) ? values : {}\n    const list = (index: number): mixed => _list[index]\n    const named = (key: string): mixed => _named[key]\n    const messages = this._getMessages()\n    const locale = this.locale\n\n    return {\n      list,\n      named,\n      values,\n      formatter,\n      path,\n      messages,\n      locale,\n      linked: (linkedKey: string) => this._interpolate(locale, messages[locale] || {}, linkedKey, null, interpolateMode, undefined, [linkedKey])\n    }\n  }\n\n  _render (message: string | MessageFunction, interpolateMode: string, values: any, path: string): any {\n    if (isFunction(message)) {\n      return message(\n        this._createMessageContext(values, this._formatter || defaultFormatter, path, interpolateMode)\n      )\n    }\n\n    let ret = this._formatter.interpolate(message, values, path)\n\n    // If the custom formatter refuses to work - apply the default one\n    if (!ret) {\n      ret = defaultFormatter.interpolate(message, values, path)\n    }\n\n    // if interpolateMode is **not** 'string' ('row'),\n    // return the compiled data (e.g. ['foo', VNode, 'bar']) with formatter\n    return interpolateMode === 'string' && !isString(ret) ? ret.join('') : ret\n  }\n\n  _appendItemToChain (chain: Array<Locale>, item: Locale, blocks: any): any {\n    let follow = false\n    if (!includes(chain, item)) {\n      follow = true\n      if (item) {\n        follow = item[item.length - 1] !== '!'\n        item = item.replace(/!/g, '')\n        chain.push(item)\n        if (blocks && blocks[item]) {\n          follow = blocks[item]\n        }\n      }\n    }\n    return follow\n  }\n\n  _appendLocaleToChain (chain: Array<Locale>, locale: Locale, blocks: any): any {\n    let follow\n    const tokens = locale.split('-')\n    do {\n      const item = tokens.join('-')\n      follow = this._appendItemToChain(chain, item, blocks)\n      tokens.splice(-1, 1)\n    } while (tokens.length && (follow === true))\n    return follow\n  }\n\n  _appendBlockToChain (chain: Array<Locale>, block: Array<Locale> | Object, blocks: any): any {\n    let follow = true\n    for (let i = 0; (i < block.length) && (isBoolean(follow)); i++) {\n      const locale = block[i]\n      if (isString(locale)) {\n        follow = this._appendLocaleToChain(chain, locale, blocks)\n      }\n    }\n    return follow\n  }\n\n  _getLocaleChain (start: Locale, fallbackLocale: FallbackLocale): Array<Locale> {\n    if (start === '') { return [] }\n\n    if (!this._localeChainCache) {\n      this._localeChainCache = {}\n    }\n\n    let chain = this._localeChainCache[start]\n    if (!chain) {\n      if (!fallbackLocale) {\n        fallbackLocale = this.fallbackLocale\n      }\n      chain = []\n\n      // first block defined by start\n      let block = [start]\n\n      // while any intervening block found\n      while (isArray(block)) {\n        block = this._appendBlockToChain(\n          chain,\n          block,\n          fallbackLocale\n        )\n      }\n\n      // last block defined by default\n      let defaults\n      if (isArray(fallbackLocale)) {\n        defaults = fallbackLocale\n      } else if (isObject(fallbackLocale)) {\n        /* $FlowFixMe */\n        if (fallbackLocale['default']) {\n          defaults = fallbackLocale['default']\n        } else {\n          defaults = null\n        }\n      } else {\n        defaults = fallbackLocale\n      }\n\n      // convert defaults to array\n      if (isString(defaults)) {\n        block = [defaults]\n      } else {\n        block = defaults\n      }\n      if (block) {\n        this._appendBlockToChain(\n          chain,\n          block,\n          null\n        )\n      }\n      this._localeChainCache[start] = chain\n    }\n    return chain\n  }\n\n  _translate (\n    messages: LocaleMessages,\n    locale: Locale,\n    fallback: FallbackLocale,\n    key: Path,\n    host: any,\n    interpolateMode: string,\n    args: any\n  ): any {\n    const chain = this._getLocaleChain(locale, fallback)\n    let res\n    for (let i = 0; i < chain.length; i++) {\n      const step = chain[i]\n      res =\n        this._interpolate(step, messages[step], key, host, interpolateMode, args, [key])\n      if (!isNull(res)) {\n        if (step !== locale && process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n          warn((\"Fall back to translate the keypath '\" + key + \"' with '\" + step + \"' locale.\"))\n        }\n        return res\n      }\n    }\n    return null\n  }\n\n  _t (key: Path, _locale: Locale, messages: LocaleMessages, host: any, ...values: any): any {\n    if (!key) { return '' }\n\n    const parsedArgs = parseArgs(...values)\n    if(this._escapeParameterHtml) {\n      parsedArgs.params = escapeParams(parsedArgs.params)\n    }\n\n    const locale: Locale = parsedArgs.locale || _locale\n\n    let ret: any = this._translate(\n      messages, locale, this.fallbackLocale, key,\n      host, 'string', parsedArgs.params\n    )\n    if (this._isFallbackRoot(ret)) {\n      if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n        warn(`Fall back to translate the keypath '${key}' with root locale.`)\n      }\n      /* istanbul ignore if */\n      if (!this._root) { throw Error('unexpected error') }\n      return this._root.$t(key, ...values)\n    } else {\n      ret = this._warnDefault(locale, key, ret, host, values, 'string')\n      if (this._postTranslation && ret !== null && ret !== undefined) {\n        ret = this._postTranslation(ret, key)\n      }\n      return ret\n    }\n  }\n\n  t (key: Path, ...values: any): TranslateResult {\n    return this._t(key, this.locale, this._getMessages(), null, ...values)\n  }\n\n  _i (key: Path, locale: Locale, messages: LocaleMessages, host: any, values: Object): any {\n    const ret: any =\n      this._translate(messages, locale, this.fallbackLocale, key, host, 'raw', values)\n    if (this._isFallbackRoot(ret)) {\n      if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key)) {\n        warn(`Fall back to interpolate the keypath '${key}' with root locale.`)\n      }\n      if (!this._root) { throw Error('unexpected error') }\n      return this._root.$i18n.i(key, locale, values)\n    } else {\n      return this._warnDefault(locale, key, ret, host, [values], 'raw')\n    }\n  }\n\n  i (key: Path, locale: Locale, values: Object): TranslateResult {\n    /* istanbul ignore if */\n    if (!key) { return '' }\n\n    if (!isString(locale)) {\n      locale = this.locale\n    }\n\n    return this._i(key, locale, this._getMessages(), null, values)\n  }\n\n  _tc (\n    key: Path,\n    _locale: Locale,\n    messages: LocaleMessages,\n    host: any,\n    choice?: number,\n    ...values: any\n  ): any {\n    if (!key) { return '' }\n    if (choice === undefined) {\n      choice = 1\n    }\n\n    const predefined = { 'count': choice, 'n': choice }\n    const parsedArgs = parseArgs(...values)\n    parsedArgs.params = Object.assign(predefined, parsedArgs.params)\n    values = parsedArgs.locale === null ? [parsedArgs.params] : [parsedArgs.locale, parsedArgs.params]\n    return this.fetchChoice(this._t(key, _locale, messages, host, ...values), choice)\n  }\n\n  fetchChoice (message: string, choice: number): ?string {\n    /* istanbul ignore if */\n    if (!message || !isString(message)) { return null }\n    const choices: Array<string> = message.split('|')\n\n    choice = this.getChoiceIndex(choice, choices.length)\n    if (!choices[choice]) { return message }\n    return choices[choice].trim()\n  }\n\n  tc (key: Path, choice?: number, ...values: any): TranslateResult {\n    return this._tc(key, this.locale, this._getMessages(), null, choice, ...values)\n  }\n\n  _te (key: Path, locale: Locale, messages: LocaleMessages, ...args: any): boolean {\n    const _locale: Locale = parseArgs(...args).locale || locale\n    return this._exist(messages[_locale], key)\n  }\n\n  te (key: Path, locale?: Locale): boolean {\n    return this._te(key, this.locale, this._getMessages(), locale)\n  }\n\n  getLocaleMessage (locale: Locale): LocaleMessageObject {\n    return looseClone(this._vm.messages[locale] || {})\n  }\n\n  setLocaleMessage (locale: Locale, message: LocaleMessageObject): void {\n    if (this._warnHtmlInMessage === 'warn' || this._warnHtmlInMessage === 'error') {\n      this._checkLocaleMessage(locale, this._warnHtmlInMessage, message)\n    }\n    this._vm.$set(this._vm.messages, locale, message)\n  }\n\n  mergeLocaleMessage (locale: Locale, message: LocaleMessageObject): void {\n    if (this._warnHtmlInMessage === 'warn' || this._warnHtmlInMessage === 'error') {\n      this._checkLocaleMessage(locale, this._warnHtmlInMessage, message)\n    }\n    this._vm.$set(this._vm.messages, locale, merge(\n      typeof this._vm.messages[locale] !== 'undefined' && Object.keys(this._vm.messages[locale]).length\n        ? Object.assign({}, this._vm.messages[locale])\n        : {},\n      message\n    ))\n  }\n\n  getDateTimeFormat (locale: Locale): DateTimeFormat {\n    return looseClone(this._vm.dateTimeFormats[locale] || {})\n  }\n\n  setDateTimeFormat (locale: Locale, format: DateTimeFormat): void {\n    this._vm.$set(this._vm.dateTimeFormats, locale, format)\n    this._clearDateTimeFormat(locale, format)\n  }\n\n  mergeDateTimeFormat (locale: Locale, format: DateTimeFormat): void {\n    this._vm.$set(this._vm.dateTimeFormats, locale, merge(this._vm.dateTimeFormats[locale] || {}, format))\n    this._clearDateTimeFormat(locale, format)\n  }\n\n  _clearDateTimeFormat (locale: Locale, format: DateTimeFormat): void {\n    // eslint-disable-next-line no-autofix/prefer-const\n    for (let key in format) {\n      const id = `${locale}__${key}`\n\n      if (!this._dateTimeFormatters.hasOwnProperty(id)) {\n        continue\n      }\n\n      delete this._dateTimeFormatters[id]\n    }\n  }\n\n  _localizeDateTime (\n    value: number | Date,\n    locale: Locale,\n    fallback: FallbackLocale,\n    dateTimeFormats: DateTimeFormats,\n    key: string,\n    options: ?DateTimeFormatOptions\n  ): ?DateTimeFormatResult {\n    let _locale: Locale = locale\n    let formats: DateTimeFormat = dateTimeFormats[_locale]\n\n    const chain = this._getLocaleChain(locale, fallback)\n    for (let i = 0; i < chain.length; i++) {\n      const current = _locale\n      const step = chain[i]\n      formats = dateTimeFormats[step]\n      _locale = step\n      // fallback locale\n      if (isNull(formats) || isNull(formats[key])) {\n        if (step !== locale && process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n          warn(`Fall back to '${step}' datetime formats from '${current}' datetime formats.`)\n        }\n      } else {\n        break\n      }\n    }\n\n    if (isNull(formats) || isNull(formats[key])) {\n      return null\n    } else {\n      const format: ?DateTimeFormatOptions = formats[key]\n\n      let formatter\n      if (options) {\n        formatter = new Intl.DateTimeFormat(_locale, Object.assign({}, format, options))\n      } else {\n        const id = `${_locale}__${key}`\n        formatter = this._dateTimeFormatters[id]\n        if (!formatter) {\n          formatter = this._dateTimeFormatters[id] = new Intl.DateTimeFormat(_locale, format)\n        }\n      }\n\n      return formatter.format(value)\n    }\n  }\n\n  _d (value: number | Date, locale: Locale, key: ?string, options: ?DateTimeFormatOptions): DateTimeFormatResult {\n    /* istanbul ignore if */\n    if (process.env.NODE_ENV !== 'production' && !VueI18n.availabilities.dateTimeFormat) {\n      warn('Cannot format a Date value due to not supported Intl.DateTimeFormat.')\n      return ''\n    }\n\n    if (!key) {\n      const dtf = !options ? new Intl.DateTimeFormat(locale) : new Intl.DateTimeFormat(locale, options)\n      return dtf.format(value)\n    }\n\n    const ret: ?DateTimeFormatResult =\n      this._localizeDateTime(value, locale, this.fallbackLocale, this._getDateTimeFormats(), key, options)\n    if (this._isFallbackRoot(ret)) {\n      if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n        warn(`Fall back to datetime localization of root: key '${key}'.`)\n      }\n      /* istanbul ignore if */\n      if (!this._root) { throw Error('unexpected error') }\n      return this._root.$i18n.d(value, key, locale)\n    } else {\n      return ret || ''\n    }\n  }\n\n  d (value: number | Date, ...args: any): DateTimeFormatResult {\n    let locale: Locale = this.locale\n    let key: ?string = null\n    let options: ?DateTimeFormatOptions = null\n\n    if (args.length === 1) {\n      if (isString(args[0])) {\n        key = args[0]\n      } else if (isObject(args[0])) {\n        if (args[0].locale) {\n          locale = args[0].locale\n        }\n        if (args[0].key) {\n          key = args[0].key\n        }\n      }\n\n      options = Object.keys(args[0]).reduce((acc, key) => {\n        if (includes(dateTimeFormatKeys, key)) {\n          return Object.assign({}, acc, { [key]: args[0][key] })\n        }\n        return acc\n      }, null)\n\n    } else if (args.length === 2) {\n      if (isString(args[0])) {\n        key = args[0]\n      }\n      if (isString(args[1])) {\n        locale = args[1]\n      }\n    }\n\n    return this._d(value, locale, key, options)\n  }\n\n  getNumberFormat (locale: Locale): NumberFormat {\n    return looseClone(this._vm.numberFormats[locale] || {})\n  }\n\n  setNumberFormat (locale: Locale, format: NumberFormat): void {\n    this._vm.$set(this._vm.numberFormats, locale, format)\n    this._clearNumberFormat(locale, format)\n  }\n\n  mergeNumberFormat (locale: Locale, format: NumberFormat): void {\n    this._vm.$set(this._vm.numberFormats, locale, merge(this._vm.numberFormats[locale] || {}, format))\n    this._clearNumberFormat(locale, format)\n  }\n\n  _clearNumberFormat (locale: Locale, format: NumberFormat): void {\n    // eslint-disable-next-line no-autofix/prefer-const\n    for (let key in format) {\n      const id = `${locale}__${key}`\n\n      if (!this._numberFormatters.hasOwnProperty(id)) {\n        continue\n      }\n\n      delete this._numberFormatters[id]\n    }\n  }\n\n  _getNumberFormatter (\n    value: number,\n    locale: Locale,\n    fallback: FallbackLocale,\n    numberFormats: NumberFormats,\n    key: string,\n    options: ?NumberFormatOptions\n  ): ?Object {\n    let _locale: Locale = locale\n    let formats: NumberFormat = numberFormats[_locale]\n\n    const chain = this._getLocaleChain(locale, fallback)\n    for (let i = 0; i < chain.length; i++) {\n      const current = _locale\n      const step = chain[i]\n      formats = numberFormats[step]\n      _locale = step\n      // fallback locale\n      if (isNull(formats) || isNull(formats[key])) {\n        if (step !== locale && process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n          warn(`Fall back to '${step}' number formats from '${current}' number formats.`)\n        }\n      } else {\n        break\n      }\n    }\n\n    if (isNull(formats) || isNull(formats[key])) {\n      return null\n    } else {\n      const format: ?NumberFormatOptions = formats[key]\n\n      let formatter\n      if (options) {\n        // If options specified - create one time number formatter\n        formatter = new Intl.NumberFormat(_locale, Object.assign({}, format, options))\n      } else {\n        const id = `${_locale}__${key}`\n        formatter = this._numberFormatters[id]\n        if (!formatter) {\n          formatter = this._numberFormatters[id] = new Intl.NumberFormat(_locale, format)\n        }\n      }\n      return formatter\n    }\n  }\n\n  _n (value: number, locale: Locale, key: ?string, options: ?NumberFormatOptions): NumberFormatResult {\n    /* istanbul ignore if */\n    if (!VueI18n.availabilities.numberFormat) {\n      if (process.env.NODE_ENV !== 'production') {\n        warn('Cannot format a Number value due to not supported Intl.NumberFormat.')\n      }\n      return ''\n    }\n\n    if (!key) {\n      const nf = !options ? new Intl.NumberFormat(locale) : new Intl.NumberFormat(locale, options)\n      return nf.format(value)\n    }\n\n    const formatter: ?Object = this._getNumberFormatter(value, locale, this.fallbackLocale, this._getNumberFormats(), key, options)\n    const ret: ?NumberFormatResult = formatter && formatter.format(value)\n    if (this._isFallbackRoot(ret)) {\n      if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n        warn(`Fall back to number localization of root: key '${key}'.`)\n      }\n      /* istanbul ignore if */\n      if (!this._root) { throw Error('unexpected error') }\n      return this._root.$i18n.n(value, Object.assign({}, { key, locale }, options))\n    } else {\n      return ret || ''\n    }\n  }\n\n  n (value: number, ...args: any): NumberFormatResult {\n    let locale: Locale = this.locale\n    let key: ?string = null\n    let options: ?NumberFormatOptions = null\n\n    if (args.length === 1) {\n      if (isString(args[0])) {\n        key = args[0]\n      } else if (isObject(args[0])) {\n        if (args[0].locale) {\n          locale = args[0].locale\n        }\n        if (args[0].key) {\n          key = args[0].key\n        }\n\n        // Filter out number format options only\n        options = Object.keys(args[0]).reduce((acc, key) => {\n          if (includes(numberFormatKeys, key)) {\n            return Object.assign({}, acc, { [key]: args[0][key] })\n          }\n          return acc\n        }, null)\n      }\n    } else if (args.length === 2) {\n      if (isString(args[0])) {\n        key = args[0]\n      }\n      if (isString(args[1])) {\n        locale = args[1]\n      }\n    }\n\n    return this._n(value, locale, key, options)\n  }\n\n  _ntp (value: number, locale: Locale, key: ?string, options: ?NumberFormatOptions): NumberFormatToPartsResult {\n    /* istanbul ignore if */\n    if (!VueI18n.availabilities.numberFormat) {\n      if (process.env.NODE_ENV !== 'production') {\n        warn('Cannot format to parts a Number value due to not supported Intl.NumberFormat.')\n      }\n      return []\n    }\n\n    if (!key) {\n      const nf = !options ? new Intl.NumberFormat(locale) : new Intl.NumberFormat(locale, options)\n      return nf.formatToParts(value)\n    }\n\n    const formatter: ?Object = this._getNumberFormatter(value, locale, this.fallbackLocale, this._getNumberFormats(), key, options)\n    const ret: ?NumberFormatToPartsResult = formatter && formatter.formatToParts(value)\n    if (this._isFallbackRoot(ret)) {\n      if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key)) {\n        warn(`Fall back to format number to parts of root: key '${key}' .`)\n      }\n      /* istanbul ignore if */\n      if (!this._root) { throw Error('unexpected error') }\n      return this._root.$i18n._ntp(value, locale, key, options)\n    } else {\n      return ret || []\n    }\n  }\n}\n\nlet availabilities: IntlAvailability\n// $FlowFixMe\nObject.defineProperty(VueI18n, 'availabilities', {\n  get () {\n    if (!availabilities) {\n      const intlDefined = typeof Intl !== 'undefined'\n      availabilities = {\n        dateTimeFormat: intlDefined && typeof Intl.DateTimeFormat !== 'undefined',\n        numberFormat: intlDefined && typeof Intl.NumberFormat !== 'undefined'\n      }\n    }\n\n    return availabilities\n  }\n})\n\nVueI18n.install = install\nVueI18n.version = '__VERSION__'\n"
  },
  {
    "path": "src/install.js",
    "content": "import { warn } from './util'\nimport extend from './extend'\nimport defineMixin from './mixin'\nimport interpolationComponent from './components/interpolation'\nimport numberComponent from './components/number'\nimport { bind, update, unbind } from './directive'\n\nexport let Vue\n\nexport function install (_Vue, options = { bridge: false }) {\n  /* istanbul ignore if */\n  if (process.env.NODE_ENV !== 'production' && install.installed && _Vue === Vue) {\n    warn('already installed.')\n    return\n  }\n  install.installed = true\n\n  Vue = _Vue\n\n  const version = (Vue.version && Number(Vue.version.split('.')[0])) || -1\n  /* istanbul ignore if */\n  if (process.env.NODE_ENV !== 'production' && version < 2) {\n    warn(`vue-i18n (${install.version}) need to use Vue 2.0 or later (Vue: ${Vue.version}).`)\n    return\n  }\n\n  extend(Vue)\n  Vue.mixin(defineMixin(options.bridge))\n  Vue.directive('t', { bind, update, unbind })\n  Vue.component(interpolationComponent.name, interpolationComponent)\n  Vue.component(numberComponent.name, numberComponent)\n\n  // use simple mergeStrategies to prevent i18n instance lose '__proto__'\n  const strats = Vue.config.optionMergeStrategies\n  strats.i18n = function (parentVal, childVal) {\n    return childVal === undefined\n      ? parentVal\n      : childVal\n  }\n}\n"
  },
  {
    "path": "src/mixin.js",
    "content": "/* @flow */\n\nimport VueI18n from './index'\nimport { isPlainObject, warn, error, merge } from './util'\n\n/**\n * Mixin\n * \n * If `bridge` mode, empty mixin is returned,\n * else regulary mixin implementation is returned.\n */\nexport default function defineMixin (bridge: boolean = false) {\n  function mounted (): void {\n    if (this !== this.$root && this.$options.__INTLIFY_META__ && this.$el) {\n      this.$el.setAttribute('data-intlify', this.$options.__INTLIFY_META__)\n    }\n  }\n\n  return bridge\n    ? { mounted } // delegate `vue-i18n-bridge` mixin implementation\n    : { // regulary \n    beforeCreate (): void {\n      const options: any = this.$options\n      options.i18n = options.i18n || ((options.__i18nBridge || options.__i18n) ? {} : null)\n\n      if (options.i18n) {\n        if (options.i18n instanceof VueI18n) {\n          // init locale messages via custom blocks\n          if ((options.__i18nBridge || options.__i18n)) {\n            try {\n              let localeMessages = options.i18n && options.i18n.messages ? options.i18n.messages : {}\n              const __i18n = options.__i18nBridge || options.__i18n\n              __i18n.forEach(resource => {\n                localeMessages = merge(localeMessages, JSON.parse(resource))\n              })\n              Object.keys(localeMessages).forEach((locale: Locale) => {\n                options.i18n.mergeLocaleMessage(locale, localeMessages[locale])\n              })\n            } catch (e) {\n              if (process.env.NODE_ENV !== 'production') {\n                error(`Cannot parse locale messages via custom blocks.`, e)\n              }\n            }\n          }\n          this._i18n = options.i18n\n          this._i18nWatcher = this._i18n.watchI18nData()\n        } else if (isPlainObject(options.i18n)) {\n          const rootI18n = this.$root && this.$root.$i18n && this.$root.$i18n instanceof VueI18n\n            ? this.$root.$i18n\n            : null\n          // component local i18n\n          if (rootI18n) {\n            options.i18n.root = this.$root\n            options.i18n.formatter = rootI18n.formatter\n            options.i18n.fallbackLocale = rootI18n.fallbackLocale\n            options.i18n.formatFallbackMessages = rootI18n.formatFallbackMessages\n            options.i18n.silentTranslationWarn = rootI18n.silentTranslationWarn\n            options.i18n.silentFallbackWarn = rootI18n.silentFallbackWarn\n            options.i18n.pluralizationRules = rootI18n.pluralizationRules\n            options.i18n.preserveDirectiveContent = rootI18n.preserveDirectiveContent\n          }\n\n          // init locale messages via custom blocks\n          if ((options.__i18nBridge || options.__i18n)) {\n            try {\n              let localeMessages = options.i18n && options.i18n.messages ? options.i18n.messages : {}\n              const __i18n = options.__i18nBridge || options.__i18n\n              __i18n.forEach(resource => {\n                localeMessages = merge(localeMessages, JSON.parse(resource))\n              })\n              options.i18n.messages = localeMessages\n            } catch (e) {\n              if (process.env.NODE_ENV !== 'production') {\n                warn(`Cannot parse locale messages via custom blocks.`, e)\n              }\n            }\n          }\n\n          const { sharedMessages } = options.i18n\n          if (sharedMessages && isPlainObject(sharedMessages)) {\n            options.i18n.messages = merge(options.i18n.messages, sharedMessages)\n          }\n\n          this._i18n = new VueI18n(options.i18n)\n          this._i18nWatcher = this._i18n.watchI18nData()\n\n          if (options.i18n.sync === undefined || !!options.i18n.sync) {\n            this._localeWatcher = this.$i18n.watchLocale()\n          }\n\n          if (rootI18n) {\n            rootI18n.onComponentInstanceCreated(this._i18n)\n          }\n        } else {\n          if (process.env.NODE_ENV !== 'production') {\n            warn(`Cannot be interpreted 'i18n' option.`)\n          }\n        }\n      } else if (this.$root && this.$root.$i18n && this.$root.$i18n instanceof VueI18n) {\n        // root i18n\n        this._i18n = this.$root.$i18n\n      } else if (options.parent && options.parent.$i18n && options.parent.$i18n instanceof VueI18n) {\n        // parent i18n\n        this._i18n = options.parent.$i18n\n      }\n    },\n\n    beforeMount (): void {\n      const options: any = this.$options\n      options.i18n = options.i18n || ((options.__i18nBridge || options.__i18n) ? {} : null)\n\n      if (options.i18n) {\n        if (options.i18n instanceof VueI18n) {\n          // init locale messages via custom blocks\n          this._i18n.subscribeDataChanging(this)\n          this._subscribing = true\n        } else if (isPlainObject(options.i18n)) {\n          this._i18n.subscribeDataChanging(this)\n          this._subscribing = true\n        } else {\n          if (process.env.NODE_ENV !== 'production') {\n            warn(`Cannot be interpreted 'i18n' option.`)\n          }\n        }\n      } else if (this.$root && this.$root.$i18n && this.$root.$i18n instanceof VueI18n) {\n        this._i18n.subscribeDataChanging(this)\n        this._subscribing = true\n      } else if (options.parent && options.parent.$i18n && options.parent.$i18n instanceof VueI18n) {\n        this._i18n.subscribeDataChanging(this)\n        this._subscribing = true\n      }\n    },\n\n    mounted,\n\n    beforeDestroy (): void {\n      if (!this._i18n) { return }\n\n      const self = this\n      this.$nextTick(() => {\n        if (self._subscribing) {\n          self._i18n.unsubscribeDataChanging(self)\n          delete self._subscribing\n        }\n\n        if (self._i18nWatcher) {\n          self._i18nWatcher()\n          self._i18n.destroyVM()\n          delete self._i18nWatcher\n        }\n\n        if (self._localeWatcher) {\n          self._localeWatcher()\n          delete self._localeWatcher\n        }\n      })\n    }\n  }\n}\n"
  },
  {
    "path": "src/path.js",
    "content": "/* @flow */\n\nimport { isObject } from './util'\n\n/**\n *  Path parser\n *  - Inspired:\n *    Vue.js Path parser\n */\n\n// actions\nconst APPEND = 0\nconst PUSH = 1\nconst INC_SUB_PATH_DEPTH = 2\nconst PUSH_SUB_PATH = 3\n\n// states\nconst BEFORE_PATH = 0\nconst IN_PATH = 1\nconst BEFORE_IDENT = 2\nconst IN_IDENT = 3\nconst IN_SUB_PATH = 4\nconst IN_SINGLE_QUOTE = 5\nconst IN_DOUBLE_QUOTE = 6\nconst AFTER_PATH = 7\nconst ERROR = 8\n\nconst pathStateMachine: any = []\n\npathStateMachine[BEFORE_PATH] = {\n  'ws': [BEFORE_PATH],\n  'ident': [IN_IDENT, APPEND],\n  '[': [IN_SUB_PATH],\n  'eof': [AFTER_PATH]\n}\n\npathStateMachine[IN_PATH] = {\n  'ws': [IN_PATH],\n  '.': [BEFORE_IDENT],\n  '[': [IN_SUB_PATH],\n  'eof': [AFTER_PATH]\n}\n\npathStateMachine[BEFORE_IDENT] = {\n  'ws': [BEFORE_IDENT],\n  'ident': [IN_IDENT, APPEND],\n  '0': [IN_IDENT, APPEND],\n  'number': [IN_IDENT, APPEND]\n}\n\npathStateMachine[IN_IDENT] = {\n  'ident': [IN_IDENT, APPEND],\n  '0': [IN_IDENT, APPEND],\n  'number': [IN_IDENT, APPEND],\n  'ws': [IN_PATH, PUSH],\n  '.': [BEFORE_IDENT, PUSH],\n  '[': [IN_SUB_PATH, PUSH],\n  'eof': [AFTER_PATH, PUSH]\n}\n\npathStateMachine[IN_SUB_PATH] = {\n  \"'\": [IN_SINGLE_QUOTE, APPEND],\n  '\"': [IN_DOUBLE_QUOTE, APPEND],\n  '[': [IN_SUB_PATH, INC_SUB_PATH_DEPTH],\n  ']': [IN_PATH, PUSH_SUB_PATH],\n  'eof': ERROR,\n  'else': [IN_SUB_PATH, APPEND]\n}\n\npathStateMachine[IN_SINGLE_QUOTE] = {\n  \"'\": [IN_SUB_PATH, APPEND],\n  'eof': ERROR,\n  'else': [IN_SINGLE_QUOTE, APPEND]\n}\n\npathStateMachine[IN_DOUBLE_QUOTE] = {\n  '\"': [IN_SUB_PATH, APPEND],\n  'eof': ERROR,\n  'else': [IN_DOUBLE_QUOTE, APPEND]\n}\n\n/**\n * Check if an expression is a literal value.\n */\n\nconst literalValueRE: RegExp = /^\\s?(?:true|false|-?[\\d.]+|'[^']*'|\"[^\"]*\")\\s?$/\nfunction isLiteral (exp: string): boolean {\n  return literalValueRE.test(exp)\n}\n\n/**\n * Strip quotes from a string\n */\n\nfunction stripQuotes (str: string): string | boolean {\n  const a: number = str.charCodeAt(0)\n  const b: number = str.charCodeAt(str.length - 1)\n  return a === b && (a === 0x22 || a === 0x27)\n    ? str.slice(1, -1)\n    : str\n}\n\n/**\n * Determine the type of a character in a keypath.\n */\n\nfunction getPathCharType (ch: ?string): string {\n  if (ch === undefined || ch === null) { return 'eof' }\n\n  const code: number = ch.charCodeAt(0)\n\n  switch (code) {\n    case 0x5B: // [\n    case 0x5D: // ]\n    case 0x2E: // .\n    case 0x22: // \"\n    case 0x27: // '\n      return ch\n\n    case 0x5F: // _\n    case 0x24: // $\n    case 0x2D: // -\n      return 'ident'\n\n    case 0x09: // Tab\n    case 0x0A: // Newline\n    case 0x0D: // Return\n    case 0xA0:  // No-break space\n    case 0xFEFF:  // Byte Order Mark\n    case 0x2028:  // Line Separator\n    case 0x2029:  // Paragraph Separator\n      return 'ws'\n  }\n\n  return 'ident'\n}\n\n/**\n * Format a subPath, return its plain form if it is\n * a literal string or number. Otherwise prepend the\n * dynamic indicator (*).\n */\n\nfunction formatSubPath (path: string): boolean | string {\n  const trimmed: string = path.trim()\n  // invalid leading 0\n  if (path.charAt(0) === '0' && isNaN(path)) { return false }\n\n  return isLiteral(trimmed) ? stripQuotes(trimmed) : '*' + trimmed\n}\n\n/**\n * Parse a string path into an array of segments\n */\n\nfunction parse (path: Path): ?Array<string> {\n  const keys: Array<string> = []\n  let index: number = -1\n  let mode: number = BEFORE_PATH\n  let subPathDepth: number = 0\n  let c: ?string\n  let key: any\n  let newChar: any\n  let type: string\n  let transition: number\n  let action: Function\n  let typeMap: any\n  const actions: Array<Function> = []\n\n  actions[PUSH] = function () {\n    if (key !== undefined) {\n      keys.push(key)\n      key = undefined\n    }\n  }\n\n  actions[APPEND] = function () {\n    if (key === undefined) {\n      key = newChar\n    } else {\n      key += newChar\n    }\n  }\n\n  actions[INC_SUB_PATH_DEPTH] = function () {\n    actions[APPEND]()\n    subPathDepth++\n  }\n\n  actions[PUSH_SUB_PATH] = function () {\n    if (subPathDepth > 0) {\n      subPathDepth--\n      mode = IN_SUB_PATH\n      actions[APPEND]()\n    } else {\n      subPathDepth = 0\n      if (key === undefined) { return false }\n      key = formatSubPath(key)\n      if (key === false) {\n        return false\n      } else {\n        actions[PUSH]()\n      }\n    }\n  }\n\n  function maybeUnescapeQuote (): ?boolean {\n    const nextChar: string = path[index + 1]\n    if ((mode === IN_SINGLE_QUOTE && nextChar === \"'\") ||\n      (mode === IN_DOUBLE_QUOTE && nextChar === '\"')) {\n      index++\n      newChar = '\\\\' + nextChar\n      actions[APPEND]()\n      return true\n    }\n  }\n\n  while (mode !== null) {\n    index++\n    c = path[index]\n\n    if (c === '\\\\' && maybeUnescapeQuote()) {\n      continue\n    }\n\n    type = getPathCharType(c)\n    typeMap = pathStateMachine[mode]\n    transition = typeMap[type] || typeMap['else'] || ERROR\n\n    if (transition === ERROR) {\n      return // parse error\n    }\n\n    mode = transition[0]\n    action = actions[transition[1]]\n    if (action) {\n      newChar = transition[2]\n      newChar = newChar === undefined\n        ? c\n        : newChar\n      if (action() === false) {\n        return\n      }\n    }\n\n    if (mode === AFTER_PATH) {\n      return keys\n    }\n  }\n}\n\nexport type PathValue = PathValueObject | PathValueArray | Function | string | number | boolean | null\nexport type PathValueObject = { [key: string]: PathValue }\nexport type PathValueArray = Array<PathValue>\n\nexport default class I18nPath {\n  _cache: Object\n\n  constructor () {\n    this._cache = Object.create(null)\n  }\n\n  /**\n   * External parse that check for a cache hit first\n   */\n  parsePath (path: Path): Array<string> {\n    let hit: ?Array<string> = this._cache[path]\n    if (!hit) {\n      hit = parse(path)\n      if (hit) {\n        this._cache[path] = hit\n      }\n    }\n    return hit || []\n  }\n\n  /**\n   * Get path value from path string\n   */\n  getPathValue (obj: mixed, path: Path): PathValue {\n    if (!isObject(obj)) { return null }\n\n    const paths: Array<string> = this.parsePath(path)\n    if (paths.length === 0) {\n      return null\n    } else {\n      const length: number = paths.length\n      let last: any = obj\n      let i: number = 0\n      while (i < length) {\n        const value: any = last[paths[i]]\n        if (value === undefined || value === null) {\n          return null\n        }\n        last = value\n        i++\n      }\n\n      return last\n    }\n  }\n}\n"
  },
  {
    "path": "src/util.js",
    "content": "/* @flow */\n\n/**\n * constants\n */\n\nexport const numberFormatKeys = [\n  'compactDisplay',\n  'currency',\n  'currencyDisplay',\n  'currencySign',\n  'localeMatcher',\n  'notation',\n  'numberingSystem',\n  'signDisplay',\n  'style',\n  'unit',\n  'unitDisplay',\n  'useGrouping',\n  'minimumIntegerDigits',\n  'minimumFractionDigits',\n  'maximumFractionDigits',\n  'minimumSignificantDigits',\n  'maximumSignificantDigits'\n]\n\nexport const dateTimeFormatKeys = [\n  'dateStyle',\n  'timeStyle',\n  'calendar',\n  'localeMatcher',\n  \"hour12\",\n  \"hourCycle\",\n  \"timeZone\",\n  \"formatMatcher\",\n  'weekday',\n  'era',\n  'year',\n  'month',\n  'day',\n  'hour',\n  'minute',\n  'second',\n  'timeZoneName',\n]\n\n/**\n * utilities\n */\n\nexport function warn (msg: string, err: ?Error): void {\n  if (typeof console !== 'undefined') {\n    console.warn('[vue-i18n] ' + msg)\n    /* istanbul ignore if */\n    if (err) {\n      console.warn(err.stack)\n    }\n  }\n}\n\nexport function error (msg: string, err: ?Error): void {\n  if (typeof console !== 'undefined') {\n    console.error('[vue-i18n] ' + msg)\n    /* istanbul ignore if */\n    if (err) {\n      console.error(err.stack)\n    }\n  }\n}\n\nexport const isArray = Array.isArray\n\nexport function isObject (obj: mixed): boolean %checks {\n  return obj !== null && typeof obj === 'object'\n}\n\nexport function isBoolean (val: mixed): boolean %checks {\n  return typeof val === 'boolean'\n}\n\nexport function isString (val: mixed): boolean %checks {\n  return typeof val === 'string'\n}\n\nconst toString: Function = Object.prototype.toString\nconst OBJECT_STRING: string = '[object Object]'\nexport function isPlainObject (obj: any): boolean {\n  return toString.call(obj) === OBJECT_STRING\n}\n\nexport function isNull (val: mixed): boolean {\n  return val === null || val === undefined\n}\n\nexport function isFunction (val: mixed): boolean %checks {\n  return typeof val === 'function'\n}\n\nexport function parseArgs (...args: Array<mixed>): Object {\n  let locale: ?string = null\n  let params: mixed = null\n  if (args.length === 1) {\n    if (isObject(args[0]) || isArray(args[0])) {\n      params = args[0]\n    } else if (typeof args[0] === 'string') {\n      locale = args[0]\n    }\n  } else if (args.length === 2) {\n    if (typeof args[0] === 'string') {\n      locale = args[0]\n    }\n    /* istanbul ignore if */\n    if (isObject(args[1]) || isArray(args[1])) {\n      params = args[1]\n    }\n  }\n\n  return { locale, params }\n}\n\nexport function looseClone (obj: Object): Object {\n  return JSON.parse(JSON.stringify(obj))\n}\n\nexport function remove (arr: Set<any>, item: any): Set<any> | void {\n  if (arr.delete(item)) {\n    return arr\n  }\n}\n\nexport function arrayFrom (arr: Set<any>): Array<any> {\n  const ret = []\n  arr.forEach(a => ret.push(a))\n  return ret\n}\n\nexport function includes (arr: Array<any>, item: any): boolean {\n  return !!~arr.indexOf(item)\n}\n\nconst hasOwnProperty = Object.prototype.hasOwnProperty\nexport function hasOwn (obj: Object | Array<*>, key: string): boolean {\n  return hasOwnProperty.call(obj, key)\n}\n\nexport function merge (target: Object): Object {\n  const output = Object(target)\n  for (let i = 1; i < arguments.length; i++) {\n    const source = arguments[i]\n    if (source !== undefined && source !== null) {\n      let key\n      for (key in source) {\n        if (hasOwn(source, key)) {\n          if (isObject(source[key])) {\n            output[key] = merge(output[key], source[key])\n          } else {\n            output[key] = source[key]\n          }\n        }\n      }\n    }\n  }\n  return output\n}\n\nexport function looseEqual (a: any, b: any): boolean {\n  if (a === b) { return true }\n  const isObjectA: boolean = isObject(a)\n  const isObjectB: boolean = isObject(b)\n  if (isObjectA && isObjectB) {\n    try {\n      const isArrayA: boolean = isArray(a)\n      const isArrayB: boolean = isArray(b)\n      if (isArrayA && isArrayB) {\n        return a.length === b.length && a.every((e: any, i: number): boolean => {\n          return looseEqual(e, b[i])\n        })\n      } else if (!isArrayA && !isArrayB) {\n        const keysA: Array<string> = Object.keys(a)\n        const keysB: Array<string> = Object.keys(b)\n        return keysA.length === keysB.length && keysA.every((key: string): boolean => {\n          return looseEqual(a[key], b[key])\n        })\n      } else {\n        /* istanbul ignore next */\n        return false\n      }\n    } catch (e) {\n      /* istanbul ignore next */\n      return false\n    }\n  } else if (!isObjectA && !isObjectB) {\n    return String(a) === String(b)\n  } else {\n    return false\n  }\n}\n\n/**\n * Sanitizes html special characters from input strings. For mitigating risk of XSS attacks.\n * @param rawText The raw input from the user that should be escaped.\n */\nfunction escapeHtml(rawText: string): string {\n  return rawText\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\"/g, '&quot;')\n    .replace(/'/g, '&apos;')\n}\n\n/**\n * Escapes html tags and special symbols from all provided params which were returned from parseArgs().params.\n * This method performs an in-place operation on the params object.\n *\n * @param {any} params Parameters as provided from `parseArgs().params`.\n *                     May be either an array of strings or a string->any map.\n *\n * @returns The manipulated `params` object.\n */\nexport function escapeParams(params: any): any {\n  if(params != null) {\n    Object.keys(params).forEach(key => {\n      if(typeof(params[key]) == 'string') {\n        params[key] = escapeHtml(params[key])\n      }\n    })\n  }\n  return params\n}\n"
  },
  {
    "path": "test/.eslintrc.js",
    "content": "module.exports = {\n  env: {\n    browser: true,\n    mocha: true\n  },\n  globals: {\n    isChrome: true,\n    assert: true,\n    sinon: true,\n    Vue: true,\n    VueI18n: true\n  },\n  extends: [\n    \"plugin:vue/recommended\"\n  ]\n}\n"
  },
  {
    "path": "test/e2e/runner.js",
    "content": "'use strict'\nconst path = require('path')\nconst spawn = require('cross-spawn')\nconst httpServer = require('http-server')\nconst server = httpServer.createServer({\n  root: path.resolve(__dirname, '../../')\n})\n\nserver.listen(8080)\n\nlet args = process.argv.slice(2)\nif (args.indexOf('--config') === -1) {\n  args = args.concat(['--config', 'config/nightwatch.conf.js'])\n}\nif (args.indexOf('--env') === -1) {\n  if (process.env.CI) {\n    args = args.concat(['--env', 'headless'])\n  } else {\n    args = args.concat(['--env', 'chrome,headless'])\n  }\n}\nconst i = args.indexOf('--test')\nif (i > -1) {\n  args[i + 1] = 'test/e2e/test/' + args[i + 1]\n}\n\nconst runner = spawn('./node_modules/.bin/nightwatch', args, {\n  stdio: 'inherit'\n})\n\nrunner.on('exit', code => {\n  server.close()\n  process.exit(code)\n})\n\nrunner.on('error', err => {\n  server.close()\n  throw err\n})\n"
  },
  {
    "path": "test/e2e/test/component.js",
    "content": "module.exports = {\n  component: function (browser) {\n    browser\n      .url('http://localhost:8080/examples/component/')\n      .waitForElementVisible('#app', 1000)\n      .assert.containsText('p:nth-child(1)', 'こんにちは、世界')\n      .assert.containsText('div.container p:nth-child(1)', 'Component1 locale messages: こんにちは、component1')\n      .assert.containsText('div.container p:nth-child(2)', 'Fallback global locale messages: おはよう、世界！')\n      .end()\n  }\n}\n"
  },
  {
    "path": "test/e2e/test/datetime.js",
    "content": "module.exports = {\n  number: function (browser) {\n    browser\n      .url('http://localhost:8080/examples/datetime/')\n      .waitForElementVisible('#app', 1000)\n      .assert.containsText('p[data-testid=\"pastDatetime\"]', '過去の日時: 2012/12/20 午後00:00:00')\n      .assert.containsText('p[data-testid=\"pastYear\"]', '過去の年: 12年')\n      .click('select option[value=en-US]')\n      .assert.containsText('p[data-testid=\"pastDatetime\"]', 'past datetime: 12/19/2012, 07:00:00 PM')\n      .assert.containsText('p[data-testid=\"pastYear\"]', 'past year: 12')\n      .end()\n  }\n}\n"
  },
  {
    "path": "test/e2e/test/directive.js",
    "content": "module.exports = {\n  started: function (browser) {\n    browser\n      .url('http://localhost:8080/examples/directive/')\n      .waitForElementVisible('#string-syntax', 1000)\n      .waitForElementVisible('#object-syntax', 1000)\n      .assert.containsText('#string-syntax p:nth-child(1)', 'hi there!')\n      .assert.containsText('#string-syntax p:nth-child(2)', 'hi there!')\n      .assert.containsText('#object-syntax p:nth-child(1)', 'こんにちは、kazupon！')\n      .assert.containsText('#object-syntax p:nth-child(2)', 'hi kazupon!')\n      .end()\n  }\n}\n"
  },
  {
    "path": "test/e2e/test/formatting_html.js",
    "content": "module.exports = {\n  'formatting html': function (browser) {\n    browser\n      .url('http://localhost:8080/examples/formatting/html/')\n      .waitForElementVisible('#app', 1000)\n      .assert.attributeContains('p', 'innerHTML', '')\n      .end()\n  }\n}\n"
  },
  {
    "path": "test/e2e/test/formatting_list.js",
    "content": "module.exports = {\n  'formatting list': function (browser) {\n    browser\n      .url('http://localhost:8080/examples/formatting/list/')\n      .waitForElementVisible('#app', 1000)\n      .assert.containsText('p', 'hello world')\n      .end()\n  }\n}\n"
  },
  {
    "path": "test/e2e/test/formatting_named.js",
    "content": "module.exports = {\n  'formatting name': function (browser) {\n    browser\n      .url('http://localhost:8080/examples/formatting/named/')\n      .waitForElementVisible('#app', 1000)\n      .assert.containsText('p', 'hello world')\n      .end()\n  }\n}\n"
  },
  {
    "path": "test/e2e/test/formatting_rails.js",
    "content": "module.exports = {\n  'formatting rails': function (browser) {\n    browser\n      .url('http://localhost:8080/examples/formatting/rails/')\n      .waitForElementVisible('#app', 1000)\n      .assert.containsText('p', 'hello world')\n      .end()\n  }\n}\n"
  },
  {
    "path": "test/e2e/test/interpolation.js",
    "content": "module.exports = {\n  interpolation: function (browser) {\n    browser\n      .url('http://localhost:8080/examples/interpolation/slots')\n      .waitForElementVisible('#app', 1000)\n      .assert.containsText('label[for=\"tos\"]', 'I accept xxx Term of Service.')\n      .end()\n  }\n}\n"
  },
  {
    "path": "test/e2e/test/number.js",
    "content": "module.exports = {\n  number: function (browser) {\n    browser\n      .url('http://localhost:8080/examples/number/')\n      .waitForElementVisible('#app', 1000)\n      .assert.containsText('p', 'お金: ￥1,000')\n      .click('select option[value=en-US]')\n      .assert.containsText('p', 'Money: $1,000')\n      .end()\n  }\n}\n"
  },
  {
    "path": "test/e2e/test/number_formatting.js",
    "content": "module.exports = {\n  'number_formatting': function (browser) {\n    browser\n      .url('http://localhost:8080/examples/number-formatting/')\n      .waitForElementVisible('#app', 1000)\n      .assert.containsText('p.money', '￥1,000')\n      .click('select option[value=en-US]')\n      .assert.attributeContains('p.money', 'innerHTML', '$1,000<span style=\"vertical-align: super;\">00</span>')\n      .end()\n  }\n}\n"
  },
  {
    "path": "test/e2e/test/started.js",
    "content": "module.exports = {\n  started: function (browser) {\n    browser\n      .url('http://localhost:8080/examples/started/')\n      .waitForElementVisible('p', 1000)\n      .assert.containsText('p', 'こんにちは、世界')\n      .end()\n  }\n}\n"
  },
  {
    "path": "test/helpers/entry.js",
    "content": "import Vue from 'vue'\nimport VueI18n from '../../src/index'\n\nVue.use(VueI18n)\n\nwindow.VueI18n = VueI18n\nwindow.Vue = Vue\n"
  },
  {
    "path": "test/helpers/imports.js",
    "content": "import assert from 'assert'\nimport sinon from 'sinon'\n\nwindow.assert = assert\nwindow.sinon = sinon\n"
  },
  {
    "path": "test/helpers/util.js",
    "content": "const inBrowser = typeof window !== 'undefined'\nconst UA = inBrowser && window.navigator.userAgent.toLowerCase()\nwindow.isChrome = UA && UA.indexOf('chrome') !== -1\n\nfunction getVersion () {\n  const ua = window.navigator.userAgent\n  let tem\n  let M = ua.match(/(phantomjs|opera|chrome|safari|firefox|msie|trident(?=\\/))\\/?\\s*(\\d+)/i) || []\n  if (/trident/i.test(M[1])) {\n    tem = /\\brv[ :]+(\\d+)/g.exec(ua) || []\n    return { name: 'IE', version: parseInt((tem[1] || '-1'), 10) }\n  }\n  if (M[1] === 'Chrome') {\n    tem = ua.match(/\\bOPR|Edge\\/(\\d+)/)\n    if (tem !== null) {\n      return { name: 'Opera', version: parseInt(tem[1], 10) }\n    }\n  }\n  M = M[2]\n    ? [M[1], M[2]]\n    : [window.navigator.appName, window.navigator.appVersion, '-?']\n  if ((tem = ua.match(/version\\/(\\d+)/i)) !== null) {\n    M.splice(1, 1, tem[1])\n  }\n  return {\n    name: M[0],\n    version: parseInt(M[1], 10)\n  }\n}\n\nconst { browser, version } = getVersion()\nwindow.availableIntl = (browser === 'IE' && version >= 11) ||\n  (browser === 'Firefox' && version >= 29) ||\n  (browser === 'Chrome' && version >= 24) ||\n  (browser === 'Safari' && version >= 10)\n"
  },
  {
    "path": "test/unit/basic.test.js",
    "content": "import messages from './fixture/index'\nimport dateTimeFormats from './fixture/datetime'\nimport numberFormats from './fixture/number'\n\ndescribe('basic', () => {\n  let i18n\n  beforeEach(() => {\n    i18n = new VueI18n({\n      locale: 'en',\n      fallbackLocale: 'en',\n      messages,\n      modifiers: {\n        custom: str => str.replace(/[aeiou]/g, 'x')\n      }\n    })\n  })\n\n  describe('i18n#t', () => {\n    describe('en locale', () => {\n      it('should translate an english', () => {\n        assert.strictEqual(i18n.t('message.hello'), messages.en.message.hello)\n      })\n    })\n\n    describe('empty string', () => {\n      it('should support empty string', () => {\n        assert.strictEqual(i18n.t('message.empty'), messages.en.message.empty)\n      })\n    })\n\n    describe('linked translation', () => {\n      it('should translate simple link', () => {\n        assert.strictEqual(i18n.t('message.link'), messages.en.message.hello)\n      })\n\n      it('should translate link at the end of locale', () => {\n        assert.strictEqual(i18n.t('message.linkEnd'), 'This is a linked translation to the world')\n      })\n\n      it('should translate link within a locale', () => {\n        assert.strictEqual(i18n.t('message.linkWithin'), 'Isn\\'t the world we live in great?')\n      })\n\n      it('should translate multiple links within a locale', () => {\n        assert.strictEqual(i18n.t('message.linkMultiple'), 'Hello hoge!, isn\\'t the world great?')\n      })\n\n      it('should translate link with braces ', () => {\n        assert.strictEqual(i18n.t('message.linkBrackets'), 'Hello hoge. Isn\\'t the world great?')\n      })\n\n      it('should translate link with lower-case formatting', () => {\n        assert.strictEqual(i18n.t('message.linkCaseLower'), 'Please provide home address')\n      })\n\n      it('should translate link with upper-case formatting', () => {\n        assert.strictEqual(i18n.t('message.linkCaseUpper'), 'HOME ADDRESS')\n      })\n\n      it('should translate link with the first letter as upper-case', () => {\n        assert.strictEqual(i18n.t('message.linkCaseCapitalize'), 'Home Address')\n      })\n\n      it('should translate link without formatting if modifier is not known.', () => {\n        assert.strictEqual(i18n.t('message.linkCaseUnknown'), 'home Address')\n      })\n\n      it('should render link with custom formatting.', () => {\n        assert.strictEqual(i18n.t('message.linkCaseCustom'), 'hxmx Addrxss')\n      })\n\n      it('should translate link when keys have special characters', () => {\n        assert.strictEqual(i18n.t('message.linkHyphen'), messages.en['hyphen-hello'])\n        assert.strictEqual(i18n.t('message.linkUnderscore'), messages.en.underscore_hello)\n        assert.strictEqual(i18n.t('message.linkColon'), messages.en['colon:hello'])\n        assert.strictEqual(i18n.t('message.linkPipe'), messages.en['pipe|hello'])\n      })\n    })\n\n    describe('ja locale', () => {\n      it('should translate a japanese', () => {\n        assert.strictEqual(i18n.t('message.hello', 'ja'), messages.ja.message.hello)\n      })\n    })\n\n    describe('key argument', () => {\n      describe('not specify', () => {\n        it('should return empty string', () => {\n          assert.strictEqual(i18n.t(), '')\n        })\n      })\n\n      describe('empty string', () => {\n        it('should return empty string', () => {\n          assert.strictEqual(i18n.t(''), '')\n        })\n      })\n\n      describe('not regist key', () => {\n        it('should return key string', () => {\n          assert.strictEqual(i18n.t('foo.bar'), 'foo.bar')\n        })\n      })\n\n      describe('sentence fragment', () => {\n        it('should translate fragment', () => {\n          assert.strictEqual(i18n.t('hello world'), 'Hello World')\n        })\n\n        it('should return replaced string if available', () => {\n          assert.strictEqual(\n            i18n.t('Hello {0}', ['kazupon']),\n            'Hello kazupon'\n          )\n        })\n\n        it('should return key if unavailable', () => {\n          assert.strictEqual(i18n.t('Hello'), 'Hello')\n        })\n      })\n\n      describe('object keypath', () => {\n        it('should be translated', () => {\n          assert.strictEqual(i18n.t('message.format'), messages.en.message.format)\n        })\n\n        it('should be translated if keypath contains spaces', () => {\n          assert.strictEqual(\n            i18n.t('message.Hello {0}', ['kazupon']),\n            'Hello kazupon'\n          )\n        })\n      })\n\n      describe('array keypath', () => {\n        describe('basic', () => {\n          it('should be translated', () => {\n            assert.strictEqual(i18n.t('errors[0]'), messages.en.errors[0])\n          })\n        })\n\n        describe('object attribute', () => {\n          it('should be translated', () => {\n            assert.strictEqual(i18n.t('errors[1].internal1'), messages.en.errors[1].internal1)\n          })\n        })\n\n        describe('object', () => {\n          it('should be translated', () => {\n            assert.strictEqual(i18n.t('errors[1]'), messages.en.errors[1])\n          })\n        })\n\n        describe('array', () => {\n          it('should be translated', () => {\n            assert.strictEqual(i18n.t('errors[2][0]'), messages.en.errors[2][0])\n          })\n        })\n      })\n    })\n\n    describe('format arguments', () => {\n      describe('named', () => {\n        it('should return replaced string', () => {\n          assert.strictEqual(\n            i18n.t('message.format.named', { name: 'kazupon' }),\n            'Hello kazupon, how are you?'\n          )\n        })\n      })\n\n      describe('list', () => {\n        it('should return replaced string', () => {\n          assert.strictEqual(\n            i18n.t('message.format.list', ['kazupon']),\n            'Hello kazupon, how are you?'\n          )\n        })\n      })\n    })\n\n    describe('format arguments of fallback', () => {\n      describe('if activated', () => {\n        describe('named', () => {\n          it('should return replaced string', () => {\n            i18n = new VueI18n({\n              locale: 'en',\n              fallbackLocale: 'en',\n              formatFallbackMessages: true\n            })\n\n            assert.strictEqual(\n              i18n.t('Hello {name}, how are you?', { name: 'kazupon' }),\n              'Hello kazupon, how are you?'\n            )\n          })\n        })\n\n        describe('list', () => {\n          it('should return replaced string', () => {\n            i18n = new VueI18n({\n              locale: 'en',\n              fallbackLocale: 'en',\n              formatFallbackMessages: true\n            })\n\n            assert.strictEqual(\n              i18n.t('Hello {0}, how are you?', ['kazupon']),\n              'Hello kazupon, how are you?'\n            )\n          })\n        })\n      })\n\n      describe('if not activated', () => {\n        describe('named', () => {\n          it('should not return replaced string', () => {\n            assert.strictEqual(\n              i18n.t('Hello {name}, how are you?', { name: 'kazupon' }),\n              'Hello {name}, how are you?'\n            )\n          })\n        })\n\n        describe('list', () => {\n          it('should not return replaced string', () => {\n            assert.strictEqual(\n              i18n.t('Hello {0}, how are you?', ['kazupon']),\n              'Hello {0}, how are you?'\n            )\n          })\n        })\n      })\n    })\n\n    describe('locale argument', () => {\n      it('should return empty string', () => {\n        assert.strictEqual(i18n.t('message.hello', 'ja'), messages.ja.message.hello)\n      })\n    })\n\n    describe('format & locale arguments', () => {\n      it('should return replaced string', () => {\n        assert.strictEqual(\n          i18n.t('message.format.list', 'ja', ['kazupon']),\n          'こんにちは kazupon, ごきげんいかが？'\n        )\n      })\n    })\n\n    describe('fallback', () => {\n      it('should return fallback string', () => {\n        assert.strictEqual(\n          i18n.t('message.fallback', 'ja'),\n          messages.en.message.fallback\n        )\n      })\n    })\n  })\n\n  describe('i18n#tc', () => {\n    describe('default choice', () => {\n      it('should be choice singluar', () => {\n        assert.strictEqual(i18n.tc('plurals.apple'), 'one apple')\n      })\n    })\n\n    describe('split plural with zero choice', () => {\n      it('should allow a zero choice, a one choice and a plural choice', () => {\n        const count = 10\n        assert.strictEqual(i18n.tc('plurals.apple', 0), 'no apples')\n        assert.strictEqual(i18n.tc('plurals.apple', 1), 'one apple')\n        assert.strictEqual(i18n.tc('plurals.apple', count, { count }), '10 apples')\n      })\n    })\n\n    describe('implicit choice exposing', () => {\n      describe('en locale', () => {\n        it('should expose \"count\" implicitly to locale message', () => {\n          assert.strictEqual(i18n.tc('plurals.apple', 10), '10 apples')\n        })\n\n        it('should not expose if given explicitly', () => {\n          const explicitArgs = { 'count': 'Many' }\n          assert.strictEqual(i18n.tc('plurals.apple', 10, explicitArgs), 'Many apples')\n        })\n      })\n\n      describe('ja locale', () => {\n        it('should expose \"count\" and \"n\" implicitly to locale message', () => {\n          assert.strictEqual(i18n.tc('plurals.implicitPluralCount', 10, 'ja'), 'count:10, n:10')\n        })\n\n        it('should not expose if given explicitly', () => {\n          const explicitArgs = { 'count': 'たくさん', 'n': '大量' }\n          assert.strictEqual(i18n.tc('plurals.implicitPluralCount', 10, 'ja', explicitArgs), 'count:たくさん, n:大量')\n        })\n      })\n    })\n\n    describe('en locale', () => {\n      it('should translate an english', () => {\n        assert.strictEqual(i18n.tc('plurals.car', 1), 'car')\n      })\n    })\n\n    describe('multi plural check', () => {\n      it('should fetch pluralized string', () => {\n        assert.strictEqual(i18n.tc('plurals.car', 2), 'cars')\n      })\n    })\n\n    describe('ja locale', () => {\n      it('should translate a japanese', () => {\n        assert.strictEqual(i18n.tc('plurals.car', 1, 'ja'), 'ザ・ワールド')\n      })\n    })\n\n    describe('key argument', () => {\n      describe('not specify', () => {\n        it('should return empty string', () => {\n          assert.strictEqual(i18n.tc(), '')\n        })\n      })\n\n      describe('empty string', () => {\n        it('should return empty string', () => {\n          assert.strictEqual(i18n.tc(''), '')\n        })\n      })\n\n      describe('not regist key', () => {\n        it('should return key string', () => {\n          assert.strictEqual(i18n.tc('foo.bar'), 'foo.bar')\n        })\n      })\n\n      describe('sentence fragment', () => {\n        it('should translate fragment', () => {\n          assert.strictEqual(i18n.tc('hello world'), 'Hello World')\n        })\n\n        it('should return replaced string if available', () => {\n          assert.strictEqual(\n            i18n.tc('Hello {0}', 1, ['kazupon']),\n            'Hello kazupon'\n          )\n        })\n\n        it('should return key if unavailable', () => {\n          assert.strictEqual(i18n.tc('Hello'), 'Hello')\n        })\n      })\n    })\n\n    describe('format arguments', () => {\n      describe('named', () => {\n        it('should return replaced string', () => {\n          assert.strictEqual(\n            i18n.tc('plurals.format.named', 1, { name: 'kazupon' }),\n            'Hello kazupon, how are you?'\n          )\n        })\n      })\n\n      describe('list', () => {\n        it('should return replaced string', () => {\n          assert.strictEqual(\n            i18n.tc('plurals.format.list', 1, ['kazupon']),\n            'Hello kazupon, how are you?'\n          )\n        })\n      })\n    })\n\n    describe('locale argument', () => {\n      it('should return empty string', () => {\n        assert.strictEqual(i18n.tc('plurals.car', 1, 'ja'), 'ザ・ワールド')\n      })\n    })\n\n    describe('format & locale arguments', () => {\n      it('should return replaced string', () => {\n        assert.strictEqual(\n          i18n.tc('plurals.format.list', 1, 'ja', ['kazupon']),\n          'こんにちは kazupon, ごきげんいかが？'\n        )\n      })\n    })\n\n    describe('fallback', () => {\n      it('should return fallback string', () => {\n        assert.strictEqual(\n          i18n.tc('plurals.fallback', 1, 'ja'),\n          'これはフォールバック'\n        )\n      })\n    })\n  })\n\n  describe('i18n#te', () => {\n    describe('existing key', () => {\n      it('should return true', () => {\n        assert(i18n.te('message.hello') === true)\n      })\n\n      it('should return true with locale', () => {\n        assert(i18n.te('message.hello', 'ja') === true)\n      })\n    })\n\n    describe('not existing key', () => {\n      it('should return false', () => {\n        assert(i18n.te('message.hallo') === false)\n      })\n\n      it('should return false with locale', () => {\n        assert(i18n.te('message.hello', 'xx') === false)\n      })\n    })\n  })\n\n  describe('$t', () => {\n    describe('en locale', () => {\n      it('should translate an english', () => {\n        const vm = new Vue({ i18n })\n        assert.strictEqual(vm.$t('message.hello'), messages.en.message.hello)\n      })\n    })\n\n    describe('ja locale', () => {\n      it('should translate a japanese', () => {\n        const vm = new Vue({ i18n })\n        assert.strictEqual(vm.$t('message.hello', 'ja'), messages.ja.message.hello)\n      })\n    })\n\n    describe('key argument', () => {\n      describe('not specify', () => {\n        it('should return empty string', () => {\n          const vm = new Vue({ i18n })\n          assert.strictEqual(vm.$t(), '')\n        })\n      })\n\n      describe('empty string', () => {\n        it('should return empty string', () => {\n          const vm = new Vue({ i18n })\n          assert.strictEqual(vm.$t(''), '')\n        })\n      })\n\n      describe('not regist key', () => {\n        it('should return key string', () => {\n          const vm = new Vue({ i18n })\n          assert.strictEqual(vm.$t('foo.bar'), 'foo.bar')\n        })\n      })\n\n      describe('sentence fragment', () => {\n        it('should translate fragment', () => {\n          const vm = new Vue({ i18n })\n          assert.strictEqual(vm.$t('hello world'), 'Hello World')\n        })\n\n        it('should return replaced string if available', () => {\n          const vm = new Vue({ i18n })\n          assert.strictEqual(\n            vm.$t('Hello {0}', ['kazupon']),\n            'Hello kazupon'\n          )\n        })\n\n        it('should return key if unavailable', () => {\n          const vm = new Vue({ i18n })\n          assert.strictEqual(vm.$t('Hello'), 'Hello')\n        })\n      })\n    })\n\n    describe('format arguments', () => {\n      describe('named', () => {\n        it('should return replaced string', () => {\n          const vm = new Vue({ i18n })\n          assert.strictEqual(\n            vm.$t('message.format.named', { name: 'kazupon' }),\n            'Hello kazupon, how are you?'\n          )\n        })\n      })\n\n      describe('list', () => {\n        it('should return replaced string', () => {\n          const vm = new Vue({ i18n })\n          assert.strictEqual(\n            vm.$t('message.format.list', ['kazupon']),\n            'Hello kazupon, how are you?'\n          )\n        })\n      })\n    })\n\n    describe('locale argument', () => {\n      it('should return empty string', () => {\n        const vm = new Vue({ i18n })\n        assert.strictEqual(vm.$t('message.hello', 'ja'), messages.ja.message.hello)\n      })\n    })\n\n    describe('format & locale arguments', () => {\n      it('should return replaced string', () => {\n        const vm = new Vue({ i18n })\n        assert.strictEqual(\n          vm.$t('message.format.list', 'ja', ['kazupon']),\n          'こんにちは kazupon, ごきげんいかが？'\n        )\n      })\n    })\n\n    describe('fallback', () => {\n      it('should return fallback string', () => {\n        const vm = new Vue({ i18n })\n        assert.strictEqual(\n          vm.$t('message.fallback', 'ja'),\n          messages.en.message.fallback\n        )\n      })\n    })\n  })\n\n  describe('$tc', () => {\n    describe('en locale', () => {\n      it('should translate plural english', () => {\n        const vm = new Vue({ i18n })\n        assert.strictEqual(vm.$tc('plurals.car', 1), 'car')\n      })\n    })\n\n    describe('multi plural check', () => {\n      it('should fetch pluralized string', () => {\n        const vm = new Vue({ i18n })\n        assert.strictEqual(vm.$tc('plurals.car', 2), 'cars')\n      })\n    })\n\n    describe('key argument', () => {\n      describe('not specify', () => {\n        it('should return empty string', () => {\n          const vm = new Vue({ i18n })\n          assert.strictEqual(vm.$tc(), '')\n        })\n      })\n\n      describe('empty string', () => {\n        it('should return empty string', () => {\n          const vm = new Vue({ i18n })\n          assert.strictEqual(vm.$tc(''), '')\n        })\n      })\n\n      describe('not regist key', () => {\n        it('should return key string', () => {\n          const vm = new Vue({ i18n })\n          assert.strictEqual(vm.$tc('foo.bar'), 'foo.bar')\n        })\n      })\n\n      describe('sentence fragment', () => {\n        it('should translate fragment', () => {\n          const vm = new Vue({ i18n })\n          assert.strictEqual(vm.$tc('hello world'), 'Hello World')\n        })\n\n        it('should return replaced string if available', () => {\n          const vm = new Vue({ i18n })\n          assert.strictEqual(\n            vm.$tc('Hello {0}', 1, ['kazupon']),\n            'Hello kazupon'\n          )\n        })\n\n        it('should return key if unavailable', () => {\n          const vm = new Vue({ i18n })\n          assert.strictEqual(vm.$tc('Hello'), 'Hello')\n        })\n      })\n    })\n\n    describe('format arguments', () => {\n      describe('named', () => {\n        it('should return replaced string', () => {\n          const vm = new Vue({ i18n })\n          assert.strictEqual(\n            vm.$tc('plurals.format.named', 1, { name: 'kazupon' }),\n            'Hello kazupon, how are you?'\n          )\n        })\n      })\n\n      describe('list', () => {\n        it('should return replaced string', () => {\n          const vm = new Vue({ i18n })\n          assert.strictEqual(\n            vm.$tc('plurals.format.list', 1, ['kazupon']),\n            'Hello kazupon, how are you?'\n          )\n        })\n      })\n    })\n\n    describe('locale argument', () => {\n      it('should return empty string', () => {\n        const vm = new Vue({ i18n })\n        assert.strictEqual(vm.$tc('plurals.car', 1, 'ja'), 'ザ・ワールド')\n      })\n    })\n\n    describe('format & locale arguments', () => {\n      it('should return replaced string', () => {\n        const vm = new Vue({ i18n })\n        assert.strictEqual(\n          vm.$tc('plurals.format.list', 1, 'ja', ['kazupon']),\n          'こんにちは kazupon, ごきげんいかが？'\n        )\n      })\n    })\n\n    describe('fallback', () => {\n      it('should return fallback string', () => {\n        const vm = new Vue({ i18n })\n        assert.strictEqual(\n          vm.$tc('plurals.fallback', 2, 'ja'),\n          'ザ・ワールド'\n        )\n      })\n    })\n  })\n\n  describe('$te', () => {\n    describe('existing key', () => {\n      it('should return true', () => {\n        const vm = new Vue({ i18n })\n        assert(vm.$te('message.hello') === true)\n      })\n\n      it('should return true with locale', () => {\n        const vm = new Vue({ i18n })\n        assert(vm.$te('message.hello', 'ja') === true)\n      })\n    })\n\n    describe('not existing key', () => {\n      it('should return false', () => {\n        const vm = new Vue({ i18n })\n        assert(vm.$te('message.hallo') === false)\n      })\n\n      it('should return false with locale', () => {\n        const vm = new Vue({ i18n })\n        assert(vm.$te('message.hello', 'xx') === false)\n      })\n    })\n  })\n\n  describe('i18n#locale', () => {\n    let el\n    beforeEach(() => {\n      el = document.createElement('div')\n      document.body.appendChild(el)\n    })\n\n    it('should be reactivity translate', done => {\n      const vm = new Vue({\n        el, i18n,\n        render (h) {\n          return h('p', {}, [this.$t('message.hello')])\n        }\n      })\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$el.textContent, messages.en.message.hello)\n        i18n.locale = 'ja' // set japanese\n      }).then(() => {\n        assert.strictEqual(vm.$el.textContent, messages.ja.message.hello)\n      }).then(done)\n    })\n  })\n\n  describe('i18n#fallbackLocale', () => {\n    let el\n    beforeEach(() => {\n      el = document.createElement('div')\n      document.body.appendChild(el)\n    })\n\n    it('should be reactivity translate', done => {\n      const vm = new Vue({\n        el, i18n,\n        render (h) {\n          return h('p', {}, [this.$t('message.fallback1')])\n        }\n      })\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$el.textContent, 'message.fallback1')\n        i18n.fallbackLocale = 'ja' // set fallback locale\n      }).then(() => {\n        assert.strictEqual(vm.$el.textContent, messages.ja.message.fallback1)\n      }).then(done)\n    })\n  })\n\n  describe('i18n#availableLocales', () => {\n    it('should return locales defined in messages in lexical order', () => {\n      assert.deepStrictEqual(i18n.availableLocales, ['en', 'ja'])\n    })\n  })\n\n  let desc = VueI18n.availabilities.dateTimeFormat ? describe : describe.skip\n  desc('i18n#d', () => {\n    let dt\n    beforeEach(() => {\n      i18n = new VueI18n({\n        locale: 'en-US',\n        fallbackLocale: 'ja-JP',\n        dateTimeFormats\n      })\n      dt = new Date(Date.UTC(2012, 11, 20, 3, 0, 0))\n    })\n\n    describe('arguments nothing', () => {\n      it('should be formatted', () => {\n        assert.strictEqual(i18n.d(dt), '12/20/2012')\n      })\n    })\n\n    describe('number value', () => {\n      it('should be formatted', () => {\n        assert.strictEqual(i18n.d(dt.getTime()), '12/20/2012')\n      })\n    })\n\n    describe('key argument', () => {\n      // NOTE: avoid webkit(phatomjs/safari) & Intl polyfill wired localization...\n      isChrome && it('should be formatted', () => {\n        assert.strictEqual(i18n.d(dt, 'short'), '12/19/2012, 10:00 PM')\n      })\n    })\n\n    describe('locale argument', () => {\n      describe('with second argument', () => {\n        // NOTE: avoid webkit(phatomjs/safari) & Intl polyfill wired localization...\n        isChrome && it('should be formatted', () => {\n          assert.strictEqual(i18n.d(dt, 'short', 'ja-JP'), '2012/12/20 12:00')\n        })\n      })\n\n      describe('with object argument', () => {\n        // NOTE: avoid webkit(phatomjs/safari) & Intl polyfill wired localization...\n        isChrome && it('should be formatted', () => {\n          assert.strictEqual(i18n.d(dt, { key: 'short', locale: 'ja-JP' }), '2012/12/20 12:00')\n        })\n      })\n    })\n\n    describe('fallback', () => {\n      // NOTE: avoid webkit(phatomjs/safari) & Intl polyfill wired localization...\n      isChrome && it('should be formatted', () => {\n        assert.strictEqual(i18n.d(dt, 'long'), '2012/12/20 12:00:00')\n      })\n    })\n  })\n\n  desc = VueI18n.availabilities.numberFormat ? describe : describe.skip\n  desc('i18n#n', () => {\n    let money\n    beforeEach(() => {\n      i18n = new VueI18n({\n        locale: 'en-US',\n        fallbackLocale: 'ja-JP',\n        numberFormats\n      })\n      money = 10100\n    })\n\n    describe('arguments nothing', () => {\n      it('should be formatted', () => {\n        assert.strictEqual(i18n.n(money), '10,100')\n      })\n    })\n\n    describe('key argument', () => {\n      it('should be formatted', () => {\n        assert.strictEqual(i18n.n(money, 'currency'), '$10,100.00')\n      })\n    })\n\n    describe('locale argument', () => {\n      describe('with second argument', () => {\n        it('should be formatted', () => {\n          assert.strictEqual(i18n.n(money, 'currency', 'ja-JP'), '￥10,100')\n        })\n      })\n\n      describe('with object argument', () => {\n        it('should be formatted', () => {\n          assert.strictEqual(i18n.n(money, { key: 'currency', locale: 'ja-JP' }), '￥10,100')\n        })\n      })\n    })\n\n    describe('explicit options argument', () => {\n      describe('without key', () => {\n        it('should be formatted', () => {\n          assert.strictEqual(i18n.n(money, { style: 'currency', currency: 'JPY' }), '¥10,100')\n        })\n\n        it('should respect other number options', () => {\n          const options = { style: 'currency', currency: 'EUR', currencyDisplay: 'symbol' }\n          assert.strictEqual(i18n.n(money, options), '€10,100.00')\n        })\n      })\n\n      describe('with key', () => {\n        it('should be formatted', () => {\n          assert.strictEqual(i18n.n(money, { key: 'currency', currency: 'JPY' }), '¥10,100')\n        })\n\n        it('should respect other number options', () => {\n          const options = { key: 'currency', currency: 'EUR', currencyDisplay: 'symbol' }\n          assert.strictEqual(i18n.n(money, options), '€10,100.00')\n        })\n      })\n    })\n\n    describe('fallback', () => {\n      it('should be formatted', () => {\n        assert.strictEqual(i18n.n(0.9, 'percent'), '90%')\n      })\n    })\n  })\n})\n"
  },
  {
    "path": "test/unit/component.test.js",
    "content": "import dateTimeFormats from './fixture/datetime'\nimport numberFormats from './fixture/number'\n\ndescribe('component translation', () => {\n  let vm, i18n\n  const dt = new Date(Date.UTC(2012, 11, 20, 3, 0, 0))\n  const money = 101\n  const messages = {\n    'en-US': {\n      who: 'root',\n      fallback: 'fallback'\n    },\n    'ja-JP': {\n      who: 'ルート',\n      fallback: 'フォールバック'\n    }\n  }\n\n  beforeEach(done => {\n    i18n = new VueI18n({\n      locale: 'ja-JP',\n      messages,\n      dateTimeFormats,\n      numberFormats\n    })\n\n    const el = document.createElement('div')\n    vm = new Vue({\n      i18n,\n      components: {\n        child1: { // translation with component\n          i18n: {\n            locale: 'en-US',\n            sync: false,\n            messages: {\n              'en-US': { who: 'child1' },\n              'ja-JP': { who: '子1' }\n            },\n            sharedMessages: { // shared messages for child1 component\n              'en-US': { foo: { bar: 'bar' } },\n              'ja-JP': { foo: { bar: 'バー' } }\n            }\n          },\n          components: {\n            'sub-child1': { // translation with root\n              render (h) {\n                return h('div', {}, [\n                  h('p', { ref: 'who' }, [this.$t('who')])\n                ])\n              }\n            }\n          },\n          render (h) {\n            return h('div', {}, [\n              h('p', { ref: 'who' }, [this.$t('who')]),\n              h('p', { ref: 'fallback' }, [this.$t('fallback')]),\n              h('p', { ref: 'datetime' }, [this.$d(dt, 'short')]),\n              h('p', { ref: 'number' }, [this.$n(money, 'currency')]),\n              h('p', { ref: 'shared' }, [this.$t('foo.bar')]),\n              h('sub-child1', { ref: 'sub-child1' })\n            ])\n          }\n        },\n        child2: {\n          components: {\n            'sub-child2': {\n              i18n: {\n                messages: {\n                  'en-US': { who: 'sub-child2' },\n                  'ja-JP': { who: 'サブの子2' }\n                }\n              },\n              render (h) {\n                return h('div', {}, [\n                  h('p', { ref: 'who' }, [this.$t('who')])\n                ])\n              }\n            }\n          },\n          render (h) {\n            return h('div', {}, [\n              h('p', { ref: 'who' }, [this.$t('who')]),\n              h('sub-child2', { ref: 'sub-child2' })\n            ])\n          }\n        }\n      },\n      render (h) {\n        return h('div', {}, [\n          h('p', { ref: 'who' }, [this.$t('who')]),\n          h('child1', { ref: 'child1' }),\n          h('child2', { ref: 'child2' })\n        ])\n      }\n    }).$mount(el)\n    vm.$nextTick(done)\n  })\n\n  it('should be translated', done => {\n    const root = vm.$refs.who\n    const child1 = vm.$refs.child1.$refs.who\n    const child1Fallback = vm.$refs.child1.$refs.fallback\n    const child1DateTime = vm.$refs.child1.$refs.datetime\n    const child1Number = vm.$refs.child1.$refs.number\n    const child1Shared = vm.$refs.child1.$refs.shared\n    const child2 = vm.$refs.child2.$refs.who\n    const subChild1 = vm.$refs.child1.$refs['sub-child1'].$refs.who\n    const subChild2 = vm.$refs.child2.$refs['sub-child2'].$refs.who\n    assert.strictEqual(root.textContent, 'ルート')\n    assert.strictEqual(child1.textContent, 'child1')\n    assert.strictEqual(child1Fallback.textContent, 'フォールバック')\n\n    // NOTE: avoid webkit(phatomjs/safari) & Intl polyfill wired localization...\n    isChrome && assert.strictEqual(child1DateTime.textContent, '12/19/2012, 10:00 PM')\n    isChrome && assert.strictEqual(child1Number.textContent, '$101.00')\n    assert.strictEqual(child1Shared.textContent, 'bar')\n\n    assert.strictEqual(child2.textContent, 'ルート')\n    assert.strictEqual(subChild1.textContent, 'ルート')\n    assert.strictEqual(subChild2.textContent, 'サブの子2')\n\n    // change locale\n    i18n.locale = 'en-US'\n    vm.$refs.child1.$i18n.locale = 'ja-JP'\n    Vue.nextTick().then(() => {\n      assert.strictEqual(root.textContent, 'root')\n      assert.strictEqual(child1.textContent, '子1')\n      assert.strictEqual(child1Fallback.textContent, 'fallback')\n\n      // NOTE: avoid webkit(phatomjs/safari) & Intl polyfill wired localization...\n      isChrome && assert.strictEqual(child1DateTime.textContent, '2012/12/20 12:00')\n      isChrome && assert.strictEqual(child1Number.textContent, '￥101')\n      assert.strictEqual(child2.textContent, 'root')\n      assert.strictEqual(subChild1.textContent, 'root')\n      assert.strictEqual(subChild2.textContent, 'sub-child2')\n\n      vm.$destroy()\n    }).then(done)\n  })\n\n  it('fallbackRootWithEmptyString default to be true', done => {\n    const el = document.createElement('div')\n    let vm = new Vue({\n      i18n,\n      components: {\n        child: { // translation with component\n          i18n: {\n            locale: 'en-US',\n            sync: false,\n            messages: {\n              'en-US': {\n                who: 'child'\n              },\n              'ja-JP': {\n                who: '子',\n              }\n            },\n          },\n          components: {\n            'sub-child': { // translation with root\n              i18n: {\n                locale: 'ja-JP',\n                sync: false,\n                messages: {\n                  'en-US': {\n                    who: 'sub-child'\n                  },\n                  'ja-JP': {\n                    who: ''\n                  }\n                },\n                sharedMessages: { // shared messages for child1 component\n                  'en-US': { foo: { bar: 'bar' } },\n                  'ja-JP': { foo: { bar: 'バー' } }\n                }\n              },\n              render (h) {\n                return h('div', {}, [\n                  h('p', { ref: 'who' }, [this.$t('who')])\n                ])\n              }\n            }\n          },\n          render (h) {\n            return h('div', {}, [\n              h('p', { ref: 'who' }, [this.$t('who')]),\n              h('sub-child', { ref: 'sub-child' })\n            ])\n          }\n        },\n      },\n      render (h) {\n        return h('div', {}, [\n          h('p', { ref: 'who' }, [this.$t('who')]),\n          h('child', { ref: 'child' }),\n        ])\n      }\n    }).$mount(el)\n    Vue.nextTick().then(() => {\n      assert.strictEqual(vm.$refs.child.$refs['sub-child'].$refs.who.textContent, 'ルート')\n    }).then(done)\n  })\n\n  it('fallbackRootWithEmptyString should work when set to false', done => {\n    const el = document.createElement('div')\n    let vm = new Vue({\n      i18n,\n      components: {\n        child: { // translation with component\n          i18n: {\n            locale: 'en-US',\n            sync: false,\n            messages: {\n              'en-US': {\n                who: 'child'\n              },\n              'ja-JP': {\n                who: '子',\n              }\n            },\n          },\n          components: {\n            'sub-child': { // translation with root\n              i18n: {\n                locale: 'ja-JP',\n                sync: false,\n                fallbackRootWithEmptyString: false,\n                messages: {\n                  'en-US': {\n                    who: 'sub-child'\n                  },\n                  'ja-JP': {\n                    who: ''\n                  }\n                },\n                sharedMessages: { // shared messages for child1 component\n                  'en-US': { foo: { bar: 'bar' } },\n                  'ja-JP': { foo: { bar: 'バー' } }\n                }\n              },\n              render (h) {\n                return h('div', {}, [\n                  h('p', { ref: 'who' }, [this.$t('who')])\n                ])\n              }\n            }\n          },\n          render (h) {\n            return h('div', {}, [\n              h('p', { ref: 'who' }, [this.$t('who')]),\n              h('sub-child', { ref: 'sub-child' })\n            ])\n          }\n        },\n      },\n      render (h) {\n        return h('div', {}, [\n          h('p', { ref: 'who' }, [this.$t('who')]),\n          h('child', { ref: 'child' }),\n        ])\n      }\n    }).$mount(el)\n    Vue.nextTick().then(() => {\n      assert.strictEqual(vm.$refs.child.$refs['sub-child'].$refs.who.textContent, '')\n    }).then(done)\n  })\n})\n"
  },
  {
    "path": "test/unit/custom_blocks.test.js",
    "content": "describe('custom blocks', () => {\n  let i18n\n  beforeEach(() => {\n    i18n = new VueI18n({\n      locale: 'ja',\n      messages: {\n        en: { who: 'root' },\n        ja: { who: 'ルート' }\n      }\n    })\n  })\n\n  describe('json string', () => {\n    it('should be translated', done => {\n      const el = document.createElement('div')\n      const vm = new Vue({\n        i18n,\n        components: {\n          child: {\n            __i18n: [JSON.stringify({\n              en: { who: 'child' },\n              ja: { who: '子' }\n            })],\n            render (h) {\n              return h('div', {}, [\n                h('p', { ref: 'who' }, [this.$t('who')])\n              ])\n            }\n          }\n        },\n        render (h) {\n          return h('div', {}, [h('child', { ref: 'child' })])\n        }\n      }).$mount(el)\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$refs.child.$refs.who.textContent, '子')\n        i18n.locale = 'en'\n      }).then(() => {\n        assert.strictEqual(vm.$refs.child.$refs.who.textContent, 'child')\n      }).then(done)\n    })\n  })\n\n  describe('invalid json string', () => {\n    it('should be fallbacked translation', done => {\n      const spy = sinon.spy(console, 'warn')\n      const el = document.createElement('div')\n      const vm = new Vue({\n        i18n,\n        components: {\n          child: {\n            __i18n: 'foo',\n            render (h) {\n              return h('div', {}, [\n                h('p', { ref: 'who' }, [this.$t('who')])\n              ])\n            }\n          }\n        },\n        render (h) {\n          return h('div', {}, [h('child', { ref: 'child' })])\n        }\n      }).$mount(el)\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$refs.child.$refs.who.textContent, 'ルート')\n        i18n.locale = 'en'\n      }).then(() => {\n        assert.strictEqual(vm.$refs.child.$refs.who.textContent, 'root')\n        spy.restore()\n      }).then(done)\n    })\n  })\n\n  describe('sharedMessages option', () => {\n    it('should be translated', done => {\n      const el = document.createElement('div')\n      const vm = new Vue({\n        i18n,\n        components: {\n          child: {\n            __i18n: [JSON.stringify({\n              en: { who: 'child' },\n              ja: { who: '子' }\n            })],\n            i18n: {\n              sharedMessages: {\n                en: { foo: 'foo' },\n                ja: { foo: 'フー' }\n              }\n            },\n            render (h) {\n              return h('div', {}, [\n                h('p', { ref: 'foo' }, [this.$t('foo')])\n              ])\n            }\n          }\n        },\n        render (h) {\n          return h('div', {}, [h('child', { ref: 'child' })])\n        }\n      }).$mount(el)\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$refs.child.$refs.foo.textContent, 'フー')\n        i18n.locale = 'en'\n      }).then(() => {\n        assert.strictEqual(vm.$refs.child.$refs.foo.textContent, 'foo')\n      }).then(done)\n    })\n  })\n\n  describe('bridge mode', () => {\n    it('should be translated', done => {\n      const el = document.createElement('div')\n      const vm = new Vue({\n        i18n,\n        components: {\n          child: {\n            __i18nBridge: [JSON.stringify({\n              en: { who: 'child' },\n              ja: { who: '子' }\n            })],\n            render (h) {\n              return h('div', {}, [\n                h('p', { ref: 'who' }, [this.$t('who')])\n              ])\n            }\n          }\n        },\n        render (h) {\n          return h('div', {}, [h('child', { ref: 'child' })])\n        }\n      }).$mount(el)\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$refs.child.$refs.who.textContent, '子')\n        i18n.locale = 'en'\n      }).then(() => {\n        assert.strictEqual(vm.$refs.child.$refs.who.textContent, 'child')\n      }).then(done)\n    })\n  })\n})\n"
  },
  {
    "path": "test/unit/datetime.test.js",
    "content": "import dateTimeFormats from './fixture/datetime'\n\nconst desc = VueI18n.availabilities.dateTimeFormat ? describe : describe.skip\ndesc('datetime format', () => {\n  describe('dateTimeFormats', () => {\n    it('should be worked', done => {\n      const i18n = new VueI18n({\n        locale: 'en-US',\n        dateTimeFormats\n      })\n      Vue.nextTick().then(() => {\n        assert.deepEqual(dateTimeFormats, i18n.dateTimeFormats)\n      }).then(done)\n    })\n  })\n\n  describe('getDateTimeFormat / setDateTimeFormat', () => {\n    it('should be worked', done => {\n      const i18n = new VueI18n({\n        locale: 'en-US',\n        dateTimeFormats\n      })\n      const el = document.createElement('div')\n      document.body.appendChild(el)\n\n      const dt = new Date(Date.UTC(2012, 11, 20, 3, 0, 0))\n      const vm = new Vue({\n        i18n,\n        render (h) {\n          return h('p', { ref: 'text' }, [this.$d(dt, 'short')])\n        }\n      }).$mount(el)\n\n      const { text } = vm.$refs\n      const zhFormat = {\n        short: {\n          year: 'numeric', month: '2-digit', day: '2-digit',\n          hour: '2-digit', minute: '2-digit'\n        }\n      }\n\n      Vue.nextTick().then(() => {\n        // NOTE: avoid webkit(phatomjs/safari) & Intl polyfill wired localization...\n        isChrome && assert.strictEqual(text.textContent, '12/19/2012, 10:00 PM')\n        i18n.setDateTimeFormat('zh-CN', zhFormat)\n        assert.deepEqual(i18n.getDateTimeFormat('zh-CN'), zhFormat)\n        i18n.locale = 'zh-CN'\n      }).then(() => {\n        // NOTE: avoid webkit(phatomjs/safari) & Intl polyfill wired localization...\n        isChrome && assert.strictEqual(text.textContent, '2012/12/20 12:00')\n      }).then(done)\n    })\n  })\n\n  describe('mergeDateTimeFormat', () => {\n    it('should be merged', () => {\n      const i18n = new VueI18n({\n        locale: 'ja-JP',\n        dateTimeFormats\n      })\n      const foo = {\n        year: 'numeric', month: '2-digit', day: '2-digit',\n        hour: '2-digit', minute: '2-digit'\n      }\n      i18n.mergeDateTimeFormat('en-US', { foo })\n      assert.deepEqual(foo, i18n.getDateTimeFormat('en-US').foo)\n    })\n  })\n\n  describe('fallback', () => {\n    it('should be fallbacked', done => {\n      const i18n = new VueI18n({\n        locale: 'en-uk',\n        fallbackLocale: ['de', 'en-us'],\n        dateTimeFormats: {\n          de: {\n            short: { day: '2-digit', month: '2-digit', year: '2-digit' }\n          }\n        }\n      })\n      const el = document.createElement('div')\n      document.body.appendChild(el)\n\n      const dt = new Date(Date.UTC(2012, 11, 20, 3, 0, 0))\n      const vm = new Vue({\n        i18n,\n        render (h) {\n          return h('p', { ref: 'text' }, [this.$d(dt, 'short')])\n        }\n      }).$mount(el)\n\n      const { text } = vm.$refs\n\n      Vue.nextTick().then(() => {\n        assert.strictEqual(text.textContent, '20.12.12')\n      }).then(done)\n    })\n  })\n})\n"
  },
  {
    "path": "test/unit/directive.test.js",
    "content": "import messages from './fixture/index'\n\ndescribe('custom directive', () => {\n  let i18n\n  beforeEach(() => {\n    i18n = new VueI18n({\n      locale: 'en',\n      messages\n    })\n  })\n\n  function createVM (options) {\n    const el = document.createElement('div')\n    return new Vue(options).$mount(el)\n  }\n\n  describe('v-t', () => {\n    describe('string literal', () => {\n      it('should be translated', done => {\n        const vm = createVM({\n          i18n,\n          render (h) {\n            // <p ref=\"text\" v-t=\"'message.hello'\"></p>\n            return h('p', { ref: 'text', directives: [{\n              name: 't', rawName: 'v-t', value: ('message.hello'), expression: \"'message.hello'\"\n            }] })\n          }\n        })\n        Vue.nextTick().then(() => {\n          assert.strictEqual(vm.$refs.text.textContent, messages.en.message.hello)\n          assert.strictEqual(vm.$refs.text._vt, messages.en.message.hello)\n          vm.$forceUpdate()\n        }).then(() => {\n          assert.strictEqual(vm.$refs.text.textContent, messages.en.message.hello)\n          assert.strictEqual(vm.$refs.text._vt, messages.en.message.hello)\n        }).then(done)\n      })\n    })\n\n    describe('object', () => {\n      it('should be translated', done => {\n        const vm = createVM({\n          i18n,\n          data: {\n            msgPath: 'message.format.named'\n          },\n          render (h) {\n            // <p ref=\"text\" v-t=\"{ path: msgPath, locale: 'ja', args: { name: 'kazupon' } }\"></p>\n            return h('p', { ref: 'text', directives: [{\n              name: 't', rawName: 'v-t',\n              value: ({ path: this.msgPath, locale: 'ja', args: { name: 'kazupon' } }),\n              expression: \"{ path: msgPath, locale: 'ja', args: { name: 'kazupon' } }\"\n            }] })\n          }\n        })\n        const expected = 'こんにちは kazupon, ごきげんいかが？'\n        Vue.nextTick().then(() => {\n          assert.strictEqual(vm.$refs.text.textContent, expected)\n          assert.strictEqual(vm.$refs.text._vt, expected)\n          vm.$forceUpdate()\n        }).then(() => {\n          assert.strictEqual(vm.$refs.text.textContent, expected)\n          assert.strictEqual(vm.$refs.text._vt, expected)\n        }).then(done)\n      })\n    })\n\n    describe('locale reactivity', () => {\n      it('should be translated', done => {\n        let expected = ''\n        const vm = createVM({\n          i18n,\n          data: {\n            msgPath: 'message.format.named'\n          },\n          render (h) {\n            // <p ref=\"text\" v-t=\"{ path: msgPath, args: { name: 'kazupon' } }\"></p>\n            return h('p', { ref: 'text', directives: [{\n              name: 't', rawName: 'v-t',\n              value: ({ path: this.msgPath, args: { name: 'kazupon' } }),\n              expression: \"{ path: msgPath, args: { name: 'kazupon' } }\"\n            }] })\n          }\n        })\n        Vue.nextTick().then(() => {\n          expected = 'Hello kazupon, how are you?'\n          assert.strictEqual(vm.$refs.text.textContent, expected)\n          assert.strictEqual(vm.$refs.text._vt, expected)\n          assert.strictEqual(vm.$refs.text._locale, 'en')\n          vm.$i18n.locale = 'ja' // change locale\n          vm.$forceUpdate()\n        }).then(() => {\n          expected = 'こんにちは kazupon, ごきげんいかが？'\n          assert.strictEqual(vm.$refs.text.textContent, expected)\n          assert.strictEqual(vm.$refs.text._vt, expected)\n          assert.strictEqual(vm.$refs.text._locale, 'ja')\n        }).then(done)\n      })\n    })\n\n    describe('not support warning', () => {\n      it('should be warned', done => {\n        const spy = sinon.spy(console, 'warn')\n        createVM({\n          i18n,\n          render (h) {\n            // <p ref=\"text\" v-t=\"[1]\"></p>\n            return h('p', { ref: 'text', directives: [{\n              name: 't', rawName: 'v-t', value: ([1]), expression: '[1]'\n            }] })\n          }\n        })\n        Vue.nextTick().then(() => {\n          assert(spy.notCalled === false)\n          assert(spy.callCount === 1)\n          spy.restore()\n        }).then(done)\n      })\n    })\n\n    describe('path required warning', () => {\n      it('should be warned', done => {\n        const spy = sinon.spy(console, 'warn')\n        createVM({\n          i18n,\n          render (h) {\n            // <p ref=\"text\" v-t=\"{ locale: 'ja', args: { name: 'kazupon' } }\"></p>\n            return h('p', { ref: 'text', directives: [{\n              name: 't', rawName: 'v-t',\n              value: ({ locale: 'ja', args: { name: 'kazupon' } }),\n              expression: \"{ locale: 'ja', args: { name: 'kazupon' } }\"\n            }] })\n          }\n        })\n        Vue.nextTick().then(() => {\n          assert(spy.notCalled === false)\n          assert(spy.callCount === 1)\n          spy.restore()\n        }).then(done)\n      })\n    })\n\n    describe('VueI18n instance warning', () => {\n      it('should be warned', done => {\n        const spy = sinon.spy(console, 'warn')\n        createVM({\n          render (h) {\n            return h('p', { ref: 'text', directives: [{\n              name: 't', rawName: 'v-t', value: ('message.hello'), expression: \"'message.hello'\"\n            }] })\n          }\n        })\n        Vue.nextTick().then(() => {\n          assert(spy.notCalled === false)\n          assert(spy.callCount === 1)\n          spy.restore()\n        }).then(done)\n      })\n    })\n\n    describe('pluralize', () => {\n      it('should be singular', done => {\n        const vm = createVM({\n          i18n,\n          render (h) {\n            // <p ref=\"text\" v-t=\"{path: 'plurals.car', choice: 1}\"></p>\n            return h('p', { ref: 'text', directives: [{\n              name: 't', rawName: 'v-t', value: ({ path: 'plurals.car', choice: 1 }), expression: { path: 'plurals.car', choice: 1 }\n            }] })\n          }\n        })\n        Vue.nextTick().then(() => {\n          assert.strictEqual(vm.$refs.text.textContent, 'car')\n          assert.strictEqual(vm.$refs.text._vt, 'car')\n          vm.$forceUpdate()\n        }).then(() => {\n          assert.strictEqual(vm.$refs.text.textContent, 'car')\n          assert.strictEqual(vm.$refs.text._vt, 'car')\n        }).then(done)\n      })\n\n      it('should be plural', done => {\n        const vm = createVM({\n          i18n,\n          render (h) {\n            // <p ref=\"text\" v-t=\"{path: 'plurals.car', choice: 2}\"></p>\n            return h('p', { ref: 'text', directives: [{\n              name: 't', rawName: 'v-t', value: ({ path: 'plurals.car', choice: 2 }), expression: { path: 'plurals.car', choice: 2 }\n            }] })\n          }\n        })\n        Vue.nextTick().then(() => {\n          assert.strictEqual(vm.$refs.text.textContent, 'cars')\n          assert.strictEqual(vm.$refs.text._vt, 'cars')\n          vm.$forceUpdate()\n        }).then(() => {\n          assert.strictEqual(vm.$refs.text.textContent, 'cars')\n          assert.strictEqual(vm.$refs.text._vt, 'cars')\n        }).then(done)\n      })\n\n      it('should allow a zero choice', done => {\n        const vm = createVM({\n          i18n,\n          render (h) {\n            // <p ref=\"text\" v-t=\"{path: 'plurals.apple', choice: 0}\"></p>\n            return h('p', { ref: 'text', directives: [{\n              name: 't', rawName: 'v-t', value: ({ path: 'plurals.apple', choice: 0 }), expression: { path: 'plurals.apple', choice: 0 }\n            }] })\n          }\n        })\n        Vue.nextTick().then(() => {\n          assert.strictEqual(vm.$refs.text.textContent, 'no apples')\n          assert.strictEqual(vm.$refs.text._vt, 'no apples')\n          vm.$forceUpdate()\n        }).then(() => {\n          assert.strictEqual(vm.$refs.text.textContent, 'no apples')\n          assert.strictEqual(vm.$refs.text._vt, 'no apples')\n        }).then(done)\n      })\n    })\n\n    describe('preserve content', () => {\n      it('should clear element content on destroy by default', done => {\n        const vm = createVM({\n          i18n,\n          data: () => ({ visible: true }),\n          render (h) {\n            // <p ref=\"text\" v-t=\"'message.hello'\"></p>\n            const directives = this.visible ? [{\n              name: 't', rawName: 'v-t', value: ('message.hello'), expression: \"'message.hello'\"\n            }] : []\n            return h('p', { ref: 'text', directives })\n          }\n        })\n\n        Vue.nextTick().then(() => {\n          assert.strictEqual(vm.$refs.text.textContent, messages.en.message.hello)\n\n          vm.visible = false\n          vm.$forceUpdate()\n        }).then(() => {\n          assert.strictEqual(vm.$refs.text.textContent, '')\n        }).then(done)\n      })\n\n      it('should not clear element content with \"preserve\" modifier', done => {\n        const vm = createVM({\n          i18n,\n          data: () => ({ visible: true }),\n          render (h) {\n            // <p ref=\"text\" v-t.preserve=\"'message.hello'\"></p>\n            const directives = this.visible ? [{\n              name: 't', rawName: 'v-t', value: ('message.hello'), expression: \"'message.hello'\", modifiers: { preserve: true }\n            }] : []\n            return h('p', { ref: 'text', directives })\n          }\n        })\n\n        Vue.nextTick().then(() => {\n          assert.strictEqual(vm.$refs.text.textContent, messages.en.message.hello)\n\n          vm.visible = false\n          vm.$forceUpdate()\n        }).then(() => {\n          assert.strictEqual(vm.$refs.text.textContent, messages.en.message.hello)\n        }).then(done)\n      })\n\n      it('should not clear element content when \"preserveDirectiveContent\" i18nOption is set to true', done => {\n        const vm = createVM({\n          i18n: new VueI18n({\n            locale: 'en',\n            messages,\n            preserveDirectiveContent: true\n          }),\n          data: () => ({ visible: true }),\n          render (h) {\n            // <p ref=\"text\" v-t=\"'message.hello'\"></p>\n            const directives = this.visible ? [{\n              name: 't', rawName: 'v-t', value: ('message.hello'), expression: \"'message.hello'\"\n            }] : []\n            return h('p', { ref: 'text', directives })\n          }\n        })\n\n        Vue.nextTick().then(() => {\n          assert.strictEqual(vm.$refs.text.textContent, messages.en.message.hello)\n\n          vm.visible = false\n          vm.$forceUpdate()\n        }).then(() => {\n          assert.strictEqual(vm.$refs.text.textContent, messages.en.message.hello)\n        }).then(done)\n      })\n    })\n  })\n})\n"
  },
  {
    "path": "test/unit/escape_parameter_html.test.js",
    "content": "const messages = {\n  en: {\n    listformat: '{0}',\n    nameformat: '{key}',\n  }\n}\n\ndescribe('escapeParameterHtml', () => {\n  it('Replacement parameters are escaped when escapeParameterHtml: true.', () => {\n    const i18n = new VueI18n({\n      locale: 'en',\n      messages,\n      escapeParameterHtml: true\n    })\n    // We should not escape the ampersand (&).\n    assert(i18n.t('nameformat', { key: '<&\"\\'>' }) === '&lt;&&quot;&apos;&gt;')\n    assert(i18n.t('listformat', ['<&\"\\'>']) === '&lt;&&quot;&apos;&gt;')\n    assert(i18n.tc('nameformat', 1, { key: '<&\"\\'>' }).toString() === '&lt;&&quot;&apos;&gt;')\n    assert(i18n.tc('listformat', 1, ['<&\"\\'>']).toString() === '&lt;&&quot;&apos;&gt;')\n  })\n  it('Replacement parameters are not escaped when escapeParameterHtml: undefined.', () => {\n    const i18n = new VueI18n({\n      locale: 'en',\n      messages,\n    })\n    assert(i18n.t('nameformat', { key: '<\"\\'>' }) === '<\"\\'>')\n    assert(i18n.t('listformat', ['<\"\\'>']) === '<\"\\'>')\n\n  })\n})\n"
  },
  {
    "path": "test/unit/fallback.test.js",
    "content": "import messages from './fixture/index'\n\ndescribe('kazupon#138 mmokross#2 - Fallback Locale as array for cascading fallbacks ...', () => {\n  const types = [\n    {\n      description: '... none',\n      fallbackLocale: false,\n      tests: [\n        { description: 'English', locale: 'en', expected: ['en'] },\n        { description: 'English (Great Britain)', locale: 'en-GB', expected: ['en-GB', 'en'] },\n        { description: 'German', locale: 'de', expected: ['de'] },\n        { description: 'German (Switzerland)', locale: 'de-CH', expected: ['de-CH', 'de'] }\n      ]\n    },\n    {\n      description: '... simple',\n      fallbackLocale: 'en',\n      tests: [\n        { description: 'English', locale: 'en', expected: ['en'] },\n        { description: 'English (Great Britain)', locale: 'en-GB', expected: ['en-GB', 'en'] },\n        { description: 'German', locale: 'de', expected: ['de', 'en'] },\n        { description: 'German (Switzerland)', locale: 'de-CH', expected: ['de-CH', 'de', 'en'] }\n      ]\n    },\n    {\n      description: '... array',\n      fallbackLocale: ['en', 'ja'],\n      tests: [\n        { description: 'English', locale: 'en', expected: ['en', 'ja'] },\n        { description: 'English (Great Britain)', locale: 'en-GB', expected: ['en-GB', 'en', 'ja'] },\n        { description: 'German', locale: 'de', expected: ['de', 'en', 'ja'] },\n        { description: 'German (Switzerland)', locale: 'de-CH', expected: ['de-CH', 'de', 'en', 'ja'] },\n        { description: 'Japanese', locale: 'ja', expected: ['ja', 'en'] }\n      ]\n    },\n    {\n      description: '... complex',\n      fallbackLocale: {\n        'de-CH': ['fr', 'it'],\n        'zh-Hant': ['zh-Hans'],\n        'es-CL': ['es-AR'],\n        'es': ['en-GB'],\n        'pt': ['es-AR'],\n        'default': ['en', 'da']\n      },\n      tests: [\n        { description: 'German (Switzerland)', locale: 'de-CH', expected: ['de-CH', 'fr', 'it', 'en', 'da'] },\n        { description: 'German (Switzerland) EXACT', locale: 'de-CH!', expected: ['de-CH', 'fr', 'it', 'en', 'da'] },\n        { description: 'German', locale: 'de', expected: ['de', 'en', 'da'] },\n        { description: 'Traditional Chinese', locale: 'zh-Hant', expected: ['zh-Hant', 'zh-Hans', 'zh', 'en', 'da'] },\n        { description: 'Spanish (Spain)', locale: 'es-SP', expected: ['es-SP', 'es', 'en-GB', 'en', 'da'] },\n        { description: 'Spanish (Spain) EXACT', locale: 'es-SP!', expected: ['es-SP', 'en', 'da'] },\n        { description: 'French', locale: 'fr', expected: ['fr', 'en', 'da'] },\n        { description: 'Portuguese (Brazil)', locale: 'pt-BR', expected: ['pt-BR', 'pt', 'es-AR', 'es', 'en-GB', 'en', 'da'] },\n        { description: 'Spanish (Chile)', locale: 'es-CL', expected: ['es-CL', 'es-AR', 'es', 'en-GB', 'en', 'da'] }\n      ]\n    }\n  ]\n  types.forEach(function (type) {\n    describe(type.description, () => {\n      let i18n\n      beforeEach(() => {\n        i18n = new VueI18n({\n          locale: 'en',\n          fallbackLocale: type.fallbackLocale,\n          messages,\n          modifiers: {\n            custom: str => str.replace(/[aeiou]/g, 'x')\n          }\n        })\n      })\n      type.tests.forEach(function (test) {\n        it(test.description + ': ' + test.locale + ' should fallback to ' + test.expected, () => {\n          // console.log(test.locale + ': --> ' + i18n.getLocaleChain(test.locale))\n          assert.deepEqual(i18n._getLocaleChain(test.locale), test.expected)\n        })\n      })\n    })\n  })\n})\n\ndescribe('issue #868', () => {\n  it('should be fallbacked', () => {\n    const i18n = new VueI18n({\n      locale: 'de-CH',\n      fallbackLocale: {\n        'de-CH': ['fr', 'it'],\n        'zh-Hant': ['zh-Hans'],\n        'es-CL': ['es-AR'],\n        'es': ['en-GB'],\n        'pt': ['es-AR'],\n        default: ['en-US', 1, {}, null, false, undefined, 'en']\n      },\n      messages\n    })\n    assert.deepEqual(i18n.t('message.hello'), 'the world')\n  })\n})\n"
  },
  {
    "path": "test/unit/fixture/datetime.js",
    "content": "const formats = {\n  'en-US': {\n    short: { // DD/MM/YYYY, hh:mm (AM|PM)\n      year: 'numeric', month: '2-digit', day: '2-digit',\n      hour: '2-digit', minute: '2-digit'\n    }\n  },\n  'ja-JP': {\n    long: { // YYYY/MM/DD hh:mm:ss\n      year: 'numeric', month: '2-digit', day: '2-digit',\n      hour: '2-digit', minute: '2-digit', second: '2-digit'\n    },\n    short: { // YYYY/MM/DD hh:mm\n      year: 'numeric', month: '2-digit', day: '2-digit',\n      hour: '2-digit', minute: '2-digit'\n    }\n  }\n}\n\n// NOTE: avoid webkit(phatomjs/safari) & Intl timeZone don't support...\nif (isChrome) {\n  formats['en-US']['short']['timeZone'] = 'America/New_York'\n  formats['ja-JP']['short']['timeZone'] = 'Asia/Tokyo'\n  formats['ja-JP']['long']['timeZone'] = 'Asia/Tokyo'\n} else {\n  formats['en-US']['short']['timeZone'] = 'UTC'\n  formats['ja-JP']['short']['timeZone'] = 'UTC'\n  formats['ja-JP']['long']['timeZone'] = 'UTC'\n}\n\nexport default formats\n"
  },
  {
    "path": "test/unit/fixture/index.js",
    "content": "export default {\n  en: {\n    message: {\n      hello: 'the world',\n      helloName: 'Hello {name}',\n      hoge: 'hoge',\n      empty: '',\n      format: {\n        named: 'Hello {name}, how are you?',\n        list: 'Hello {0}, how are you?'\n      },\n      fallback: 'this is fallback',\n      link: '@:message.hello',\n      linkHelloName: '@:message.helloName',\n      linkLinkHelloName: '@:message.linkHelloName',\n      linkEnd: 'This is a linked translation to @:message.hello',\n      linkWithin: 'Isn\\'t @:message.hello we live in great?',\n      linkMultiple: 'Hello @:message.hoge!, isn\\'t @:message.hello great?',\n      linkBrackets: 'Hello @:(message.hoge). Isn\\'t @:(message.hello) great?',\n      linkHyphen: '@:hyphen-hello',\n      linkUnderscore: '@:underscore_hello',\n      linkPipe: '@:pipe|hello',\n      linkColon: '@:(colon:hello)',\n      linkList: '@:message.hello: {0} {1}',\n      linkCaseLower: 'Please provide @.lower:message.homeAddress',\n      linkCaseUpper: '@.upper:message.homeAddress',\n      linkCaseCapitalize: '@.capitalize:message.homeAddress',\n      linkCaseUnknown: '@.unknown:message.homeAddress',\n      linkCaseCustom: '@.custom:message.homeAddress',\n      homeAddress: 'home Address',\n      circular1: 'Foo @:message.circular2',\n      circular2: 'Bar @:message.circular3',\n      circular3: 'Buz @:message.circular1',\n      linkTwice: '@:message.hello: @:message.hello',\n      'Hello {0}': 'Hello {0}',\n      'hyphen-locale': 'hello hyphen',\n      '1234': 'Number-based keys are found',\n      '1mixedKey': 'Mixed keys are not found.',\n      'sálvame': 'save me'\n    },\n    '0123a': 'Starts with number and contains non-number',\n    '01234': 'Numeric only',\n    '日本語': 'Japanese',\n    'hello world': 'Hello World',\n    'Hello {0}': 'Hello {0}',\n    'continue-with-new-account': 'continue with new account',\n    'hyphen-hello': 'hyphen the wolrd',\n    /* eslint-disable */\n    underscore_hello: 'underscore the wolrd',\n    'colon:hello': 'hello colon',\n    'pipe|hello': 'hello pipe',\n    /* eslint-enable */\n    underscore: '{helloMsg} world',\n    plurals: {\n      car: 'car | cars',\n      apple: 'no apples | one apple | {count} apples',\n      format: {\n        named: 'Hello {name}, how are you? | Hi {name}, you look fine',\n        list: 'Hello {0}, how are you? | Hi {0}, you look fine'\n      },\n      fallback: 'this is fallback | this is a plural fallback'\n    },\n    errors: [\n      'this is 0 error code message',\n      {\n        internal1: 'this is internal 1 error message'\n      },\n      [\n        'this is nested array error 1'\n      ]\n    ],\n    issues: {\n      arrayBugs: ['bug1', 'bug2']\n    },\n    'foo.bar.buz': 'hello flat key!'\n  },\n  ja: {\n    message: {\n      hello: 'ザ・ワールド',\n      hoge: 'ほげ',\n      empty: '',\n      format: {\n        named: 'こんにちは {name}, ごきげんいかが？',\n        list: 'こんにちは {0}, ごきげんいかが？'\n      },\n      fallback1: 'これはフォールバック',\n      'hyphen-locale': 'こんにちは、ハイフン',\n      '1234': '数字ベースのキーは見つかりませんでした。',\n      '1mixedKey': 'ミックスされたキーは見つかりませんでした。',\n      'sálvame': '私を助けて'\n    },\n    '01234': '数字のみ',\n    '12345a': '数字で始まり、数字以外を含む',\n    '日本語': '日本語',\n    plurals: {\n      car: 'ザ・ワールド | これはフォールバック',\n      implicitPluralCount: 'こっちには来ない | count:{count}, n:{n}',\n      format: {\n        named: 'こんにちは {name}, ごきげんいかが？ | こんにちは {name}, ごきげんいかが？',\n        list: 'こんにちは {0}, ごきげんいかが？| こんにちは {0}, ごきげんいかが？'\n      },\n      fallback: 'これはフォールバック | ザ・ワールド'\n    },\n    errors: [\n      'これはエラーコード0のエラーメッセージです。',\n      {\n        internal1: 'これは内部エラーコード1のエラーメッセージです。'\n      },\n      [\n        'これはネストされた配列のエラー1です。'\n      ]\n    ],\n    issues: {\n      arrayBugs: ['バグ1', 'バグ2']\n    },\n    'foo.bar.buz': 'こんにちは、フラットなキーさん！'\n  }\n}\n"
  },
  {
    "path": "test/unit/fixture/number.js",
    "content": "export default {\n  'en-US': {\n    currency: {\n      style: 'currency', currency: 'USD', currencyDisplay: 'symbol'\n    },\n    decimal: {\n      style: 'decimal', useGrouping: false\n    }\n  },\n  'ja-JP': {\n    currency: {\n      style: 'currency', currency: 'JPY', currencyDisplay: 'symbol'\n    },\n    numeric: {\n      style: 'decimal', useGrouping: false\n    },\n    percent: {\n      style: 'percent', useGrouping: false\n    }\n  }\n}\n"
  },
  {
    "path": "test/unit/format.test.js",
    "content": "import { parse, compile } from '../../src/format'\n\ndescribe('parse', () => {\n  describe('list', () => {\n    it('should be parsed', () => {\n      const tokens = parse('name: {0}, email: {1}')\n      assert(tokens.length === 4)\n      assert.strictEqual(tokens[0].type, 'text')\n      assert.strictEqual(tokens[0].value, 'name: ')\n      assert.strictEqual(tokens[1].type, 'list')\n      assert.strictEqual(tokens[1].value, '0')\n      assert.strictEqual(tokens[2].type, 'text')\n      assert.strictEqual(tokens[2].value, ', email: ')\n      assert.strictEqual(tokens[3].type, 'list')\n      assert.strictEqual(tokens[3].value, '1')\n    })\n  })\n\n  describe('named', () => {\n    it('should be parsed', () => {\n      const tokens = parse('name: {name}, email: {email}')\n      assert(tokens.length === 4)\n      assert.strictEqual(tokens[0].type, 'text')\n      assert.strictEqual(tokens[0].value, 'name: ')\n      assert.strictEqual(tokens[1].type, 'named')\n      assert.strictEqual(tokens[1].value, 'name')\n      assert.strictEqual(tokens[2].type, 'text')\n      assert.strictEqual(tokens[2].value, ', email: ')\n      assert.strictEqual(tokens[3].type, 'named')\n      assert.strictEqual(tokens[3].value, 'email')\n    })\n  })\n\n  describe('rails i18n format syntax', () => {\n    it('should be parsed', () => {\n      const tokens = parse('name: %{name}, email: %{email}')\n      assert(tokens.length === 4)\n      assert.strictEqual(tokens[0].type, 'text')\n      assert.strictEqual(tokens[0].value, 'name: ')\n      assert.strictEqual(tokens[1].type, 'named')\n      assert.strictEqual(tokens[1].value, 'name')\n      assert.strictEqual(tokens[2].type, 'text')\n      assert.strictEqual(tokens[2].value, ', email: ')\n      assert.strictEqual(tokens[3].type, 'named')\n      assert.strictEqual(tokens[3].value, 'email')\n    })\n  })\n\n  describe('not support format', () => {\n    it('should be parsed', () => {\n      const tokens = parse('name: { name1}, email: {%email}')\n      assert(tokens.length === 4)\n      assert.strictEqual(tokens[0].type, 'text')\n      assert.strictEqual(tokens[0].value, 'name: ')\n      assert.strictEqual(tokens[1].type, 'unknown')\n      assert.strictEqual(tokens[1].value, ' name1')\n      assert.strictEqual(tokens[2].type, 'text')\n      assert.strictEqual(tokens[2].value, ', email: ')\n      assert.strictEqual(tokens[3].type, 'unknown')\n      assert.strictEqual(tokens[3].value, '%email')\n    })\n  })\n})\n\ndescribe('compile', () => {\n  describe('list token', () => {\n    it('should be compiled', () => {\n      const tokens = parse('name: {0}, age: {1}')\n      const compiled = compile(tokens, ['kazupon', '0x20'])\n      assert(compiled.length === 4)\n      assert.strictEqual(compiled[0], 'name: ')\n      assert.strictEqual(compiled[1], 'kazupon')\n      assert.strictEqual(compiled[2], ', age: ')\n      assert.strictEqual(compiled[3], '0x20')\n    })\n  })\n\n  describe('named token', () => {\n    it('should be compiled', () => {\n      const tokens = parse('name: {name}, age: {age}')\n      const compiled = compile(tokens, { name: 'kazupon', age: '0x20' })\n      assert(compiled.length === 4)\n      assert.strictEqual(compiled[0], 'name: ')\n      assert.strictEqual(compiled[1], 'kazupon')\n      assert.strictEqual(compiled[2], ', age: ')\n      assert.strictEqual(compiled[3], '0x20')\n    })\n\n    it('should be compiled as unknown if not closed', () => {\n      const tokens = parse('name: {name')\n      const compiled = compile(tokens, { name: 'kazupon' })\n      assert(compiled.length === 1)\n      assert.strictEqual(compiled[0], 'name: ')\n    })\n  })\n\n  describe('unknown token', () => {\n    it('should be compiled', () => {\n      const spy = sinon.spy(console, 'warn')\n\n      const tokens = parse('name: { name1}, email: {%email}')\n      const compiled = compile(tokens, ['kazupon', '0x20'])\n      assert(compiled.length === 2)\n      assert.strictEqual(compiled[0], 'name: ')\n      assert.strictEqual(compiled[1], ', email: ')\n\n      assert(spy.notCalled === false)\n      assert(spy.callCount === 2)\n      spy.restore()\n    })\n  })\n\n\n  describe('values unknown mode', () => {\n    it('should be compiled with empty', () => {\n      const compiled = compile([], 1)\n      assert.deepEqual(compiled, [])\n    })\n  })\n\n  describe('list token with named value', () => {\n    it('should be compiled', () => {\n      const tokens = parse('name: {0}, age: {1}') // list tokens\n      const compiled = compile(tokens, { '0': 'kazupon', '1': '0x20' }) // named values\n      assert(compiled.length === 4)\n      assert.strictEqual(compiled[0], 'name: ')\n      assert.strictEqual(compiled[1], 'kazupon')\n      assert.strictEqual(compiled[2], ', age: ')\n      assert.strictEqual(compiled[3], '0x20')\n    })\n  })\n\n  describe('unmatch values mode', () => {\n    it('should be warned', () => {\n      const spy = sinon.spy(console, 'warn')\n\n      const tokens = parse('name: {name}, age: {age}') // named tokens\n      compile(tokens, ['kazupon', '0x20']) // list values\n\n      assert(spy.notCalled === false)\n      assert(spy.callCount === 2)\n      spy.restore()\n    })\n  })\n})\n"
  },
  {
    "path": "test/unit/format_custom.test.js",
    "content": "import messages from './fixture/index'\n\ndescribe('custom formatter', () => {\n  describe('via i18n instance API calling', () => {\n    it('should allows for specifying a custom formatter', done => {\n      class CustomFormatter {\n        interpolate (message, values) {\n          assert.deepEqual({ name: 'joe' }, values)\n          done()\n        }\n      }\n      const formatter = new CustomFormatter()\n      const i18n = new VueI18n({\n        locale: 'en',\n        messages,\n        formatter\n      })\n      i18n.t('message.hello', 'ja', { name: 'joe' })\n    })\n\n    it('should interpolate messages without values', done => {\n      class CustomFormatter {\n        interpolate (message, values) {\n          assert(values === null)\n          done()\n        }\n      }\n      const formatter = new CustomFormatter()\n      const i18n = new VueI18n({\n        locale: 'en',\n        messages,\n        formatter\n      })\n      i18n.t('message.hello')\n    })\n  })\n\n  describe('via vue instance calling', () => {\n    it('should allows for specifying a custom formatter', done => {\n      const formatter = {\n        interpolate: (message, values) => {\n          assert.deepEqual([1, 2, 3], values)\n          done()\n        }\n      }\n      const vm = new Vue({\n        i18n: new VueI18n({\n          locale: 'en',\n          messages,\n          formatter\n        })\n      })\n      vm.$t('message.hello', [1, 2, 3])\n    })\n  })\n\n  describe('via vue instance calling (mounted)', () => {\n    let el\n\n    beforeEach(done => {\n      el = document.createElement('div')\n      done()\n    })\n\n    it('should be inherited by components', done => {\n      new Vue({\n        i18n: new VueI18n({\n          locale: 'en',\n          formatter: {\n            interpolate: (message, values) => {\n              assert.deepEqual({ name: 'user' }, values)\n              done()\n              return ['pass']\n            }\n          }\n        }),\n        components: {\n          'child-1': {\n            render (h) {\n              return h('div', {}, [\n                h('p', {}, [this.$t('message', { name: 'user' })])\n              ])\n            },\n            i18n: {\n              messages: {\n                en: { message: 'hello {name}' }\n              }\n            }\n          }\n        },\n        render (h) {\n          return h('div', {}, [\n            h('child-1')\n          ])\n        }\n      }).$mount(el)\n    })\n  })\n\n  describe('i18n format getter/settter', () => {\n    it('should be worked', done => {\n      const i18n = new VueI18n({\n        locale: 'en',\n        messages\n      })\n\n      assert(i18n.formatter.constructor.name === 'BaseFormatter')\n      const formatter = {\n        interpolate: (message, values) => {\n          assert.deepEqual([1, 2, 3], values)\n          done()\n        }\n      }\n      i18n.formatter = formatter\n      i18n.t('message.hello', [1, 2, 3])\n    })\n  })\n})\n"
  },
  {
    "path": "test/unit/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <title>vue-i18n tests</title>\n    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\n    <script src=\"tests.js\"></script>\n  </head>\n  <body>\n  </body>\n</html>\n"
  },
  {
    "path": "test/unit/index.js",
    "content": "// import all helpers\nconst helpersContext = require.context('../helpers', true)\nhelpersContext.keys().forEach(helpersContext)\n\n// require all test files\nconst testsContext = require.context('./', true, /\\.test/)\ntestsContext.keys().forEach(testsContext)\n"
  },
  {
    "path": "test/unit/interpolation.test.js",
    "content": "import Component from '../../src/components/interpolation'\n\nconst messages = {\n  en: {\n    text: 'one: {0}',\n    primitive: 'one: {0}, two: {1}',\n    component: 'element: {0}, component: {1}',\n    mixed: 'text: {x}, component: {y}',\n    named: 'header: {header}, footer: {footer}',\n    link: '@:primitive',\n    term: 'I accept xxx {0}.',\n    tos: 'Term of service',\n    fallback: 'fallback from {0}'\n  },\n  ja: {\n    text: '一: {0}',\n    'I am {0}': '一: {0}'\n  }\n}\nconst components = {\n  comp: {\n    props: {\n      msg: { type: String, default: '' }\n    },\n    render (h) {\n      return h('p', [this.msg])\n    }\n  },\n  fallback: {\n    i18n: {\n      locale: 'en'\n    },\n    render (h) {\n      return h('i18n', { props: { path: 'fallback' } }, [\n        h('p', ['child'])\n      ])\n    }\n  }\n}\n\ndescribe('component interpolation', () => {\n  let i18n\n  beforeEach(() => {\n    i18n = new VueI18n({\n      locale: 'en',\n      messages\n    })\n  })\n\n  describe('tag', () => {\n    it('defaults to span', done => {\n      const el = document.createElement('div')\n      const vm = new Vue({\n        i18n,\n        render (h) {\n          return h('i18n', { props: { path: 'text' } }, [this._v('1')])\n        }\n      }).$mount(el)\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$el.outerHTML, '<span>one: 1</span>')\n      }).then(done)\n    })\n\n    it('of type object (Component) should be correctly applied', done => {\n      const MockElement = {\n        render(h) {\n          return h('strong', Object.values(this.$slots));\n        },\n      }\n      const el = document.createElement('div')\n      const vm = new Vue({\n        i18n,\n        render (h) {\n          return h('i18n', { props: { path: 'text', tag: MockElement } }, [this._v('1')])\n        }\n      }).$mount(el)\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$el.outerHTML, '<strong>one: 1</strong>')\n      }).then(done).catch(done)\n    })\n\n    it('of type object (Functional Component) should be correctly applied', done => {\n      const MockElement = {\n        functional: true,\n        render(h, { data, children }) {\n          return h('em', data, children);\n        },\n      }\n      const el = document.createElement('div')\n      const vm = new Vue({\n        i18n,\n        render (h) {\n          return h('i18n', { props: { path: 'text', tag: MockElement } }, [this._v('1')])\n        }\n      }).$mount(el)\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$el.outerHTML, '<em>one: 1</em>')\n      }).then(done).catch(done)\n    })\n\n    it('of type string should be correctly applied', done => {\n      const el = document.createElement('div')\n      const vm = new Vue({\n        i18n,\n        render (h) {\n          return h('i18n', { props: { path: 'text', tag: 'b' } }, [this._v('1')])\n        }\n      }).$mount(el)\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$el.outerHTML, '<b>one: 1</b>')\n      }).then(done)\n    })\n\n    it('of value true defaults to span', done => {\n      const el = document.createElement('div')\n      const vm = new Vue({\n        i18n,\n        render (h) {\n          return h('i18n', { props: { path: 'text', tag: true } }, [this._v('1')])\n        }\n      }).$mount(el)\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$el.outerHTML, '<span>one: 1</span>')\n      }).then(done)\n    })\n\n    it('of value false does not apply a root container', done => {\n      const el = document.createElement('div')\n      const vm = new Vue({\n        i18n,\n        render (h) {\n          return h('i18n', { props: { path: 'text', tag: false } }, [this._v('1')])\n        }\n      }).$mount(el)\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$el.nodeType, Node.TEXT_NODE)\n        assert.strictEqual(vm.$el.data, 'one: 1')\n      }).then(done)\n    })\n  })\n\n  describe('children', () => {\n    describe('text nodes', () => {\n      it('should be interpolated', done => {\n        const el = document.createElement('div')\n        const vm = new Vue({\n          i18n,\n          render (h) {\n            return h('i18n', { props: { path: 'text' } }, [this._v('1')])\n          }\n        }).$mount(el)\n        Vue.nextTick().then(() => {\n          assert.strictEqual(vm.$el.textContent, 'one: 1')\n        }).then(done)\n      })\n    })\n\n    describe('primitive nodes', () => {\n      it('should be interpolated', done => {\n        const el = document.createElement('div')\n        const vm = new Vue({\n          i18n,\n          render (h) {\n            return h('i18n', { props: { path: 'primitive' } }, [\n              h('p', ['1']),\n              h('p', ['2'])\n            ])\n          }\n        }).$mount(el)\n        Vue.nextTick().then(() => {\n          assert.strictEqual(vm.$el.innerHTML, 'one: <p>1</p>, two: <p>2</p>')\n        }).then(done)\n      })\n    })\n\n    describe('empty text node between components', () => {\n      it('should NOT be interpolated', done => {\n        const el = document.createElement('div')\n        const vm = new Vue({\n          i18n,\n          render (h) {\n            return h('i18n', { props: { path: 'primitive' } }, [\n              h('p', ['1']),\n              this._v(''),\n              h('p', ['2'])\n            ])\n          }\n        }).$mount(el)\n        Vue.nextTick().then(() => {\n          assert.strictEqual(vm.$el.innerHTML, 'one: <p>1</p>, two: <p>2</p>')\n        }).then(done)\n      })\n    })\n\n    describe('components', () => {\n      it('should be interpolated', done => {\n        const el = document.createElement('div')\n        const vm = new Vue({\n          i18n,\n          components,\n          render (h) {\n            return h('i18n', { props: { path: 'component' } }, [\n              h('p', ['1']),\n              h('comp', { props: { msg: 'foo' } })\n            ])\n          }\n        }).$mount(el)\n        Vue.nextTick().then(() => {\n          assert.strictEqual(vm.$el.innerHTML, 'element: <p>1</p>, component: <p>foo</p>')\n        }).then(done)\n      })\n    })\n\n    describe('places prop', () => {\n      it('should be interpolated', done => {\n        const el = document.createElement('div')\n        const vm = new Vue({\n          i18n,\n          render (h) {\n            return h('i18n', { props: { path: 'text', places: [1] } })\n          }\n        }).$mount(el)\n        Vue.nextTick().then(() => {\n          assert.strictEqual(vm.$el.textContent, 'one: 1')\n        }).then(done)\n      })\n    })\n\n    describe('place prop on all children', () => {\n      it('should be interpolated', done => {\n        const el = document.createElement('div')\n        const vm = new Vue({\n          i18n,\n          components,\n          render (h) {\n            return h('i18n', { props: { path: 'component' } }, [\n              h('p', { props: { place: 0 } }, ['1']),\n              h('comp', { props: { place: 1, msg: 'foo' } })\n            ])\n          }\n        }).$mount(el)\n        Vue.nextTick().then(() => {\n          assert.strictEqual(vm.$el.innerHTML, 'element: <p>1</p>, component: <p>foo</p>')\n        }).then(done)\n      })\n    })\n\n    describe('place prop on some children', () => {\n      it('should be interpolated', done => {\n        const el = document.createElement('div')\n        const vm = new Vue({\n          i18n,\n          components,\n          render (h) {\n            return h('i18n', { props: { path: 'component' } }, [\n              h('p', { props: { place: 1 } }, ['1']),\n              h('comp', { props: { msg: 'foo' } })\n            ])\n          }\n        }).$mount(el)\n        Vue.nextTick().then(() => {\n          assert.strictEqual(vm.$el.innerHTML, 'element: <p>1</p>, component: <p>foo</p>')\n        }).then(done)\n      })\n    })\n\n    describe('places and place mixed', () => {\n      it('should be interpolated', done => {\n        const el = document.createElement('div')\n        const vm = new Vue({\n          i18n,\n          components,\n          render (h) {\n            return h('i18n', { props: { path: 'mixed', places: { 'x': 'foo' } } }, [\n              h('comp', { props: { msg: 'bar' }, attrs: { place: 'y' } })\n            ])\n          }\n        }).$mount(el)\n        Vue.nextTick().then(() => {\n          assert.strictEqual(vm.$el.innerHTML, 'text: foo, component: <p place=\"y\">bar</p>')\n        }).then(done)\n      })\n    })\n\n    describe('places set, place not set on all children', () => {\n      it('should be warned', done => {\n        const spy = sinon.spy(console, 'warn')\n        const el = document.createElement('div')\n        const vm = new Vue({\n          i18n,\n          components,\n          render (h) {\n            return h('i18n', { props: { path: 'mixed', places: { 'x': 'foo' } } }, [\n              h('comp', { props: { msg: 'bar' } })\n            ])\n          }\n        }).$mount(el)\n        Vue.nextTick().then(() => {\n          assert.strictEqual(vm.$el.innerHTML, 'text: foo, component: ')\n          assert(spy.notCalled === false)\n          assert(spy.callCount === 1)\n          spy.restore()\n        }).then(done)\n      })\n    })\n\n    describe('fallback', () => {\n      it('should be interpolated', done => {\n        const el = document.createElement('div')\n        const vm = new Vue({\n          i18n,\n          components,\n          render (h) {\n            return h('fallback')\n          }\n        }).$mount(el)\n        Vue.nextTick().then(() => {\n          assert.strictEqual(vm.$el.innerHTML, 'fallback from <p>child</p>')\n        }).then(done)\n      })\n    })\n\n    describe('nested components', () => {\n      it('should be interpolated', done => {\n        const el = document.createElement('div')\n        const vm = new Vue({\n          i18n,\n          components,\n          render (h) {\n            return h('i18n', { props: { path: 'component' } }, [\n              h('p', ['1']),\n              h('div', {}, [\n                h('i18n', { class: 'nested', props: { tag: 'div', path: 'component' } }, [\n                  h('p', ['2']),\n                  h('comp', { props: { msg: 'nested' } })\n                ])\n              ])\n            ])\n          }\n        }).$mount(el)\n        Vue.nextTick().then(() => {\n          assert.strictEqual(\n            vm.$el.innerHTML,\n            'element: <p>1</p>, component: <div><div class=\"nested\">element: <p>2</p>, component: <p>nested</p></div></div>'\n          )\n        }).then(done)\n      })\n    })\n  })\n\n  describe('linked', () => {\n    it('should be interpolated', done => {\n      const el = document.createElement('div')\n      const vm = new Vue({\n        i18n,\n        render (h) {\n          return h('i18n', { props: { path: 'link' } }, [\n            h('p', ['1']),\n            h('p', ['2'])\n          ])\n        }\n      }).$mount(el)\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$el.innerHTML, 'one: <p>1</p>, two: <p>2</p>')\n      }).then(done)\n    })\n  })\n\n  describe('locale', () => {\n    it('should be interpolated', done => {\n      const el = document.createElement('div')\n      const vm = new Vue({\n        i18n,\n        render (h) {\n          return h('i18n', { props: { path: 'text', locale: 'ja' } }, [\n            this._v('1')\n          ])\n        }\n      }).$mount(el)\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$el.textContent, '一: 1')\n      }).then(done)\n    })\n  })\n\n  describe('included translation locale message', () => {\n    it('should be interpolated', done => {\n      const el = document.createElement('div')\n      const vm = new Vue({\n        i18n,\n        render (h) {\n          return h('i18n', { props: { path: 'term' } }, [\n            h('a', { domProps: { href: '/term', textContent: this.$t('tos') } })\n          ])\n        }\n      }).$mount(el)\n      Vue.nextTick().then(() => {\n        assert.strictEqual(\n          vm.$el.innerHTML,\n          'I accept xxx <a href=\\\"/term\\\">Term of service</a>.'\n        )\n      }).then(done)\n    })\n  })\n\n  describe('slot', () => {\n    describe('with default slot', () => {\n      it('should be interpolated', done => {\n        const el = document.createElement('div')\n        const vm = new Vue({\n          i18n,\n          render (h) {\n            return h('i18n', { props: { path: 'text' }, slot: '' }, [this._v('1')])\n          }\n        }).$mount(el)\n        Vue.nextTick().then(() => {\n          assert.strictEqual(vm.$el.textContent, 'one: 1')\n        }).then(done)\n      })\n    })\n\n    describe('with named slots ', () => {\n      it('should be interpolated', done => {\n        const el = document.createElement('div')\n        const vm = new Vue({\n          i18n,\n          render (h) {\n            return h('i18n', { props: { path: 'named' } }, [\n              h('template', { slot: 'header' }, [h('p', 'header')]),\n              h('template', { slot: 'footer' }, [h('p', 'footer')])\n            ])\n          }\n        }).$mount(el)\n        Vue.nextTick().then(() => {\n          assert.strictEqual(\n            vm.$el.innerHTML,\n            'header: <p>header</p>, footer: <p>footer</p>'\n          )\n        }).then(done)\n      })\n    })\n\n    describe('primitive nodes', () => {\n      it('should be interpolated', done => {\n        const el = document.createElement('div')\n        const vm = new Vue({\n          i18n,\n          render (h) {\n            return h('i18n', { props: { path: 'primitive' } }, [\n              h('template', { slot: '0' }, ['1']),\n              h('template', { slot: '1' }, ['2'])\n            ])\n          }\n        }).$mount(el)\n        Vue.nextTick().then(() => {\n          assert.strictEqual(vm.$el.innerHTML, 'one: 1, two: 2')\n        }).then(done)\n      })\n    })\n\n    describe('linked', () => {\n      it('should be interpolated', done => {\n        const el = document.createElement('div')\n        const vm = new Vue({\n          i18n,\n          render (h) {\n            return h('i18n', { props: { path: 'link' } }, [\n              h('template', { slot: '0' }, ['1']),\n              h('template', { slot: '1' }, ['2'])\n            ])\n          }\n        }).$mount(el)\n        Vue.nextTick().then(() => {\n          assert.strictEqual(vm.$el.innerHTML, 'one: 1, two: 2')\n        }).then(done)\n      })\n    })\n\n    describe('included translation locale message', () => {\n      it('should be interpolated', done => {\n        const el = document.createElement('div')\n        const vm = new Vue({\n          i18n,\n          render (h) {\n            return h('i18n', { props: { path: 'term' } }, [\n              h('template', { slot: '0' }, [\n                h('a', { domProps: { href: '/term', textContent: this.$t('tos') } })\n              ])\n            ])\n          }\n        }).$mount(el)\n        Vue.nextTick().then(() => {\n          assert.strictEqual(\n            vm.$el.innerHTML,\n            'I accept xxx <a href=\\\"/term\\\">Term of service</a>.'\n          )\n        }).then(done)\n      })\n    })\n\n    describe('formatFallbackMessages', () => {\n      let i18n\n      beforeEach(() => {\n        i18n = new VueI18n({\n          locale: 'en',\n          messages,\n          formatFallbackMessages: true\n        })\n      })\n\n      it('should be interpolated', done => {\n        const el = document.createElement('div')\n        const vm = new Vue({\n          i18n,\n          render (h) {\n            return h('i18n', { props: { path: 'I am {0}' } }, [\n              h('template', { slot: '0' }, [\n                h('a', { domProps: { href: '/term', textContent: this.$t('tos') } })\n              ])\n            ])\n          }\n        }).$mount(el)\n\n        Vue.nextTick().then(() => {\n          assert.strictEqual(\n            vm.$el.innerHTML,\n            'I am <a href=\\\"/term\\\">Term of service</a>'\n          )\n        }).then(done)\n      })\n\n      it('use ja message', done => {\n        i18n.locale = 'ja'\n        const el = document.createElement('div')\n        const vm = new Vue({\n          i18n,\n          render (h) {\n            return h('i18n', { props: { path: 'I am {0}' } }, [\n              h('template', { slot: '0' }, [\n                h('a', { domProps: { href: '/term', textContent: this.$t('tos') } })\n              ])\n            ])\n          }\n        }).$mount(el)\n        Vue.nextTick().then(() => {\n          assert.strictEqual(\n            vm.$el.innerHTML,\n            '一: <a href=\\\"/term\\\">Term of service</a>'\n          )\n        }).then(done)\n      })\n\n      it('fallbackRoot has higher priority than formatFallbackMessages', done => {\n        i18n = new VueI18n({\n          locale: 'ja',\n          messages,\n          fallbackLocale: 'en',\n          formatFallbackMessages: true,\n          fallbackRoot: true\n        })\n        const el = document.createElement('div')\n        const vm = new Vue({\n          i18n,\n          render (h) {\n            return h('i18n', { props: { path: 'I am {0}' } }, [\n              h('template', { slot: '0' }, [\n                h('a', { domProps: { href: '/term', textContent: this.$t('tos') } })\n              ])\n            ])\n          }\n        }).$mount(el)\n        Vue.nextTick().then(() => {\n          assert.strictEqual(\n            vm.$el.innerHTML,\n            '一: <a href=\\\"/term\\\">Term of service</a>'\n          )\n        }).then(done)\n      })\n    })\n  })\n\n  describe('warnning in render', () => {\n    it('should be warned', () => {\n      const spy = sinon.spy(console, 'warn')\n\n      Component.render(() => {}, { children: [], parent: {} })\n      assert(spy.notCalled === false)\n      assert(spy.callCount === 1)\n\n      spy.restore()\n    })\n  })\n})\n"
  },
  {
    "path": "test/unit/issues.test.js",
    "content": "import messages from './fixture/index'\nimport { parse } from '../../src/format'\nimport VueI18n from '../../src'\nconst compiler = require('vue-template-compiler')\n\nconst delay = time => new Promise(resolve => setTimeout(resolve, time))\n\ndescribe('issues', () => {\n  let vm, i18n\n  beforeEach(() => {\n    i18n = new VueI18n({\n      locale: 'en',\n      messages\n    })\n    vm = new Vue({ i18n })\n  })\n\n\n  describe('#24', () => {\n    it('should be translated', () => {\n      assert.strictEqual(\n        vm.$t('continue-with-new-account'),\n        messages[vm.$i18n.locale]['continue-with-new-account']\n      )\n    })\n  })\n\n  describe('#35', () => {\n    it('should be translated', () => {\n      assert.strictEqual(\n        vm.$t('underscore', { helloMsg: 'hello' }),\n        'hello world'\n      )\n    })\n  })\n\n  describe('#42, #43', () => {\n    it('should not be occurred error', () => {\n      assert.strictEqual(\n        vm.$t('message[\\'hello\\']'),\n        messages[vm.$i18n.locale]['message']['hello']\n      )\n    })\n  })\n\n  describe('#51', () => {\n    it('should be translated', () => {\n      assert.strictEqual(\n        vm.$t('message.hyphen-locale'),\n        'hello hyphen'\n      )\n    })\n  })\n\n  describe('#91, #51', () => {\n    it('should be translated', () => {\n      const arrayMessages = messages[vm.$i18n.locale].issues.arrayBugs\n      for (let i = 0; i < arrayMessages.length; i++) {\n        const item = vm.$t('issues.arrayBugs')[i]\n        assert.strictEqual(item, arrayMessages[i])\n      }\n    })\n  })\n\n  describe('#97', () => {\n    it('should be translated', () => {\n      assert.strictEqual(\n        vm.$t('message.1234'),\n        messages[vm.$i18n.locale]['message']['1234']\n      )\n      assert.strictEqual(\n        vm.$t('message.1mixedKey'),\n        messages[vm.$i18n.locale]['message']['1mixedKey']\n      )\n    })\n  })\n\n  describe('#169', () => {\n    it('should be translated', done => {\n      const Component = Vue.extend({\n        __i18n: [JSON.stringify({\n          en: { custom: 'custom block!' }\n        })],\n        render (h) {\n          return h('p', { ref: 'custom' }, [this.$t('custom')])\n        }\n      })\n      const vm = new Component({ i18n }).$mount()\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$refs.custom.textContent, 'custom block!')\n      }).then(done)\n    })\n  })\n\n  describe('#170', () => {\n    it('should be translated', () => {\n      assert.strictEqual(vm.$i18n.t('message.linkHyphen'), messages.en['hyphen-hello'])\n      assert.strictEqual(vm.$i18n.t('message.linkUnderscore'), messages.en.underscore_hello)\n    })\n  })\n\n  describe('#171', () => {\n    it('should be translated', done => {\n      vm = new Vue({\n        i18n,\n        render (h) {\n          return h('i18n', { props: { path: 'message.linkList' } }, [\n            h('strong', [this.$t('underscore_hello')]),\n            h('strong', [this.$t('message.link')])\n          ])\n        }\n      }).$mount()\n      Vue.nextTick().then(() => {\n        assert.strictEqual(\n          vm.$el.innerHTML,\n          'the world: <strong>underscore the wolrd</strong> <strong>the world</strong>'\n        )\n      }).then(done)\n    })\n  })\n\n  describe('#172', () => {\n    it('should be translated', done => {\n      vm = new Vue({\n        i18n: new VueI18n({\n          locale: 'en',\n          messages: {\n            en: { 'company-name': 'billy-bob\\'s fine steaks.' }\n          }\n        }),\n        components: {\n          comp: {\n            __i18n: [JSON.stringify({\n              en: { title: '@:company-name - yeee hawwww!!!' }\n            })],\n            render (h) {\n              return h('p', { ref: 'title' }, [this.$t('title')])\n            }\n          }\n        },\n        render (h) {\n          return h('div', [h('comp', { ref: 'comp' })])\n        }\n      }).$mount()\n      Vue.nextTick().then(() => {\n        assert.strictEqual(\n          vm.$refs.comp.$refs.title.textContent,\n          'billy-bob\\'s fine steaks. - yeee hawwww!!!'\n        )\n      }).then(done)\n    })\n  })\n\n  describe('#173', () => {\n    it('should be translated', done => {\n      const Component = Vue.extend({\n        __i18n: [JSON.stringify({\n          en: { custom: 'custom block!' }\n        })],\n        render (h) {\n          return h('p', { ref: 'custom' }, [this.$t('custom')])\n        }\n      })\n      const vm = new Component({\n        i18n: new VueI18n({ locale: 'en' })\n      }).$mount()\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$refs.custom.textContent, 'custom block!')\n      }).then(done)\n    })\n  })\n\n  describe('#174', () => {\n    it('should be fallback', done => {\n      vm = new Vue({\n        i18n: new VueI18n({\n          locale: 'en',\n          fallbackLocale: 'ja',\n          messages: {\n            en: {},\n            ja: { msg: 'メッセージ' }\n          }\n        }),\n        components: {\n          comp: {\n            i18n: {\n              messages: {\n                en: {},\n                ja: { hello: 'こんにちは' }\n              }\n            },\n            render (h) {\n              return h('div', [\n                h('p', { ref: 'el1' }, [this.$t('hello')]),\n                h('p', { ref: 'el2' }, [this.$t('msg')])\n              ])\n            }\n          }\n        },\n        render (h) {\n          return h('div', [h('comp', { ref: 'comp' })])\n        }\n      }).$mount()\n      const el1 = vm.$refs.comp.$refs.el1\n      const el2 = vm.$refs.comp.$refs.el2\n      Vue.nextTick().then(() => {\n        assert.strictEqual(el1.textContent, 'こんにちは')\n        assert.strictEqual(el2.textContent, 'メッセージ')\n      }).then(done)\n    })\n  })\n\n  describe('#176', () => {\n    it('should be translated', done => {\n      vm = new Vue({\n        i18n: new VueI18n({\n          locale: 'xx',\n          fallbackLocale: 'en',\n          messages: {\n            en: {\n              'alpha': '[EN] alpha {gustav} value',\n              'bravo': '[EN] bravo {gustav} value',\n              'charlie': '[EN] charlie {0} value',\n              'delta': '[EN] delta {0} value'\n            },\n            xx: {\n              'bravo': '[XX] bravo {gustav} value',\n              'delta': '[XX] delta {0} value'\n            }\n          }\n        }),\n        render (h) {\n          return h('div', [\n            h('p', { ref: 'el1' }, [this.$t('alpha', { gustav: 'injected' })]),\n            h('p', { ref: 'el2' }, [this.$t('bravo', { gustav: 'injected' })]),\n            h('p', { ref: 'el3' }, [this.$t('charlie', ['injected'])]),\n            h('p', { ref: 'el4' }, [this.$t('delta', ['injected'])])\n          ])\n        }\n      }).$mount()\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$refs.el1.textContent, '[EN] alpha injected value')\n        assert.strictEqual(vm.$refs.el2.textContent, '[XX] bravo injected value')\n        assert.strictEqual(vm.$refs.el3.textContent, '[EN] charlie injected value')\n        assert.strictEqual(vm.$refs.el4.textContent, '[XX] delta injected value')\n      }).then(done)\n    })\n  })\n\n  describe('#191', () => {\n    it('should be parsed', () => {\n      const tokens = parse('{deposit}% PREPAYMENT')\n      assert(tokens.length === 2)\n      assert.strictEqual(tokens[0].type, 'named')\n      assert.strictEqual(tokens[0].value, 'deposit')\n      assert.strictEqual(tokens[1].type, 'text')\n      assert.strictEqual(tokens[1].value, '% PREPAYMENT')\n    })\n  })\n\n  describe('#200', () => {\n    it('should be translated', () => {\n      const el = document.createElement('div')\n      const Constructor = Vue.extend({ i18n })\n      const vm = new Constructor({\n        render (h) {\n          return h('p', { ref: 'text' }, [this.$t('message.hello')])\n        }\n      }).$mount(el)\n      assert.strictEqual(vm.$refs.text.textContent, messages.en.message.hello)\n    })\n  })\n\n  describe('#203', () => {\n    it('should be translated', done => {\n      const App = {\n        render (h) {\n          return h('p', { ref: 'app' }, [this.$t('hello')])\n        }\n      }\n      vm = new Vue({\n        render (h) {\n          return h({\n            components: { App },\n            render (h) { return h('app') },\n            i18n: new VueI18n({\n              locale: 'en',\n              messages: {\n                en: {\n                  'hello': 'hello 203'\n                },\n                ja: {\n                  'hello': 'こんにちは 203'\n                }\n              }\n            })\n          })\n        }\n      }).$mount()\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$el.innerHTML, 'hello 203')\n      }).then(done)\n    })\n  })\n\n  describe('#247', () => {\n    it('should be warned if circular reference in linked locale message', () => {\n      const spy = sinon.spy(console, 'warn')\n      assert.strictEqual(vm.$i18n.t('message.circular1'), 'Foo Bar Buz @:message.circular1')\n      assert(spy.notCalled === false)\n      assert(spy.callCount === 1)\n      spy.restore()\n    })\n\n    it('should not be warned if same non-circular link used repeatedly', () => {\n      const spy = sinon.spy(console, 'warn')\n      assert.strictEqual(vm.$i18n.t('message.linkTwice'), 'the world: the world')\n      assert(spy.notCalled === true)\n      assert(spy.callCount === 0)\n      spy.restore()\n    })\n  })\n\n  describe('#349', () => {\n    it('should be existed', done => {\n      assert(vm.$te('foo.bar.buz') === true)\n      done()\n    })\n  })\n\n  describe('#377', () => {\n    it('should be destroyed', done => {\n      const el = document.createElement('div')\n      const template = `<div id=\"app\">\n        <p>TIMEOUT : {{ timeout }}</p>\n        <div ref=\"el1\" v-if=\"!timeout\">\n          <span v-t=\"'SHOULD_NOT_DISPLAY_WHEN_TIMEOUT_EQUAL_TRUE'\"></span>\n        </div>\n        <div ref=\"el2\" v-if=\"timeout\">\n          <span class=\"\">{{ $t('CANNOT_REPRODUCE_WITHOUT_THIS') }}</span>\n        </div>\n      </div>`\n      const { render, staticRenderFns } = compiler.compileToFunctions(template)\n      const vm = new Vue({\n        i18n: new VueI18n({ locale: 'id' }),\n        data () {\n          return { timeout: false }\n        },\n        methods: {\n          startLoading: function () {\n            this.timeout = true\n            setTimeout(() => {\n              this.timeout = false\n            }, 100)\n          }\n        },\n        render,\n        staticRenderFns\n      }).$mount(el)\n\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$refs.el1.outerHTML, '<div><span>SHOULD_NOT_DISPLAY_WHEN_TIMEOUT_EQUAL_TRUE</span></div>')\n        vm.startLoading()\n        delay(50).then(() => {\n          assert.strictEqual(vm.$refs.el2.outerHTML, '<div><span>CANNOT_REPRODUCE_WITHOUT_THIS</span></div>')\n          delay(60).then(() => {\n            assert.strictEqual(vm.$refs.el1.outerHTML, '<div><span>SHOULD_NOT_DISPLAY_WHEN_TIMEOUT_EQUAL_TRUE</span></div>')\n            done()\n          })\n        })\n      })\n    })\n  })\n\n  describe('#398', () => {\n    it('should return true', () => {\n      assert.strictEqual(vm.$te('0123a'), true)\n      assert.strictEqual(vm.$te('01234'), true)\n      assert.strictEqual(vm.$te('message.1234'), true)\n    })\n  })\n\n  describe('#430', () => {\n    it('should be translated', () => {\n      assert.strictEqual(\n        vm.$t('日本語'),\n        messages[vm.$i18n.locale]['日本語']\n      )\n      assert.strictEqual(\n        vm.$t('message.sálvame'),\n        messages[vm.$i18n.locale]['message']['sálvame']\n      )\n    })\n  })\n\n  describe('#450', () => {\n    it('shoulbe be translated with v-t', done => {\n      const vm = new Vue({\n        i18n: new VueI18n({\n          locale: 'en',\n          messages: {\n            en: {\n              hello: 'hi there!'\n            }\n          }\n        }),\n        render (h) {\n          // <p ref=\"text\" v-t=\"'hello'\"></p>\n          return h('p', { ref: 'text', directives: [{\n            name: 't', rawName: 'v-t', value: ('hello'), expression: \"'hello'\"\n          }] })\n        }\n      }).$mount(document.createElement('div'))\n\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$refs.text.textContent, 'hi there!')\n      }).then(() => {\n        vm.$i18n.setLocaleMessage('en', {\n          hello: 'hello there!'\n        })\n        vm.$forceUpdate()\n      }).then(() => {\n        assert.strictEqual(vm.$refs.text.textContent, 'hello there!')\n      }).then(done)\n    })\n  })\n\n  describe('#453', () => {\n    it('should be handled root vm instance', done => {\n      const vm = new Vue({\n        i18n: new VueI18n({\n          locale: 'en',\n          missing: (locale, key, instance) => {\n            assert.strictEqual('ja', locale)\n            assert.strictEqual('foo.bar', key)\n            assert(vm === instance)\n            done()\n          }\n        }),\n        components: {\n          child: {\n            i18n: {\n              locale: 'ja'\n            },\n            render (h) {\n              return h('p', ['hello child'])\n            }\n          }\n        },\n        render (h) {\n          return h('div', [\n            h('child', { ref: 'child' })\n          ])\n        }\n      }).$mount()\n      vm.$nextTick(() => {\n        vm.$refs.child.$i18n.t('foo.bar', 'ja')\n      })\n    })\n  })\n\n  describe('#458', () => {\n    it('should be merged locale message', done => {\n      const vm = new Vue({\n        i18n: new VueI18n({\n          locale: 'en',\n          messages: {\n            hello: 'hello world!'\n          }\n        }),\n        render (h) {\n          return h('div', [\n            h('p', { ref: 'text1' }, [this.$t('key1')]),\n            h('p', { ref: 'text2' }, [this.$t('shared.key1')]),\n            h('p', { ref: 'text3' }, [this.$t('key2')]),\n            h('p', { ref: 'text4' }, [this.$t('shared.key2')])\n          ])\n        }\n      }).$mount()\n      Vue.nextTick().then(() => {\n        vm.$i18n.mergeLocaleMessage('en', {\n          key1: 'Hello Module 1',\n          shared: {\n            key1: 'Hello Module 1 shared key 1'\n          }\n        })\n        vm.$i18n.mergeLocaleMessage('en', {\n          key2: 'Hello Module 2',\n          shared: {\n            key2: 'Hello Module 2 shared key 2'\n          }\n        })\n      }).then(() => {\n        assert.strictEqual(vm.$refs.text1.textContent, 'Hello Module 1')\n        assert.strictEqual(vm.$refs.text2.textContent, 'Hello Module 1 shared key 1')\n        assert.strictEqual(vm.$refs.text3.textContent, 'Hello Module 2')\n        assert.strictEqual(vm.$refs.text4.textContent, 'Hello Module 2 shared key 2')\n      }).then(done)\n    })\n  })\n\n  describe('#78, #464', () => {\n    it('should fallback to default pluralization', () => {\n      // / Test default pluralization rule (english)\n      const i18n = new VueI18n({\n        locale: 'en',\n        messages: {\n          'en': {\n            test: 'no tests | 1 test | {n} tests'\n          }\n        }\n      })\n\n      assert.strictEqual(i18n.tc('test', 1), '1 test')\n      assert.strictEqual(i18n.tc('test', 0), 'no tests')\n      assert.strictEqual(i18n.tc('test', 10), '10 tests')\n    })\n\n    it('should use custom pluralization if available', () => {\n      // Test custom pluralization rule (slavic languages)\n      function slavicPluralization (choice, choicesLength) {\n        if (choice === 0) {\n          return 0\n        }\n\n        const teen = choice > 10 && choice < 20\n        const endsWithOne = choice % 10 === 1\n\n        if (choicesLength < 4) {\n          return (!teen && endsWithOne) ? 1 : 2\n        }\n\n        if (!teen && endsWithOne) {\n          return 1\n        }\n\n        if (!teen && choice % 10 >= 2 && choice % 10 <= 4) {\n          return 2\n        }\n\n        return (choicesLength < 4) ? 2 : 3\n      }\n\n      let i18n = new VueI18n({\n        locale: 'en',\n        messages: {\n          'en': {\n            test: 'no tests | 1 test | {n} tests'\n          },\n          'ru': {\n            test: 'нет тестов | 1 тест | {n} теста | {n} тестов'\n          }\n        },\n        pluralizationRules: {\n          'ru': slavicPluralization\n        }\n      })\n\n      assert.strictEqual(i18n.tc('test', 1), '1 test')\n      assert.strictEqual(i18n.tc('test', 0), 'no tests')\n      assert.strictEqual(i18n.tc('test', 10), '10 tests')\n\n      i18n.locale = 'ru'\n\n      assert.strictEqual(i18n.tc('test', 1), '1 тест')\n      assert.strictEqual(i18n.tc('test', 3), '3 теста')\n      assert.strictEqual(i18n.tc('test', 0), 'нет тестов')\n      assert.strictEqual(i18n.tc('test', 10), '10 тестов')\n\n      i18n = new VueI18n({\n        locale: 'ru',\n        messages: {\n          ru: {\n            car: '0 машин | {n} машина | {n} машины | {n} машин'\n          }\n        },\n        pluralizationRules: {\n          ru: slavicPluralization\n        }\n      })\n      vm = new Vue({ i18n })\n\n      assert.strictEqual(vm.$tc('car', 0), '0 машин')\n      assert.strictEqual(vm.$tc('car', 1), '1 машина')\n      assert.strictEqual(vm.$tc('car', 2), '2 машины')\n      assert.strictEqual(vm.$tc('car', 4), '4 машины')\n      assert.strictEqual(vm.$tc('car', 12), '12 машин')\n      assert.strictEqual(vm.$tc('car', 21), '21 машина')\n    })\n\n    it('ensures backward-compatibility with #451', () => {\n      const defaultImpl = VueI18n.prototype.getChoiceIndex\n      VueI18n.prototype.getChoiceIndex = function (choice, choicesLength) {\n        if (this.locale !== 'ru') {\n          return defaultImpl.apply(this, arguments)\n        }\n\n        if (choice === 0) {\n          return 0\n        }\n\n        const teen = choice > 10 && choice < 20\n        const endsWithOne = choice % 10 === 1\n\n        if (choicesLength < 4) {\n          return (!teen && endsWithOne) ? 1 : 2\n        }\n\n        if (!teen && endsWithOne) {\n          return 1\n        }\n\n        if (!teen && choice % 10 >= 2 && choice % 10 <= 4) {\n          return 2\n        }\n\n        return (choicesLength < 4) ? 2 : 3\n      }\n\n\n      i18n = new VueI18n({\n        locale: 'ru',\n        messages: {\n          ru: {\n            car: '0 машин | {n} машина | {n} машины | {n} машин'\n          }\n        }\n      })\n      vm = new Vue({ i18n })\n\n      assert.strictEqual(vm.$tc('car', 0), '0 машин')\n      assert.strictEqual(vm.$tc('car', 1), '1 машина')\n      assert.strictEqual(vm.$tc('car', 2), '2 машины')\n      assert.strictEqual(vm.$tc('car', 4), '4 машины')\n      assert.strictEqual(vm.$tc('car', 12), '12 машин')\n      assert.strictEqual(vm.$tc('car', 21), '21 машина')\n\n      // Set the default implementation back\n      VueI18n.prototype.getChoiceIndex = defaultImpl\n    })\n  })\n\n  describe('#468', () => {\n    it('should be existed', done => {\n      assert(vm.$te('hello world') === true)\n      done()\n    })\n  })\n\n  describe('#484', () => {\n    it('passes path to the formatter', () => {\n      const testPath = 'test.deep.message'\n\n      i18n = new VueI18n({\n        locale: 'en',\n        messages: {\n          en: {\n            test: {\n              deep: {\n                message: 'Hello!'\n              }\n            }\n          }\n        },\n        formatter: {\n          interpolate (message, values, path) {\n            assert.strictEqual(path, testPath)\n\n            return null // pass the case to the default formatter\n          }\n        }\n      })\n\n      assert.strictEqual(i18n.t(testPath), 'Hello!')\n    })\n  })\n\n  describe('#478', () => {\n    it('should be translated', () => {\n      const res = vm.$t('message.linkHelloName', { name: 'World {text}' })\n      assert.strictEqual(res, 'Hello World {text}')\n    })\n    it('should be translated', () => {\n      const res = vm.$t('message.linkHelloName', { name: 'World {text}', text: 'something' })\n      assert.strictEqual(res, 'Hello World {text}')\n    })\n    it('should be translated', () => {\n      const res = vm.$t('message.linkLinkHelloName', { name: 'World {text}', text: 'something' })\n      assert.strictEqual(res, 'Hello World {text}')\n    })\n  })\n\n  describe('#515', () => {\n    it('$te should return true for empty string', () => {\n      assert.strictEqual(vm.$te('message.empty'), true)\n    })\n  })\n\n  describe('#879', () => {\n    it('$t should not throw when invoked on a destroyed component', async () => {\n      const vm = new Vue({\n        i18n: new VueI18n({ locale: 'en' }),\n        methods: {\n          test: async function () {\n            // Long running async method that terminates after the component is destroyed.\n            await new Promise((resolve) => setTimeout(resolve, 50))\n            this.$t('anything')\n          }\n        }\n      })\n      const promise = vm.test() // invocation before being destroyed\n      vm.$destroy()\n      await promise // should not throw\n    })\n  })\n\n  describe('#892)', () => {\n    it('should not call \"componentInstanceCreatedListener\" on not creating local instance', () => {\n      const componentInstanceCreatedListener = sinon.spy()\n      new Vue({\n        i18n: new VueI18n({\n          locale: 'en',\n          componentInstanceCreatedListener\n        }),\n        components: {\n          child: {\n            render (h) {\n              return h('p', ['hello child'])\n            }\n          }\n        },\n        render (h) {\n          return h('div', [\n            h('child', { ref: 'child' })\n          ])\n        }\n      }).$mount()\n\n      assert(componentInstanceCreatedListener.called === false)\n    })\n\n    it('should call \"componentInstanceCreatedListener\" on creating local instance', () => {\n      const componentInstanceCreatedListener = sinon.spy()\n      const i18n = new VueI18n({\n        locale: 'en',\n        componentInstanceCreatedListener\n      })\n      new Vue({\n        i18n,\n        components: {\n          child: {\n            i18n: {\n              locale: 'ja'\n            },\n            render (h) {\n              return h('p', ['hello child'])\n            }\n          }\n        },\n        render (h) {\n          return h('div', [\n            h('child', { ref: 'child' })\n          ])\n        }\n      }).$mount()\n\n      assert(componentInstanceCreatedListener.calledOnce === true)\n      console.info(componentInstanceCreatedListener.args)\n      assert(componentInstanceCreatedListener.args[0][0] instanceof VueI18n) // new instance\n      assert.strictEqual(componentInstanceCreatedListener.args[0][1], i18n)\n    })\n  })\n\n  describe('#996', () => {\n    it('should merge __i18n and i18n', done => {\n      const Component = Vue.extend({\n        __i18n: [JSON.stringify({ en: { custom: 'custom block!' } })],\n        render (h) {\n          return h('p')\n        }\n      })\n      const vm = new Component({\n        i18n: new VueI18n({ locale: 'en', messages: { en: { another: 'another block!' } } })\n      }).$mount()\n\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$t('another'), 'another block!')\n        assert.strictEqual(vm.$t('custom'), 'custom block!')\n      }).then(done)\n        .catch(console.error)\n    })\n  })\n\n  describe('#1380', () => {\n    it('should be translated', done => {\n      vm = new Vue({\n        i18n: new VueI18n({\n          locale: 'en',\n          messages: {\n            en: {\n              'link-with-slash': '@:key/with/slash',\n              'key/with/slash': 'should be translated'\n            }\n          }\n        }),\n        render (h) {\n          return h('div', \n          [ h('p', { ref: 'text' }, [this.$t('link-with-slash')]) ])\n        }\n      }).$mount()\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$refs.text.textContent, 'should be translated')\n      }).then(done)\n    })\n  })\n\n  describe('#1488', () => {\n    it('should be translated', () => {\n      assert.strictEqual(vm.$i18n.t('message.linkColon'), messages.en['colon:hello'])\n      assert.strictEqual(vm.$i18n.t('message.linkPipe'), messages.en['pipe|hello'])\n    })\n  })\n\n  describe('#1308', () => {\n    it('should be translated', () => {\n      const i18n = new VueI18n({\n          locale: 'en',\n          messages: {\n            en: {\n              'address': 'home Address',\n              'snakeAddress': '@.snakeCase:(address)'\n            }\n          },\n          name: 'test',\n          modifiers: {\n            snakeCase: str => str.split(' ').join('-')\n          },\n      })\n\n      assert.strictEqual(i18n.t('snakeAddress'), 'home-Address')\n    })\n  })\n})\n"
  },
  {
    "path": "test/unit/message.test.js",
    "content": "import messages from './fixture/index'\n\ndescribe('message', () => {\n  let el\n  let i18n\n  let orgEnLocale\n  let orgJaLocaleMessage\n  const expectEnLocale = 'the world updated'\n  const expectJaLocaleMessage = {\n    message: {\n      hello: 'ザ・世界 -> メイド・イン・ヘブン'\n    }\n  }\n\n  beforeEach(() => {\n    i18n = new VueI18n({\n      locale: 'en',\n      messages\n    })\n    orgEnLocale = i18n.getLocaleMessage('en').message.hello\n    orgJaLocaleMessage = i18n.getLocaleMessage('ja')\n\n    el = document.createElement('div')\n    document.body.appendChild(el)\n  })\n\n  afterEach(() => {\n    messages.en.message.hello = orgEnLocale\n    i18n.setLocaleMessage('en', messages.en)\n    i18n.setLocaleMessage('ja', orgJaLocaleMessage)\n  })\n\n  describe('messages', () => {\n    it('should be workd', () => {\n      assert.deepEqual(messages, i18n.messages)\n    })\n  })\n\n  describe('getLocaleMessage / setLocaleMessage', () => {\n    it('should be worked', done => {\n      const vm = new Vue({\n        i18n,\n        render (h) {\n          return h('p', { ref: 'text' }, [this.$t('message.hello')])\n        }\n      }).$mount(el)\n\n      const { text } = vm.$refs\n      Vue.nextTick().then(() => {\n        assert.strictEqual(text.textContent, messages.en.message.hello)\n        // hot reload (set reactivity messages)\n        messages.en.message.hello = expectEnLocale\n        i18n.setLocaleMessage('en', messages.en)\n      }).then(() => {\n        assert.strictEqual(text.textContent, expectEnLocale)\n        // upade locale\n        i18n.setLocaleMessage('ja', expectJaLocaleMessage)\n        i18n.locale = 'ja'\n      }).then(() => {\n        assert.strictEqual(text.textContent, expectJaLocaleMessage.message.hello)\n      }).then(done)\n    })\n  })\n\n  describe('mergeLocaleMessage', () => {\n    it('should be merged', () => {\n      i18n = new VueI18n({\n        locale: 'en',\n        messages: {\n          en: {\n            foo: 'bar'\n          },\n          ja: {\n            foo: 'バー'\n          }\n        }\n      })\n      i18n.mergeLocaleMessage('en', { bar: 'foo' })\n      assert.deepEqual({ foo: 'bar', bar: 'foo' }, i18n.getLocaleMessage('en'))\n    })\n  })\n\n  it('Should be merged and notified if the target is empty', (done) => {\n    const i18n = new VueI18n({\n      locale: 'ru',\n      messages: {\n        ru: {}\n      }\n    })\n    const uw = i18n._vm.$watch('messages.ru.foo', (newVal, oldVal, o) => {\n      assert.equal(newVal, 'бар')\n      uw()\n      done()\n    })\n    i18n.mergeLocaleMessage('ru', { foo: 'бар' })\n    assert.deepEqual({ foo: 'бар' }, i18n.getLocaleMessage('ru'))\n  })\n})\n"
  },
  {
    "path": "test/unit/message_function.test.js",
    "content": "describe('message function', () => {\n  describe('simple', () => {\n    it('should be worked', () => {\n      i18n = new VueI18n({\n        locale: 'ja',\n        fallbackLocale: 'en',\n        messages: {\n          en: {\n            hello: (ctx) => 'hello'\n          },\n          ja: {\n            hello: (ctx) => 'こんにちは！'\n          }\n        }\n      })\n      assert.strictEqual(i18n.t('hello'), 'こんにちは！')\n    })\n  })\n\n  describe('list argument', () => {\n    it('should be worked', () => {\n      i18n = new VueI18n({\n        locale: 'ja',\n        fallbackLocale: 'en',\n        messages: {\n          en: {\n            hello: (ctx) => `hello, ${ctx.list(0)}!`\n          },\n          ja: {\n            hello: (ctx) => `こんにちは、${ctx.list(0)}！`\n          }\n        }\n      })\n      assert.strictEqual(i18n.t('hello', ['kazupon']), 'こんにちは、kazupon！')\n    })\n  })\n\n  describe('named argument', () => {\n    it('should be worked', () => {\n      i18n = new VueI18n({\n        locale: 'ja',\n        fallbackLocale: 'en',\n        messages: {\n          en: {\n            hello: (ctx) => `hello, ${ctx.named('name')}!`\n          },\n          ja: {\n            hello: (ctx) => `こんにちは、${ctx.named('name')}！`\n          }\n        }\n      })\n      assert.strictEqual(i18n.t('hello', { name: 'kazupon' }), 'こんにちは、kazupon！')\n    })\n  })\n\n  it('receives formatter, values, path, messages, locale', () => {\n    i18n = new VueI18n({\n      locale: 'ja',\n      fallbackLocale: 'en',\n      messages: {\n        en: {\n          hello: (ctx) => ctx.formatter.interpolate(`hey {x} {y}`, ctx.values, ctx.path).join(''),\n        },\n        ja: {\n          hello: (ctx) => ctx.formatter.interpolate(`hey {x} {y}`, ctx.values, ctx.path).join('') + ` ${ctx.messages[ctx.locale].world}`,\n          world: 'w0r1d'\n        }\n      }\n    })\n    assert.strictEqual(i18n.t('hello', { x: 'foo', y: 'bar' }), 'hey foo bar w0r1d')\n  })\n\n  it('receives linked function for resolving linked messages', () => {\n    i18n = new VueI18n({\n      locale: 'en',\n      messages: {\n        en: {\n          hello: (ctx) => `hello ${ctx.linked('foo')}`,\n          foo: 'world'\n        }\n      }\n    })\n    assert.strictEqual(i18n.t('hello'), 'hello world')\n  })\n})\n"
  },
  {
    "path": "test/unit/missing.test.js",
    "content": "describe('missing', () => {\n  describe('via i18n instance API', () => {\n    it('should be handled translate missing', done => {\n      const i18n = new VueI18n({\n        locale: 'en',\n        missing: (locale, key, vm) => {\n          assert.strictEqual('en', locale)\n          assert.strictEqual('foo.bar.buz', key)\n          assert(vm === null)\n          done()\n        }\n      })\n\n      i18n.t('foo.bar.buz')\n    })\n  })\n\n  describe('via vue instance', () => {\n    it('should be handled translate missing', done => {\n      const vm = new Vue({\n        i18n: new VueI18n({\n          locale: 'en',\n          missing: (locale, key, instance) => {\n            assert.strictEqual('en', locale)\n            assert.strictEqual('foo.bar.buz', key)\n            assert(vm === instance)\n            done()\n          }\n        })\n      })\n      vm.$t('foo.bar.buz')\n    })\n  })\n\n  describe('i18n missing getter/setter', () => {\n    it('should be worked', done => {\n      const missing = (locale, key) => {\n        assert(false)\n      }\n      const i18n = new VueI18n({\n        locale: 'en',\n        missing\n      })\n\n      assert.strictEqual(missing, i18n.missing)\n\n      i18n.missing = (locale, key, vm) => {\n        done()\n      }\n      i18n.t('foo.bar.buz')\n    })\n  })\n\n  describe('i18n missing values', () => {\n    it('should receive the values for interpolation', done => {\n      const testValues = {\n        foo: 'bar',\n        num: 1234\n      }\n\n      const missing = (locale, key, vm, values) => {\n        assert.strictEqual('en', locale)\n        assert.strictEqual('cannot.find', key)\n        // `values` is normalized to be an array.\n        assert.strictEqual('bar', values[0].foo)\n        assert.strictEqual(1234, values[0].num)\n        done()\n      }\n\n      const i18n = new VueI18n({\n        locale: 'en',\n        missing\n      })\n\n      i18n.t('cannot.find', testValues)\n    })\n  })\n\n  describe('missing handler return', () => {\n    it('should be returned missing handler', done => {\n      const i18n = new VueI18n({\n        locale: 'en',\n        missing: (locale, key, vm) => {\n          return key\n        }\n      })\n\n      assert.strictEqual(i18n.t('foo.bar.buz'), 'foo.bar.buz')\n      done()\n    })\n  })\n})\n"
  },
  {
    "path": "test/unit/mixin.test.js",
    "content": "import defineMixin from '../../src/mixin'\n\ndescribe('mixin', () => {\n  describe('beforeCreate', () => {\n    describe('invalid i18n option', () => {\n      it('should be warned', () => {\n        const spy = sinon.spy(console, 'warn')\n        // called from Vue core\n        new Vue({ i18n: 1 })\n\n        assert(spy.notCalled === false)\n        assert(spy.callCount === 1)\n\n        spy.restore()\n      })\n    })\n  })\n\n  describe('beforeDestroy', () => {\n    describe('not assign VueI18n instance', () => {\n      it('should be succeeded', () => {\n        assert(defineMixin().beforeDestroy() === undefined)\n      })\n    })\n  })\n})\n"
  },
  {
    "path": "test/unit/number.test.js",
    "content": "import numberFormats from './fixture/number'\n\nfunction convertToCharCodes (str) {\n  const codes = []\n  for (let i = 0; i < str.length; i++) {\n    codes.push(str.charCodeAt(i))\n  }\n  return codes\n}\n\nconst desc = VueI18n.availabilities.numberFormat ? describe : describe.skip\ndesc('number format', () => {\n  describe('numberFormats', () => {\n    it('should be worked', done => {\n      const i18n = new VueI18n({\n        locale: 'en-US',\n        numberFormats\n      })\n      Vue.nextTick().then(() => {\n        assert.deepEqual(numberFormats, i18n.numberFormats)\n      }).then(done)\n    })\n  })\n\n  describe('getNumberFormat / setNumberFormat', () => {\n    it('should be worked', done => {\n      const i18n = new VueI18n({\n        locale: 'en-US',\n        numberFormats\n      })\n      const el = document.createElement('div')\n      document.body.appendChild(el)\n\n      const money = 101\n      const vm = new Vue({\n        i18n,\n        render (h) {\n          return h('p', { ref: 'text' }, [this.$n(money, 'currency')])\n        }\n      }).$mount(el)\n\n      const { text } = vm.$refs\n      const zhFormat = {\n        currency: {\n          style: 'currency', currency: 'CNY', currencyDisplay: 'name'\n        }\n      }\n      Vue.nextTick().then(() => {\n        assert.strictEqual(text.textContent, '$101.00')\n        i18n.setNumberFormat('zh-CN', zhFormat)\n        assert.deepEqual(i18n.getNumberFormat('zh-CN'), zhFormat)\n        i18n.locale = 'zh-CN'\n      }).then(() => {\n        // NOTE: avoid webkit (safari/phantomjs) & Intl polyfill wired localization...\n        if (isChrome) {\n          const actual = [49, 48, 49, 46, 48, 48, 20154, 27665, 24065] // 101.00人民币\n          const target = convertToCharCodes(text.textContent)\n          assert.deepEqual(target, actual)\n        }\n      }).then(done)\n    })\n  })\n\n  describe('mergeNumberFormat', () => {\n    it('should be merged', () => {\n      const i18n = new VueI18n({\n        locale: 'ja-JP',\n        numberFormats\n      })\n      const percent = { style: 'percent' }\n      i18n.mergeNumberFormat('en-US', { percent })\n      assert.deepEqual(percent, i18n.getNumberFormat('en-US').percent)\n    })\n  })\n\n  describe('fallback', () => {\n    it('should be fallback', done => {\n      const i18n = new VueI18n({\n        locale: 'en-uk',\n        fallbackLocale: ['de', 'en-us'],\n        numberFormats: {\n          de: {\n            currency: {\n              currency: 'EUR',\n              style: 'currency',\n              minimumFractionDigits: 2,\n              maximumFractionDigits: 2\n            }\n          }\n        }\n      })\n      const el = document.createElement('div')\n      document.body.appendChild(el)\n\n      const money = 101\n      const vm = new Vue({\n        i18n,\n        render (h) {\n          return h('p', { ref: 'text' }, [this.$n(money, 'currency')])\n        }\n      }).$mount(el)\n\n      const { text } = vm.$refs\n\n      Vue.nextTick().then(() => {\n        assert.strictEqual(text.textContent, '101,00 €')\n      }).then(done)\n    })\n  })\n})\n"
  },
  {
    "path": "test/unit/number_component.test.js",
    "content": "import numberFormats from './fixture/number'\n\nconst desc = VueI18n.availabilities.numberFormat ? describe : describe.skip\ndesc('number custom formatting', () => {\n  let i18n\n  let value\n\n  beforeEach(() => {\n    i18n = new VueI18n({\n      locale: 'en-US',\n      fallbackLocale: 'ja-JP',\n      numberFormats\n    })\n    value = 10100\n  })\n\n  describe('basic', () => {\n    it('should be formatted', done => {\n      const vm = new Vue({\n        i18n,\n        el: document.createElement('div'),\n        render (h) {\n          return h('i18n-n', { props: { value } })\n        },\n      })\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$el.textContent, '10,100')\n      }).then(done)\n    })\n  })\n\n  describe('format', () => {\n    describe('as string property', () => {\n      it('should be formatted', done => {\n        const vm = new Vue({\n          i18n,\n          el: document.createElement('div'),\n          render (h) {\n            return h('i18n-n', { props: { value, format: 'currency' } })\n          },\n        })\n        Vue.nextTick().then(() => {\n          assert.strictEqual(vm.$el.textContent, '$10,100.00')\n        }).then(done)\n      })\n    })\n\n    describe('as object property', () => {\n      it('should be formatted', done => {\n        const vm = new Vue({\n          i18n,\n          el: document.createElement('div'),\n          render (h) {\n            return h('i18n-n', { props: { value, format: { key: 'currency' } } })\n          },\n        })\n        Vue.nextTick().then(() => {\n          assert.strictEqual(vm.$el.textContent, '$10,100.00')\n        }).then(done)\n      })\n    })\n  })\n\n  describe('locale', () => {\n    it('should be formatted', done => {\n      const vm = new Vue({\n        i18n,\n        el: document.createElement('div'),\n        render (h) {\n          return h('i18n-n', { props: { value, format: 'currency', locale: 'ja-JP' } })\n        },\n      })\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$el.textContent, '￥10,100')\n      }).then(done)\n    })\n  })\n\n  describe('tag', () => {\n    it('should default to span', done => {\n      const vm = new Vue({\n        i18n,\n        el: document.createElement('div'),\n        render (h) {\n          return h('i18n-n', { props: { value } })\n        },\n      })\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$el.outerHTML, '<span>10,100</span>')\n      }).then(done)\n    })\n\n    it('should be formatted', done => {\n      const vm = new Vue({\n        i18n,\n        el: document.createElement('div'),\n        render (h) {\n          return h('i18n-n', { props: { value, tag: 'p' } })\n        },\n      })\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$el.outerHTML, '<p>10,100</p>')\n      }).then(done)\n    })\n\n    it('of value true defaults to span', done => {\n      const vm = new Vue({\n        i18n,\n        el: document.createElement('div'),\n        render (h) {\n          return h('i18n-n', { props: { value, tag: true } })\n        },\n      })\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$el.outerHTML, '<span>10,100</span>')\n      }).then(done)\n    })\n\n    it('of value false does not apply a root container', done => {\n      const vm = new Vue({\n        i18n,\n        el: document.createElement('div'),\n        render (h) {\n          return h('i18n-n', { props: { value, tag: false } })\n        },\n      })\n      Vue.nextTick().then(() => {\n        console.log('\\n\\n\\n\\n\\n\\n\\n', vm.$el, '\\n\\n', vm.$el.nodeType)\n        assert.strictEqual(vm.$el.nodeType, Node.TEXT_NODE)\n        assert.strictEqual(vm.$el.data, '10,100')\n      }).then(done)\n    })\n  })\n\n  describe('explicit options', () => {\n    describe('without key', () => {\n      it('should be formatted', done => {\n        const vm = new Vue({\n          i18n,\n          el: document.createElement('div'),\n          render (h) {\n            return h('i18n-n', { props: { value, format: { style: 'currency', currency: 'JPY' } } })\n          },\n        })\n        Vue.nextTick().then(() => {\n          assert.strictEqual(vm.$el.textContent, '¥10,100')\n        }).then(done)\n      })\n\n      it('should respect other number options', done => {\n        const vm = new Vue({\n          i18n,\n          el: document.createElement('div'),\n          render (h) {\n            return h('i18n-n', { props: { value, format: { style: 'currency', currency: 'EUR', currencyDisplay: 'code' } } })\n          },\n        })\n        Vue.nextTick().then(() => {\n          assert.strictEqual(vm.$el.textContent, 'EUR 10,100.00')\n        }).then(done)\n      })\n    })\n\n    describe('with key', () => {\n      it('should be formatted', done => {\n        const vm = new Vue({\n          i18n,\n          el: document.createElement('div'),\n          render (h) {\n            return h('i18n-n', { props: { value, format: { key: 'currency', currency: 'JPY' } } })\n          },\n        })\n        Vue.nextTick().then(() => {\n          assert.strictEqual(vm.$el.textContent, '¥10,100')\n        }).then(done)\n      })\n\n      it('should respect other number options', done => {\n        const vm = new Vue({\n          i18n,\n          el: document.createElement('div'),\n          render (h) {\n            return h('i18n-n', { props: { value, format: { key: 'currency', currency: 'EUR', currencyDisplay: 'code' } } })\n          },\n        })\n        Vue.nextTick().then(() => {\n          assert.strictEqual(vm.$el.textContent, 'EUR 10,100.00')\n        }).then(done)\n      })\n    })\n  })\n\n  describe('partial formatting', () => {\n    it('should be formatted', done => {\n      const vm = new Vue({\n        i18n,\n        el: document.createElement('div'),\n        render (h) {\n          return h('i18n-n', {\n            props: { value },\n            scopedSlots: {\n              integer: props => h('span', props.integer),\n              group: props => h('p', props.group)\n            }\n          })\n        },\n      })\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$el.innerHTML, '<span>10</span><p>,</p><span>100</span>')\n      }).then(done)\n    })\n\n    it('should pass part index as scoped prop', done => {\n      const vm = new Vue({\n        i18n,\n        el: document.createElement('div'),\n        render (h) {\n          return h('i18n-n', {\n            props: { value: 1000000, format: 'currency' },\n            scopedSlots: {\n              currency: props => h('span', new Array(3).fill(props.currency).join('')),\n              group: props => h('p', { staticClass: props.index }, props.group)\n            }\n          })\n        },\n      })\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$el.innerHTML, '<span>$$$</span>1<p class=\"2\">,</p>000<p class=\"4\">,</p>000.00')\n      }).then(done)\n    })\n\n    it('should pass parts as scoped prop', done => {\n      const vm = new Vue({\n        i18n,\n        el: document.createElement('div'),\n        render (h) {\n          return h('i18n-n', {\n            props: { value: -12 },\n            scopedSlots: {\n              integer: props => h('span', {\n                staticClass: props.parts.find(part => part.type === 'minusSign') ? 'red' : ''\n              }, props.integer)\n            }\n          })\n        },\n      })\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$el.innerHTML, '-<span class=\"red\">12</span>')\n      }).then(done)\n    })\n\n    it('should ignore non-present scoped slot', done => {\n      const vm = new Vue({\n        i18n,\n        el: document.createElement('div'),\n        render (h) {\n          return h('i18n-n', {\n            props: { value },\n            scopedSlots: {\n              currency: props => h('span', props.currency)\n            }\n          })\n        },\n      })\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$el.innerHTML, '10,100')\n      }).then(done)\n    })\n\n    it('should ignore default scoped slot', done => {\n      const vm = new Vue({\n        i18n,\n        el: document.createElement('div'),\n        render (h) {\n          return h('i18n-n', {\n            props: { value },\n            scopedSlots: {\n              default: props => h('span', props.integer)\n            }\n          })\n        },\n      })\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$el.innerHTML, '10,100')\n      }).then(done)\n    })\n  })\n\n  describe('fallback', () => {\n    it('should be formatted', done => {\n      const vm = new Vue({\n        i18n,\n        el: document.createElement('div'),\n        render (h) {\n          return h('i18n-n', { props: { value: 0.9, format: 'percent' } })\n        },\n      })\n      Vue.nextTick().then(() => {\n        assert.strictEqual(vm.$el.textContent, '90%')\n      }).then(done)\n    })\n  })\n\n  describe('change number format runtime', () => {\n    it('should be changed', done => {\n      const i18n = new VueI18n({\n        locale: 'en-US',\n        numberFormats\n      })\n      const el = document.createElement('div')\n      document.body.appendChild(el)\n\n      const money = 101\n      const vm = new Vue({\n        i18n,\n        render (h) {\n          return h('p', { ref: 'text' }, [this.$n(money, 'currency')])\n        }\n      }).$mount(el)\n\n      const { text } = vm.$refs\n      const otherEnFormat = {\n        currency: {\n          style: 'currency', currency: 'CZK', currencyDisplay: 'name'\n        }\n      }\n\n      Vue.nextTick().then(() => {\n        assert.strictEqual(text.textContent, '$101.00')\n        i18n.setNumberFormat('en-US', otherEnFormat)\n      }).then(() => {\n        assert.strictEqual(text.textContent, '101.00 Czech korunas')\n      }).then(done)\n    })\n  })\n\n  describe('warnning in render', () => {\n    it('should be warned', () => {\n      const spy = sinon.spy(console, 'warn')\n\n      new Vue({\n        el: document.createElement('div'),\n        render (h) {\n          return h('i18n-n', { props: { value } })\n        },\n      })\n      assert(spy.notCalled === false)\n      assert(spy.callCount === 1)\n\n      spy.restore()\n    })\n  })\n})\n"
  },
  {
    "path": "test/unit/path.test.js",
    "content": "import I18nPath from '../../src/path'\n\ndescribe('path', () => {\n  const path = new I18nPath()\n\n  describe('primitive', () => {\n    it('should get path value', () => {\n      assert.strictEqual(path.getPathValue({ a: { b: 1 } }, 'a.b'), 1)\n    })\n  })\n\n  describe('whitespace', () => {\n    it('should get value if it contains space 0x20', () => {\n      const val = path.getPathValue({ 'a c': 1 }, 'a c')\n      assert.strictEqual(val, 1)\n    })\n\n    it('should return null if it contains whitespace chars except space 0x20', () => {\n      const val = path.getPathValue({ 'a\\tc': 1 }, 'a\\tc')\n      assert.strictEqual(val, null)\n    })\n  })\n\n  describe('object', () => {\n    it('should get path value', () => {\n      const val = path.getPathValue({ a: { b: 1 } }, 'a')\n      assert.strictEqual(val.b, 1)\n    })\n\n    it('should accept space 0x20 as keypath', () => {\n      const val = path.getPathValue({ a: { 'b c d': 1 } }, 'a.b c d')\n      assert.strictEqual(val, 1)\n    })\n  })\n\n  describe('number key in object', () => {\n    it('should get path value', () => {\n      assert.strictEqual(\n        path.getPathValue({ errors: { '1': 'error number 1' } }, 'errors[1]'),\n        'error number 1'\n      )\n    })\n  })\n\n  describe('array index path', () => {\n    it('should get value', () => {\n      assert.strictEqual(\n        path.getPathValue({ errors: ['error number 0'] }, 'errors[0]'),\n        'error number 0'\n      )\n    })\n  })\n\n  describe('array path', () => {\n    it('should get path value', () => {\n      assert.strictEqual(\n        path.getPathValue({ errors: ['error number 0'] }, 'errors')[0],\n        'error number 0'\n      )\n    })\n  })\n\n  describe('not found', () => {\n    it('should not get null', () => {\n      assert.strictEqual(path.getPathValue({}, 'a.b'), null)\n    })\n  })\n\n  describe('obj: primitive', () => {\n    it('should not get null', () => {\n      assert.strictEqual(path.getPathValue(10, 'a.b'), null)\n    })\n  })\n\n  describe('obj: null', () => {\n    it('should not get null', () => {\n      assert.strictEqual(path.getPathValue(null, 'a.b'), null)\n    })\n  })\n\n  describe('Blanket: term', () => {\n    it('should not get null', () => {\n      assert.strictEqual(path.getPathValue({}, 'a.b.c[]'), null)\n    })\n  })\n\n  describe('Blanket: middle', () => {\n    it('should not get null', () => {\n      assert.strictEqual(path.getPathValue({}, 'a.b.c[]d'), null)\n    })\n  })\n  \n  describe('obj: null child', () => {\n    it('should return null if parent is null', () => {\n      assert.strictEqual(path.getPathValue({ a: null }, 'a.b'), null)\n    })\n  })\n})\n"
  },
  {
    "path": "test/unit/post_translation.test.js",
    "content": "describe('postTranslation option', () => {\n  let i18n\n  beforeEach(() => {\n    i18n = new VueI18n({\n      locale: 'en',\n      postTranslation: str => str.trim(),\n      messages: {\n        en: {\n          hello: ' hello world! ',\n          apple: ' no apples | one apple | {count} apples '\n        }\n      }\n    })\n  })\n\n  describe('t', () => {\n    it('should be hooked', () => {\n      assert.strictEqual(i18n.t('hello'), 'hello world!')\n    })\n  })\n\n  describe('$t', () => {\n    it('should be hooked', () => {\n      const vm = new Vue({ i18n })\n      assert.strictEqual(vm.$t('hello'), 'hello world!')\n    })\n  })\n\n  describe('tc', () => {\n    it('should be hooked', () => {\n      assert.strictEqual(i18n.tc('apple', 0), 'no apples')\n    })\n  })\n\n  describe('$tc', () => {\n    it('should be hooked', () => {\n      const vm = new Vue({ i18n })\n      assert.strictEqual(vm.$tc('apple', 0), 'no apples')\n    })\n  })\n\n  describe('postTranslation option', () => {\n    describe('default', () => {\n      it('should be undefined', () => {\n        i18n = new VueI18n({ locale: 'en' })\n        assert.strictEqual(i18n.postTranslation, null)\n      })\n    })\n\n    describe('set hook', () => {\n      it('should be hooked', () => {\n        i18n = new VueI18n({\n          locale: 'en',\n          messages: {\n            en: {\n              hello: ' hello world! '\n            }\n          }\n        })\n        const vm = new Vue({ i18n })\n        assert.strictEqual(vm.$t('hello'), ' hello world! ')\n        // set!\n        i18n.postTranslation = str => str.trim()\n        assert.strictEqual(vm.$t('hello'), 'hello world!')\n      })\n    })\n  })\n})\n"
  },
  {
    "path": "test/unit/silent.test.js",
    "content": "import dateTimeFormats from './fixture/datetime'\nimport numberFormats from './fixture/number'\n\ndescribe('silent', () => {\n  let spy\n  beforeEach(() => {\n    spy = sinon.spy(console, 'warn')\n  })\n  afterEach(() => {\n    spy.restore()\n  })\n\n  describe('silentTranslationWarn', () => {\n    describe('boolean', () => {\n      it('should be suppressed translate warnings', () => {\n        const warningRegex = /Cannot translate the value of keypath 'foo.bar.buz'. Use the value of keypath as default./\n        const vm = new Vue({\n          i18n: new VueI18n({\n            locale: 'en',\n            silentTranslationWarn: true,\n            messages: {\n              en: { who: 'root' },\n              ja: { who: 'ルート' }\n            }\n          })\n        })\n\n        vm.$t('foo.bar.buz')\n        assert(spy.getCalls().some(call => call.args[0].match(warningRegex)) === false)\n\n        // change\n        vm.$i18n.silentTranslationWarn = false\n        vm.$t('foo.bar.buz')\n        assert(spy.getCalls().some(call => call.args[0].match(warningRegex)) === true)\n      })\n    })\n\n    describe('Regex', () => {\n      it('should be suppressed translate warnings', () => {\n        const warningRegex = /Cannot translate the value of keypath .*\\. Use the value of keypath as default./\n        const vm = new Vue({\n          i18n: new VueI18n({\n            locale: 'en',\n            silentTranslationWarn: true,\n            messages: {\n              en: { who: 'root' },\n              ja: { who: 'ルート' }\n            }\n          })\n        })\n\n        vm.$t('foo.bar.buz')\n        vm.$t('who.bar')\n        vm.$t('who.bar.buz')\n        assert(spy.getCalls().some(call => call.args[0].match(warningRegex)) === false)\n\n        // change to boolean\n        vm.$i18n.silentTranslationWarn = /^foo\\..*|who\\.bar$/\n        vm.$t('foo.bar.buz')\n        vm.$t('who.bar')\n        vm.$t('who.bar.buz')\n        assert(spy.getCalls().some(call => call.args[0].match(warningRegex)) === true)\n      })\n    })\n  })\n\n  describe('silentFallbackWarn', () => {\n    let i18n\n    beforeEach(() => {\n      i18n = new VueI18n({\n        locale: 'hu',\n        fallbackLocale: 'en',\n        silentFallbackWarn: true,\n        messages: {\n          en: { winner: 'winner' },\n          hu: { chickenDinner: 'csirkevacsora' }\n        }\n      })\n    })\n\n    describe('boolean', () => {\n      it('should suppress `Fall back to ${fallback} locale` warnings', () => {\n        const vm = new Vue({ i18n })\n        const warningRegex = /Fall back to .* 'en' locale./\n        vm.$t('winner')\n        assert(spy.getCalls().some(call => call.args[0].match(warningRegex)) === false)\n\n        vm.$i18n.silentFallbackWarn = false\n        vm.$t('winner')\n        assert(spy.getCalls().some(call => call.args[0].match(warningRegex)) === true)\n      })\n\n      it('should suppress `Fall back to root locale` warnings.', () => {\n        const el = document.createElement('div')\n        const root = new Vue({\n          i18n,\n          components: {\n            subComponent: {\n              i18n: { messages: { hu: { name: 'Név' } } },\n              render (h) { return h('p') }\n            }\n          },\n          render (h) { return h('sub-component') }\n        }).$mount(el)\n        const vm = root.$children[0]\n        const warningRegex = /Fall back to .* root locale./\n\n        vm.$t('chickenDinner')\n        assert(spy.getCalls().some(call => call.args[0].match(warningRegex)) === false)\n\n        vm.$i18n.silentFallbackWarn = false\n        vm.$t('chickenDinner')\n        assert(spy.getCalls().some(call => call.args[0].match(warningRegex)) === true)\n      })\n\n      describe('if first try is null or undefined,', () => {\n        it('should suppress `not a string` warnings for fallback to fallbackLocale.', () => {\n          const vm = new Vue({ i18n })\n          const warningRegex = /Value of .* is not a string./\n          vm.$t('winner')\n          assert(spy.getCalls().some(call => call.args[0].match(warningRegex)) === false)\n\n          vm.$i18n.silentFallbackWarn = false\n          vm.$t('winner')\n          assert(spy.getCalls().some(call => call.args[0].match(warningRegex)) === true)\n        })\n\n        it('should supress `not a string` warnings for fallback to root.', () => {\n          const el = document.createElement('div')\n          const root = new Vue({\n            i18n,\n            components: {\n              subComponent: {\n                i18n: { messages: { hu: { name: 'Név' } } },\n                render (h) { return h('p') }\n              }\n            },\n            render (h) { return h('sub-component') }\n          }).$mount(el)\n          const vm = root.$children[0]\n          const warningRegex = /Value of .* is not a string./\n          vm.$t('chickenDinner')\n          assert(spy.getCalls().some(call => call.args[0].match(warningRegex)) === false)\n\n          vm.$i18n.silentFallbackWarn = false\n          vm.$t('chickenDinner')\n          assert(spy.getCalls().some(call => call.args[0].match(warningRegex)) === true)\n        })\n      })\n\n      describe('if first try is not null, undefined, array, plain object or string,', () => {\n        it('should suppress `not a string` warnings for fallback to fallbackLocale.', () => {\n          const vm = new Vue({\n            i18n: new VueI18n({\n              locale: 'hu',\n              fallbackLocale: 'en',\n              silentFallbackWarn: true,\n              messages: {\n                en: { winner: 'winner' },\n                hu: { winner: true } // translation value is boolean\n              }\n            })\n          })\n          const warningRegex = /Value of .* is not a string./\n          vm.$t('winner')\n          assert(spy.getCalls().some(call => call.args[0].match(warningRegex)) === false)\n\n          vm.$i18n.silentFallbackWarn = false\n          vm.$t('winner')\n          assert(spy.getCalls().some(call => call.args[0].match(warningRegex)) === true)\n        })\n\n        it('should supress `not a string` warnings for fallback to root.', () => {\n          const el = document.createElement('div')\n          const root = new Vue({\n            i18n,\n            components: {\n              subComponent: {\n                i18n: { messages: { hu: { chickenDinner: 11 } } }, // translation value is number\n                render (h) { return h('p') }\n              }\n            },\n            render (h) { return h('sub-component') }\n          }).$mount(el)\n          const vm = root.$children[0]\n          const warningRegex = /Value of .* is not a string./\n          vm.$t('chickenDinner')\n          assert(spy.getCalls().some(call => call.args[0].match(warningRegex)) === false)\n\n          vm.$i18n.silentFallbackWarn = false\n          vm.$t('chickenDinner')\n          assert(spy.getCalls().some(call => call.args[0].match(warningRegex)) === true)\n        })\n      })\n\n      it('should not suppress `not a string` warnings when no further fallback is possible.', () => {\n        const vm = new Vue({ i18n })\n        const warningRegex = /Value of .* is not a string./\n        vm.$t('loser')\n        assert(spy.getCalls().some(call => call.args[0].match(warningRegex)) === true)\n      })\n    })\n\n    describe('Regexp', () => {\n      it('should be suppressed translate warnings', () => {\n        const el = document.createElement('div')\n        const root = new Vue({\n          i18n,\n          components: {\n            subComponent: {\n              i18n: { messages: { hu: { name: 'Név' } } },\n              render (h) { return h('p') }\n            }\n          },\n          render (h) { return h('sub-component') }\n        }).$mount(el)\n        const vm = root.$children[0]\n        const warningRegex = /Fall back to .*\\./\n        vm.$t('chickenDinner')\n        assert(spy.getCalls().some(call => call.args[0].match(warningRegex)) === false)\n\n        // change to boolean\n        vm.$i18n.silentFallbackWarn = /chic.*/\n        vm.$t('chickenDinner')\n        assert(spy.getCalls().some(call => call.args[0].match(warningRegex)) === false)\n      })\n    })\n\n    describe('datetime/number format', () => {\n      it('should be suppressed translate warnings', () => {\n        const el = document.createElement('div')\n        const root = new Vue({\n          i18n: new VueI18n({\n            locale: 'en-US',\n            fallbackLocale: 'ja-JP',\n            silentFallbackWarn: true,\n            dateTimeFormats,\n            numberFormats\n          }),\n          components: {\n            subComponent: {\n              i18n: {\n                dateTimeFormats: {},\n                numberFormats: {}\n              },\n              render (h) { return h('p') }\n            }\n          },\n          render (h) { return h('sub-component') }\n        }).$mount(el)\n        const vm = root.$children[0]\n        const warningDateTimeRegex = /Fall back to .* datetime formats\\./\n        const warningNumberRegex = /Fall back to .* number formats\\./\n        vm.$d(Date.now(), 'long')\n        vm.$n(10, 'numeric')\n        assert(spy.getCalls().some(call => call.args[0].match(warningDateTimeRegex)) === false)\n        assert(spy.getCalls().some(call => call.args[0].match(warningNumberRegex)) === false)\n\n        // change\n        vm.$i18n.silentFallbackWarn = false\n        vm.$d(Date.now(), 'long')\n        vm.$n(10, 'numeric')\n        assert(spy.getCalls().some(call => call.args[0].match(warningDateTimeRegex)) === true)\n        assert(spy.getCalls().some(call => call.args[0].match(warningNumberRegex)) === true)\n      })\n    })\n  })\n})\n"
  },
  {
    "path": "test/unit/warn_html_in_message.test.js",
    "content": "describe('warnHtmlInMessage', () => {\n  let spyWarn\n  let spyError\n  beforeEach(() => {\n    spyWarn = sinon.spy(console, 'warn')\n    spyError = sinon.spy(console, 'error')\n  })\n  afterEach(() => {\n    spyWarn.restore()\n    spyError.restore()\n  })\n\n  describe('constructor option', () => {\n    it('should be worked', () => {\n      const messages = {\n        en: {\n          message: {\n            foo: {\n              buz: '<p>buz</p>',\n              hello: 'hello'\n            },\n            bar: [1, { buz: '<p>buz</p>' }],\n            buz: 22\n          }\n        },\n        ja: { message: '<p>こんにちは</p>' }\n      }\n\n      // `off`\n      new VueI18n({\n        warnHtmlInMessage: 'off',\n        messages\n      })\n      assert(spyWarn.callCount === 0)\n      assert(spyError.callCount === 0)\n\n      // `warn`\n      new VueI18n({\n        warnHtmlInMessage: 'warn',\n        messages\n      })\n      assert(spyWarn.callCount === 3)\n      assert(spyError.callCount === 0)\n\n      // `error`\n      new VueI18n({\n        warnHtmlInMessage: 'error',\n        messages\n      })\n      assert(spyWarn.callCount === 3)\n      assert(spyError.callCount === 3)\n    })\n  })\n\n  describe('property', () => {\n    it('should be worked', () => {\n      const messages = {\n        en: {\n          message: {\n            foo: {\n              buz: '<p>buz</p>'\n            },\n            bar: [1, '<p>bar</p>'],\n            buz: 22\n          }\n        },\n        ja: { message: '<p>こんにちは</p>' }\n      }\n\n      const i18n = new VueI18n({\n        warnHtmlInMessage: 'off',\n        messages\n      })\n\n      // `warn`\n      i18n.warnHtmlInMessage = 'warn'\n      assert(spyWarn.callCount === 3)\n      assert(spyError.callCount === 0)\n\n      // `error`\n      i18n.warnHtmlInMessage = 'error'\n      assert(spyWarn.callCount === 3)\n      assert(spyError.callCount === 3)\n\n      // `off`\n      i18n.warnHtmlInMessage = 'off'\n      assert(spyWarn.callCount === 3)\n      assert(spyError.callCount === 3)\n    })\n  })\n\n  describe('setLocaleMessage', () => {\n    it('should be worked', () => {\n      const i18n = new VueI18n({\n        warnHtmlInMessage: 'warn',\n        messages: {\n          en: {},\n          ja: {}\n        }\n      })\n\n      i18n.setLocaleMessage('en', {\n        hello: '<p>hello</p>'\n      })\n      assert(spyWarn.callCount === 1)\n      assert(spyError.callCount === 0)\n\n      i18n.warnHtmlInMessage = 'error'\n      i18n.setLocaleMessage('ja', {\n        hello: '<p>こんにちは</p>'\n      })\n      assert(spyWarn.callCount === 1)\n      assert(spyError.callCount === 2)\n\n      i18n.warnHtmlInMessage = 'off'\n      assert(spyWarn.callCount === 1)\n      assert(spyError.callCount === 2)\n    })\n  })\n\n  describe('mergeLocaleMessage', () => {\n    it('should be worked', () => {\n      const i18n = new VueI18n({\n        warnHtmlInMessage: 'warn',\n        messages: {\n          en: {},\n          ja: {}\n        }\n      })\n\n      i18n.mergeLocaleMessage('en', {\n        hello: '<p>hello</p>'\n      })\n      assert(spyWarn.callCount === 1)\n      assert(spyError.callCount === 0)\n\n      i18n.warnHtmlInMessage = 'error'\n      i18n.mergeLocaleMessage('ja', {\n        hello: '<p>こんにちは</p>'\n      })\n      assert(spyWarn.callCount === 1)\n      assert(spyError.callCount === 2)\n\n      i18n.warnHtmlInMessage = 'off'\n      assert(spyWarn.callCount === 1)\n      assert(spyError.callCount === 2)\n    })\n  })\n})\n"
  },
  {
    "path": "types/.eslintrc.js",
    "content": "module.exports = {\n  root: true,\n  parserOptions: {\n    ecmaVersion: 2018,\n  },\n  extends: [\n    'plugin:@typescript-eslint/eslint-recommended',\n  ],\n  plugins: [\n    '@typescript-eslint',\n  ],\n  parser: '@typescript-eslint/parser',\n  parserOptions: {\n    sourceType: 'module',\n  },\n  rules: {\n    'object-curly-spacing': ['error', 'always'],\n    'no-multiple-empty-lines': ['error', { max: 2, maxBOF: 1 }]\n  }\n}\n"
  },
  {
    "path": "types/index.d.ts",
    "content": "export type Path = VueI18n.Path;\nexport type Locale = VueI18n.Locale;\nexport type FallbackLocale = VueI18n.FallbackLocale;\nexport type Values = VueI18n.Values;\nexport type Choice = VueI18n.Choice;\nexport type MessageContext = VueI18n.MessageContext;\nexport type MessageFunction = VueI18n.MessageFunction;\nexport type LocaleMessage = VueI18n.LocaleMessage;\nexport type LocaleMessageObject = VueI18n.LocaleMessageObject;\nexport type LocaleMessageArray = VueI18n.LocaleMessageArray;\nexport type LocaleMessages = VueI18n.LocaleMessages;\nexport type TranslateResult = VueI18n.TranslateResult;\nexport type DateTimeFormatOptions = VueI18n.DateTimeFormatOptions;\nexport type DateTimeFormat = VueI18n.DateTimeFormat;\nexport type DateTimeFormats = VueI18n.DateTimeFormats;\nexport type DateTimeFormatResult = VueI18n.DateTimeFormatResult;\nexport type NumberFormatOptions = VueI18n.NumberFormatOptions;\nexport type NumberFormat = VueI18n.NumberFormat;\nexport type NumberFormats = VueI18n.NumberFormats;\nexport type NumberFormatResult = VueI18n.NumberFormatResult;\nexport type NumberFormatToPartsResult = VueI18n.NumberFormatToPartsResult;\nexport type WarnHtmlInMessageLevel = VueI18n.WarnHtmlInMessageLevel;\nexport type Formatter = VueI18n.Formatter;\nexport type MissingHandler = VueI18n.MissingHandler;\nexport type PostTranslationHandler = VueI18n.PostTranslationHandler;\nexport type IntlAvailability = VueI18n.IntlAvailability;\nexport type I18nOptions = VueI18n.I18nOptions;\nexport type PluignOptions = VueI18n.PluignOptions\n\nimport Vue, { PluginFunction } from 'vue';\n\ndeclare namespace VueI18n {\n  type Path = string;\n  type Locale = string;\n  type FallbackLocale = string | string[] | false | { [locale: string]: string[] }\n  type Values = any[] | { [key: string]: any };\n  type Choice = number;\n  interface MessageContext {\n    list(index: number): unknown\n    named(key: string): unknown\n    linked(key: string): VueI18n.TranslateResult\n    values: any\n    path: string\n    formatter: Formatter\n    messages: LocaleMessages\n    locale: Locale\n  }\n  type MessageFunction = (ctx: MessageContext) => string;\n  type LocaleMessage = string | MessageFunction | LocaleMessageObject | LocaleMessageArray;\n  interface LocaleMessageObject { [key: string]: LocaleMessage; }\n  interface LocaleMessageArray { [index: number]: LocaleMessage; }\n  interface LocaleMessages { [key: string]: LocaleMessageObject; }\n  type TranslateResult = string | LocaleMessages;\n\n  type LocaleMatcher = 'lookup' | 'best fit';\n  type FormatMatcher = 'basic' | 'best fit';\n\n  type DateTimeHumanReadable = 'long' | 'short' | 'narrow';\n  type DateTimeDigital = 'numeric' | '2-digit';\n\n  interface SpecificDateTimeFormatOptions extends Intl.DateTimeFormatOptions {\n    year?: DateTimeDigital;\n    month?: DateTimeDigital | DateTimeHumanReadable;\n    day?: DateTimeDigital;\n    hour?: DateTimeDigital;\n    minute?: DateTimeDigital;\n    second?: DateTimeDigital;\n    weekday?: DateTimeHumanReadable;\n    era?: DateTimeHumanReadable;\n    timeZoneName?: 'long' | 'short';\n    localeMatcher?: LocaleMatcher;\n    formatMatcher?: FormatMatcher;\n  }\n\n  type DateTimeFormatOptions = Intl.DateTimeFormatOptions | SpecificDateTimeFormatOptions;\n\n  interface DateTimeFormat { [key: string]: DateTimeFormatOptions; }\n  interface DateTimeFormats { [locale: string]: DateTimeFormat; }\n  type DateTimeFormatResult = string;\n\n  type CurrencyDisplay = 'symbol' | 'code' | 'name';\n\n  interface SpecificNumberFormatOptions extends Intl.NumberFormatOptions {\n    style?: 'decimal' | 'percent';\n    currency?: string;\n    currencyDisplay?: CurrencyDisplay;\n    localeMatcher?: LocaleMatcher;\n    formatMatcher?: FormatMatcher;\n  }\n\n  interface CurrencyNumberFormatOptions extends Intl.NumberFormatOptions {\n    style: 'currency';\n    currency: string; // Obligatory if style is 'currency'\n    currencyDisplay?: CurrencyDisplay;\n    localeMatcher?: LocaleMatcher;\n    formatMatcher?: FormatMatcher;\n  }\n\n  type NumberFormatOptions = Intl.NumberFormatOptions | SpecificNumberFormatOptions | CurrencyNumberFormatOptions;\n\n  interface NumberFormat { [key: string]: NumberFormatOptions; }\n  interface NumberFormats { [locale: string]: NumberFormat; }\n  type NumberFormatResult = string;\n  type PluralizationRulesMap = {\n    /**\n     * @param choice {number} a choice index given by the input to $tc: `$tc('path.to.rule', choiceIndex)`\n     * @param choicesLength {number} an overall amount of available choices\n     * @returns a final choice index\n    */\n    [lang: string]: (choice: number, choicesLength: number) => number;\n  };\n  type Modifiers = { [key: string]: (str : string) => string };\n\n  type FormattedNumberPartType = 'currency' | 'decimal' | 'fraction' | 'group' | 'infinity' | 'integer' | 'literal' | 'minusSign' | 'nan' | 'plusSign' | 'percentSign';\n\n  type WarnHtmlInMessageLevel = 'off' | 'warn' | 'error';\n\n  interface FormattedNumberPart {\n    type: FormattedNumberPartType;\n    value: string;\n  }\n  interface NumberFormatToPartsResult { [index: number]: FormattedNumberPart; }\n\n  interface Formatter {\n    interpolate(message: string, values: Values | undefined, path: string): (any[] | null);\n  }\n\n  type MissingHandler = (locale: Locale, key: Path, vm: Vue | null, values: any) => string | void;\n  type PostTranslationHandler = (str: string, key?: string) => string;\n  type ComponentInstanceCreatedListener = (newVm: VueI18n & IVueI18n, rootVm: VueI18n & IVueI18n) => void;\n\n  interface IntlAvailability {\n    dateTimeFormat: boolean;\n    numberFormat: boolean;\n  }\n\n  // tslint:disable-next-line:interface-name\n  interface I18nOptions {\n    locale?: Locale;\n    fallbackLocale?: FallbackLocale;\n    messages?: LocaleMessages;\n    dateTimeFormats?: DateTimeFormats;\n    numberFormats?: NumberFormats;\n    formatter?: Formatter;\n    modifiers?: Modifiers,\n    missing?: MissingHandler;\n    fallbackRoot?: boolean;\n    fallbackRootWithEmptyString?: boolean,\n    formatFallbackMessages?: boolean;\n    sync?: boolean;\n    silentTranslationWarn?: boolean | RegExp;\n    silentFallbackWarn?: boolean | RegExp;\n    preserveDirectiveContent?: boolean;\n    pluralizationRules?: PluralizationRulesMap;\n    warnHtmlInMessage?: WarnHtmlInMessageLevel;\n    sharedMessages?: LocaleMessages;\n    postTranslation?: PostTranslationHandler;\n    componentInstanceCreatedListener?: ComponentInstanceCreatedListener;\n    escapeParameterHtml?: boolean;\n  }\n\n  type PluignOptions = {\n    bridge?: boolean\n  }\n}\n\nexport declare interface IVueI18n {\n  readonly messages: VueI18n.LocaleMessages;\n  readonly dateTimeFormats: VueI18n.DateTimeFormats;\n  readonly numberFormats: VueI18n.NumberFormats;\n\n  locale: VueI18n.Locale;\n  fallbackLocale: VueI18n.FallbackLocale;\n  missing: VueI18n.MissingHandler;\n  formatter: VueI18n.Formatter;\n  formatFallbackMessages: boolean;\n  silentTranslationWarn: boolean | RegExp;\n  silentFallbackWarn: boolean | RegExp;\n  preserveDirectiveContent: boolean;\n  sync: boolean;\n  pluralizationRules: VueI18n.PluralizationRulesMap;\n  warnHtmlInMessage: VueI18n.WarnHtmlInMessageLevel;\n  postTranslation: VueI18n.PostTranslationHandler;\n  t(key: VueI18n.Path, values?: VueI18n.Values): VueI18n.TranslateResult;\n  t(key: VueI18n.Path, locale: VueI18n.Locale, values?: VueI18n.Values): VueI18n.TranslateResult;\n  tc(key: VueI18n.Path, choice?: VueI18n.Choice, values?: VueI18n.Values): string;\n  tc(\n    key: VueI18n.Path,\n    choice: VueI18n.Choice,\n    locale: VueI18n.Locale,\n    values?: VueI18n.Values,\n  ): string;\n  te(key: VueI18n.Path, locale?: VueI18n.Locale): boolean;\n  d(\n    value: number | Date,\n    key?: VueI18n.Path,\n    locale?: VueI18n.Locale,\n  ): VueI18n.DateTimeFormatResult;\n  d(value: number | Date, args?: { [key: string]: string }): VueI18n.DateTimeFormatResult;\n  d(value: number | Date, options?: VueI18n.DateTimeFormatOptions): VueI18n.DateTimeFormatResult;\n  n(value: number, key?: VueI18n.Path, locale?: VueI18n.Locale): VueI18n.NumberFormatResult;\n  n(value: number, args?: { [key: string]: string }): VueI18n.NumberFormatResult;\n  n(value: number, options?: VueI18n.NumberFormatOptions, locale?: VueI18n.Locale): VueI18n.NumberFormatResult;\n  getLocaleMessage(locale: VueI18n.Locale): VueI18n.LocaleMessageObject;\n  setLocaleMessage(locale: VueI18n.Locale, message: VueI18n.LocaleMessageObject): void;\n  mergeLocaleMessage(locale: VueI18n.Locale, message: VueI18n.LocaleMessageObject): void;\n  getDateTimeFormat(locale: VueI18n.Locale): VueI18n.DateTimeFormat;\n  setDateTimeFormat(locale: VueI18n.Locale, format: VueI18n.DateTimeFormat): void;\n  mergeDateTimeFormat(locale: VueI18n.Locale, format: VueI18n.DateTimeFormat): void;\n  getNumberFormat(locale: VueI18n.Locale): VueI18n.NumberFormat;\n  setNumberFormat(locale: VueI18n.Locale, format: VueI18n.NumberFormat): void;\n  mergeNumberFormat(locale: VueI18n.Locale, format: VueI18n.NumberFormat): void;\n  getChoiceIndex: (choice: number, choicesLength: number) => number;\n}\n\ndeclare class VueI18n {\n  constructor(options?: VueI18n.I18nOptions)\n\n  readonly messages: VueI18n.LocaleMessages;\n  readonly dateTimeFormats: VueI18n.DateTimeFormats;\n  readonly numberFormats: VueI18n.NumberFormats;\n  readonly availableLocales: VueI18n.Locale[];\n\n  locale: VueI18n.Locale;\n  fallbackLocale: VueI18n.FallbackLocale;\n  missing: VueI18n.MissingHandler;\n  formatter: VueI18n.Formatter;\n  formatFallbackMessages: boolean;\n  silentTranslationWarn: boolean | RegExp;\n  silentFallbackWarn: boolean | RegExp;\n  preserveDirectiveContent: boolean;\n  pluralizationRules: VueI18n.PluralizationRulesMap;\n  warnHtmlInMessage: VueI18n.WarnHtmlInMessageLevel;\n  postTranslation: VueI18n.PostTranslationHandler;\n  sync: boolean;\n\n  t(key: VueI18n.Path, values?: VueI18n.Values): VueI18n.TranslateResult;\n  t(key: VueI18n.Path, locale: VueI18n.Locale, values?: VueI18n.Values): VueI18n.TranslateResult;\n  tc(key: VueI18n.Path, choice?: VueI18n.Choice, values?: VueI18n.Values): string;\n  tc(key: VueI18n.Path, choice: VueI18n.Choice, locale: VueI18n.Locale, values?: VueI18n.Values): string;\n  te(key: VueI18n.Path, locale?: VueI18n.Locale): boolean;\n  d(value: number | Date, key?: VueI18n.Path, locale?: VueI18n.Locale): VueI18n.DateTimeFormatResult;\n  d(value: number | Date, args?: { [key: string]: string }): VueI18n.DateTimeFormatResult;\n  d(value: number | Date, options?: VueI18n.DateTimeFormatOptions): VueI18n.DateTimeFormatResult;\n  n(value: number, key?: VueI18n.Path, locale?: VueI18n.Locale): VueI18n.NumberFormatResult;\n  n(value: number, args?: { [key: string]: string }): VueI18n.NumberFormatResult;\n  n(value: number, options?: VueI18n.NumberFormatOptions, locale?: VueI18n.Locale): VueI18n.NumberFormatResult;\n\n  getLocaleMessage(locale: VueI18n.Locale): VueI18n.LocaleMessageObject;\n  setLocaleMessage(locale: VueI18n.Locale, message: VueI18n.LocaleMessageObject): void;\n  mergeLocaleMessage(locale: VueI18n.Locale, message: VueI18n.LocaleMessageObject): void;\n\n  getDateTimeFormat(locale: VueI18n.Locale): VueI18n.DateTimeFormat;\n  setDateTimeFormat(locale: VueI18n.Locale, format: VueI18n.DateTimeFormat): void;\n  mergeDateTimeFormat(locale: VueI18n.Locale, format: VueI18n.DateTimeFormat): void;\n\n  getNumberFormat(locale: VueI18n.Locale): VueI18n.NumberFormat;\n  setNumberFormat(locale: VueI18n.Locale, format: VueI18n.NumberFormat): void;\n  mergeNumberFormat(locale: VueI18n.Locale, format: VueI18n.NumberFormat): void;\n\n  /**\n   * @param choice {number} a choice index given by the input to $tc: `$tc('path.to.rule', choiceIndex)`\n   * @param choicesLength {number} an overall amount of available choices\n   * @returns a final choice index\n  */\n  getChoiceIndex: (choice: number, choicesLength: number) => number;\n\n  static install: PluginFunction<VueI18n.PluignOptions>;\n  static version: string;\n  static availabilities: VueI18n.IntlAvailability;\n}\n\ndeclare module 'vue/types/vue' {\n  interface Vue {\n    readonly $i18n: VueI18n & IVueI18n;\n    $t: typeof VueI18n.prototype.t;\n    $tc: typeof VueI18n.prototype.tc;\n    $te: typeof VueI18n.prototype.te;\n    $d: typeof VueI18n.prototype.d;\n    $n: typeof VueI18n.prototype.n;\n  }\n}\n\ndeclare module 'vue/types/options' {\n  interface ComponentOptions<V extends Vue> {\n    i18n?: {\n      messages?: VueI18n.LocaleMessages;\n      dateTimeFormats?: VueI18n.DateTimeFormats;\n      numberFormats?: VueI18n.NumberFormats;\n      sharedMessages?: VueI18n.LocaleMessages;\n    };\n  }\n}\n\nexport default VueI18n;\n"
  },
  {
    "path": "types/test/component.ts",
    "content": "import Vue from 'vue'\nimport VueI18n from '../index'\n\n// setup locale info for root Vue instance\nconst i18n = new VueI18n({\n  locale: 'ja',\n  messages: {\n    en: {\n      message: {\n        hello: 'hello world',\n        greeting: 'good morning'\n      }\n    },\n    ja: {\n      message: {\n        hello: 'こんにちは、世界',\n        greeting: 'おはようございます'\n      }\n    }\n  }\n})\n\n// Define component\nconst Component1 = {\n  template: `\n    <div class=\"container\">\n     <p>Component1 locale messages: {{ $t(\"message.hello\") }}</p>\n     <p>Fallback global locale messages: {{ $t(\"message.greeting\") }}</p>\n   </div>`,\n  i18n: { // `i18n` option\n    messages: {\n      en: { message: { hello: 'hello component1' } },\n      ja: { message: { hello: 'こんにちは、component1' } }\n    },\n    sharedMessages: {\n      en: { buttons: { save: 'Save' } },\n      ja: { buttons: { save: 'Save' } }\n    }\n  }\n}\n\nnew Vue({\n  i18n,\n  components: {\n    Component1\n  }\n}).$mount('#app')\n"
  },
  {
    "path": "types/test/index.ts",
    "content": "import Vue from 'vue'\nimport VueI18n, { DateTimeFormatOptions, NumberFormatOptions } from '../index'\n\n/*\nimport * as VueI18n from 'vue-i18n';\nimport * as Vue from 'vue';\n*/\n/**\n * VueI18n.install\n */\nVue.use(VueI18n)\nVueI18n.install(Vue)\n\n/**\n * VueI18n.version\n */\nVueI18n.version                    // $ExpectType string\n\n/**\n * VueI18n.availabilities\n */\nVueI18n.availabilities             // $ExpectType IntlAvailability\n\n/**\n * VueI18n Instance\n */\nconst locale = 'locale'\nconst key = 'key'\nconst value = 'value'\nconst dateTimeFormatOptions: DateTimeFormatOptions = {\n  year: '2-digit',\n  timeZone: 'Asia/Tokyo'\n}\nconst numberFormatOptions: NumberFormatOptions = {\n  style: 'currency',\n  currency: 'JPY'\n}\nconst i18n = new VueI18n({\n  locale,\n  fallbackLocale: locale,\n  messages: {\n    [locale]: {\n      [key]: value\n    }\n  },\n  dateTimeFormats: {\n    [locale]: {\n      [key]: dateTimeFormatOptions\n    }\n  },\n  numberFormats: {\n    [locale]: {\n      [key]: numberFormatOptions\n    }\n  },\n  formatter: {\n    interpolate (message, values) {\n      return [message]\n    }\n  },\n  modifiers: {\n    foo: (str) => 'bar'\n  },\n  missing (locale, key, vm) {\n  },\n  fallbackRoot: false,\n  sync: true,\n  silentTranslationWarn: true,\n  silentFallbackWarn: true,\n  preserveDirectiveContent: true\n})\ni18n.messages[locale][key]         // $ExpectType LocaleMessage\ni18n.dateTimeFormats[locale][key]  // $ExpectType DateTimeFormatOptions\ni18n.numberFormats[locale][key]    // $ExpectType NumberFormatOptions\ni18n.locale                        // $ExpectType string\ni18n.fallbackLocale                // $ExpectType string\ni18n.missing                       // $ExpectType MissingHandler\ni18n.formatter                     // $ExpectType Formatter\ni18n.silentTranslationWarn         // $ExpectType boolean\ni18n.silentFallbackWarn            // $ExpectType boolean\ni18n.preserveDirectiveContent      // $ExpectType boolean\ni18n.setLocaleMessage              // $ExpectType (locale: string, message: LocaleMessageObject) => void\ni18n.getLocaleMessage              // $ExpectType (locale: string) => LocaleMessageObject\ni18n.mergeLocaleMessage            // $ExpectType (locale: string, message: LocaleMessageObject) => void\ni18n.setDateTimeFormat             // $ExpectType (locale: string, format: DateTimeFormat) => void\ni18n.getDateTimeFormat             // $ExpectType (locale: string) => DateTimeFormat\ni18n.mergeDateTimeFormat           // $ExpectType (locale: string, format: DateTimeFormat) => void\ni18n.setNumberFormat               // $ExpectType (locale: string, format: NumberFormat) => void\ni18n.getNumberFormat             // $ExpectType (locale: string) => NumberFormat\ni18n.mergeNumberFormat           // $ExpectType (locale: string, format: NumberFormat) => void\n// $ExpectType { (key: string, values?: { [key: string]: any; } | undefined): TranslateResult; (key: string, locale: string, values?: { [key: string]: any; } | undefined): TranslateResult; }\ni18n.t\n// tslint:disable-next-line:max-line-length\n// $ExpectType { (key: string, choice?: number | undefined, values?: { [key: string]: any; } | undefined): string; (key: string, choice: number, locale: string, values?: { [key: string]: any; } | undefined): string; }\ni18n.tc\n// $ExpectType (key: string, locale?: string | undefined) => boolean\ni18n.te\n// tslint:disable-next-line:max-line-length\n// $ExpectType { (value: number | Date, key?: string | undefined, locale?: string | undefined): string; (value: number | Date, args?: { [key: string]: string; } | undefined): string; }\ni18n.d\n// tslint:disable-next-line:max-line-length\n// $ExpectType { (value: number, key?: string | undefined, locale?: string | undefined): string; (value: number, args?: { [key: string]: string; } | undefined): string; }\ni18n.n\n\n/**\n * Vue\n */\nconst vm = new Vue({\n  i18n\n})\nvm.$i18n                           // $ExpectType VueI18n\nvm.$t(key)                         // $ExpectType TranslateResult\nvm.$t(key, ['', 0, false, null, undefined])  // $ExpectType TranslateResult\nvm.$t(key, { x: 'x' })             // $ExpectType TranslateResult\nvm.$t(key, locale)\nvm.$t(key, locale, ['', 0, false, null, undefined])  // $ExpectType TranslateResult\nvm.$t(key, locale, { x: 'x' })     // $ExpectType TranslateResult\nvm.$tc(key)                        // $ExpectType string\nvm.$tc(key, 1)                     // $ExpectType string\nvm.$tc(key, 1, [])                 // $ExpectType string\nvm.$tc(key, 1, {})                 // $ExpectType string\nvm.$tc(key, 1, locale)             // $ExpectType string\nvm.$tc(key, 1, locale, [])         // $ExpectType string\nvm.$tc(key, 1, locale, {})         // $ExpectType string\nvm.$te(key)                        // $ExpectType boolean\nvm.$te(key, locale)                // $ExpectType boolean\nvm.$d(1, key)                      // $ExpectType string\nvm.$d(1, key, locale)              // $ExpectType string\nvm.$d(new Date(), { key, locale }) // $ExpectType string\nvm.$n(1, key)                      // $ExpectType string\nvm.$n(1, key, locale)              // $ExpectType string\nvm.$n(100, { key, locale })        // $ExpectType string\n\n/**\n * VueI18n\n */\n{\n  let path: VueI18n.Path\n  let locale: VueI18n.Locale\n  let values: VueI18n.Values\n  let choice: VueI18n.Choice\n  let localeMessage: VueI18n.LocaleMessage\n  let localeMessageObject: VueI18n.LocaleMessageObject\n  let localeMessageArray: VueI18n.LocaleMessageArray\n  let localeMessages: VueI18n.LocaleMessages\n  let translateResult: VueI18n.TranslateResult\n  let dateTimeFormatOptions: VueI18n.DateTimeFormatOptions\n  let dateTimeFormat: VueI18n.DateTimeFormat\n  let dateTimeFormats: VueI18n.DateTimeFormats\n  let numberFormatOptions: VueI18n.NumberFormatOptions\n  let NumberFormat: VueI18n.NumberFormat\n  let numberFormats: VueI18n.NumberFormats\n  let formatter: VueI18n.Formatter\n  let missingHandler: VueI18n.MissingHandler\n  let i18nOptions: VueI18n.I18nOptions\n}\n"
  },
  {
    "path": "types/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"allowSyntheticDefaultImports\": true,\n    \"strict\": true,\n    \"noEmit\": true,\n    \"lib\": [\"esnext\", \"dom\"]\n  },\n  \"include\": [\n    \"**/*.d.ts\"\n  ]\n}\n"
  },
  {
    "path": "vetur/attributes.json",
    "content": "{\n  \"i18n/path\" : {\n    \"description\": \"[required]\\nKeypath of the locale message\",\n    \"type\": \"string\"\n  },\n  \"i18n/locale\" : {\n    \"description\": \"[optional]\\nLocale to be used in this translation\",\n    \"type\": \"string\"\n  },\n  \"i18n/tag\" : {\n    \"description\": \"[optional]\\nWhich tag to render, default is \\\"span\\\"\",\n    \"type\": \"string\"\n  },\n  \"i18n/places\": {\n    \"description\": \"[optional after v8.14]\\nWill be removed in the next major version, use the slot syntax instead\\n\\nhttp://kazupon.github.io/vue-i18n/guide/interpolation.html#slots-syntax-usage\",\n    \"type\": \"array|object\"\n  },\n  \"i18n-n/value\" : {\n    \"description\": \"[required]\\nNumber to be used in formatting\",\n    \"type\": \"number\"\n  },\n  \"i18n-n/format\": {\n    \"description\": \"[optional]\\nNumber format name or object with explicit format options\",\n    \"type\": \"string|object\"\n  },\n  \"i18n-n/locale\" : {\n    \"description\": \"[optional]\\nLocale to be used in this translation\",\n    \"type\": \"string\"\n  },\n  \"i18n-n/tag\" : {\n    \"description\": \"[optional]\\nWhich tag to render, default is `span`\",\n    \"type\": \"string\"\n  }\n}\n"
  },
  {
    "path": "vetur/tags.json",
    "content": "{\n  \"i18n\": {\n    \"attributes\": [\n      \"path\",\n      \"locale\",\n      \"tag\",\n      \"places\"\n    ],\n    \"description\": \"This is a functional component that can be used when HTML interpolation is needed.\\n\\nhttp://kazupon.github.io/vue-i18n/guide/interpolation.html#basic-usage\"\n  },\n  \"i18n-n\": {\n    \"attributes\": [\n      \"value\",\n      \"format\",\n      \"locale\",\n      \"tag\"\n    ],\n    \"description\": \"This functional component provides a way to use HTML interpolation in pair with number formatting.\\n\\nhttp://kazupon.github.io/vue-i18n/guide/number.html#custom-formatting\"\n  }\n}\n"
  },
  {
    "path": "vuepress/.vuepress/components/sponsor-button.vue",
    "content": "<template>\n  <p class=\"sponsor-button\">\n    <github-button href=\"https://github.com/sponsors/kazupon\" data-icon=\"octicon-heart\" data-size=\"large\" aria-label=\"Sponsor @kazupon on GitHub\">\n      Sponsor on GitHub\n    </github-button>\n  </p>\n</template>\n\n<script>\nimport GithubButton from 'vue-github-button'\nexport default {\n  components: {\n    GithubButton\n  }\n}\n</script>\n\n<style scoped>\n.sponsor-button {\n  text-align: center;\n  margin: 24px 0;\n}\n</style>\n"
  },
  {
    "path": "vuepress/.vuepress/config.js",
    "content": "const head = []\n\nif (process.env.NODE_ENV === 'production') {\n  head.push([\n    'meta', { name: 'theme-color', content: '#3eaf7c' },\n    'script',\n    {\n      src: 'https://unpkg.com/thesemetrics@latest',\n      async: ''\n    }\n  ])\n}\n\nmodule.exports = {\n  base: '/vue-i18n/',\n  head,\n  locales: {\n    '/': {\n      lang: 'en-US',\n      title: 'Vue I18n',\n      description: 'Vue I18n is internationalization plugin for Vue.js'\n    },\n    '/zh/': {\n      lang: 'zh-CN',\n      title: 'Vue I18n',\n      description: 'Vue I18n 是 Vue.js 的国际化插件'\n    },\n    '/ru/': {\n      lang: 'ru-RU',\n      title: 'Vue I18n',\n      description: 'Vue I18n — плагин для интернационализации во Vue.js'\n    },\n    '/pt/': {\n      lang: 'pt-BR',\n      title: 'Vue I18n',\n      description: 'Vue I18n é um internacionalizador de idiomas para Vue.js'\n    },\n  },\n  head: head,\n  serviceWorker: false,\n  themeConfig: {\n    carbonAds: {\n      carbon: 'CEAIC53M',\n      placement: 'kazupongithubio'\n    },\n    repo: 'kazupon/vue-i18n',\n    editLinks: true,\n    sidebarDepth: 3,\n    docsDir: 'vuepress',\n    locales: {\n      '/': {\n        label: 'English',\n        selectText: 'Languages',\n        editLinkText: 'Edit this page on GitHub',\n        lastUpdated: 'Last Updated',\n        nav: [\n          {\n            text: 'Guide',\n            link: '/guide/formatting'\n          },\n          {\n            text: 'API',\n            link: '/api/'\n          },\n          {\n            text: 'Ecosystem',\n            items: [\n              {\n                text: 'Official Tooling',\n                items: [\n                  {\n                    text: 'Vue CLI Plugin',\n                    link: 'https://github.com/kazupon/vue-cli-plugin-i18n'\n                  },\n                  {\n                    text: 'Webpack Loader',\n                    link: 'https://github.com/kazupon/vue-i18n-loader'\n                  },\n                  {\n                    text: 'ESLint Plugin',\n                    link: 'https://intlify.github.io/eslint-plugin-vue-i18n/'\n                  },\n                  {\n                    text: 'Extensions',\n                    link: 'https://github.com/kazupon/vue-i18n-extensions'\n                  }\n                ]\n              },\n              {\n                text: '3rd Party Tooling',\n                items: [\n                  {\n                    text: 'inlang',\n                    link: 'https://marketplace.visualstudio.com/items?itemName=inlang.vs-code-extension'\n                  },\n                  {\n                    text: 'i18n Ally',\n                    link: 'https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally'\n                  },\n                  {\n                    text: 'BabelEdit',\n                    link: 'https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01'\n                  }\n                ]\n              },\n              {\n                text: '3rd Party Integrations',\n                items: [\n                  {\n                    text: 'Localazy',\n                    link: 'https://localazy.com/blog/how-to-localize-vuejs-app-with-vue-i18n-and-localazy?utm_source=kazupon&utm_medium=banner&utm_campaign=sponsorships_kazupon&utm_content=logo'\n                  },\n                  {\n                    text: 'Crowdin',\n                    link: 'https://crowdin.com/teams/engineering?utm_source=vue-i18n.intlify.dev&utm_medium=referral'\n                  }\n                ]\n              }\n            ]\n          },\n          {\n            text: 'Release Notes',\n            link: 'https://github.com/kazupon/vue-i18n/releases'\n          },\n          {\n            text: 'v9.x',\n            link: 'https://vue-i18n.intlify.dev'\n          }\n        ],\n        sidebar: [\n          '/introduction',\n          '/started',\n          '/installation',\n          {\n            title: 'Guide',\n            collapsable: false,\n            children: [\n              '/guide/formatting',\n              '/guide/pluralization',\n              '/guide/datetime',\n              '/guide/number',\n              '/guide/messages',\n              '/guide/fallback',\n              '/guide/component',\n              '/guide/directive',\n              '/guide/interpolation',\n              '/guide/sfc',\n              '/guide/hot-reload',\n              '/guide/locale',\n              '/guide/lazy-loading',\n              '/guide/tooling'\n            ]\n          }\n        ]\n      },\n      '/zh/': {\n        label: '简体中文',\n        selectText: '选择语言',\n        editLinkText: '在 GitHub 上编辑此页',\n        lastUpdated: '最近一次更新',\n        nav: [\n          {\n            text: '指南',\n            link: '/zh/guide/formatting',\n          },\n          {\n            text: 'API',\n            link: '/zh/api/'\n          },\n          {\n            text: '生态',\n            items: [\n              {\n                text: '官方工具',\n                items: [\n                  {\n                    text: '脚手架插件',\n                    link: 'https://github.com/kazupon/vue-cli-plugin-i18n'\n                  },\n                  {\n                    text: 'Webpack Loader',\n                    link: 'https://github.com/kazupon/vue-i18n-loader'\n                  },\n                  {\n                    text: 'ESLint 插件',\n                    link: 'https://intlify.github.io/eslint-plugin-vue-i18n/'\n                  },\n                  {\n                    text: '扩展',\n                    link: 'https://github.com/kazupon/vue-i18n-extensions'\n                  }\n                ]\n              },\n              {\n                text: '翻译工具',\n                items: [\n                  {\n                    text: 'BabelEdit',\n                    link: 'https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01'\n                  }\n                ]\n              }\n            ]\n          },\n          {\n            text: '赞助',\n            link: 'https://www.patreon.com/kazupon'\n          },\n          {\n            text: '发布日志',\n            link: 'https://github.com/kazupon/vue-i18n/releases'\n          },\n          {\n            text: 'v9',\n            link: 'https://vue-i18n.intlify.dev'\n          }\n        ],\n        sidebar: [\n          '/zh/introduction',\n          '/zh/started',\n          '/zh/installation',\n          {\n            title: 'Guide',\n            collapsable: false,\n            children: [\n              '/zh/guide/formatting',\n              '/zh/guide/pluralization',\n              '/zh/guide/datetime',\n              '/zh/guide/number',\n              '/zh/guide/messages',\n              '/zh/guide/fallback',\n              '/zh/guide/component',\n              '/zh/guide/directive',\n              '/zh/guide/interpolation',\n              '/zh/guide/sfc',\n              '/zh/guide/hot-reload',\n              '/zh/guide/locale',\n              '/zh/guide/lazy-loading',\n              '/zh/guide/tooling'\n            ]\n          }\n        ]\n      },\n      '/ru/': {\n        label: 'Русский',\n        selectText: 'Переводы',\n        editLinkText: 'Изменить эту страницу на GitHub',\n        lastUpdated: 'Последнее обновление',\n        nav: [\n          {\n            text: 'Руководство',\n            link: '/ru/guide/formatting',\n          },\n          {\n            text: 'Справочник API',\n            link: '/ru/api/'\n          },\n          {\n            text: 'Экосистема',\n            items: [\n              {\n                text: 'Оф. инструментарий',\n                items: [\n                  {\n                    text: 'Плагин для Vue CLI',\n                    link: 'https://github.com/kazupon/vue-cli-plugin-i18n'\n                  },\n                  {\n                    text: 'Загрузчик Webpack',\n                    link: 'https://github.com/kazupon/vue-i18n-loader'\n                  },\n                  {\n                    text: 'Плагин для ESLint',\n                    link: 'https://intlify.github.io/eslint-plugin-vue-i18n/'\n                  },\n                  {\n                    text: 'Расширения',\n                    link: 'https://github.com/kazupon/vue-i18n-extensions'\n                  }\n                ]\n              },\n              {\n                text: 'Сторонние разработки',\n                items: [\n                  {\n                    text: 'BabelEdit',\n                    link: 'https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01'\n                  },\n                  {\n                    text: 'i18n Ally',\n                    link: 'https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally'\n                  }\n                ]\n              }\n            ]\n          },\n          {\n            text: 'Patreon',\n            link: 'https://www.patreon.com/kazupon'\n          },\n          {\n            text: 'История изменений',\n            link: 'https://github.com/kazupon/vue-i18n/releases'\n          },\n          {\n            text: 'v9',\n            link: 'https://vue-i18n.intlify.dev'\n          }\n        ],\n        sidebar: [\n          '/ru/introduction',\n          '/ru/started',\n          '/ru/installation',\n          {\n            title: 'Руководство',\n            collapsable: false,\n            children: [\n              '/ru/guide/formatting',\n              '/ru/guide/pluralization',\n              '/ru/guide/datetime',\n              '/ru/guide/number',\n              '/ru/guide/messages',\n              '/ru/guide/fallback',\n              '/ru/guide/component',\n              '/ru/guide/directive',\n              '/ru/guide/interpolation',\n              '/ru/guide/sfc',\n              '/ru/guide/hot-reload',\n              '/ru/guide/locale',\n              '/ru/guide/lazy-loading',\n              '/ru/guide/tooling'\n            ]\n          }\n        ]\n      },\n      '/pt/': {\n        label: 'Português',\n        selectText: 'Idiomas',\n        editLinkText: 'Editar esta página no GitHub',\n        lastUpdated: 'Última atualização',\n        nav: [\n          {\n            text: 'Guia',\n            link: '/pt/guide/formatting'\n          },\n          {\n            text: 'API',\n            link: '/pt/api/'\n          },\n          {\n            text: 'Ecossistema',\n            items: [\n              {\n                text: 'Ferramentas Oficiais',\n                items: [\n                  {\n                    text: 'Vue CLI Plugin',\n                    link: 'https://github.com/kazupon/vue-cli-plugin-i18n'\n                  },\n                  {\n                    text: 'Webpack Loader',\n                    link: 'https://github.com/kazupon/vue-i18n-loader'\n                  },\n                  {\n                    text: 'ESLint Plugin',\n                    link: 'https://intlify.github.io/eslint-plugin-vue-i18n/'\n                  },\n                  {\n                    text: 'Extensoes',\n                    link: 'https://github.com/kazupon/vue-i18n-extensions'\n                  }\n                ]\n              },\n              {\n                text: 'Ferramentas de terceiros',\n                items: [\n                  {\n                    text: 'BabelEdit',\n                    link: 'https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01'\n                  },\n                  {\n                    text: 'i18n Ally',\n                    link: 'https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally'\n                  }\n                ]\n              }\n            ]\n          },\n          {\n            text: 'Patreon',\n            link: 'https://www.patreon.com/kazupon'\n          },\n          {\n            text: 'Notas de Lançamento',\n            link: 'https://github.com/kazupon/vue-i18n/releases'\n          },\n          {\n            text: 'v9',\n            link: 'https://vue-i18n.intlify.dev'\n          }\n        ],\n        sidebar: [\n          '/pt/introduction',\n          '/pt/started',\n          '/pt/installation',\n          {\n            title: 'Guia',\n            collapsable: false,\n            children: [\n              '/pt/guide/formatting',\n              '/pt/guide/pluralization',\n              '/pt/guide/datetime',\n              '/pt/guide/number',\n              '/pt/guide/messages',\n              '/pt/guide/fallback',\n              '/pt/guide/component',\n              '/pt/guide/directive',\n              '/pt/guide/interpolation',\n              '/pt/guide/sfc',\n              '/pt/guide/hot-reload',\n              '/pt/guide/locale',\n              '/pt/guide/lazy-loading',\n              '/pt/guide/tooling'\n            ]\n          }\n        ]\n      },\n    }\n  }\n}\n\n"
  },
  {
    "path": "vuepress/.vuepress/theme/Layout.vue",
    "content": "<template>\n  <div class=\"main-container\">\n    <ParentLayout>\n      <template #page-top>\n        <CarbonAds\n          v-if=\"$site.themeConfig.carbonAds\"\n          :key=\"'ca:' + $page.path\"\n          :code=\"$site.themeConfig.carbonAds.carbon\"\n          :placement=\"$site.themeConfig.carbonAds.placement\"\n        />\n      </template>\n    </ParentLayout>\n  </div>\n</template>\n\n<script>\nimport ParentLayout from '@parent-theme/layouts/Layout.vue'\nimport CarbonAds from './components/CarbonAds.vue'\n\nexport default {\n  name: 'Layout',\n  components: {\n    ParentLayout,\n    CarbonAds\n  }\n}\n</script>\n\n<style>\n@media screen and (max-width: 1300px) {\n  .content__default::before {\n    content: \"\";\n    /* background-color: red; */\n    position: relative;\n    display: block;\n    /* top: 87px; */\n    /* right: -12px; */\n    /* float: right; */\n    /* height: 221px; */\n    /* width: 0; */\n    padding: 0 0 20px 30px;\n    margin-top: 20px;\n    margin-right: -24px;\n  }\n}\n\nimg {\n  max-width: 100%;\n}\n</style>\n\n<style scoped>\n</style>\n"
  },
  {
    "path": "vuepress/.vuepress/theme/components/CarbonAds.vue",
    "content": "<template>\n  <div class=\"carbon-ads\"></div>\n</template>\n\n<script>\nexport default {\n  name: 'CarbonAds',\n  props: {\n    code: {\n      type: String,\n      required: true\n    },\n    placement: {\n      type: String,\n      required: true\n    }\n  },\n\n  mounted() {\n    const s = document.createElement('script')\n    s.id = '_carbonads_js'\n    s.src = `//cdn.carbonads.com/carbon.js?serve=${this.code}&placement=${this.placement}`\n    this.$el.appendChild(s)\n  }\n}\n</script>\n\n<style>\n.carbon-ads {\n  min-height: 102px;\n  /* padding: 1.5rem 1.5rem 0; */\n  /* margin-bottom: -0.5rem; */\n  margin-bottom: 1.5rem;\n  font-size: 0.75rem;\n\n  /* width: 125px; */\n  /* position: fixed; */\n  position: relative;\n  z-index: 1;\n  /* bottom: 22px; *\n  /* right: 14px; */\n  top: 87px;\n  right: 0;\n  max-width: 740px;\n  margin: 0 auto;\n  padding: 2rem 2.5rem !important;\n  background-color: #fff;\n  border-radius: 3px;\n  font-size: 13px;\n}\n\n@media screen and (max-width: 1300px) {\n  .carbon-ads {\n    position: relative;\n    /* float: right; */\n    top: 87px;\n    right: 0;\n    /* padding: 0 0 20px 30px; */\n    padding: 2rem 2.5rem !important;\n    max-width: 740px;\n    margin: 0 auto;\n    padding: 2rem 2.5rem;\n  }\n}\n\n.carbon-ads a {\n  color: #444;\n  font-weight: normal;\n  display: inline;\n}\n\n.carbon-ads .carbon-img {\n  float: left;\n  margin-right: 1rem;\n  border: 1px solid var(--border-color);\n}\n\n.carbon-ads .carbon-img img {\n  display: block;\n}\n\n.carbon-ads .carbon-poweredby {\n  color: #999;\n  display: block;\n  margin-top: 0.5em;\n}\n\n@media (max-width: 719px) {\n  .carbon-ads .carbon-img img {\n    width: 100px;\n    height: 77px;\n  }\n}\n\n@media (min-width: 320px) and (max-width: 759px) {\n  .carbon-ads {\n    left: 1.5rem !important;\n    padding: 0.5rem !important;\n  }\n}\n</style>"
  },
  {
    "path": "vuepress/.vuepress/theme/index.js",
    "content": "module.exports = {\n  extend: '@vuepress/theme-default'\n}\n      "
  },
  {
    "path": "vuepress/README.md",
    "content": "---\nhome: true\nheroImage: ./vue-i18n-logo.png\nactionText: Get Started →\nactionLink: introduction.md\nfooter: MIT Licensed | Copyright © 2020 kazuya kawaguchi\n---\n\nVue I18n v8 has reached EOL and is no longer actively maintained. Please upgrade to Vue I18n v9 or later. **The seucirty hotfix is only provided for Vue I18n v8.28 until end of 2024**. Thereafter, security fix is not provide for that version later. However, if it is absolutely necessary, please contact to contact@frapwings.jp\n\n<div class=\"features\">\n  <div class=\"feature\">\n    <h2>Easy</h2>\n    <p>You can introduce internationalization into your app with simple API</p>\n  </div>\n  <div class=\"feature\">\n    <h2>Powerful</h2>\n    <p>In addition to simple translation, support localization such as pluralization, number, datetime ... etc</p>\n  </div>\n  <div class=\"feature\">\n    <h2>Component-oriented</h2>\n    <p>You can manage locale messages on single file component</p>\n  </div>\n</div>\n\n<div class=\"sponsors\" style=\"text-align:center; padding: 24px 0 24px 0;\">\n  <h4>🏅 Platinum Sponsors</h4>\n  <a\n    href=\"https://zenarchitects.co.jp/\"\n    style=\"margin: 1rem 1rem 0 1rem; width: 24rem; height: auto; display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      style=\"width: 24rem; max-width: 100%; vertical-align: midele;\"\n      src=\"/vue-i18n/patrons/zenarchitects.png\"\n      alt=\"zenarchitects\"\n    />\n  </a>\n\n  <h4 style=\"padding: 12px 0 0 0;\">✨ Special Sponsors</h4>\n    <a\n    href=\"https://plaid.co.jp/\"\n    style=\"margin: 1rem 1rem 0 1rem; width: 15rem; height: auto; display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      style=\"width: 15rem; max-width: 100%; vertical-align: midele;\"\n      src=\"/vue-i18n/patrons/plaid.svg\"\n      alt=\"PLAID\"\n    />\n  </a>\n\n  <h4 style=\"padding: 12px 0 0 0;\">🥇 Gold Sponsors</h4>\n  <a\n    href=\"https://nuxtlabs.com/\"\n    style=\"margin: 1rem 1rem 0 1rem; width: 15rem; height: auto; display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      style=\"width: 15rem; max-width: 100%; vertical-align: midele;\"\n      src=\"/vue-i18n/patrons/nuxtlabs.svg\"\n      alt=\"NuxtLabs\"\n    />\n  </a>\n  <a\n    href=\"https://localazy.com/blog/how-to-localize-vuejs-app-with-vue-i18n-and-localazy?utm_source=kazupon&utm_medium=banner&utm_campaign=sponsorships_kazupon&utm_content=logo\"\n    style=\"margin: 1rem 1rem 0 1rem; width: 15rem; height: auto; display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      style=\"width: 15rem; max-width: 100%; vertical-align: midele;\"\n      src=\"/vue-i18n/patrons/localazy.svg\"\n      alt=\"Localazy\"\n    />\n  </a>\n    <a\n    href=\"https://crowdin.com/teams/engineering?utm_source=vue-i18n.intlify.dev&utm_medium=referral\"\n    style=\"margin: 1rem 1rem 0 1rem; width: 15rem; height: auto; display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      style=\"width: 15rem; max-width: 100%; vertical-align: midele;\"\n      src=\"/vue-i18n/patrons/crowdin.svg\"\n      alt=\"Crowdin\"\n    />\n  </a>\n  <h4 style=\"padding: 12px 0 0 0;\">🥈 Silver Sponsors</h4>\n  <h4 style=\"padding: 12px 0 0 0;\">🥉 Bronze Sponsors</h4>\n  <a\n    href=\"https://www.vuemastery.com/\"\n    style=\"margin: 1rem 1rem 0 1rem; width: 9rem; height: auto; display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      style=\"width: 9rem; max-width: 100%; vertical-align: midele;\"\n      src=\"/vue-i18n/patrons/vuemastery.png\"\n      alt=\"vuemastery\"\n    />\n  </a>\n  <a\n    href=\"https://froggly.pl/\"\n    style=\"margin: 1rem 1rem 0 1rem; width: 9rem; height: auto; display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      style=\"width: 9rem; max-width: 100%; vertical-align: midele;\"\n      src=\"/vue-i18n/patrons/Froggly.svg\"\n      alt=\"vuemastery\"\n    />\n  </a>\n</div>\n\n<div class=\"github\" style=\"text-align:center; padding: 0 0 24px 0;\">\n  <sponsor-button />\n</div>\n"
  },
  {
    "path": "vuepress/api/README.md",
    "content": "---\nsidebar: auto\n---\n\n# API references\n\n## Extension of Vue\n\n### Vue constructor options\n\n#### i18n\n\n  * **Type:** `I18nOptions`\n\nComponent based localization option.\n\n  * **See also:** `VueI18n` class constructor options\n\n### Vue injected methods\n\n#### $t\n\n  * **Arguments:**\n\n    * `{Path} key`: required\n    * `{Locale} locale`: optional\n    * `{Array | Object} values`: optional\n\n  * **Return:** `TranslateResult`\n\nLocalize the locale message of `key`. Localize in preferentially component locale messages than global locale messages. If not specified component locale messages, localize with global locale messages. If you specified `locale`, localize the locale messages of `locale`. If you specified `key` of list / named formatting local messages, you must specify `values` too. For `values` more details see [Formatting](../guide/formatting.md).\n\nIf default pluralization does not suit your needs, see [pluralization rules in constructor options](#pluralizationrules) and [custom pluralization](../guide/pluralization.md).\n\n:::danger Tip\nNote that you need to guarantee this context equal to component instance in lifecycle methods (e.g. in `data` options, `const $t = this.$t.bind(this)`).\n:::\n\n#### $tc\n\n  * **Arguments:**\n\n    * `{Path} key`: required\n    * `{number} choice`: optional, default 1\n    * `{Locale} locale`: optional\n    * `{string | Array | Object} values`: optional\n\n  * **Return:** `TranslateResult`\n\nLocalize the locale message of `key` with pluralization. Localize in preferentially component locale messages than global locale messages. If not specified component locale messages, localize with global locale messages. If you specified `locale`, localize the locale messages of `locale`. If you will specify string value to `values`, localize the locale messages of value. If you will specify Array or Object value to `values`, you must specify with `values` of $t.\n\n:::danger Tip\nNote that you need to guarantee this context equal to component instance in lifecycle methods (e.g. in `data` options, `const $tc = this.$tc.bind(this)`).\n:::\n\n#### $te\n\n  * **Arguments:**\n\n    * `{Path} key`: required\n    * `{Locale} locale`: optional\n\n  * **Return:** `boolean`\n\nCheck whether key exists. In Vue instance, If not specified component locale messages, check with global locale messages. If you specified `locale`, check the locale messages of `locale`.\n\n:::danger Tip\nNote that you need to guarantee this context equal to component instance in lifecycle methods (e.g. in `data` options, `const $te = this.$te.bind(this)`).\n:::\n\n#### $d\n\n> :new: 7.0+\n\n  * **Arguments:**\n\n    * `{number | Date} value`: required\n    * `{Path | Object} key`: optional\n    * `{Locale | Object} locale`: optional\n\n  * **Return:** `DateTimeFormatResult`\n\nLocalize the datetime of `value` with datetime format of `key`. The datetime format of `key` need to register to `dateTimeFormats` option of `VueI18n` class, and depend on `locale` option of `VueI18n` constructor. If you will specify `locale` argument, it will have priority over `locale` option of `VueI18n` constructor.\n\nIf the datetime format of `key` not exist in `dateTimeFormats` option, fallback to depend on `fallbackLocale` option of `VueI18n` constructor.\n\n:::danger Tip\nNote that you need to guarantee this context equal to component instance in lifecycle methods (e.g. in `data` options, `const $d = this.$d.bind(this)`).\n:::\n\n#### $n\n\n> :new: 7.0+\n\n  * **Arguments:**\n\n    * `{number} value`: required\n    * `{Path | Object} format`: optional\n    * `{Locale} locale`: optional\n\n  * **Return:** `NumberFormatResult`\n\nLocalize the number of `value` with number format of `format`. The number format of `format` need to register to `numberFormats` option of `VueI18n` class, and depend on `locale` option of `VueI18n` constructor. If you will specify `locale` argument, it will have priority over `locale` option of `VueI18n` constructor.\n\nIf the number format of `format` not exist in `numberFormats` option, fallback to depend on `fallbackLocale` option of `VueI18n` constructor.\n\nIf the second `format` argument specified as an object, it should have the following properties:\n\n* `key {Path}`: optional, number format\n* `locale {Locale}`: optional, locale\n* `compactDisplay {string}`: optional, number format option\n* `currency {string}`: optional, number format option\n* `currencyDisplay {string}`: optional, number format option\n* `currencySign {string}`: optional, number format option\n* `localeMatcher {string}`: optional, number format option\n* `notation {string}`: optional, number format option\n* `numberingSystem {string}`: optional, number format option\n* `signDisplay {string}`: optional, number format option\n* `style {string}`: optional, number format option\n* `unit {string}`: optional, number format option\n* `unitDisplay {string}`: optional, number format option\n* `useGrouping {boolean}`: optional, number format option\n* `minimumIntegerDigits {string}`: optional, number format option\n* `minimumFractionDigits {string}`: optional, number format option\n* `maximumFractionDigits {string}`: optional, number format option\n* `minimumSignificantDigits {string}`: optional, number format option\n* `maximumSignificantDigits {string}`: optional, number format option\n\nAny specified number format options will have priority over `numberFormats` of `VueI18n` constructor.\n\n:::danger Tip\nNote that you need to guarantee this context equal to component instance in lifecycle methods (e.g. in `data` options, `const $n = this.$n.bind(this)`).\n:::\n\n### Injected properties\n\n#### $i18n\n\n  * **Type:** `I18n`\n\n  * **Read only**\n\nGet a `VueI18n` instance. If you are specify.\n\nIf you have specified an `i18n` option at component options, you will be able to get a `VueI18n` instance at the component, Otherwise, you will be able get root `VueI18n` instance.\n\n## `VueI18n` class\n\n`VueI18n` class implement `I18n` interface of [flowtype definitions](https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js)\n\n### Static properties\n\n#### version\n\n  * **Type:** `string`\n\nvue-i18n version.\n\n#### availabilities\n\n> :new: 7.0+\n\n  * **Type:** `IntlAvailability`\n\nWhether the following internationalization features are available:\n\n  * `{boolean} dateTimeFormat`: locale sensitive datetime formatting\n\n  * `{boolean} numberFormat`: locale sensitive number formatting\n\nThe above internationalization features are depends on [the browser environments](http://kangax.github.io/compat-table/esintl/), due to implement with ECMAScript Internationalization API (ECMA-402).\n\n### Constructor options\n\nYou can specify the below some options of `I18nOptions` constructor options of [flowtype definitions](https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js)\n\n#### locale\n\n  * **Type:** `Locale`\n\n  * **Default:** `'en-US'`\n\nThe locale of localization. If the locale contains a territory and a dialect, this locale contains an implicit fallback.\n\n#### fallbackLocale\n\n  * **Type:** `FallbackLocale`\n\n  * **Default:** `false`\n\nThe locale of fallback localization. For more complex fallback definitions see [fallback](../guide/fallback.md).\n\n#### messages\n\n  * **Type:** `LocaleMessages`\n\n  * **Default:** `{}`\n\nThe locale messages of localization.\n\n#### dateTimeFormats\n\n> :new: 7.0+\n\n  * **Type:** `DateTimeFormats`\n\n  * **Default:** `{}`\n\nThe datetime formats of localization.\n\n  * **See also:** `DateTimeFormats` type of [flowtype definitions](https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js)\n\n#### numberFormats\n\n> :new: 7.0+\n\n  * **Type:** `NumberFormats`\n\n  * **Default:** `{}`\n\nThe number formats of localization.\n\n  * **See also:** `NumberFormats` type of [flowtype definitions](https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js)\n\n#### formatter\n\n  * **Type:** `Formatter`\n\n  * **Default:** Built in formatter\n\nThe formatter that implemented with `Formatter` interface.\n\n#### modifiers\n\n> :new: 8.15.0+\n\n  * **Type:** `Modifiers`\n\n  * **Default:** `lower` and `upper` modifiers\n\nModifiers functions for linked messages\n\n#### missing\n\n  * **Type:** `MissingHandler`\n\n  * **Default:** `null`\n\nA handler for localization missing. The handler gets called with the localization target locale, localization path key, the Vue instance and values.\n\nIf missing handler is assigned, and occurred localization missing, it's not warned.\n\n#### fallbackRoot\n\n  * **Type:** `Boolean`\n\n  * **Default:** `true`\n\nIn the component localization, whether to fall back to root level (global) localization when localization fails.\n\nIf `false`, it's warned, and is returned the key.\n\n#### fallbackRootWithEmptyString\n\n> :new: 8.26+\n\n- **Type:** `Boolean`\n\n- **Default:** `true`\n\n  In the component localization, whether to fall back to root level (global) localization when local message is an empty string.\n\n  Please note the default behavior in vue-i18n 9.x is to not falling back to root for local message that is empty string.\n\n  If `false`, the empty local message will not fall back to root and will be kept as empty string.\n\n#### sync\n\n  * **Type:** `Boolean`\n\n  * **Default:** `true`\n\nWhether synchronize the root level locale to the component localization locale.\n\nIf `false`, regardless of the root level locale, localize for each component locale.\n\n#### silentTranslationWarn\n\n> 6.1+, :up: 8.13\n\n  * **Type:** `Boolean | RegExp`\n\n  * **Default:** `false`\n\nWhether suppress warnings outputted when localization fails.\n\nIf `true`, suppress localization fail warnings.\nIf you use regular expression, you can suppress localization fail warnings that it match with translation `key` (e.g. `$t`).\n\n#### silentFallbackWarn\n\n> :new: 8.8+, :up: 8.13\n\n  * **Type:** `Boolean | RegExp`\n  * **Default:** `false`\n\nWhether suppress warnings when falling back to either `fallbackLocale` or `root`.\n\nIf `true`, warnings will be generated only when no translation is available at all, and not for fallbacks.\nIf you use regular expression, you can suppress the fallback warnings that it match `key` (e.g. `$t`).\n\n#### pluralizationRules\n\n> 8.5+\n\n  * **Type:** `PluralizationRules`\n\n  * **Default:** `{}`\n\n  A set of rules for word pluralization in a following format:\n  ```js\n    {\n      // Key - locale for the rule to be applied to.\n      // Value - mapping function that maps a choice index from `$tc` to the actual choice of the plural word. (See getChoiceIndex for details)\n      'pt': function(choice, choiceIndex) => Number/* index of the plural word */;\n      'ru': function(choice, choiceIndex) => Number/* index of the plural word */;\n      'en': function(choice, choiceIndex) => Number/* index of the plural word */;\n      'jp': function(choice, choiceIndex) => Number/* index of the plural word */;\n    }\n  ```\n\n#### preserveDirectiveContent\n\n> 8.7+\n\n  * **Type:** `Boolean`\n\n  * **Default:** `false`\n\nWhether `v-t` directive's element should preserve `textContent` after directive is unbinded.\n\n#### warnHtmlInMessage\n\n> 8.11+\n\n  * **Type:** `WarnHtmlInMessageLevel`\n\n  * **Default:** `off`\n\nWhether to allow the use locale messages of HTML formatting. See the `warnHtmlInMessage` property.\n\n:::danger Important!!\nIn next major version, `warnHtmlInMessage` option is `warn` as default.\n:::\n\n#### sharedMessages\n\n> 8.12+\n\n  * **Type:** `LocaleMessages`\n\n  * **Default:** `undefined`\n\nThe shared locale messages of localization for components. More detail see [Component based localization](../guide/component.md#shared-locale-messages-for-components).\n\n#### postTranslation\n\n> 8.16+\n\n  * **Type:** `PostTranslationHandler`\n\n  * **Default:** `null`\n\nA handler for post processing of translation. The handler gets after being called with the `$t`, `t`, `$tc`, and `tc`.\n\nThis handler is useful if you want to filter on translated text such as space trimming.\n\n#### componentInstanceCreatedListener\n\n> 8.18+\n\n  * **Type:** `ComponentInstanceCreatedListener`\n\n  * **Default:** `null`\n\nA handler for getting notified when component-local instance was created. The handler gets called with new and old (root) VueI18n instances.\n\nThis handler is useful when extending the root VueI18n instance and wanting to also apply those extensions to component-local instance.\n\n#### escapeParameterHtml\n\n> 8.22+\n\n  * **Type:** `Boolean`\n\n  * **Default:** `false`\n\nIf `escapeParameterHtml` is configured as true then interpolation parameters are escaped before the message is translated.\nThis is useful when translation output is used in `v-html` and the translation resource contains html markup (e.g. `<b>`\naround a user provided value). This usage pattern mostly occurs when passing precomputed text strings into UI compontents.\n\nThe escape process involves replacing the following symbols with their respective HTML character entities: `<`, `>`, `\"`, `'`.\n\nSetting `escapeParameterHtml` as true should not break existing functionality but provides a safeguard against a subtle\ntype of XSS attack vectors.\n\n### Properties\n\n#### locale\n\n  * **Type:** `Locale`\n\n  * **Read/Write**\n\nThe locale of localization. If the locale contains a territory and a dialect, this locale contains an implicit fallback.\n\n#### fallbackLocale\n\n  * **Type:** `FallbackLocale`\n\n  * **Read/Write**\n\nThe locale of fallback localization. For more complex fallback definitions see [fallback](../guide/fallback.md).\n\n#### messages\n\n  * **Type:** `LocaleMessages`\n\n  * **Read only**\n\nThe locale messages of localization.\n\n#### dateTimeFormats\n\n> :new: 7.0+\n\n  * **Type:** `DateTimeFormats`\n\n  * **Read only**\n\nThe datetime formats of localization.\n\n#### numberFormats\n\n> :new: 7.0+\n\n  * **Type:** `NumberFormats`\n\n  * **Read only**\n\nThe number formats of localization.\n\n#### availableLocales\n\n> :new: 8.9.0+\n\n  * **Type:** `Locale[]`\n\n  * **Read only**\n\nThe list of available locales in `messages` in lexical order.\n\n#### missing\n\n  * **Type:** `MissingHandler`\n\n  * **Read/Write**\n\nA handler for localization missing.\n\n#### formatter\n\n  * **Type:** `Formatter`\n\n  * **Read/Write**\n\nThe formatter that implemented with `Formatter` interface.\n\n#### silentTranslationWarn\n\n> 6.1+, :up: 8.13\n\n  * **Type:** `Boolean | RegExp`\n\n  * **Read/Write**\n\nWhether suppress warnings outputted when localization fails.\n\n#### silentFallbackWarn\n\n> :new: 8.8+, :up: 8.13\n\n  * **Type:** `Boolean | RegExp`\n\n  * **Read/Write**\n\nWhether suppress fallback warnings when localization fails.\n\n#### pluralizationRules\n\n> 8.5+\n\n  * **Type:** `PluralizationRules`\n\n  * **Read/Write**\n\nA set of locale-dependent rules for word pluralization.\n\n#### preserveDirectiveContent\n\n> 8.7+\n\n  * **Type:** `Boolean`\n\n  * **Read/Write**\n\nWhether `v-t` directive's element should preserve `textContent` after directive is unbinded.\n\n#### warnHtmlInMessage\n\n> 8.11+\n\n  * **Type:** `WarnHtmlInMessageLevel`\n\n  * **Read/Write**\n\nWhether to allow the use locale messages of HTML formatting.\n\nIf you set `warn` or` error`, will check the locale messages on the VueI18n instance.\n\nIf you are specified `warn`, a warning will be output at console.\n\nIf you are specified `error` will occurred an Error.\n\nIn VueI18n instance, set the `off` as default.\n\n#### postTranslation\n\n> 8.16+\n\n  * **Type:** `PostTranslationHandler`\n\n  * **Read/Write**\n\nA handler for post processing of translation.\n\n### Methods\n\n#### getChoiceIndex\n\n  * **Arguments:**\n\n    * `{number} choice`\n    * `{number} choicesLength`\n\n  * **Return:** `finalChoice {number}`\n\nGet pluralization index for current pluralizing number and a given amount of choices.\nCan be overridden through prototype mutation:\n\n```js\nVueI18n.prototype.getChoiceIndex = /* custom implementation */\n```\n\nHowever, for most usages [pluralizationRules constructor option](#pluralizationrules) should be enough.\n\n#### getLocaleMessage( locale )\n\n  * **Arguments:**\n\n    * `{Locale} locale`\n\n  * **Return:** `LocaleMessageObject`\n\nGet the locale message of locale.\n\n#### setLocaleMessage( locale, message )\n\n  * **Arguments:**\n\n    * `{Locale} locale`\n    * `{LocaleMessageObject} message`\n\nSet the locale message of locale.\n\n:::tip NOTE\n> 8.11+\n\nIf you set `warn` or` error` in the `warnHtmlInMessage` property, when this method is executed, it will check if HTML formatting is used for locale message.\n:::\n\n#### mergeLocaleMessage( locale, message )\n\n> 6.1+\n\n  * **Arguments:**\n\n    * `{Locale} locale`\n    * `{LocaleMessageObject} message`\n\nMerge the registered locale messages with the locale message of locale.\n\n:::tip NOTE\n> 8.11+\n\nIf you set `warn` or` error` in the `warnHtmlInMessage` property, when this method is executed, it will check if HTML formatting is used for locale message.\n:::\n\n#### t( key, [locale], [values] )\n\n  * **Arguments:**\n\n    * `{Path} key`: required\n    * `{Locale} locale`: optional\n    * `{Array | Object} values`: optional\n\n  * **Return:** : `TranslateResult`\n\nThis is the same as the `Function` returned with `$t` method. More detail see [$t](#t).\n\n#### tc( key, [choice], [values] )\n\n  * **Arguments:**\n\n    * `{Path} key`: required\n    * `{number} choice`: optional, default `1`\n    * `{string | Array | Object} values`: optional\n\n  * **Return:** `TranslateResult`\n\nThis is the same as the `Function` returned `$tc` method. More detail see [$tc](#tc).\n\n#### te( key, [locale] )\n\n  * **Arguments:**\n\n    * `{string} key`: required\n    * `{Locale} locale`: optional\n\n  * **Return:** `boolean`\n\nCheck whether key path exists in global locale message. If you specified `locale`, check the locale message of `locale`.\n\n#### getDateTimeFormat ( locale )\n\n> :new: 7.0+\n\n  * **Arguments:**\n\n    * `{Locale} locale`\n\n  * **Return:** `DateTimeFormat`\n\nGet the datetime format of locale.\n\n#### setDateTimeFormat ( locale, format )\n\n> :new: 7.0+\n\n  * **Arguments:**\n\n    * `{Locale} locale`\n    * `{DateTimeFormat} format`\n\nSet the datetime format of locale.\n\n#### mergeDateTimeFormat ( locale, format )\n\n> :new: 7.0+\n\n  * **Arguments:**\n\n    * `{Locale} locale`\n    * `{DateTimeFormat} format`\n\nMerge the registered datetime formats with the datetime format of locale.\n\n#### d( value, [key], [locale] )\n\n> :new: 7.0+\n\n  * **Arguments:**\n\n    * `{number | Date} value`: required\n    * `{Path | Object} key`: optional\n    * `{Locale | Object} locale`: optional\n\n  * **Return:** `DateTimeFormatResult`\n\nThis is the same as `$d` method of Vue instance method. More detail see [$d](#d).\n\n#### getNumberFormat ( locale )\n\n> :new: 7.0+\n\n  * **Arguments:**\n\n    * `{Locale} locale`\n\n  * **Return:** `NumberFormat`\n\nGet the number format of locale.\n\n#### setNumberFormat ( locale, format )\n\n> :new: 7.0+\n\n  * **Arguments:**\n\n    * `{Locale} locale`\n    * `{NumberFormat} format`\n\nSet the number format of locale.\n\n#### mergeNumberFormat ( locale, format )\n\n> :new: 7.0+\n\n  * **Arguments:**\n\n    * `{Locale} locale`\n    * `{NumberFormat} format`\n\nMerge the registered number formats with the number format of locale.\n\n#### n( value, [format], [locale] )\n\n> :new: 7.0+\n\n  * **Arguments:**\n\n    * `{number} value`: required\n    * `{Path | Object} format`: optional\n    * `{Locale} locale`: optional\n\n  * **Return:** `NumberFormatResult`\n\nThis is the same as `$n` method of Vue instance method. More detail see [$n](#n).\n\n## Directives\n\n> :new: 7.3+\n\n### v-t\n\n  * **Expects:** `string | Object`\n\n  * **Modifiers:**\n\n    * `.preserve`: (8.7.0+) preserves element `textContent` when directive is unbinded.\n\n  * **Details:**\n\nUpdate the element `textContent` that localized with locale messages. You can use string syntax or object syntax. string syntax can be specified as a keypath of locale messages. If you can be used object syntax, you need to specify as the object key the following params:\n\n  * `path`: required, key of locale messages\n  * `locale`: optional, locale\n  * `args`: optional, for list or named formatting\n\n:::tip NOTE\nThe element `textContent` will be cleared by default when `v-t` directive is unbinded. This might be undesirable situation when used inside [transitions](https://vuejs.org/v2/guide/transitions.html). To preserve `textContent` data after directive unbind use `.preserve` modifier or global [`preserveDirectiveContent` option](#preservedirectivecontent).\n:::\n\n  * **Examples:**\n\n```html\n<!-- string syntax: literal -->\n<p v-t=\"'foo.bar'\"></p>\n\n<!-- string syntax: binding via data or computed props -->\n<p v-t=\"msg\"></p>\n\n<!-- object syntax: literal -->\n<p v-t=\"{ path: 'hi', locale: 'ja', args: { name: 'kazupon' } }\"></p>\n\n<!-- object syntax: binding via data or computed props -->\n<p v-t=\"{ path: greeting, args: { name: fullName } }\"></p>\n\n<!-- with preserve modifier -->\n<p v-t.preserve=\"'foo.bar'\"></p>\n```\n\n  * **See also:** [Custom directive localization](../guide/directive.md)\n\n## Components\n\n### i18n functional component\n\n> :new: 7.0+\n\n#### Props:\n\n  * `path {Path}`: required, keypath of locale messages\n  * `locale {Locale}`: optional, locale\n  * `tag {string | boolean | Object}`: optional, default `'span'`\n  * `places {Array | Object}`: optional (7.2+)\n\n:::danger Important!!\nIn next major version, `places` prop is deprecated. Please switch to slots syntax.\n:::\n\n#### Usage:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <i18n path=\"term\" tag=\"label\" for=\"tos\">\n    <a :href=\"url\" target=\"_blank\">{{ $t('tos') }}</a>\n  </i18n>\n  <!-- ... -->\n</div>\n```\n```js\nconst messages = {\n  en: {\n    tos: 'Term of Service',\n    term: 'I accept xxx {0}.'\n  },\n  ja: {\n    tos: '利用規約',\n    term: '私は xxx の{0}に同意します。'\n  }\n}\n\nconst i18n = new VueI18n({\n  locale: 'en',\n  messages\n})\nnew Vue({\n  i18n,\n  data: {\n    url: '/term'\n  }\n}).$mount('#app')\n```\n\n#### See also:\n\n[Component interpolation](../guide/interpolation.md)\n\n### i18n-n functional component\n\n> :new: 8.10+\n\n#### Props:\n\n  * `value {number}`: required, number to format\n  * `format {string | NumberFormatOptions}`: optional, number format name or object with explicit format options\n  * `locale {Locale}`: optional, locale\n  * `tag {string | boolean | Object}`: optional, default `'span'`\n\n#### Usage:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <i18n-n :value=\"money\" format=\"currency\" tag=\"label\">\n    <span v-slot:currency=\"slotProps\" class=\"font-weight: bold\">{{ slotProps.currency }}<span>\n  </i18n-n>\n  <!-- ... -->\n</div>\n```\n```js\nvar numberFormats = {\n  'en-US': {\n    currency: {\n      style: 'currency', currency: 'USD'\n    }\n  },\n  'ja-JP': {\n    currency: {\n      style: 'currency', currency: 'JPY'\n    }\n  }\n}\n\nconst i18n = new VueI18n({\n  locale: 'en-US',\n  numberFormats\n})\nnew Vue({\n  i18n,\n  data: {\n    money: 10234,\n  }\n}).$mount('#app')\n```\n\n#### Scoped slots\n\n`<i18n-n>` functional component can accept a number of named scoped slots. List of supported slot names is based on [`Intl.NumberFormat.formatToParts()` output types](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/formatToParts):\n\n* `currency`\n* `decimal`\n* `fraction`\n* `group`\n* `infinity`\n* `integer`\n* `literal`\n* `minusSign`\n* `nan`\n* `plusSign`\n* `percentSign`\n\nEach of these named scoped slots will accept three scope parameters:\n\n* `[slotName] {FormattedNumberPartType}`: parameter of the same name as actual slot name (like `integer`)\n* `index {Number}`: index of the specific part in the array of number parts\n* `parts {Array}`: array of all formatted number parts\n\n#### See also:\n\n[Number custom formatting](../guide/number.md#custom-formatting)\n\n## Special Attributes\n\n### place\n\n> :new: 7.2+\n\n#### Expects: `{number | string}`\n\nUsed on component interpolation to indicate which index of list formatting or key of named formatting.\n\nFor detailed usage, see the guide section linked below.\n\n#### See also:\n\n[Component interpolation](../guide/interpolation.md)\n"
  },
  {
    "path": "vuepress/guide/component.md",
    "content": "# Component based localization\n\nIn general, locale info (e.g. `locale`,`messages`, etc) is set as constructor option of `VueI18n` instance and it sets `i18n` option as root Vue instance.\n\nTherefore you can globally translate using `$t` or `$tc` in the root Vue instance and any composed component. You can also manage locale info for each component separately, which might be more convenient due to Vue components oriented design.\n\nComponent based localization example:\n\n```js\n// setup locale info for root Vue instance\nconst i18n = new VueI18n({\n  locale: 'ja',\n  messages: {\n    en: {\n      message: {\n        hello: 'hello world',\n        greeting: 'good morning'\n      }\n    },\n    ja: {\n      message: {\n        hello: 'こんにちは、世界',\n        greeting: 'おはようございます'\n      }\n    }\n  }\n})\n\n// Define component\nconst Component1 = {\n  template: `\n    <div class=\"container\">\n     <p>Component1 locale messages: {{ $t(\"message.hello\") }}</p>\n     <p>Fallback global locale messages: {{ $t(\"message.greeting\") }}</p>\n   </div>`,\n  i18n: { // `i18n` option, setup locale info for component\n    messages: {\n      en: { message: { hello: 'hello component1' } },\n      ja: { message: { hello: 'こんにちは、component1' } }\n    }\n  }\n}\n\nnew Vue({\n  i18n,\n  components: {\n    Component1\n  }\n}).$mount('#app')\n```\n\nTemplate:\n\n\n```html\n<div id=\"app\">\n  <p>{{ $t(\"message.hello\") }}</p>\n  <component1></component1>\n</div>\n```\n\nOutputs the following:\n\n```html\n<div id=\"app\">\n  <p>こんにちは、世界</p>\n  <div class=\"container\">\n    <p>Component1 locale messages: こんにちは、component1</p>\n    <p>Fallback global locale messages: おはようございます</p>\n  </div>\n</div>\n```\n\nAs in the example above, if the component doesn't have the locale message, it falls back to globally defined localization info. The component uses the language set in the root instance (in the above example: `locale: 'ja'`).\n\nNote that, by default, falling back to root locale generates two warnings in the console:\n\n```\n[vue-i18n] Value of key 'message.greeting' is not a string!\n[vue-i18n] Fall back to translate the keypath 'message.greeting' with root locale.\n```\n\nTo suppress these warnings (while keeping those which warn of the total absence of translation for the given key) set `silentFallbackWarn: true` when initializing the `VueI18n` instance.\n\nIf you want to localize using the component locale, you can do that with `sync: false` and `locale` in the `i18n` option.\n\n\n## Shared locale messages for components\n\nSometimes you may want to import shared locale messages for certain components, not fallback from global locale messages (e.g. common messages of certain feature for components.\n\nYou can use `sharedMessages` options of `i18n`.\n\nCommon Locale Messages example:\n\n```js\nexport default {\n  en: {\n    buttons: {\n      save: \"Save\",\n      // ...\n    }\n  },\n  ja: {\n    buttons: {\n      save: \"保存\",\n      // ...\n    }\n  }\n}\n```\n\nComponents:\n```js\nimport commonMessage from './locales/common' // import common locale messages\n\nexport default {\n  name: 'ServiceModal',\n  template: `\n    <div class=\"modal\">\n      <div class=\"body\">\n        <p>This is good service</p>\n      </div>\n      <div class=\"footer\">\n        <button type=\"button\">\n          {{ $t('buttons.save') }}\n        </button>\n      </div>\n    </div>\n  `,\n  i18n: {\n    messages: { ... },\n    sharedMessages: commonMessages\n  }\n}\n```\n\nIf `sharedMessages` option is specified along with the `messages` option, those messages will be merged into locale messages into the VueI18n instance of the target component.\n\n\n## Translation in functional component\n\nWhen using a functional component, all data (including `props`, `children`, `slots`, `parent`, etc.) is passed through the `context` containing the attributes, and it doesn't recognize the `this` scope, so when using the vue-i18n on functional components, you must refer to `$t` as `parent.$t`, check the example below:\n\n```html\n...\n<div>\n  <a href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\">\n    <img src=\"./assets/example.jpg\" :alt=\"parent.$t('message.hello')\">\n  </a>\n</div>\n...\n```\n"
  },
  {
    "path": "vuepress/guide/datetime.md",
    "content": "# DateTime localization\n\n:::tip Support Version\n:new: 7.0+\n:::\n\nYou can localize the datetime with your definition formats.\n\nDateTime formats the below:\n\n```js\nconst dateTimeFormats = {\n  'en-US': {\n    short: {\n      year: 'numeric',\n      month: 'short',\n      day: 'numeric'\n    },\n    long: {\n      year: 'numeric',\n      month: 'long',\n      day: 'numeric',\n      weekday: 'long',\n      hour: 'numeric',\n      minute: 'numeric'\n    }\n  },\n  'ja-JP': {\n    short: {\n      year: 'numeric',\n      month: 'short',\n      day: 'numeric'\n    },\n    long: {\n      year: 'numeric',\n      month: 'long',\n      day: 'numeric',\n      weekday: 'long',\n      hour: 'numeric',\n      minute: 'numeric',\n      hour12: true\n    }\n  }\n}\n```\n\nAs seen above, you can define named datetime format (e.g. `short`, `long`, etc), and you need to use [the options with ECMA-402 Intl.DateTimeFormat](http://www.ecma-international.org/ecma-402/2.0/#sec-intl-datetimeformat-constructor)\n\nAfter that, when using the locale messages, you need to specify the `dateTimeFormats` option of the `VueI18n` constructor:\n\n```js\nconst i18n = new VueI18n({\n  dateTimeFormats\n})\n\nnew Vue({\n  i18n\n}).$mount('#app')\n```\n\nTemplate the below:\n\n```html\n<div id=\"app\">\n  <p>{{ $d(new Date(), 'short') }}</p>\n  <p>{{ $d(new Date(), 'long', 'ja-JP') }}</p>\n</div>\n```\n\nOutput the below:\n\n```html\n<div id=\"app\">\n  <p>Jan 18, 2021</p>\n  <p>2021年1月18日日曜日 午前5:47</p>\n</div>\n```\n"
  },
  {
    "path": "vuepress/guide/directive.md",
    "content": "# Custom directive localization\n\n:::tip Support Version\n:new: 7.3+\n:::\n\nYou can translate not only with `v-t` custom directive, but also with the `$t`\nmethod.\n\n## String syntax\n\nYou can pass the keypath of locale messages with string syntax.\n\nJavascript:\n\n```js\nnew Vue({\n  i18n: new VueI18n({\n    locale: 'en',\n    messages: {\n      en: { hello: 'hi there!' },\n      ja: { hello: 'こんにちは！' }\n    }\n  }),\n  data: { path: 'hello' }\n}).$mount('#string-syntax')\n```\n\nTemplates:\n\n```html\n<div id=\"string-syntax\">\n  <!-- string literal -->\n  <p v-t=\"'hello'\"></p>\n  <!-- keypath binding via data -->\n  <p v-t=\"path\"></p>\n</div>\n```\n\nOutputs:\n\n```html\n<div id=\"string-syntax\">\n  <p>hi there!</p>\n  <p>hi there!</p>\n</div>\n```\n\n## Object syntax\n\nYou can use object syntax.\n\nJavascript:\n\n```js\nnew Vue({\n  i18n: new VueI18n({\n    locale: 'en',\n    messages: {\n      en: { hello: 'hi {name}!' },\n      ja: { hello: 'こんにちは、{name}！' }\n    }\n  }),\n  computed: {\n    nickName () { return 'kazupon' }\n  },\n  data: { path: 'hello' }\n}).$mount('#object-syntax')\n```\n\nTemplates:\n\n```html\n<div id=\"object-syntax\">\n  <!-- literal -->\n  <p v-t=\"{ path: 'hello', locale: 'ja', args: { name: 'kazupon' } }\"></p>\n  <!-- data binding via data -->\n  <p v-t=\"{ path: path, args: { name: nickName } }\"></p>\n</div>\n```\n\nOutputs:\n\n```html\n<div id=\"object-syntax\">\n  <p>こんにちは、kazupon！</p>\n  <p>hi kazupon!</p>\n</div>\n```\n\n## Use with transitions\n\n:::tip Support Version\n:new: 8.7+\n:::\n\nWhen `v-t` directive is applied to an element inside [`<transition>` component](https://vuejs.org/v2/api/#transition), you may notice that the translated message disappears during the transition. This behavior is related to the nature of the `<transition>` component implementation – all directives in the disappearing element inside the `<transition>` component will be destroyed **before the transition starts**. This behavior may result in content flickering on short animations, but is most noticeable on long transitions.\n\nTo make sure directive content stays un-touched during a transition, just add the [`.preserve` modifier](../api/#v-t) to the `v-t` directive definition.\n\nJavascript:\n\n```js\nnew Vue({\n  i18n: new VueI18n({\n    locale: 'en',\n    messages: {\n      en: { preserve: 'with preserve' },\n    }\n  }),\n  data: { toggle: true }\n}).$mount('#in-transitions')\n```\n\nTemplates:\n\n```html\n<div id=\"in-transitions\">\n  <transition name=\"fade\">\n    <span v-if=\"toggle\" v-t.preserve=\"'preserve'\"></span>\n  </transition>\n  <button @click=\"toggle = !toggle\">Toggle</button>\n</div>\n```\n\nIt is also possible to set global settings on the `VueI18n` instance itself, which will affect all `v-t` directives without modifier.\n\nJavascript:\n\n```js\nnew Vue({\n  i18n: new VueI18n({\n    locale: 'en',\n    messages: {\n      en: { preserve: 'with preserve' },\n    },\n    preserveDirectiveContent: true\n  }),\n  data: { toggle: true }\n}).$mount('#in-transitions')\n```\n\nTemplates:\n\n```html\n<div id=\"in-transitions\">\n  <transition name=\"fade\">\n    <span v-if=\"toggle\" v-t=\"'preserve'\"></span>\n  </transition>\n  <button @click=\"toggle = !toggle\">Toggle</button>\n</div>\n```\n\nAbout the above examples, see the [example](https://github.com/kazupon/vue-i18n/tree/dev/examples/directive)\n\n## `$t` vs `v-t`\n\n### `$t`\n\n`$t` is an extended Vue instance method. It has the following pros and cons:\n\n#### Pros\n\nYou can **flexibly** use mustache syntax `{{}}` in templates and also computed props and methods in Vue instance.\n\n#### Cons\n\n`$t` is executed **every time** when re-render occurs, so it does have translation costs.\n\n### `v-t`\n\n`v-t` is a custom directive. It has the following pros and cons:\n\n#### Pros\n\n`v-t` has **better performance** than the `$t` method due to its cache with the custom directive, when translated once. Also, pre-translation is possible with the Vue compiler module which was provided by [`vue-i18n-extensions`](https://github.com/kazupon/vue-i18n-extensions).\n\nTherefore it's possible to make **more performance optimizations**.\n\n#### Cons\n\n`v-t` cannot be flexibly used like `$t`, it's rather **complex**. The translated content with `v-t` is inserted into the `textContent` of the element. Also, when you use server-side rendering, you need to set the [custom directive](https://github.com/kazupon/vue-i18n-extensions#directive-v-t-custom-directive-for-server-side) to `directives` option of the `createRenderer` function.\n"
  },
  {
    "path": "vuepress/guide/fallback.md",
    "content": "# Fallback localization\n\n*Summary: Use `fallbackLocale: '<lang>'` to choose which language to use when your preferred language lacks a translation.*\n\n## Implicit fallback using locales\n\nIf a `locale` is given containing a territory and an optional dialect, the implicit fallback is activated automatically.\n\nFor example `de-DE-bavarian` would fallback\n1. `de-DE-bavarian`\n1. `de-DE`\n1. `de`\n\nTo suppress the automatic fallback, add the postfix exclamation mark `!`, for example `de-DE!`\n\n## Explicit fallback with one locale\n\nSometimes some items will not be translated into some languages. In this example, the item `hello` is available in English but not Japanese:\n\n```js\nconst messages = {\n  en: {\n    hello: 'Hello, world!'\n  },\n  ja: {\n    // Localization without translation to `hello`\n  }\n}\n```\n\nIf you want to use (say) `en` items when an item is not available in your desired locale, set the `fallbackLocale` option in the VueI18n constructor:\n\n```js\nconst i18n = new VueI18n({\n  locale: 'ja',\n  fallbackLocale: 'en',\n  messages\n})\n```\n\nTemplate:\n\n```html\n<p>{{ $t('hello') }}</p>\n```\n\nOutput:\n\n```html\n<p>Hello, world!</p>\n```\n\nBy default, falling back to `fallbackLocale` generates two console warnings:\n\n```\n[vue-i18n] Value of key 'hello' is not a string!\n[vue-i18n] Fall back to translate the keypath 'hello' with 'en' locale.\n```\n\nTo suppress these warnings (while keeping those which warn of the total absence of translation for the given key) set `silentFallbackWarn: true` when initializing the `VueI18n` instance.\n\n## Explicit fallback with an array of locales\n\nIt is possible to set more than one fallback locale by using an array of locales. For example\n\n```javascript\nfallbackLocale: [ 'fr', 'en' ],\n```\n\n## Explicit fallback with decision maps\nIf more complex decision maps for fallback locales are required, it is possible to define decision maps with according fallback locales.\nUsing the following decision map\n```javascript\nfallbackLocale: {\n  /* 1 */ 'de-CH':   ['fr', 'it'],\n  /* 2 */ 'zh-Hant': ['zh-Hans'],\n  /* 3 */ 'es-CL':   ['es-AR'],\n  /* 4 */ 'es':      ['en-GB'],\n  /* 5 */ 'pt':      ['es-AR'],\n  /* 6 */ 'default': ['en', 'da']\n},\n```\nwill result in the following fallback chains\n| locale | fallback chains |\n|--------|-----------------|\n| `'de-CH'`   | de-CH > fr > it > en > da |\n| `'de'`      | de > en > da |\n| `'zh-Hant'` | zh-Hant > zh-Hans > zh > en > da |\n| `'es-SP'`   | es-SP > es > en-GB > en > da |\n| `'es-SP!'`  | es-SP > en > da |\n| `'fr'`      | fr > en > da |\n| `'pt-BR'`   | pt-BR > pt > es-AR > es > en-GB > en > da |\n| `'es-CL'`   | es-CL > es-AR > es > en-GB > en > da |\n\n## Fallback interpolation\n\n*Summary: Set `formatFallbackMessages: true` to do template interpolation on translation keys when your language lacks a translation for a key.*\n\nSince the keys to the translations are strings, you can use a user-readable message (for a particular language) as a key.\nE.g.\n\n```javascript\nconst messages = {\n  ja: {\n    'Hello, world!': 'こんにちは、世界!'\n  }\n}\n```\n\nThis is useful because you don't have to specify a translation for the string \"Hello, world!\" into English.\n\nIn fact, you can even include template parameters in a key. Together with `formatFallbackMessages: true`, this lets you skip writing templates for your \"base\" language; the keys *are* your templates.\n\n```javascript\nconst messages = {\n  ru: {\n    'Hello {name}': 'Здравствуйте {name}'\n  }\n}\n\nconst i18n = new VueI18n({\n  locale: 'ru',\n  fallbackLocale: 'en',\n  formatFallbackMessages: true,\n  messages\n})\n```\n\nWhen the template is as below:\n\n```html\n<p>{{ $t('Hello {name}', { name: 'John' }}) }}</p>\n<p>{{ $t('The weather today is {condition}!', { condition: 'sunny' }) }}</p>\n```\n\nThe following will be output:\n\n```html\n<p>Здравствуйте, John</p>\n<p>The weather today is sunny!</p>\n```\n"
  },
  {
    "path": "vuepress/guide/formatting.md",
    "content": "# Formatting\n\n## Named formatting\n\nLocale messages:\n\n```js\nconst messages = {\n  en: {\n    message: {\n      hello: '{msg} world'\n    }\n  }\n}\n```\n\nTemplate:\n\n```html\n<p>{{ $t('message.hello', { msg: 'hello' }) }}</p>\n```\n\nOutput:\n\n```html\n<p>hello world</p>\n```\n\n## List formatting\n\nLocale messages:\n\n```js\nconst messages = {\n  en: {\n    message: {\n      hello: '{0} world'\n    }\n  }\n}\n```\n\nTemplate:\n\n```html\n<p>{{ $t('message.hello', ['hello']) }}</p>\n```\n\nOutput:\n\n```html\n<p>hello world</p>\n```\n\nList formatting also accepts array-like objects:\n\n```html\n<p>{{ $t('message.hello', {'0': 'hello'}) }}</p>\n```\n\nOutput:\n\n```html\n<p>hello world</p>\n```\n\n## HTML formatting\n\n:::warning Notice\n:warning: Dynamically localizing arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use HTML interpolation on trusted content and never on user-provided content.\n\nWe recommended using the [component interpolation](interpolation.md) feature.\n:::\n\n:::warning Notice\n> :new: 8.11+\n\nYou can control the use of HTML formatting. see the detail `warnHtmlInMessage` constructor option and property API.\n:::\n\nIn some cases you might want to render your translation as an HTML message and not a static string.\n\n\n```js\nconst messages = {\n  en: {\n    message: {\n      hello: 'hello <br> world'\n    }\n  }\n}\n```\n\nTemplate:\n\n\n```html\n<p v-html=\"$t('message.hello')\"></p>\n```\n\nOutput (instead of the pre-formatted message )\n\n\n```html\n<p>hello\n<!--<br> exists but is rendered as html and not a string-->\nworld</p>\n```\n\n\n## Support ruby on rails i18n format\n\nLocale messages:\n\n```js\nconst messages = {\n  en: {\n    message: {\n      hello: '%{msg} world'\n    }\n  }\n}\n```\n\nTemplate:\n\n```html\n<p>{{ $t('message.hello', { msg: 'hello' }) }}</p>\n```\n\nOutput:\n\n```html\n<p>hello world</p>\n```\n\n## Custom formatting\n\nSometimes, you may need to translate using custom formatting (e.g. [ICU message syntax](http://userguide.icu-project.org/formatparse/messages)).\n\nYou can do that with a custom formatter that implements the [Formatter Interface](https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js#L145-L147).\n\nThe following custom formatter with ES2015 class syntax:\n\n```js\n// Custom Formatter implementation\nclass CustomFormatter {\n     constructor (options) {\n       // ...\n     }\n\n     //\n     // interpolate\n     //\n     // @param {string} message\n     //   string of list or named format.\n     //   e.g.\n     //   - named formatting: 'Hi {name}'\n     //   - list formatting: 'Hi {0}'\n     //\n     // @param {Object | Array} values\n     //   values of `message` interpolation.\n     //   passed values with `$t`, `$tc` and `i18n` functional component.\n     //   e.g.\n     //   - $t('hello', { name: 'kazupon' }) -> passed values: Object `{ name: 'kazupon' }`\n     //   - $t('hello', ['kazupon']) -> passed values: Array `['kazupon']`\n     //   - `i18n` functional component (component interpolation)\n     //     <i18n path=\"hello\">\n     //       <p>kazupon</p>\n     //       <p>how are you?</p>\n     //     </i18n>\n     //     -> passed values: Array (included VNode):\n     //        `[VNode{ tag: 'p', text: 'kazupon', ...}, VNode{ tag: 'p', text: 'how are you?', ...}]`\n     //\n     // @return {Array<any>}\n     //   interpolated values. you need to return the following:\n     //   - array of string, when is using `$t` or `$tc`.\n     //   - array included VNode object, when is using `i18n` functional component.\n     //\n     interpolate (message, values) {\n       // implement interpolation logic here\n       // ...\n\n       // return the interpolated array\n       return ['resolved message string']\n     }\n}\n\n// register with `formatter` option\nconst i18n = new VueI18n({\n  locale: 'en-US',\n  formatter: new CustomFormatter(/* here the constructor options */),\n  messages: {\n    'en-US': {\n      // ...\n    },\n    // ...\n  }\n})\n\n// Run!\nnew Vue({ i18n }).$mount('#app')\n```\n\nYou can check [the custom formatter official example](https://github.com/kazupon/vue-i18n/tree/dev/examples/formatting/custom).\n"
  },
  {
    "path": "vuepress/guide/hot-reload.md",
    "content": "# Hot reloading\n\nYou can use Webpack's [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/) (HMR) feature to watch for changes in localization files and hot reload changes into your application.\n\n## Basic example\n\nIf you only use a static set of locales, you can hot reload those locales explicitly:\n\n```js\nimport Vue from \"vue\"\nimport VueI18n from \"vue-i18n\"\nimport en from './en'\nimport ja from './ja'\n\nconst messages = {\n  en,\n  ja\n}\n\n// VueI18n instance\nconst i18n = new VueI18n({\n  locale: 'en',\n  messages\n})\n\n// Run app\nconst app = new Vue({\n  i18n,\n  // ...\n}).$mount('#app')\n\n// Hot updates\nif (module.hot) {\n  module.hot.accept(['./en', './ja'], function () {\n    i18n.setLocaleMessage('en', require('./en').default)\n    i18n.setLocaleMessage('ja', require('./ja').default)\n    // Or the following hot updates via $i18n property\n    // app.$i18n.setLocaleMessage('en', require('./en').default)\n    // app.$i18n.setLocaleMessage('ja', require('./ja').default)\n  })\n}\n```\n\n## Advanced example\n\nIf you want to support a changing set of locales, you can hot reload those locales dynamically using `require.context`:\n\n```js\nimport Vue from \"vue\";\nimport VueI18n from \"vue-i18n\";\n\nVue.use(VueI18n);\n\n// Load all locales and remember context\nfunction loadMessages() {\n  const context = require.context(\"./locales\", true, /[a-z0-9-_]+\\.json$/i);\n\n  const messages = context\n    .keys()\n    .map((key) => ({ key, locale: key.match(/[a-z0-9-_]+/i)[0] }))\n    .reduce(\n      (messages, { key, locale }) => ({\n        ...messages,\n        [locale]: context(key),\n      }),\n      {}\n    );\n\n  return { context, messages };\n}\n\nconst { context, messages } = loadMessages();\n\n// VueI18n instance\nconst i18n = new VueI18n({\n  locale: \"en\",\n  messages,\n});\n\n// Run app\nconst app = new Vue({\n  i18n,\n  // ...\n}).$mount('#app');\n\n// Hot updates\nif (module.hot) {\n  module.hot.accept(context.id, () => {\n    const { messages: newMessages } = loadMessages();\n\n    Object.keys(newMessages)\n      .filter((locale) => messages[locale] !== newMessages[locale])\n      .forEach((locale) => {\n        messages[locale] = newMessages[locale];\n        i18n.setLocaleMessage(locale, messages[locale]);\n      });\n  });\n}\n```\n"
  },
  {
    "path": "vuepress/guide/interpolation.md",
    "content": "# Component interpolation\n\n## Basic Usage\n\n:::tip Support Version\n:new: 7.0+\n:::\n\nSometimes, we need to localize with a locale message that was included in a HTML tag or component. For example:\n\n```html\n<p>I accept xxx <a href=\"/term\">Terms of Service Agreement</a></p>\n```\n\nIn the above message, if you use `$t`, you will probably try to compose the following locale messages:\n\n```js\nconst messages = {\n  en: {\n    term1: 'I Accept xxx\\'s',\n    term2: 'Terms of Service Agreement'\n  }\n}\n```\n\nAnd your localized template may look like this:\n\n```html\n<p>{{ $t('term1') }}<a href=\"/term\">{{ $t('term2') }}</a></p>\n```\n\nOutput:\n\n```html\n<p>I accept xxx <a href=\"/term\">Terms of Service Agreement</a></p>\n```\n\nThis is very cumbersome, and if you configure the `<a>` tag in a locale message, there is a possibility of XSS vulnerabilities due to localizing with\n`v-html=\"$t('term')\"`.\n\nYou can avoid it using the `i18n` functional component. For example:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <i18n path=\"term\" tag=\"label\" for=\"tos\">\n    <a :href=\"url\" target=\"_blank\">{{ $t('tos') }}</a>\n  </i18n>\n  <!-- ... -->\n</div>\n```\n```js\nconst messages = {\n  en: {\n    tos: 'Term of Service',\n    term: 'I accept xxx {0}.'\n  },\n  ja: {\n    tos: '利用規約',\n    term: '私は xxx の{0}に同意します。'\n  }\n}\n\nconst i18n = new VueI18n({\n  locale: 'en',\n  messages\n})\nnew Vue({\n  i18n,\n  data: {\n    url: '/term'\n  }\n}).$mount('#app')\n```\n\nthe following output:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <label for=\"tos\">\n    I accept xxx <a href=\"/term\" target=\"_blank\">Term of Service</a>.\n  </label>\n  <!-- ... -->\n</div>\n```\n\nAbout the above example, see the [example](https://github.com/kazupon/vue-i18n/tree/dev/examples/interpolation/places)\n\nThe children of `i18n` functional component are interpolated with locale message of `path` prop.\n\nIn the above example:\n:::v-pre\n`<a :href=\"url\" target=\"_blank\">{{ $t('tos') }}</a>`\n:::\nis interpolated with `term` locale message.\n\nIn the above example, the component interpolation follows the **list formatting**. The children of `i18n` functional component are interpolated by their order of appearance.\n\nYou can choose the root container's node type by specifying a `tag` prop. If omitted, it defaults to `'span'`. You can also set it to the boolean value `false` to insert the child nodes directly without creating a root element.\n\n## Slots syntax usage\n\n:::tip Support Version\n:new: 8.14+\n:::\n\nIt's more convenient to use the named slots syntax. For example:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <i18n path=\"info\" tag=\"p\">\n    <template v-slot:limit>\n      <span>{{ changeLimit }}</span>\n    </template>\n    <template v-slot:action>\n      <a :href=\"changeUrl\">{{ $t('change') }}</a>\n    </template>\n  </i18n>\n  <!-- ... -->\n</div>\n```\n\n```js\nconst messages = {\n  en: {\n    info: 'You can {action} until {limit} minutes from departure.',\n    change: 'change your flight',\n    refund: 'refund the ticket'\n  }\n}\n\nconst i18n = new VueI18n({\n  locale: 'en',\n  messages\n})\n\nnew Vue({\n  i18n,\n  data: {\n    changeUrl: '/change',\n    refundUrl: '/refund',\n    changeLimit: 15,\n    refundLimit: 30\n  }\n}).$mount('#app')\n```\n\nOutputs:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <p>\n    You can <a href=\"/change\">change your flight</a> until <span>15</span> minutes from departure.\n  </p>\n  <!-- ... -->\n</div>\n```\n\nIn Vue 2.6 and later, you can use the following slots syntax in templates:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <i18n path=\"info\" tag=\"p\">\n    <template #limit>\n      <span>{{ changeLimit }}</span>\n    </template>\n    <template #action>\n      <a :href=\"changeUrl\">{{ $t('change') }}</a>\n    </template>\n  </i18n>\n  <!-- ... -->\n</div>\n```\n\n:::warning Limitation\n:warning: In `i18n` component, slots props are not supported.\n:::\n\n\n## Places syntax usage\n\n:::danger Important!!\nIn the next major version, the `place` and `places` props will be deprecated. Please switch to slots syntax.\n:::\n\n:::tip Support Version\n:new: 7.2+\n:::\n\n:::warning Notice\n:warning: In `i18n` component, text content consisting of only white spaces will be omitted.\n:::\n\nNamed formatting is supported with the help of `place` attribute. For example:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <i18n path=\"info\" tag=\"p\">\n    <span place=\"limit\">{{ changeLimit }}</span>\n    <a place=\"action\" :href=\"changeUrl\">{{ $t('change') }}</a>\n  </i18n>\n  <!-- ... -->\n</div>\n```\n```js\nconst messages = {\n  en: {\n    info: 'You can {action} until {limit} minutes from departure.',\n    change: 'change your flight',\n    refund: 'refund the ticket'\n  }\n}\n\nconst i18n = new VueI18n({\n  locale: 'en',\n  messages\n})\nnew Vue({\n  i18n,\n  data: {\n    changeUrl: '/change',\n    refundUrl: '/refund',\n    changeLimit: 15,\n    refundLimit: 30\n  }\n}).$mount('#app')\n```\n\nOutputs:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <p>\n    You can <a href=\"/change\">change your flight</a> until <span>15</span> minutes from departure.\n  </p>\n  <!-- ... -->\n</div>\n```\n\n:::warning Notice\n:warning: To use named formatting, all children of `i18n` component must have `place` attribute set. Otherwise it will fallback to list formatting.\n:::\n\nIf you still want to interpolate text content in named formatting, you could define `places` property on `i18n` component. For example:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <i18n path=\"info\" tag=\"p\" :places=\"{ limit: refundLimit }\">\n    <a place=\"action\" :href=\"refundUrl\">{{ $t('refund') }}</a>\n  </i18n>\n  <!-- ... -->\n</div>\n```\n\nOutputs:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <p>\n    You can <a href=\"/refund\">refund your ticket</a> until 30 minutes from departure.\n  </p>\n  <!-- ... -->\n</div>\n```\n"
  },
  {
    "path": "vuepress/guide/lazy-loading.md",
    "content": "# Lazy loading translations\n\nLoading all of your translation files at once is overkill and unnecessary.\n\nLazy loading or asynchronously loading the translation files is really easy when using Webpack.\n\nLet´s assume we have a project directory similar to the one below:\n\n```\nour-cool-project\n-dist\n-src\n--routes\n--store\n--setup\n---i18n-setup.js\n--lang\n---en.js\n---it.js\n```\n\nThe `lang` folder is where all of our translation files reside. The `setup` folder is where our arbitrary setup files like the i18n-setup, global component inits, plugin inits and other reside.\n\n```js\n//i18n-setup.js\nimport Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport messages from '@/lang/en'\nimport axios from 'axios'\n\nVue.use(VueI18n)\n\nexport const i18n = new VueI18n({\n  locale: 'en', // set locale\n  fallbackLocale: 'en',\n  messages // set locale messages\n})\n\nconst loadedLanguages = ['en'] // our default language that is preloaded\n\nfunction setI18nLanguage (lang) {\n  i18n.locale = lang\n  axios.defaults.headers.common['Accept-Language'] = lang\n  document.querySelector('html').setAttribute('lang', lang)\n  return lang\n}\n\nexport function loadLanguageAsync(lang) {\n  // If the same language\n  if (i18n.locale === lang) {\n    return Promise.resolve(setI18nLanguage(lang))\n  }\n\n  // If the language was already loaded\n  if (loadedLanguages.includes(lang)) {\n    return Promise.resolve(setI18nLanguage(lang))\n  }\n\n  // If the language hasn't been loaded yet\n  return import(/* webpackChunkName: \"lang-[request]\" */ `@/lang/${lang}.js`).then(\n    messages => {\n      i18n.setLocaleMessage(lang, messages.default)\n      loadedLanguages.push(lang)\n      return setI18nLanguage(lang)\n    }\n  )\n}\n```\n\nIn short we are creating a new VueI18n instance as we normally would. Then we are creating a `loadedLanguages` array that will keep track of our loaded languages. Next is the `setI18nLanguage` function that will actually change the language in our vueI18n instance, axios and where ever else is needed.\n\nThe `loadLanguageAsync` function is what we will actually use to change the languages. Loading the new files is done via the `import` function, which is generously provided by Webpack and it allows us to load files dynamically, and because it uses promises we can easily wait for the loading to finish.\n\nYou can learn more about the import function in the [Webpack documentation](https://webpack.js.org/guides/code-splitting/#dynamic-imports).\n\nUsing the `loadLanguageAsync` function is straightforward. A common use case is inside a vue-router beforeEach hook.\n\n```js\nrouter.beforeEach((to, from, next) => {\n  const lang = to.params.lang\n  loadLanguageAsync(lang).then(() => next())\n})\n```\n\nWe could improve this by checking if the `lang` is actually supported by us or not, call `reject` so we can catch that in the `beforeEach` stopping the route transition.\n"
  },
  {
    "path": "vuepress/guide/locale.md",
    "content": "# Locale changing\n\nNormally, using the root Vue instance as the starting point, all child components are localized using the `locale` property of the `VueI18n` class as a reference.\n\nSometimes you might want to dynamically change the locale. In that case you can change the value of the `locale` property of the `VueI18n` instance.\n\n\n```js\nconst i18n = new VueI18n({\n  locale: 'ja', // set locale\n  ...\n})\n\n// create root Vue instance\nnew Vue({\n  i18n,\n  ...\n}).$mount('#app')\n\n// change other locale\ni18n.locale = 'en'\n```\n\nEach component contains a `VueI18n` instance referenced as the `$i18n` property that can also be used to change the locale.\n\nExample:\n\n```vue\n<template>\n  <div class=\"locale-changer\">\n    <select v-model=\"$i18n.locale\">\n      <option v-for=\"(lang, i) in langs\" :key=\"`Lang${i}`\" :value=\"lang\">\n        {{ lang }}\n      </option>\n    </select>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'locale-changer',\n  data () {\n    return { langs: ['ja', 'en'] }\n  }\n}\n</script>\n```\n\n:::warning Notice\n:warning: Locale changing is ignored for components that use `sync: false`.\n:::\n\n:::warning Component vs. root scope\n:warning: Changing `$i18n.locale` inside a component does not update the root locale.\nIf you rely on the root locale, for example when using [root fallbacks](./fallback.html), use `$root.$i18n.locale` instead of `$i18n.locale`.\n:::\n"
  },
  {
    "path": "vuepress/guide/messages.md",
    "content": "# Locale messages syntax\n\n## Structure\n\nLocale Messages syntax below:\n\n```typescript\n// As Flowtype definition, Locale Messages syntax like BNF annotation\ntype LocaleMessages = { [key: Locale]: LocaleMessageObject };\ntype LocaleMessageObject = { [key: Path]: LocaleMessage };\ntype LocaleMessageArray = LocaleMessage[];\ntype MessageContext = {\n  list: (index: number) => mixed,\n  named: (key: string) => mixed,\n  linked: (key: string) => TranslateResult,\n  values: any, // NOTE: not compatible for vue-i18n@v9.x\n  path: string, // NOTE: not compatible for vue-i18n@v9.x\n  formatter: Formatter, // NOTE: not compatible for vue-i18n@v9.x\n  messages: LocaleMessages, // NOTE: not compatible for vue-i18n@v9.x\n  locale: Locale // NOTE: not compatible for vue-i18n@v9.x\n};\ntype MessageFunction = (ctx: MessageContext) => string;\ntype LocaleMessage = string | MessageFunction | LocaleMessageObject | LocaleMessageArray;\ntype Locale = string;\ntype Path = string;\n```\n\nBased on the above syntax, You can configure the following Locale Messages structure:\n\n```json\n{\n  \"en\": {  // 'en' Locale\n    \"key1\": \"this is message1\", // basic\n    \"nested\": { // nested\n      \"message1\": \"this is nested message1\"\n    },\n    \"errors\": [ // array\n      \"this is 0 error code message\",\n      {  // object in array\n        \"internal1\": \"this is internal 1 error message\"\n      },\n      [  // array in array\n        \"this is nested array error 1\"\n      ]\n    ]\n  },\n  \"ja\": { // 'ja' Locale\n    // ...\n  }\n}\n```\n\nIn the above Locale Messages structure, You can translate using below key paths.\n\n```html\n<div id=\"app\">\n  <!-- basic -->\n  <p>{{ $t('key1') }}</p>\n  <!-- nested -->\n  <p>{{ $t('nested.message1') }}</p>\n  <!-- array -->\n  <p>{{ $t('errors[0]') }}</p>\n  <!-- object in array -->\n  <p>{{ $t('errors[1].internal1') }}</p>\n  <!-- array in array -->\n  <p>{{ $t('errors[2][0]') }}</p>\n</div>\n```\n\nOutput the following:\n\n```html\n<div id=\"app\">\n  <!-- basic -->\n  <p>this is message1</p>\n  <!-- nested -->\n  <p>this is nested message1</p>\n  <!-- array -->\n  <p>this is 0 error code message</p>\n  <!-- object in array -->\n  <p>this is internal 1 error message</p>\n  <!-- array in array -->\n  <p>this is nested array error 1</p>\n</div>\n```\n\n## Linked locale messages\n\nIf there's a translation key that will always have the same concrete text as another one you can just link to it. To link to another translation key, all you have to do is to prefix its contents with an `@:` sign followed by the full name of the translation key including the namespace you want to link to.\n\nLocale messages the below:\n\n```js\nconst messages = {\n  en: {\n    message: {\n      the_world: 'the world',\n      dio: 'DIO:',\n      linked: '@:message.dio @:message.the_world !!!!'\n    }\n  }\n}\n```\n\nTemplate:\n\n```html\n<p>{{ $t('message.linked') }}</p>\n```\n\nOutput:\n\n```html\n<p>DIO: the world !!!!</p>\n```\n\n### Formatting linked locale messages\n\nIf the language distinguish cases of character, you may need control the case of the linked locale messages.\nLinked messages can be formatted with modifier `@.modifier:key`\n\nThe below modifiers are available currently.\n\n* `upper`: Uppercase all characters in the linked message.\n* `lower`: Lowercase all characters in the linked message.\n* `capitalize`: Capitalize the first character in the linked message.\n\nLocale messages the below:\n\n```javascript\nconst messages = {\n  en: {\n    message: {\n      homeAddress: 'Home address',\n      missingHomeAddress: 'Please provide @.lower:message.homeAddress'\n    }\n  }\n}\n```\n\n```html\n<label>{{ $t('message.homeAddress') }}</label>\n\n<p class=\"error\">{{ $t('message.missingHomeAddress') }}</p>\n```\n\nOutput the below:\n\n```html\n<label>Home address</label>\n\n<p class=\"error\">Please provide home address</p>\n```\n\nYou can add modifiers or overwrite the existing ones passing the `modifiers` options to the `VueI18n` constructor.\n\n```javascript\nconst i18n = new VueI18n({\n  locale: 'en',\n  modifiers: {\n    // Adding a new modifier\n    snakeCase: (str) => str.split(' ').join('-')\n  },\n  messages: {\n    // ...\n  },\n})\n```\n\n### Grouping by brackets\n\nA translation key of linked locale message can also have the form of `@:(message.foo.bar.baz)` in which the link to another translation key is within brackets `()`.\n\nThis can be useful if the link `@:message.something` is followed by period `.`, which otherwise would be part of the link and may not need to be.\n\nLocale messages:\n\n```js\nconst messages = {\n  en: {\n    message: {\n      dio: 'DIO',\n      linked: 'There\\'s a reason, you lost, @:(message.dio).'\n    }\n  }\n}\n```\n\nTemplate:\n\n```html\n<p>{{ $t('message.linked') }}</p>\n```\n\nOutput:\n\n```html\n<p>There's a reason, you lost, DIO.</p>\n```\n\n## Message Function\n\nvue-i18n recommends using the string base on list or named format as locale messages when translating messages.\n\nThere are situations however, where you really need the full programmatic power of JavaScript, due to the complex language syntax. So instead of string-based messages, you can use the **message function**.\n\nThe following is a message function that returns a simple greeting:\n\n```js\nconst messages = {\n  en: {\n    greeting: (ctx) => 'hello!'\n  }\n}\n```\n\nThe use of the message function is very easy! You just specify the key of the message function with `$t` or `t`:\n\n```html\n<p>{{ $t('greeting') }}</p>\n```\n\nOutput is the below:\n\n```html\n<p>hello!</p>\n```\n\nThe message function outputs the message of the return value of the message function.\n\n### Named formatting\n\nvue-i18n supports [named formatting](./formatting.md#named-formatting) as a string-based message format. vue-i18n interpolate the parameter values with `$t` or `t`, and it can be output it.\n\nYou can do the same thing with the message function by using **message context**:\n\nhere is the example of greeting:\n\n```js\nconst messages = {\n  en: {\n    greeting: (ctx) => `hello, ${ctx.named('name')}!`\n  }\n}\n```\n\nTemplate:\n\n```html\n<p>{{ $t('greeting', { name: 'DIO' }) }}</p>\n```\n\nOutput is the below:\n\n```html\n<p>hello, DIO!</p>\n```\n\nThe message context has a named function. You need to specify the key that resolves the value specified with the named of `$t` or `t`.\n\n### List formatting\n\nThe use of the list format is similar to the named format described above.\n\nvue-i18n supports [list formatting](./formatting.md#list-formatting) as a string-based message format. vue-i18n interpolate the parameter values with `$t` or `t`, and it can be output it.\n\nYou can do the same thing with the message function by using message context:\n\nhere is the example of greeting:\n\n```js\nconst messages = {\n  en: {\n    greeting: (ctx) => `hello, ${ctx.list(0)}!`\n  }\n}\n```\n\nTemplate:\n\n```html\n<p>{{ $t('greeting', ['DIO']) }}</p>\n```\n\nOutput is the below:\n\n```html\n<p>hello, DIO!</p>\n```\n\nThe message context has a list function. You need to specify the index that resolves the value specified with the list of `$t` or `t`.\n\n### Limitation\n\nIn the message function, the following functions, which are provided on a string basis, are not available via a message context:\n\n- Pluralization\n\nAnd also, the following props of message context is not compatible for vue-i18 v9.x or later:\n\n- `path`\n- `locale`\n- `messages`\n- `formatter`\n\nIf you are using these message context props means that it will be difficult to migrate to vue-i18n v9.x or later."
  },
  {
    "path": "vuepress/guide/number.md",
    "content": "# Number localization\n\n:::tip Support Version\n:new: 7.0+\n:::\n\nYou can localize the number with your definition formats.\n\nNumber formats the below:\n\n```js\nconst numberFormats = {\n  'en-US': {\n    currency: {\n      style: 'currency',\n      currency: 'USD'\n    }\n  },\n  'ja-JP': {\n    currency: {\n      style: 'currency',\n      currency: 'JPY',\n      currencyDisplay: 'symbol'\n    }\n  }\n}\n```\n\nAs the above, you can define named number formats (e.g. `currency`, etc), and you need to use [the options with ECMA-402 Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat)\n\nAfter that, when using the locale messages, you need to specify the `numberFormats` option of the `VueI18n` constructor:\n\n```js\nconst i18n = new VueI18n({\n  numberFormats\n})\n\nnew Vue({\n  i18n\n}).$mount('#app')\n```\n\nTemplate the below:\n\n```html\n<div id=\"app\">\n  <p>{{ $n(100, 'currency') }}</p>\n  <p>{{ $n(100, 'currency', 'ja-JP') }}</p>\n</div>\n```\n\n\nOutput the below:\n\n```html\n<div id=\"app\">\n  <p>$100.00</p>\n  <p>￥100</p>\n</div>\n```\n\n## Custom formatting\n\n:::tip Support Version\n:new: 8.10+\n:::\n\n`$n` method returns resulting string with fully formatted number, which can only be used as a whole. In situations when you need to style some part of the formatted number (like fraction digits), `$n` is not enough. In such cases `<i18n-n>` functional component will be of help.\n\nWith a minimum set of properties, `<i18n-n>` generates the same output as `$n`, wrapped into configured DOM element.\n\nThe following template:\n\n```html\n<div id=\"app\">\n  <i18n-n :value=\"100\"></i18n-n>\n  <i18n-n :value=\"100\" format=\"currency\"></i18n-n>\n  <i18n-n :value=\"100\" format=\"currency\" locale=\"ja-JP\"></i18n-n>\n</div>\n```\n\nwill produce the below output:\n\n```html\n<div id=\"app\">\n  <span>100</span>\n  <span>$100.00</span>\n  <span>￥100</span>\n</div>\n```\n\nBut the real power of this component comes into play when it is used with [scoped slots](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots).\n\nLet's say there is a requirement to render the integer part of the number with a bolder font. This can be achieved by specifying `integer` scoped slot element:\n\n```html\n<i18n-n :value=\"100\" format=\"currency\">\n  <template v-slot:integer=\"slotProps\">\n    <span style=\"font-weight: bold\">{{ slotProps.integer }}</span>\n  </template>\n</i18n-n>\n```\n\nTemplate above will result in the following HTML:\n\n```html\n<span>$<span style=\"font-weight: bold\">100</span>.00</span>\n```\n\nIt is possible to specify multiple scoped slots at the same time:\n\n```html\n<i18n-n :value=\"1234\" :format=\"{ key: 'currency', currency: 'EUR' }\">\n  <template v-slot:currency=\"slotProps\">\n    <span style=\"color: green\">{{ slotProps.currency }}</span>\n  </template>\n  <template v-slot:integer=\"slotProps\">\n    <span style=\"font-weight: bold\">{{ slotProps.integer }}</span>\n  </template>\n  <template v-slot:group=\"slotProps\">\n    <span style=\"font-weight: bold\">{{ slotProps.group }}</span>\n  </template>\n  <template v-slot:fraction=\"slotProps\">\n    <span style=\"font-size: small\">{{ slotProps.fraction }}</span>\n  </template>\n</i18n-n>\n```\n\n(this resulting HTML was formatted for better readability)\n\n```html\n<span>\n  <span style=\"color: green\">€</span>\n  <span style=\"font-weight: bold\">1</span>\n  <span style=\"font-weight: bold\">,</span>\n  <span style=\"font-weight: bold\">234</span>\n  <span style=\"font-size: small\">00</span>\n</span>\n```\n\nYou can choose the root container's node type by specifying a `tag` prop. If omitted, it defaults to `'span'`. You can also set it to the boolean value `false` to insert the child nodes directly without creating a root element.\n\nFull list of the supported scoped slots as well as other `<i18n-n>` properties can be found [on API page](../api/readme.md#i18n-n-functional-component).\n"
  },
  {
    "path": "vuepress/guide/pluralization.md",
    "content": "# Pluralization\n\nYou can translate with pluralization. You must define the locale that have a pipe `|` separator, and define plurals in pipe separator.\n\n*Your template will need to use `$tc()` instead of `$t()`.*\n\nLocale messages below:\n\n```js\nconst messages = {\n  en: {\n    car: 'car | cars',\n    apple: 'no apples | one apple | {count} apples'\n  }\n}\n```\n\nTemplate below:\n\n```html\n<p>{{ $tc('car', 1) }}</p>\n<p>{{ $tc('car', 2) }}</p>\n\n<p>{{ $tc('apple', 0) }}</p>\n<p>{{ $tc('apple', 1) }}</p>\n<p>{{ $tc('apple', 10, { count: 10 }) }}</p>\n```\n\nOutput below:\n\n```html\n<p>car</p>\n<p>cars</p>\n\n<p>no apples</p>\n<p>one apple</p>\n<p>10 apples</p>\n```\n\n## Accessing the number via the pre-defined argument\n\nYou don't need to explicitly give the number for pluralization.\nThe number can be accessed within locale messages via pre-defined named arguments `{count}` and/or `{n}`.\nYou can overwrite those pre-defined named arguments if necessary.\n\nLocale messages the below:\n\n```js\nconst messages = {\n  en: {\n    apple: 'no apples | one apple | {count} apples',\n    banana: 'no bananas | {n} banana | {n} bananas'\n  }\n}\n```\n\nTemplate below:\n\n```html\n<p>{{ $tc('apple', 10, { count: 10 }) }}</p>\n<p>{{ $tc('apple', 10) }}</p>\n\n<p>{{ $tc('banana', 1, { n: 1 }) }}</p>\n<p>{{ $tc('banana', 1) }}</p>\n<p>{{ $tc('banana', 100, { n: 'too many' }) }}</p>\n```\n\nOutput below:\n\n```html\n<p>10 apples</p>\n<p>10 apples</p>\n\n<p>1 banana</p>\n<p>1 banana</p>\n<p>too many bananas</p>\n```\n\n\n## Custom pluralization\n\n_This feature is available since version 8.0_\n\nSuch pluralization, however, does not apply to all languages (Slavic languages, for example, have different pluralization rules).\n\nIn order to implement these rules you can pass an optional `pluralizationRules` object into `VueI18n` constructor options.\n\nVery simplified example using rules for Slavic languages (Russian, Ukrainian, etc.):\n```js\nnew VueI18n({\n  // Key - language to use the rule for, `'ru'`, in this case\n  // Value - function to choose right plural form\n  pluralizationRules: {\n    /**\n     * @param choice {number} a choice index given by the input to $tc: `$tc('path.to.rule', choiceIndex)`\n     * @param choicesLength {number} an overall amount of available choices\n     * @returns a final choice index to select plural word by\n     */\n    'ru': function(choice, choicesLength) {\n      // this === VueI18n instance, so the locale property also exists here\n\n      if (choice === 0) {\n        return 0;\n      }\n\n      const teen = choice > 10 && choice < 20;\n      const endsWithOne = choice % 10 === 1;\n\n      if (choicesLength < 4) {\n        return (!teen && endsWithOne) ? 1 : 2;\n      }\n      if (!teen && endsWithOne) {\n        return 1;\n      }\n      if (!teen && choice % 10 >= 2 && choice % 10 <= 4) {\n        return 2;\n      }\n\n      return (choicesLength < 4) ? 2 : 3;\n    }\n  }\n})\n```\n\nThis would effectively give this:\n\n```javascript\nconst messages = {\n  ru: {\n    car: '0 машин | {n} машина | {n} машины | {n} машин',\n    banana: 'нет бананов | {n} банан | {n} банана | {n} бананов'\n  }\n}\n```\nWhere the format is `0 things | things count ends with 1 | things count ends with 2-4 | things count ends with 5-9, 0 and teens (10-19)`.\nP.S. Slavic pluralization is difficult, you can read more about it [here](http://www.russianlessons.net/lessons/lesson11_main.php).\n\nYour template still needs to use `$tc()`, not `$t()`:\n\n```html\n<p>{{ $tc('car', 1) }}</p>\n<p>{{ $tc('car', 2) }}</p>\n<p>{{ $tc('car', 4) }}</p>\n<p>{{ $tc('car', 12) }}</p>\n<p>{{ $tc('car', 21) }}</p>\n\n<p>{{ $tc('banana', 0) }}</p>\n<p>{{ $tc('banana', 4) }}</p>\n<p>{{ $tc('banana', 11) }}</p>\n<p>{{ $tc('banana', 31) }}</p>\n```\n\nWhich results in:\n\n```html\n<p>1 машина</p>\n<p>2 машины</p>\n<p>4 машины</p>\n<p>12 машин</p>\n<p>21 машина</p>\n\n<p>нет бананов</p>\n<p>4 банана</p>\n<p>11 бананов</p>\n<p>31 банан</p>\n```\n\n### Default pluralization\n\nIf your current locale is not found in a pluralization map, the [default](#pluralization) rule of the english language will be used.\n"
  },
  {
    "path": "vuepress/guide/sfc.md",
    "content": "# Single file components\n\n## Basic Usage\n\nIf you are building Vue component or Vue application using single file components, you can manage the locale messages `i18n` custom block.\n\nThe following in [single file components example](https://github.com/kazupon/vue-i18n/tree/dev/examples/sfc):\n\n```vue\n<i18n>\n{\n  \"en\": {\n    \"hello\": \"hello world!\"\n  },\n  \"ja\": {\n    \"hello\": \"こんにちは、世界！\"\n  }\n}\n</i18n>\n\n<template>\n  <div id=\"app\">\n    <label for=\"locale\">locale</label>\n    <select v-model=\"locale\">\n      <option>en</option>\n      <option>ja</option>\n    </select>\n    <p>message: {{ $t('hello') }}</p>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'app',\n  data () {\n    this.$i18n.locale = 'en';\n    return { locale: 'en' }\n  },\n  watch: {\n    locale (val) {\n      this.$i18n.locale = val\n    }\n  }\n}\n</script>\n```\n\n## Installing vue-i18n-loader\n\nYou need to install `vue-loader` and `vue-i18n-loader` to use `<i18n>` custom blocks. While [vue-loader](https://github.com/vuejs/vue-loader) most likely is already used in your project if you are working with single file components, you must install [vue-i18n-loader](https://github.com/kazupon/vue-i18n-loader) additionally:\n\n```sh\nnpm i --save-dev @intlify/vue-i18n-loader\n```\n\n## Webpack\n\nFor Webpack the configuration below is required:\n\nfor vue-loader v15 or later:\n```js\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader',\n      },\n      {\n        resourceQuery: /blockType=i18n/,\n        type: 'javascript/auto',\n        loader: '@intlify/vue-i18n-loader'\n      }\n      // ...\n    ]\n  },\n  // ...\n}\n```\n\nfor vue-loader v14:\n```js\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader',\n        options: {\n          loaders: {\n            // you need to specify `i18n` loaders key with `vue-i18n-loader` (https://github.com/intlify/vue-i18n-loader)\n            i18n: '@intlify/vue-i18n-loader'\n          }\n        }\n      },\n      // ...\n    ]\n  },\n  // ...\n}\n```\n\n## Vue CLI 3.0\n\n[Vue CLI 3.0](https://github.com/vuejs/vue-cli) hides the webpack configuration, so, if we want to add support to the `<i18n>` tag inside a single file component we need to modify the existing configuration.\n\nIn order to do that we have to create a `vue.config.js` at the root of our project. Once we have done that, we have to include the following:\n\nfor vue-loader v15 or later:\n```js\nmodule.exports = {\n  chainWebpack: config => {\n    config.module\n      .rule(\"i18n\")\n      .resourceQuery(/blockType=i18n/)\n      .type('javascript/auto')\n      .use(\"i18n\")\n        .loader(\"@intlify/vue-i18n-loader\")\n        .end();\n  }\n}\n```\n\nfor vue-loader v14:\n```js\nconst merge = require('deepmerge')\n\nmodule.exports = {\n  chainWebpack: config => {\n    config.module\n      .rule('vue')\n      .use('vue-loader')\n      .tap(options =>\n        merge(options, {\n          loaders: {\n            i18n: '@intlify/vue-i18n-loader'\n          }\n        })\n      )\n  }\n}\n```\n_Don 't forget to install [deepmerge](https://github.com/KyleAMathews/deepmerge)! (`npm i deepmerge -D` or `yarn add deepmerge -D`)_\n\nIf you want to read more about modifying the existing configuration [click here](https://cli.vuejs.org/guide/webpack.html).\n\n## Laravel-Mix\n\nfor Laravel-mix 4 with vue-loader v15 or later:\n```js\n// Extend Mix with the \"i18n\" method, that loads the vue-i18n-loader\nmix.extend( 'i18n', new class {\n        webpackRules() {\n            return [\n                {\n                    resourceQuery: /blockType=i18n/,\n                    type:          'javascript/auto',\n                    loader:        '@intlify/vue-i18n-loader',\n                },\n            ];\n        }\n    }(),\n);\n\n// Make sure to call the .i18n() (to load the loader) before .js(..., ...)\nmix.i18n()\n   .js( 'resources/js/App.js', 'public/js/app.js' )\n   ...\n```\n\nfor Laravel-mix 2 with vue-loader v14:\n\nAs of [V2.1](https://github.com/JeffreyWay/laravel-mix/releases/tag/v2.1) of Laravel-mix, you can add custom rules via mix.extend(). Laravel mix already has its own rules for handling .vue files. To add the `vue-i18n-loader`, add the following to `webpack.mix.js`\n\n```js\n// The below code will inject i18n Kazupon/vue-18-loader as a loader for .vue files.\nmix.extend( 'i18n', function( webpackConfig, ...args ) {\n    webpackConfig.module.rules.forEach( ( module ) => {\n        // Search for the \"vue-loader\" component, which handles .vue files.\n        if( module.loader !== 'vue-loader' ) {\n            return;\n        }\n\n        // Within this module, add the vue-i18n-loader for the i18n tag.\n        module.options.loaders.i18n = '@intlify/vue-i18n-loader';\n    } );\n} );\n\n// Make sure to call .i18n() before .js(..., ...)\nmix.i18n()\n   .js( 'resources/assets/js/App.js', 'public/js/app.js' )\n   ...\n```\n\n## YAML loading\n\n`i18n` custom blocks need to specify `JSON` format, also you can use `YAML` format by using pre-loader feature of `vue-loader`.\n\nthe `i18n` custom blocks below of `YAML` format:\n\n```vue\n<i18n>\nen:\n  hello: \"hello world!\"\nja:\n  hello: \"こんにちは、世界！\"\n</i18n>\n```\n\n\nWebpack conf the below:\n\nfor vue-loader v15 or later:\n```js\n// Vue CLI 3.0\nmodule.exports = {\n  chainWebpack: config => {\n    config.module\n      .rule(\"i18n\")\n      .resourceQuery(/blockType=i18n/)\n      .type('javascript/auto')\n      .use(\"i18n\")\n        .loader(\"@intlify/vue-i18n-loader\")\n        .end()\n      .use('yaml')\n        .loader('yaml-loader')\n        .end()\n  }\n}\n```\n\nfor vue-loader v14:\n```js\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader',\n        options: {\n          preLoaders: {\n            i18n: 'yaml-loader'\n          },\n          loaders: {\n            i18n: '@intlify/vue-i18n-loader'\n          }\n        }\n      },\n      // ...\n    ]\n  },\n  // ...\n}\n```\n\n## Multiple custom blocks\n\nYou can use locale messages with multiple `i18n` custom blocks.\n\n```vue\n<i18n src=\"./common/locales.json\"></i18n>\n<i18n>\n  {\n    \"en\": {\n      \"hello\": \"hello world!\"\n    },\n    \"ja\": {\n      \"hello\": \"こんにちは、世界！\"\n    }\n  }\n</i18n>\n```\n\nIn the above, first custom block load the common locale message with `src` attribute, second custom block load the locale message that is defined only at single file component. These locale messages will be merged as locale message of component.\n\nIn this way, multiple custom blocks useful when want to be used as module.\n\n## Scoped style\n\nWhen using `vue-i18n` with `scoped style`, it's important to remember to use a [deep selector](https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements) for styling an element __*inside*__ the translation string. For example:\n\n__Translation contains only text__ (Work without deep selector)\n\n```vue\n<i18n>\n{\n  \"en\": {\n    \"hello\": \"hello world!\"\n  },\n  \"ja\": {\n    \"hello\": \"こんにちは、世界\"\n  }\n}\n</i18n>\n\n<template>\n  <div class=\"parent\">\n    <p>message: {{ $t('hello') }}</p>\n  </div>\n</template>\n\n<!-- Will work -->\n<style scoped>\n  .parent p {\n    color: #42b883;\n  }\n</style>\n```\n\n__Translation with HTML element__ (Must use deep selector)\n\n```vue\n<i18n>\n{\n  \"en\": {\n    \"hello\": \"hello<span>world!</span>\"\n  },\n  \"ja\": {\n    \"hello\": \"こんにちは、<span>世界！</span>\"\n  }\n}\n</i18n>\n\n<template>\n  <div class=\"parent\">\n    <p v-html=\"$t('hello')\"></p>\n  </div>\n</template>\n\n<!-- Won't work -->\n<style scoped>\n  .parent p {\n    color: #42b883;\n  }\n\n  .parent p span {\n    color: red;\n  }\n</style>\n\n<!-- Will work >>> -->\n<style scoped>\n  .parent p {\n    color: #42b883;\n  }\n\n  .parent p >>> span {\n    color: red;\n  }\n</style>\n\n<!-- Will work /deep/ -->\n<style scoped>\n  .parent p {\n    color: #42b883;\n  }\n\n  .parent p /deep/ span {\n    color: red;\n  }\n</style>\n\n<!-- Will work ::v-deep -->\n<style scoped>\n  .parent p {\n    color: #42b883;\n  }\n\n  ::v-deep .parent p span {\n    color: red;\n  }\n</style>\n```\n\n## Custom blocks in functional component\n\nIf the single file components have the template using a functional component, and you had been defined `i18n` custom blocks, note you cannot localize using locale messages.\n\nFor example, the following code cannot localize with the locale message of `i18n` custom block.\n\n```vue\n<i18n>\n{\n  \"en\": {\n    \"hello\": \"hello world\"\n  },\n  \"ja\": {\n    \"hello\": \"こんにちは、世界\"\n  }\n}\n</i18n>\n\n<template functional>\n  <!-- 'hello' of locale messages of parent instance -->\n  <p>{{ parent.$t('hello') }}</p>\n</template>\n```\n"
  },
  {
    "path": "vuepress/guide/tooling.md",
    "content": "# Tooling\n\nTo support the i18n of Vue applications, some tools are officially provided.\n\nThere are also tools from third vendors integrating Vue I18n.\n\n## Official tooling\n\n### Vue CLI Plugin\n\n[vue-cli-plugin-i18n](https://github.com/kazupon/vue-cli-plugin-i18n) is officially provided as the Vue CLI Plugin.\n\nWith this plugin, you can setup the i18n environment for the Vue application, and support the i18n development environment.\n\n### Nuxt Module\n\n[nuxt-i18n](https://github.com/nuxt-community/nuxt-i18n/) is corresponding Nuxt.js module.\n\n### Webpack loader\n\n[vue-i18n-loader](https://github.com/kazupon/vue-i18n-loader) is an officially provided webpack loader.\n\nWith this loader, you can use the `i18n` custom block in the Single file components.\n\nIn about `i18n` custom block, see the [Single file components section](./sfc.md)\n\n### ESLint Plugin\n\n[eslint-plugin-vue-i18n](https://intlify.github.io/eslint-plugin-vue-i18n/) is ESLint plugin for Vue I18n.\n\nIt easily integrates some localization lint features to your Vue.js Application.\n\n### Extensions\n\n[vue-i18n-extensions](https://github.com/kazupon/vue-i18n-extensions) provides some extensions for Vue I18n.\n\nYou can use this extension to enable SSR and improve i18n performance.\n\n## 3rd party tooling\n\n### BabelEdit\n\n[BabelEdit](https://www.codeandweb.com/babeledit) is translation editor for web apps.\n\nBabelEdit can translate `json` files, and it can also translate `i18n` custom block of Single-file components.\n\nRead more about BabelEdit in [tutorial page](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-vue-app-with-vue-i18n).\n\n### i18n Ally\n\n[i18n Ally](https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally) is i18n extension for VSCode.\n\ni18n Ally give awesome DX for your i18n development.\n\nRead more about i18n Ally in [README](https://github.com/lokalise/i18n-ally/blob/main/README.md).\n\n### i18nPlugin (intellij platform)\n\n[i18nPlugin](https://github.com/nyavro/i18nPlugin) Intellij idea i18next support plugin ( [Jetbrains plugin page ](https://plugins.jetbrains.com/plugin/12981-i18n-support)).\n\nPlugin for i18n typescript/javascript/PHP. Supports vue-i18n. To enable vue-i18n support go to settings -> Tools -> i18n Plugin configuration and check \"Vue-i18n\". You need set vue locales directory (locales by default).\n\n### vue-i18n-extract\n\n[vue-i18n-extract](https://github.com/pixari/vue-i18n-extract) performs static analysis on a Vue.js project based on vue-i18n and reports the following information:\n\n- list of all the **unused vue-i18n keys** (entries found in the language files but not used in the project)\n- list of all the **missing keys** (entries fond in the project but not in the language files)\n\nIt's possible to show the output in the console or to write it in a json file.\n\nThe missing keys can be also automatically added to the given language files.\n"
  },
  {
    "path": "vuepress/installation.md",
    "content": "# Installation\n\n## Compatibility Note\n\n- Vue.js `2.0.0`+\n\n## Direct Download / CDN\n\n<https://unpkg.com/vue-i18n@8>\n\n[unpkg.com](https://unpkg.com) provides NPM-based CDN links. The above link will always point to the latest release on NPM. You can also use a specific version/tag via URLs like <https://unpkg.com/vue-i18n@8.17.5/dist/vue-i18n.js>\n\nInclude vue-i18n after Vue and it will install itself automatically:\n\n\n```html\n<script src=\"https://unpkg.com/vue/dist/vue.js\"></script>\n<script src=\"https://unpkg.com/vue-i18n@8\"></script>\n```\n\n## NPM\n\n```sh\nnpm install vue-i18n@8\n```\n\n## Yarn\n\n```sh\nyarn add vue-i18n@8\n```\n\nWhen using with a module system, you must explicitly install the `vue-i18n`\nvia `Vue.use()`:\n\n\n```javascript\nimport Vue from 'vue'\nimport VueI18n from 'vue-i18n'\n\nVue.use(VueI18n)\n```\n\nYou don't need to do this when using global script tags `<script>`.\n\n## Vue Cli 3.x\n\n```sh\nvue add i18n\n```\n\nYou need Vue cli 3.x as pre-requisite, you can install it on your shell with the next command:\n\n```sh\nnpm install @vue/cli -g\n```\n\n## Dev Build\n\nYou will have to clone directly from GitHub and build `vue-i18n` yourself if you want to use the latest dev build.\n\n```sh\ngit clone https://github.com/kazupon/vue-i18n.git node_modules/vue-i18n\ncd node_modules/vue-i18n\nnpm install # or `yarn`\nnpm run build  # or `yarn run build`\n```\n\n## Explanation of Different Builds\n\nIn the dist/ [directory of the NPM package](https://cdn.jsdelivr.net/npm/vue-i18n/dist/) you will find many different builds of VueI18n. Here’s an overview of the difference between them:\n\n- UMD: `vue-i18n.js`\n- CommonJS: `vue-i18n.common.js`\n- ES Module for bundlers: `vue-i18n.esm.js`\n- ES Module for browsers: `vue-i18n.esm.browser.js`\n\n### Terms\n\n- **[UMD](https://github.com/umdjs/umd)**: UMD builds can be used directly in the browser via a `<script>` tag. The default file from Unpkg CDN at [https://unpkg.com/vue-i18n](https://unpkg.com/vue-i18n) is the UMD build (`vue-i18n.js`).\n\n- **[CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1)**: CommonJS builds are intended for use with older bundlers like [browserify](http://browserify.org/) or [webpack 1](https://webpack.github.io). The default file for these bundlers (`pkg.main`) is the Runtime only CommonJS build (`vue-i18n.common.js`).\n\n- **[ES Module](http://exploringjs.com/es6/ch_modules.html)**: starting in 8.11 VueI18n provides two ES Modules (ESM) builds:\n  - ESM for bundlers: intended for use with modern bundlers like [webpack 2](https://webpack.js.org) or [Rollup](https://rollupjs.org/). ESM format is designed to be statically analyzable so the bundlers can take advantage of that to perform \"tree-shaking\" and eliminate unused code from your final bundle. The default file for these bundlers (`pkg.module`) is the Runtime only ES Module build (`vue-i18n.esm.js`).\n  - ESM for browsers (8.11+ only, `vue-i18n.esm.browser.js`): intended for direct imports in modern browsers via `<script type=\"module\">`.\n"
  },
  {
    "path": "vuepress/introduction.md",
    "content": "# Introduction\n\n:::warning Notice\nVue I18n v8 is no longer actively maintained. Please upgrade to Vue I18n v9 or later. **The seucirty hotfix is only provided for Vue I18n v8.28 until end of 2024**. Thereafter, security fix is not provide for that version later. However, if it is absolutely necessary, please contact to contact@frapwings.jp\n:::\n\n:::warning Notice\nYou are reading the documentation of Vue I18n v8.x **for Vue 2**. If you are working with Vue 3, use the Vue I18n v9 [documentation](https://vue-i18n.intlify.dev/) instead.\n:::\n\nVue I18n is internationalization plugin of Vue.js. It easily integrates some localization features to your Vue.js Application.\n\nGo to [Get Started](./started.md)\n\n## Sponsors\n\n### 🏅 Platinum\n\n<p style=\"text-align: center;\">\n  <a\n    href=\"https://zenarchitects.co.jp/\"\n    style=\"margin: 1rem 1rem 0 1rem; width: 24rem; height: auto; display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      style=\"width: 24rem; max-width: 100%; vertical-align: midele;\"\n      src=\"/vue-i18n/patrons/zenarchitects.png\"\n      alt=\"zenarchitects\"\n    />\n  </a>\n</p>\n\n### ✨ Special\n\n<p style=\"text-align: center;\">\n  <a\n    href=\"https://plaid.co.jp/\"\n    style=\"margin: 1rem 1rem 0 1rem; width: 15rem; height: auto; display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      style=\"width: 15rem; max-width: 100%; vertical-align: midele;\"\n      src=\"/vue-i18n/patrons/plaid.svg\"\n      alt=\"PLAID\"\n    />\n  </a>\n</p>\n\n### 🥇 Gold\n\n<p style=\"text-align: center;\">\n  <a\n    href=\"https://nuxtlabs.com/\"\n    style=\"margin: 1rem 1rem 0 1rem; width: 15rem; height: auto; display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      style=\"width: 15rem; max-width: 100%; vertical-align: midele;\"\n      src=\"/vue-i18n/patrons/nuxtlabs.svg\"\n      alt=\"NuxtLabs\"\n    />\n  </a>\n</p>\n\n<p style=\"text-align: center;\">\n  <a\n    href=\"https://localazy.com/blog/how-to-localize-vuejs-app-with-vue-i18n-and-localazy?utm_source=kazupon&utm_medium=banner&utm_campaign=sponsorships_kazupon&utm_content=logo\"\n    style=\"margin: 1rem 1rem 0 1rem; width: 15rem; height: auto; display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      style=\"width: 15rem; max-width: 100%; vertical-align: midele;\"\n      src=\"/vue-i18n/patrons/localazy.svg\"\n      alt=\"Localazy\"\n    />\n  </a>\n</p>\n\n<p style=\"text-align: center;\">\n  <a\n    href=\"https://crowdin.com/teams/engineering?utm_source=vue-i18n.intlify.dev&utm_medium=referral\"\n    style=\"margin: 1rem 1rem 0 1rem; width: 15rem; height: auto; display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      style=\"width: 15rem; max-width: 100%; vertical-align: midele;\"\n      src=\"/vue-i18n/patrons/crowdin.svg\"\n      alt=\"Crowdin\"\n    />\n  </a>\n</p>\n\n### 🥈 Silver\n\n\n### 🥉 Bronze\n\n<p style=\"text-align: center;\">\n  <a\n    href=\"https://www.vuemastery.com/\"\n    style=\"margin: 1rem 1rem 0 1rem; width: 9rem; height: auto; display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      style=\"width: 9rem; max-width: 100%; vertical-align: midele;\"\n      src=\"/vue-i18n/patrons/vuemastery.svg\"\n      alt=\"vuemastery\"\n    />\n  </a>\n</p>\n\n<p style=\"text-align: center;\">\n  <a\n    href=\"https://froggly.pl/\"\n    style=\"margin: 1rem 1rem 0 1rem; width: 9rem; height: auto; display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      style=\"width: 9rem; max-width: 100%; vertical-align: midele;\"\n      src=\"/vue-i18n/patrons/Froggly.svg\"\n      alt=\"vuemastery\"\n    />\n  </a>\n</p>\n\n\n## Become a Sponsor\n\nIs your company using vue-i18n, vue-cli-plugin-i18n and other tools to build awesome apps? Join the GitHub and become a sponsor to add your logo on this documentation! Supporting me on Sponsor allows me to work less for a job and to work more on Free Open Source Software such as vue-i18n and [Intlify](https://github.com/intlify) projects! Thank you!\n\n<p style=\"text-align: center;\">\n  <iframe src=\"https://github.com/sponsors/kazupon/card\" title=\"Sponsor kazupon\" height=\"225\" width=\"600\" style=\"border: 0; margin: 24px\"></iframe>\n</p>\n"
  },
  {
    "path": "vuepress/pt/README.md",
    "content": "---\nhome: true\nheroImage: ./../vue-i18n-logo.png\nactionText: Introdução →\nactionLink: introduction.md\nfooter: Distribuído sob a Licença MIT | Copyright © 2020 kazuya kawaguchi\n---\n\n<div class=\"sponsors\" style=\"text-align:center; padding: 0 0 24px 0;\">\n  <h4>🥇 Patrocinadores Ouro</h4>\n  <a\n    href=\"https://nuxtjs.org/\"\n    style=\"display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      src=\"/vue-i18n/patrons/nuxt.png\"\n      alt=\"Nuxt.js\"\n    />\n  </a>\n  <h4>🥈 Patrocinadores prata</h4>\n  <a\n    href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\"\n    style=\"max-width: 320px; width: 100%; display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      src=\"/vue-i18n/patrons/babeledit.png\"\n      alt=\"Editor de tradução BabelEdit para aplicativos (web apps)\"\n    />\n  </a>\n  <h4 style=\"padding: 12px 0 0 0;\">🥉 Patrocinadores Bronze</h4>\n  <a\n    href=\"https://zenarchitects.co.jp/\"\n    style=\"max-width: 200px; width: 100%; height: 80px; display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      src=\"/vue-i18n/patrons/zenarchitects.png\"\n      alt=\"zenarchitects\"\n    />\n  </a>\n  <a\n    href=\"https://www.sendcloud.com/\"\n    style=\"max-width: 200px; width: 100%; height: 80px; display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      src=\"/vue-i18n/patrons/sendcloud.svg\"\n      alt=\"sendcloud\"\n    />\n  </a>\n</div>\n\n<div class=\"github\" style=\"text-align:center; padding: 0 0 24px 0;\">\n  <sponsor-button />\n</div>\n\n<div class=\"features\">\n  <div class=\"feature\">\n    <h2>Simples</h2>\n    <p>Você pode introduzir a internacionalização em seu aplicativo com uma API simples.</p>\n  </div>\n  <div class=\"feature\">\n    <h2>Poderoso</h2>\n    <p>Além de traduções simples, suporta a localização, com pluralização, número, data, hora... e etc.</p>\n  </div>\n  <div class=\"feature\">\n    <h2>Orientado a componentes</h2>\n    <p>Você pode gerenciar as mensagens de localização dentro de componentes de arquivo único.</p>\n  </div>\n</div>\n"
  },
  {
    "path": "vuepress/pt/api/README.md",
    "content": "---\nsidebar: auto\n---\n\n# API Referência\n\n## Estendendo o protótipo Vue\n\n### Opções do construtor Vue\n\n#### i18n\n\n* **Tipo:** `I18nOptions`\n\nOpção de localização baseada em componentes.\n\n* **Veja também:** Opções do construtor `VueI18n`\n\n### Métodos injetados no Vue\n\n#### $t\n\n* **Argumentos:**\n\n  * `{Path} key`: obrigatório\n  * `{Locale} locale`: opcional\n  * `{Array | Object} values`: opcional\n\n* **Retorno:** `TranslateResult`\n\nObtendo uma mensagem traduzida usando a chave `key`. As mensagens de localização em um componente têm precedência sobre as mensagens globais. Se não houver mensagens de localização no componente, a localização será executada usando as mensagens de localização globais. Se `locale` for especificado, as mensagens de localização do `locale` serão usadas. Se `key` foi especificada para a lista / formato nomeado das mensagens de localização, então os `values` também devem ser especificados. Você pode aprender mais sobre `values` na seção [Formato das mensagens de localização](../guia/formatting.md).\n\n:::danger Dica\nObserve que você precisa garantir este contexto igual à instância do componente nos métodos em seu ciclo de vida (por exemplo, nas opções de `data`,` const $t = this.$t.bind(this) `).\n:::\n\n#### $tc\n\n* **Argumentos:**\n\n  * `{Path} key`: obrigatório\n  * `{number} choice`: opcional, padrão `1`\n  * `{Locale} locale`: opcional\n  * `{string | Array | Object} values`: opcional\n\n* **Retorno:** `TranslateResult`\n\nObtendo uma mensagem traduzida usando a `key` com pluralização. As mensagens de localização de componentes têm precedência sobre as mensagens globais. Se não houver mensagens de localização no componente, a localização será executada usando mensagens de localização globais. Se `locale` for especificado, as mensagens de localização de `locale` serão usadas. Se um valor de texto for especificado para `value`, a localização será realizada para esse valor. Se for um Array ou Object especificado em `value`, então deve ser especificado com `value` de $t.\n\nSe a implementação de pluralização padrão não for adequada para você, consulte [regras de pluralização nas opções do construtor](#pluralizationrules) e [pluralização customizada](../guide/pluralization.md).\n\n:::danger Dica\nObserve que você precisa garantir este contexto igual à instância do componente nos métodos em seu ciclo de vida (por exemplo, nas opções de `data`, `const $tc = this.$tc.bind(this)`).\n:::\n\n#### $te\n\n* **Argumentos:**\n\n  * `{Path} key`: obrigatório\n  * `{Locale} locale`: opcional\n\n* **Retorno:** `boolean`\n\nVerifica se existe uma tradução para uma chave nas mensagens de localização. Se não houver mensagens de localização no componente, ele verifica as mensagens de localização globais. Se `locale` for especificado, então a presença de `locale` nas mensagens é verificada.\n\n:::danger Dica\nObserve que você precisa garantir este contexto igual à instância do componente nos métodos em seu ciclo de vida (por exemplo, nas opções de `data`, `const $te = this.$te.bind(this)`).\n:::\n\n#### $d\n\n> :new: Adicionado na versão 7.0+\n\n* **Argumentos:**\n\n  * `{number | Date} value`: obrigatório\n  * `{Path | Object} key`: opcional\n  * `{Locale | Object} locale`: opcional\n\n* **Retorno:** `DateTimeFormatResult`\n\nLocalização da data e hora de `value` com o formato de data e hora de `key`. O formato de data e hora da `key` precisa ser registrado na opção `dateTimeFormats` da classe `VueI18n`, e depende da opção `locale` do construtor `VueI18n`. Se você especificar o argumento `locale`, ele terá prioridade sobre a opção `locale` do construtor `VueI18n`.\n\nSe o formato de data para `key` não estiver na opção `dateTimeFormats`, então um formato de fallback será usado com base na opção `fallbackLocale` do construtor `VueI18n`.\n\n:::danger Dica\nObserve que você precisa garantir este contexto igual à instância do componente nos métodos em seu ciclo de vida (por exemplo, nas opções de `data`, `const $d = this.$d.bind(this)`).\n:::\n\n#### $n\n\n> :new: Adicionado na versão 7.0+\n\n* **Argumentos:**\n\n  * `{number} value`: obrigatório\n  * `{Path | Object} format`: opcional\n  * `{Locale} locale`: opcional\n\n* **Retorno:** `NumberFormatResult`\n\nLocalização do número `value` usando o formato de número `format`. O formato de número de `format` deve ser registrado na opção `numberFormats` da classe `VueI18n`, e depende da opção `locale` do construtor `VueI18n`. Especificar o argumento `locale` sobrescreve a opção `locale` do construtor `VueI18n`.\n\nSe o formato de número para `format` não for especificado na opção `numberFormats`, um formato de fallback será usado com base na opção `fallbackLocale` do construtor `VueI18n`.\n\nSe o segundo argumento para `format` for especificado por um objeto, ele deverá conter as seguintes propriedades:\n\n* `key {Path}`: opcional, número formatado\n* `locale {Locale}`: opcional, localização\n* `compactDisplay {string}`: opcional, opção de formatação do número\n* `currency {string}`: opcional, opção de formatação do número\n* `currencyDisplay {string}`: opcional, opção de formatação do número\n* `currencySign {string}`: opcional, opção de formatação do número\n* `localeMatcher {string}`: opcional, opção de formatação do número\n* `notation {string}`: opcional, opção de formatação do número\n* `numberingSystem {string}`: opcional, opção de formatação do número\n* `signDisplay {string}`: opcional, opção de formatação do número\n* `style {string}`: opcional, opção de formatação do número\n* `unit {string}`: opcional, opção de formatação do número\n* `unitDisplay {string}`: opcional, opção de formatação do número\n* `useGrouping {boolean}`: opcional, opção de formatação do número\n* `minimumIntegerDigits {string}`: opcional, opção de formatação do número\n* `minimumFractionDigits {string}`: opcional, opção de formatação do número\n* `maximumFractionDigits {string}`: opcional, opção de formatação do número\n* `minimumSignificantDigits {string}`: opcional, opção de formatação do número\n* `maximumSignificantDigits {string}`: opcional, opção de formatação do número\n\nQualquer opções de formatação de número especificadas terão precedência sobre os valores `numberFormats` do construtor `VueI18n`.\n\n:::danger Dica\nObserve que você precisa garantir este contexto igual à instância do componente nos métodos em seu ciclo de vida (por exemplo, nas opções de `data`, `const $n = this.$n.bind(this)`).\n:::\n\n### Propriedades injetadas\n\n#### $i18n\n\n* **Tipo:** `I18n`\n\n* **Somente leitura**\n\nObter uma instância de `VueI18n`, se definido.\n\nSe você especificou uma opção `i18n` nas opções do componente, você será capaz de obter uma instância` VueI18n` no componente, caso contrário, você poderá obter a instância raiz `VueI18n`.\n\n## A classe `VueI18n`\n\nA classe `VueI18n` implementa a interface `I18n` de [definições de tipo de fluxo](https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js)\n\n### Propriedades estáticas\n\n#### version\n\n* **Tipo:** `string`\n\nVersão `vue-i18n`.\n\n#### availabilities\n\n> :new: Adicionado na versão 7.0+\n\n* **Tipo:** `IntlAvailability`\n\nVerificar a disponibilidade dos seguintes recursos de internacionalização:\n\n* `{boolean} dateTimeFormat`: formatação de data sensível à localidade\n\n* `{boolean} numberFormat`: formatação de número sensível à localidade\n\nOs recursos de internacionalização acima dependem do [ambiente do navegador](http://kangax.github.io/compat-table/esintl/), que implementa a API de internacionalização ECMAScript (ECMA-402).\n\n### Opções de construtor\n\nÉ possível especificar algumas das opções do construtor `I18nOptions` com base em [definições de tipo de fluxo](https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js)\n\n#### locale\n\n* **Tipo:** `Locale`\n\n* **Padrão:** `'en-US'`\n\nO local usado para localização. Se uma localidade contém território e dialeto, esta localidade contém um fallback implícito.\n\n#### fallbackLocale\n\n* **Tipo:** `FallbackLocale`\n\n* **Padrão:** `false`\n\nLocalidade reserva para localização. Para obter mais detalhes e definições de fallback mais complexos, consulte a seção [fallback](../guide/fallback.md).\n\n#### messages\n\n* **Tipo:** `LocaleMessages`\n\n* **Padrão:** `{}`\n\nMensagens de localização para o local.\n\n#### dateTimeFormats\n\n> :new: Adicionado na versão 7.0+\n\n* **Tipo:** `DateTimeFormats`\n\n* **Padrão:** `{}`\n\nFormatos de data para localização.\n\n* **Veja também:** `DateTimeFormats` tipo de [definições de flowtype](https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js)\n\n#### numberFormats\n\n> :new: Adicionado na versão 7.0+\n\n* **Tipo:** `NumberFormats`\n\n* **Padrão:** `{}`\n\nFormatos de número para localização.\n\n* **Veja também:** `NumberFormats` tipo de [definições de flowtype](https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js)\n\n#### availableLocales\n\n> :new: Adicionado na versão 8.9.0+\n\n* **Tipo:** `Locale[]`\n\n* **Padrão:** `[]`\n\n* **Exemplos:** `[\"en\", \"ru\"]`\n\nLista de localidades disponíveis em `messages` em ordem lexical.\n\n#### formatter\n\n* **Tipo:** `Formatter`\n\n* **Padrão:** Formatador integrado\n\nUm método de formatação que implementa a interface `Formatter`.\n\n#### modifiers\n\n> :new: Adicionado na versão 8.15.0+\n\n* **Tipo:** `Modifiers`\n\n* **Padrão:** modificadores `lower` e `upper`\n\nFunções modificadoras para mensagens relacionadas\n\n#### missing\n\n* **Tipo:** `MissingHandler`\n\n* **Padrão:** `null`\n\nManipulador para mensagens de localização ausentes. O manipulador será chamado com `locale`, a `key` da mensagem de localização e os `values`.\n\nSe este manipulador for especificado e for feita uma tentativa de acessar a mensagem de localização ausente, não haverá nenhum aviso no console.\n\n#### fallbackRoot\n\n* **Tipo:** `Boolean`\n\n* **Padrão:** `true`\n\nAo usar a localização em componentes, determina se deve consultar a localização de nível raiz (global) quando no caso da localização falhar.\n\nSe definido como `false`, um aviso será lançado e uma chave retornada.\n\n#### fallbackRootWithEmptyString\n\n> :new: Adicionado na versão 8.26+\n\n* **Tipo:** `Boolean`\n\n* **Padrão:** `true`\n\nNa localização do componente, se deve retornar à localização de nível raiz (global) quando a mensagem local for uma string vazia.\n\nPor favor, note que o comportamento padrão no vue-i18n 9.x é não voltar ao root para a mensagem local que é uma string vazia.\n\nSe for `false`, a mensagem local vazia não retornará ao root e será mantida como string vazia.\n\n#### sync\n\n* **Tipo:** `Boolean`\n\n* **Padrão:** `true`\n\nSe sincroniza a localidade de nível raiz com a localidade de localização do componente.\n\nSe o valor for `false`, independentemente da localidade definida no nível raiz, a localidade definida no componente será usada.\n\n#### silentTranslationWarn\n\n> 6.1+, :up: 8.13\n\n* **Tipo:** `Boolean | RegExp`\n\n* **Padrão:** `false`\n\nDesativa os avisos exibidos quando a localização falha.\n\nSe verdadeiro, desativa os avisos de erro de localização. Se você usar uma expressão regular, você pode desligar os avisos de erro que correspondem à `key` (por exemplo, `$t`).\n\n#### silentFallbackWarn\n\n> :new: Adicionado na versão 8.8+, :up: 8.13\n\n* **Tipo:** `Boolean | RegExp`\n\n* **Padrão:** `false`\n\nDesative os avisos ao retornar para fallback de `fallbackLocale` ou `root`.\n\nSe `true`, os avisos serão gerados apenas quando nenhuma tradução estiver disponível, e não para os casos de fallbacks.\nSe você usar uma expressão regular, poderá suprimir os avisos de fallback que correspondem à `chave` (por exemplo, `$t`).\n\n#### pluralizationRules\n\n> 8.5+\n\n  * **Tipo:** `PluralizationRules`\n\n  * **Padrão:** `{}`\n\n  Um conjunto de regras para pluralização de palavras no seguinte formato:\n  ```js\n    {\n      // Chave - a localidade para a qual a regra será aplicada.\n      // Valor - uma função para obter o índice da opção de pluralização a partir do número atual e o número especificado de opções. (Veja a função getChoiceIndex)\n      'pt': function(choice, choiceIndex) => Number/* índice da palavra em plural */;\n      'ru': function(choice, choiceIndex) => Number/* índice da palavra em plural */;\n      'en': function(choice, choiceIndex) => Number/* índice da palavra em plural */;\n      'jp': function(choice, choiceIndex) => Number/* índice da palavra em plural */;\n    }\n  ```\n\n#### preserveDirectiveContent\n\n> Adicionado na versão 8.7+\n\n* **Tipo:** `Boolean`\n\n* **Padrão:** `false`\n\nDetermina se o elemento da diretiva `v-t` deve reter o `textContent` após a diretiva ser removida do elemento.\n\n#### warnHtmlInMessage\n\n> Adicionado na versão 8.11+\n\n* **Tipo:** `WarnHtmlInMessageLevel`\n\n* **Padrão:** `off`\n\nPermitir ou não o uso de formatação HTML em mensagens de localização. Veja também a propriedade `warnHtmlInMessage`.\n\n:::danger Atenção!\nA partir da próxima versão principal, o valor padrão `warnHtmlInMessage` será `warn`.\n:::\n\n#### sharedMessages\n\n> Adicionado na versão 8.12+\n\n* **Tipo:** `LocaleMessages`\n\n* **Padrão:** `undefined`\n\nMensagens de localização comuns quando localizadas em componentes. Ver [localização baseada em componentes](../guide/component.md#shared-locale-messages-for-components) para mais detalhes.\n\n#### postTranslation\n\n> Adicionado na versão 8.16+\n\n* **Tipo:** `PostTranslationHandler`\n\n* **Padrão:** `null`\n\nUm manipulador para pós-processamento da tradução. Executado após chamar `$t`, `t`, `$tc` e `tc`.\n\nPode ser útil se você precisar processar adicionalmente o texto final da tradução, por exemplo, para eliminar os espaços e cortes de espaçamento.\n\n#### componentInstanceCreatedListener\n\n> Adicionado na versão 8.18+\n\n* **Tipo:** `ComponentInstanceCreatedListener`\n\n* **Padrão:** `null`\n\nUm manipulador para receber uma notificação sobre a criação de uma instância local de um componente. O manipulador é chamado com instâncias VueI18n novas e antigas (raiz).\n\nEste manipulador é útil ao estender a instância raiz do VueI18n e se deseja aplicar também essas extensões à instância local do componente.\n\n#### escapeParameterHtml\n\n> Adicionado na versão 8.22+\n\n  * **Tipo:** `Boolean`\n\n  * **Padrão:** `false`\n\nSe `escapeParameterHtml` for definido como `true`, os parâmetros de interpolação serão escapados antes que a mensagem seja traduzida. Isso é útil quando o resultado da tradução é usado em `v-html` e o texto a ser traduzido contém marcação HTML (por exemplo, `<b>` em torno de um valor fornecido pelo usuário). Este padrão destina-se principalmente a casos em que `strings` de texto pré-compiladas para componentes de IU.\n\nO processo de escape envolve a substituição dos seguintes símbolos por suas respectivas entidades de caracteres HTML: `<`, `>`, `\"`, `'`.\n\nDefinir `escapeParameterHtml` como `true` não deve quebrar a funcionalidade existente, mas fornecerá proteção contra vetores de ataque XSS.\n\n### Propriedades\n\n#### locale\n\n* **Tipo:** `Locale`\n\n* **Leitura/Escrita**\n\nO local usado para localização. Se uma localidade contém um território e um dialeto, essa localidade contém um fallback implícito.\n\n#### fallbackLocale\n\n* **Tipo:** `FallbackLocale`\n\n* **Leitura/Escrita**\n\nO local usado para localização de fallback. Para obter mais definições de fallback, consulte a seção [fallback](../ guide/fallback.md).\n\n#### messages\n\n* **Tipo:** `LocaleMessages`\n\n* **Somente leitura**\n\nAs mensagens de localização usadas para a localização da tradução.\n\n#### dateTimeFormats\n\n> :new: Adicionado na versão 7.0+\n\n* **Tipo:** `DateTimeFormats`\n\n* **Somente leitura**\n\nFormatação de data para localização.\n\n#### numberFormats\n\n> :new: Adicionado na versão 7.0+\n\n* **Tipo:** `NumberFormats`\n\n* **Somente leitura**\n\nOs formatos para formatação de números da localização.\n\n#### missing\n\n* **Tipo:** `MissingHandler`\n\n* **Leitura/Escrita**\n\nManipulador para chaves de localização ausentes.\n\n#### formatter\n\n* **Tipo:** `Formatter`\n\n* **Leitura/Escrita**\n\nUm método de formatação que implementa a interface `Formatter`.\n\n#### silentTranslationWarn\n\n> 6.1+, :up: 8.13\n\n* **Tipo:** `Boolean | RegExp`\n\n* **Leitura/Escrita**\n\nDesative os avisos exibidos em erros de localização.\n\n#### silentFallbackWarn\n\n> :new: Adicionado na versão 8.8+, :up: 8.13\n\n* **Tipo:** `Boolean | RegExp`\n\n* **Leitura/Escrita**\n\nDesative os avisos de fallback quando a localização falha.\n\n#### pluralizationRules\n\n> 8.5+\n\n* **Tipo:** `PluralizationRules`\n\n* **Leitura/Escrita**\n\nUm conjunto de regras de pluralização dependentes da localidade.\n\n#### preserveDirectiveContent\n\n> Adicionado na versão 8.7+\n\n* **Tipo:** `Boolean`\n\n* **Leitura/Escrita**\n\nSe o elemento da diretiva `v-t` deve preservar o `textContent` após a diretiva ser removida do elemento.\n\n#### warnHtmlInMessage\n\n> Adicionado na versão 8.11+\n\n* **Tipo:** `WarnHtmlInMessageLevel`\n\n* **Leitura/Escrita**\n\nPermitir ou não o uso de formatação HTML em mensagens de localização.\n\n\nSe você definir `warn` ou `error`, irá verificar as mensagens de localidade na instância VueI18n.\n\nSe você definir `warn` um aviso será gerado no console.\n\nSe você definir `error` gera o erro.\n\nO valor padrão na instância VueI18n é definido como `off`.\n\n#### postTranslation\n\n> Adicionado na versão 8.16+\n\n* **Tipo:** `PostTranslationHandler`\n\n* **Leitura/Escrita**\n\nUm manipulador para o pós-processamento da tradução.\n\n### Métodos\n\n#### getChoiceIndex\n\n* **Argumentos:**\n\n  * `{number} choice`\n  * `{number} choicesLength`\n\n* **Retorno:** `finalChoice {number}`\n\nObter um índice para pluralizar o número atual e o número de opções fornecido.\nA implementação pode ser substituída pela mutação do protótipo:\n\n```js\nVueI18n.prototype.getChoiceIndex = /* implementação personalizada */\n```\n\nNo entanto, na maioria dos casos, é suficiente passar a função desejada para a [opção do construtor pluralizationRules](#pluralizationrules).\n\n#### getLocaleMessage( locale )\n\n* **Argumentos:**\n\n  * `{Locale} locale`\n\n* **Retorno:** `LocaleMessageObject`\n\nObtendo a mensagem da localidade.\n\n#### setLocaleMessage( locale, message )\n\n* **Argumentos:**\n\n  * `{Locale} locale`\n  * `{LocaleMessageObject} message`\n\nDefina a mensagem de localidade.\n\n:::tip NOTA\n\n> Adicionado na versão 8.11+\n\nSe você definir `warn` ou `error` na propriedade `warnHtmlInMessage`, quando este método for executado, ele irá verificar se a formatação HTML é usada para mensagem local.\n:::\n\n#### mergeLocaleMessage( locale, message )\n\n> 6.1+\n\n* **Argumentos:**\n\n  * `{Locale} locale`\n  * `{LocaleMessageObject} message`\n\nMesclar as mensagens de localidade registradas com a mensagem de localidade.\n\n:::tip NOTA\n\n> Adicionado na versão 8.11+\n\nSe você definir `warn` ou `error` na propriedade `warnHtmlInMessage`, quando este método for executado, ele irá verificar se a formatação HTML é usada para mensagem local.\n:::\n\n#### t( key, [locale], [values] )\n\n* **Argumentos:**\n\n  * `{Path} key`: obrigatório\n  * `{Locale} locale`: opcional\n  * `{Array | Object} values`: opcional\n\n* **Retorno:** : `TranslateResult`\n\nSemelhante à função retornada pelo método `$t`. Veja [$t](#t) para detalhes.\n\n#### tc( key, [choice], [values] )\n\n* **Argumentos:**\n\n  * `{Path} key`: obrigatório\n  * `{number} choice`: opcional, padrão `1`\n  * `{string | Array | Object} values`: opcional\n\n* **Retorno:** `TranslateResult`\n\nSemelhante à função retornada pelo método `$tc`. Veja [$tc](#tc) para detalhes.\n\n#### te( key, [locale] )\n\n* **Argumentos:**\n\n  * `{string} key`: obrigatório\n  * `{Locale} locale`: opcional\n\n* **Retorno:** `boolean`\n\nVerifica se a chave especificada existe nas mensagens de localização global. Se você especificar `locale`, a verificação será feita nas mensagens de `locale`.\n\n#### getDateTimeFormat ( locale )\n\n> :new: Adicionado na versão 7.0+\n\n* **Argumentos:**\n\n  * `{Locale} locale`\n\n* **Retorno:** `DateTimeFormat`\n\nObtenha o formato de data e hora do local.\n\n#### setDateTimeFormat ( locale, format )\n\n> :new: Adicionado na versão 7.0+\n\n* **Argumentos:**\n\n  * `{Locale} locale`\n  * `{DateTimeFormat} format`\n\nConfigurando formatos de formatação de data para localização.\n\n#### mergeDateTimeFormat ( locale, format )\n\n> :new: Adicionado na versão 7.0+\n\n* **Argumentos:**\n\n  * `{Locale} locale`\n  * `{DateTimeFormat} format`\n\nMescle os formatos de data e hora registrados com o formato de data e hora do local.\n\n#### d( value, [key], [locale] )\n\n> :new: Adicionado na versão 7.0+\n\n* **Argumentos:**\n\n  * `{number | Date} value`: obrigatório\n  * `{Path | Object} key`: opcional\n  * `{Locale | Object} locale`: opcional\n\n* **Retorno:** `DateTimeFormatResult`\n\nSemelhante à função retornada pelo método `$d`. Veja [$d](#d) para detalhes.\n\n#### getNumberFormat ( locale )\n\n> :new: Adicionado na versão 7.0+\n\n* **Argumentos:**\n\n  * `{Locale} locale`\n\n* **Retorno:** `NumberFormat`\n\nObtenha o formato de número da localidade.\n\n#### setNumberFormat ( locale, format )\n\n> :new: Adicionado na versão 7.0+\n\n* **Argumentos:**\n\n  * `{Locale} locale`\n  * `{NumberFormat} format`\n\nDefina o formato de número do local.\n\n#### mergeNumberFormat ( locale, format )\n\n> :new: Adicionado na versão 7.0+\n\n* **Argumentos:**\n\n  * `{Locale} locale`\n  * `{NumberFormat} format`\n\nMescle os formatos de número registrados com o formato de número do local.\n\n#### n( value, [format], [locale] )\n\n> :new: Adicionado na versão 7.0+\n\n* **Argumentos:**\n\n  * `{number} value`: obrigatório\n  * `{Path | Object} format`: opcional\n  * `{Locale} locale`: opcional\n\n* **Retorno:** `NumberFormatResult`\n\nSemelhante à função retornada pelo método `$n`. Veja [$n](#n) para detalhes.\n\n## Diretivas\n\n> :new: Adicionado na versão 7.3+\n\n### v-t\n\n* **Aguarda:** `string | Object`\n\n* **Modificadores:**\n\n  * `.preserve`: (8.7.0+) preserva o `textContent` de um elemento quando a diretiva é desvinculada.\n\n* **Detalhes:**\n\nAtualizar o `textContent` de um elemento que foi traduzido usando mensagens de localização. Você pode usar string ou sintaxe de objeto. A sintaxe da string pode ser especificada como o caminho para a mensagem de localização. Ao usar a sintaxe de objeto, você deve especificar as seguintes propriedades:\n\n  * `path`: obrigatório, chave da mensagem de localização\n  * `locale`: opcional, localização\n  * `args`: opcional, para lista ou formatação nomeada\n\n:::tip NOTA\nO elemento `textContent` será limpo por padrão quando a diretiva `v-t` for desassociada. Isso pode ser uma situação indesejável quando usado dentro de [transições](https://br.vuejs.org/v2/guide/transitions.html). Para preservar os dados `textContent` após a desvinculação da diretiva, use o modificador `.preserve` ou a opção global [ `preserveDirectiveContent`](#preserveirectivecontent).\n:::\n\n* **Exemplos:**\n\n```html\n<!-- sintaxe de string: literal -->\n<p v-t=\"'foo.bar'\"></p>\n\n<!-- sintaxe de string: vinculação por meio de dados ou props computados -->\n<p v-t=\"msg\"></p>\n\n<!-- sintaxe do objeto: literal -->\n<p v-t=\"{ path: 'hi', locale: 'pt', args: { name: 'kazupon' } }\"></p>\n\n<!-- sintaxe do objeto: ligação por meio de dados ou props computados -->\n<p v-t=\"{ path: greeting, args: { name: fullName } }\"></p>\n\n<!-- com o modificador de preservação -->\n<p v-t.preserve=\"'foo.bar'\"></p>\n```\n\n* **Veja também:** [Diretiva personalizada para localização](../guide/directive.md)\n\n## Componentes\n\n### Componente funcional i18n\n\n> :new: Adicionado na versão 7.0+\n\n#### Props:\n\n* `path {Path}`: obrigatório, caminho-chave de mensagens de localização\n* `locale {Locale}`: opcional, localização\n* `tag {string | boolean | Object}`: opcional, padrão `'span'`\n* `places {Array | Object}`: opcional (7.2+)\n\n:::danger Atenção!\nA partir da próxima versão principal, a opção `places` será removida. Use a sintaxe de slot.\n:::\n\n#### Usando:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <i18n path=\"term\" tag=\"label\" for=\"tos\">\n    <a :href=\"url\" target=\"_blank\">{{ $t('tos') }}</a>\n  </i18n>\n  <!-- ... -->\n</div>\n```\n\n```js\nconst messages = {\n  en: {\n    tos: 'Term of Service',\n    term: 'I accept xxx {0}.'\n  },\n  pt: {\n    tos: 'Termos de serviço',\n    term: 'Eu concordo xxx {0}'.\n  }\n}\n\nconst i18n = new VueI18n({\n  locale: 'en',\n  messages\n})\nnew Vue({\n  i18n,\n  data: {\n    url: '/term'\n  }\n}).$mount('#app')\n```\n\n#### Veja também:\n\n[Componente de interpolação](../guide/interpolation.md)\n\n### Componente funcional i18n-n\n\n> :new: Adicionado na versão 8.10+\n\n#### Props:\n\n* `value {number}`: obrigatório, número para formatar\n* `format {string | NumberFormatOptions}`: opcional, nome de formato de número ou objeto com opções de formato explícito\n* `locale {Locale}`: opcional, localização\n* `tag {string | boolean | Object}`: opcional, padrão `'span'`\n\n#### Usando:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <i18n-n :value=\"money\" format=\"currency\" tag=\"label\">\n    <span v-slot:currency=\"slotProps\" class=\"font-weight: bold\">\n      {{ slotProps.currency }}\n    <span>\n  </i18n-n>\n  <!-- ... -->\n</div>\n```\n\n```js\nvar numberFormats = {\n  'en-US': {\n    currency: {\n      style: 'currency',\n      currency: 'USD'\n    }\n  },\n  'pt-BR': {\n    currency: {\n      style: 'currency',\n      currency: 'BRL'\n    }\n  }\n}\n\nconst i18n = new VueI18n({\n  locale: 'en-US',\n  numberFormats\n})\n\nnew Vue({\n  i18n,\n  data: {\n    money: 10234\n  }\n}).$mount('#app')\n```\n\n#### Slots com escopo\n\nO componente funcional `<i18n-n>` pode aceitar vários slots com escopo nomeado. A lista de nomes de slots suportados é baseada nos [`Intl.NumberFormat.formatToParts() tipos de saída`] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/formatToParts):\n\n* `currency`\n* `decimal`\n* `fraction`\n* `group`\n* `infinity`\n* `integer`\n* `literal`\n* `minusSign`\n* `nan`\n* `plusSign`\n* `percentSign`\n\nCada um desses slots com escopo nomeado aceitará três parâmetros de escopo:\n\n* `[slotName] {FormattedNumberPartType}`: parâmetro com o mesmo nome do nome do slot real (como `integer`)\n* `index {Number}`: índice da parte específica na matriz de partes numéricas\n* `parts {Array}`: array de todas as partes numéricas formatadas\n\n#### Veja também:\n\n[Formatação personalizada de números](../guide/number.md#custom-formatting)\n\n## Atributos especiais\n\n### place\n\n> :new: Adicionado na versão 7.2+\n\n#### Aguarda: `{number | string}`\n\nUsado ao interpolar um componente para especificar um índice para formatação de lista ou uma chave para formatação nomeada.\n\nMais sobre o uso na seção do link abaixo.\n\n#### Veja também:\n\n[Componente de interpolação](../guide/interpolation.md)\n"
  },
  {
    "path": "vuepress/pt/guide/component.md",
    "content": "# Localização baseada em componentes\n\nEm geral, as informações de localidade (por exemplo, `locale`, `messages`, etc) são definidas como opção de construtor na instância `VueI18n` e define a opção `i18n` como a instância raiz do Vue.\n\nPortanto, você pode realizar traduções globalmente usando os métodos `$t` ou `$tc` na instância raiz do Vue e qualquer um dos componentes nela. Mas também é possível especificar dados para localização em cada componente separadamente, o que pode ser mais conveniente devido ao design orientado a componentes.\n\nUm exemplo de localização baseada em componente:\n\n```js\n// Definir a localização para raiz na instância Vue\nconst i18n = new VueI18n({\n  locale: 'pt',\n  messages: {\n    en: {\n      message: {\n        hello: 'Hello World',\n        greeting: 'Good morning'\n      }\n    },\n    pt: {\n      message: {\n        hello: 'Olá Mundo',\n        greeting: 'Bom dia'\n      }\n    }\n  }\n})\n\n// Definição no componente\nconst Component1 = {\n  template: `\n    <div class=\"container\">\n     <p>Component1 locale messages: {{ $t(\"message.hello\") }}</p>\n     <p>Fallback global locale messages: {{ $t(\"message.greeting\") }}</p>\n   </div>`,\n  i18n: {\n    // opção `i18n` definindo dados de localização para o componente\n    messages: {\n      en: { message: { hello: 'hello component1' } },\n      pt: { message: { hello: 'olá componente1' } }\n    }\n  }\n}\n\nnew Vue({\n  i18n,\n  components: {\n    Component1\n  }\n}).$mount('#app')\n```\n\nTemplate:\n\n```html\n<div id=\"app\">\n  <p>{{ $t(\"message.hello\") }}</p>\n  <component1></component1>\n</div>\n```\n\nO resultado será o seguinte:\n\n```html\n<div id=\"app\">\n  <p>Olá Mundo</p>\n  <div class=\"container\">\n    <p>Component1 locale messages: olá component1</p>\n    <p>Fallback global locale messages: Bom dia</p>\n  </div>\n</div>\n```\n\nComo no exemplo acima, se o componente não tiver a mensagem de localidade, ele retornará às informações de localização definidas globalmente. O componente usa o idioma definido na instância raiz (no exemplo acima: `locale: 'ja'`).\n\nObserve que, por padrão, ao acessar os dados de localização da raiz, avisos serão gerados no console:\n\n```\n[vue-i18n] Value of key 'message.greeting' is not a string!\n[vue-i18n] Fall back to translate the keypath 'message.greeting' with root locale.\n```\n\nPara ocultar esses avisos (deixando aqueles que alertam sobre a falta completa de tradução para a chave fornecida), defina a opção `silentFallbackWarn: true` ao inicializar a instância do `VueI18n`.\n\nSe você precisar traduzir com base na localidade do componente, pode fazê-lo usando as opções `sync: false` e `locale` na propriedade do `i18n`.\n\n## Mensagens de localização comuns para componentes\n\nÀs vezes, você pode querer importar as mensagens de localidade compartilhadas para determinados componentes, não o fallback de mensagens na localidade global (por exemplo, mensagens comuns de determinado recurso para componentes.\n\nPara fazer isso, você pode usar a opção `sharedMessages` na propriedade `i18n` do componente.\n\nUm exemplo de uso de mensagens de localização comuns:\n\n```js\nexport default {\n  en: {\n    buttons: {\n      save: 'Save'\n      // ...\n    }\n  },\n  pt: {\n    buttons: {\n      save: 'Salvar'\n      // ...\n    }\n  }\n}\n```\n\nComponente:\n\n```js\nimport commonMessage from './locales/common' // importação de mensagens da localidade em comum\n\nexport default {\n  name: 'ServiceModal',\n  template: `\n    <div class=\"modal\">\n      <div class=\"body\">\n        <p>Este é um bom serviço</p>\n      </div>\n      <div class=\"footer\">\n        <button type=\"button\">\n          {{ $t('buttons.save') }}\n        </button>\n      </div>\n    </div>\n  `,\n  i18n: {\n    messages: { ... },\n    sharedMessages: commonMessages\n  }\n}\n```\n\nSe as opções `sharedMessages` e `messages` forem especificadas, então suas mensagens serão mescladas em mensagens de localização na instância `VueI18n` deste componente.\n\n## Localização em componentes funcionais\n\nAo usar um componente funcional, todos os dados (incluindo `props`, `children`, `slots`, `parent`, etc.) são passados ​​através do `context`, que contém todos esses atributos. Além disso, não é possível usar `this`, então ao usar vue-i18n com componentes funcionais, você deve se referir a `$t` como `parent.$t`, assim:\n\n```html\n...\n<div>\n  <a href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\">\n    <img src=\"./assets/example.jpg\" :alt=\"parent.$t('message.hello')\" />\n  </a>\n</div>\n...\n```\n"
  },
  {
    "path": "vuepress/pt/guide/datetime.md",
    "content": "# Localização de datas\n\n:::tip Suporta a versão\n:new: 7.0+\n:::\n\nVocê pode localizar datas de acordo com o formato apropriado.\n\nFormato de exemplo para DateTime:\n\n```js\nconst dateTimeFormats = {\n  'en-US': {\n    short: {\n      year: 'numeric',\n      month: 'short',\n      day: 'numeric'\n    },\n    long: {\n      year: 'numeric',\n      month: 'long',\n      day: 'numeric',\n      weekday: 'long',\n      hour: 'numeric',\n      minute: 'numeric'\n    }\n  },\n  'pt-BR': {\n    short: {\n      year: 'numeric',\n      month: 'short',\n      day: 'numeric'\n    },\n    long: {\n      year: 'numeric',\n      month: 'long',\n      day: 'numeric',\n      weekday: 'long',\n      hour: 'numeric',\n      minute: 'numeric',\n      hour12: true\n    }\n  }\n}\n```\n\nComo visto acima, é possível definir um formato de data nomeado (por exemplo, `short`, `long`, etc.) usando opções [ECMA-402 Intl.DateTimeFormat](http://www.ecma-international.org/ecma-402/2.0/#sec-intl-datetimeformat-constructor)\n\nDepois disso, para poder usar este formato em mensagens de localização, você deve definir a opção `dateTimeFormats` no construtor na instância `VueI18n`:\n\n```js\nconst i18n = new VueI18n({\n  dateTimeFormats\n})\n\nnew Vue({\n  i18n\n}).$mount('#app')\n```\n\nTemplate:\n\n```html\n<div id=\"app\">\n  <p>{{ $d(new Date(), 'short') }}</p>\n  <p>{{ $d(new Date(), 'long', 'pt-BR') }}</p>\n</div>\n```\n\nO resultado será o seguinte:\n\n```html\n<div id=\"app\">\n  <p>Jan 18, 2021</p>\n  <p>domingo, 18 de janeiro de 2021 5:49 AM</p>\n</div>\n```\n"
  },
  {
    "path": "vuepress/pt/guide/directive.md",
    "content": "# Diretiva personalizada\n\n:::tip Suporta a versão\n:new: 7.3+\n:::\n\nAs traduções podem ser feitas não apenas usando a diretiva `v-t` personalizada, mas também usando o método `$t`.\n\n## Sintaxe de string\n\nVocê pode passar o keypath de mensagens da localização como uma string.\n\nJavaScript:\n\n```js\nnew Vue({\n  i18n: new VueI18n({\n    locale: 'en',\n    messages: {\n      en: { hello: 'Hi there!' },\n      pt: { hello: 'Olá!' }\n    }\n  }),\n  data: { path: 'hello' }\n}).$mount('#string-syntax')\n```\n\nTemplate:\n\n```html\n<div id=\"string-syntax\">\n  <!-- string literal -->\n  <p v-t=\"'hello'\"></p>\n  <!-- ligação do keypath por meio dos dados -->\n  <p v-t=\"path\"></p>\n</div>\n```\n\nO resultado será o seguinte:\n\n```html\n<div id=\"string-syntax\">\n  <p>Olá!</p>\n  <p>Olá!</p>\n</div>\n```\n\n## Sintaxe do objeto\n\nVocê pode usar a sintaxe do objeto.\n\nJavaScript:\n\n```js\nnew Vue({\n  i18n: new VueI18n({\n    locale: 'en',\n    messages: {\n      en: { hello: 'Hi {name}!' },\n      pt: { hello: 'Olá {name}！' }\n    }\n  }),\n  computed: {\n    nickName() { return 'kazupon' }\n  },\n  data: { path: 'hello' }\n}).$mount('#object-syntax')\n```\n\nTemplate:\n\n```html\n<div id=\"object-syntax\">\n  <!-- literal -->\n  <p v-t=\"{ path: 'hello', locale: 'pt', args: { name: 'kazupon' } }\"></p>\n  <!-- ligação do keypath por meio dos dados  -->\n  <p v-t=\"{ path: path, args: { name: nickName } }\"></p>\n</div>\n```\n\nO resultado será o seguinte:\n\n```html\n<div id=\"object-syntax\">\n  <p>Olá kazupon！</p>\n  <p>Hi kazupon!</p>\n</div>\n```\n\n## Use com transições\n\n:::tip Suporta a versão\n:new: 8.7+\n:::\n\nAo usar a diretiva `v-t` em um elemento dentro do componente [`<transition>`](https://br.vuejs.org/v2/api/index.html#transition), você pode ver como a mensagem traduzida desaparece durante a animação de transição. Este comportamento é devido à implementação do próprio componente `<transition>` - todas as diretivas no elemento que desaparece dentro do componente `<transition>` devem ser destruídas **antes do início da transição**. Esse comportamento pode resultar em oscilação do conteúdo em animações curtas, mas é mais perceptível em animações de transição longa.\n\nPara preservar o conteúdo de uma diretiva durante uma animação de transição, você precisa adicionar [modificador `.preserve`](../api/#v-t) ao definir a diretiva `v-t`.\n\nJavascript:\n\n```js\nnew Vue({\n  i18n: new VueI18n({\n    locale: 'pt',\n    messages: {\n      pt: { preserve: 'com preservação' }\n    }\n  }),\n  data: { toggle: true }\n}).$mount('#in-transitions')\n```\n\nTemplate:\n\n```html\n<div id=\"in-transitions\">\n  <transition name=\"fade\">\n    <span v-if=\"toggle\" v-t.preserve=\"'preserve'\"></span>\n  </transition>\n  <button @click=\"toggle = !toggle\">Toggle</button>\n</div>\n```\n\nTambém é possível definir globalmente a configuração `preserveDirectiveContent` na instância `VueI18n`, o que afetará todas as diretivas `v-t` sem adicionar um modificador.\n\nJavaScript:\n\n```js\nnew Vue({\n  i18n: new VueI18n({\n    locale: 'pt',\n    messages: {\n      pt: { preserve: 'com preservação' }\n    },\n    preserveDirectiveContent: true\n  }),\n  data: { toggle: true }\n}).$mount('#in-transitions')\n```\n\nTemplate:\n\n```html\n<div id=\"in-transitions\">\n  <transition name=\"fade\">\n    <span v-if=\"toggle\" v-t=\"'preserve'\"></span>\n  </transition>\n  <button @click=\"toggle = !toggle\">Toggle</button>\n</div>\n```\n\nVocê pode aprender mais sobre os exemplos acima [aqui] (https://github.com/kazupon/vue-i18n/tree/dev/examples/directive)\n\n## `$t` ou `v-t`\n\n### `$t`\n\n`$t` é um método adicionado à instância Vue. Tem os seguintes prós e contras:\n\n#### Prós\n\nVocê pode **flexivelmente** usar a sintaxe de chaves `{{}}` em templates e também props e métodos computados na instância Vue.\n\n#### Contras\n\n`$t` é executado **toda vez** quando ocorre uma nova renderização, então tem a sobrecarga de fazer a tradução.\n\n### `v-t`\n\n`v-t` é uma diretiva personalizada. Tem os seguintes prós e contras:\n\n#### Prós\n\n`v-t` tem **melhor desempenho** do que o método `$t` devido ao seu cache com a diretiva personalizada, quando traduzido uma vez. Além disso, a pré-tradução é possível com o módulo do compilador Vue que foi fornecido por [`vue-i18n-extensions`](https://github.com/kazupon/vue-i18n-extensions).\n\nPortanto, é possível fazer **mais otimizações de desempenho**.\n\n#### Contras\n\n`v-t` não pode ser usado de forma tão flexível como `$t`, e isso adiciona **complexidade**. A tradução com `v-t` é inserida no `textContent` do elemento. Além disso, ao usar a renderização do lado do servidor, você precisa definir a [diretiva personalizada](https://github.com/kazupon/vue-i18n-extensions#directive-vt-custom-directive-for-server-side) por meio da opção `directives` da função `createRenderer`.\n"
  },
  {
    "path": "vuepress/pt/guide/fallback.md",
    "content": "# Fallback Localização\n\n*Resumo: Use `fallbackLocale: '<lang>'` para escolher qual idioma usar quando seu idioma preferido não tiver uma tradução.*\n\n## Fallback implícito usando localidades\n\nSe um `locale` é fornecido contendo um território e um dialeto opcional, o fallback implícito é ativado automaticamente.\n\nPor exemplo, para `de-DE-bavarian` o seguinte será considerado como fallback:\n1. `de-DE-bavarian`\n2. `de-DE`\n3. `de`\n\nPara desativar a detecção automática de locais de fallback, especifique o caractere `!`, Por exemplo, `de-DE!`\n\n## Fallback explícito com um local\n\nÀs vezes, alguns itens não são traduzidas para outros idiomas. Neste exemplo, o item `hello` está disponível no idioma inglês, mas não no português:\n\n```js\nconst messages = {\n  en: {\n    hello: 'Hello, world!'\n  },\n  pt: {\n    // Localização sem tradução para `hello`\n  }\n}\n```\n\nSe você deseja usar (digamos) mensagens de localização de `en`, quando a tradução não está na localização desejada, você deve defina a opção `fallbackLocale` ao inicializar a instância `VueI18n`:\n\n```js\nconst i18n = new VueI18n({\n  locale: 'pt',\n  fallbackLocale: 'en',\n  messages\n})\n```\n\nTemplate:\n\n```html\n<p>{{ $t('hello') }}</p>\n```\n\nO resultado será o seguinte:\n\n```html\n<p>Hello, world!</p>\n```\n\nPor padrão, se as mensagens de localização de fallback de `fallbackLocale` foram usadas, os avisos serão exibidos no console:\n\n```\n[vue-i18n] Value of key 'hello' is not a string!\n[vue-i18n] Fall back to translate the keypath 'hello' with 'en' locale.\n```\n\nPara ocultar esses avisos (deixando aqueles em casos em que não há traduções para a chave fornecida), defina `silentFallbackWarn: true` ao inicializar a instância `VueI18n`.\n\n## Fallback explícito com  um array de localidades\n\nVocê pode especificar mais de um local de fallback usando um array.\n\nPor exemplo:\n\n```js\nfallbackLocale: ['pt', 'en'],\n```\n\n## Fallback explícito com mapas de decisão\n\nUm algoritmo de tomada de decisão mais complexo para determinar o local de fallback pode ser implementado usando mapas de decisão com localidades em um fallback de acordo.\n\nPor exemplo, usando o seguinte mapa de decisão\n\n```js\nfallbackLocale: {\n  /* 1 */ 'de-CH':   ['fr', 'it'],\n  /* 2 */ 'zh-Hant': ['zh-Hans'],\n  /* 3 */ 'es-CL':   ['es-AR'],\n  /* 4 */ 'es':      ['en-GB'],\n  /* 5 */ 'pt':      ['es-AR'],\n  /* 6 */ 'default': ['en', 'ru']\n},\n```\n\nResultará nas seguintes cadeias de fallback\n\n| Local       | fallback escolha                          |\n| ----------- | ----------------------------------------- |\n| `'de-CH'`   | de-CH > fr > it > en > ru                 |\n| `'de'`      | de > en > ru                              |\n| `'zh-Hant'` | zh-Hant > zh-Hans > zh > en > ru          |\n| `'es-SP'`   | es-SP > es > en-GB > en > ru              |\n| `'es-SP!'`  | es-SP > en > ru                           |\n| `'fr'`      | fr > en > ru                              |\n| `'pt-BR'`   | pt-BR > pt > es-AR > es > en-GB > en > ru |\n| `'es-CL'`   | es-CL > es-AR > es > en-GB > en > ru      |\n\n## Fallback interpolação\n\n* Resumo: Defina `formatFallbackMessages: true` para fazer a interpolação do modelo nas chaves de tradução quando seu idioma não tiver uma tradução para uma chave. *\n\nComo as chaves para as traduções são strings, você pode usar uma mensagem legível pelo usuário como uma chave (para um idioma específico).\n\nPor exemplo:\n\n```js\nconst messages = {\n  pt: {\n    'Hello, world!': 'Olá Mundo!'\n  }\n}\n```\n\nIsso pode ser útil porque você não precisa especificar uma tradução para o \"Hello, world!\" na localização em inglês.\n\nNa verdade, você pode até incluir parâmetros de modelo em uma chave. Junto com `formatFallbackMessages: true`, isso permite pular a escrita de modelos para o seu idioma base\" e as chaves *são* seus modelos.\n\n```js\nconst messages = {\n  pt: {\n    'Hello {name}': 'Olá {name}'\n  }\n}\n\nconst i18n = new VueI18n({\n  locale: 'pt',\n  fallbackLocale: 'en',\n  formatFallbackMessages: true,\n  messages\n})\n```\n\nTemplate:\n\n```html\n<p>{{ $t('Hello {name}', { name: 'John' }}) }}</p>\n<p>{{ $t('The weather today is {condition}!', { condition: 'sunny' }) }}</p>\n```\n\nO resultado será o seguinte:\n\n```html\n<p>Olá, John</p>\n<p>The weather today is sunny!</p>\n```\n"
  },
  {
    "path": "vuepress/pt/guide/formatting.md",
    "content": "# Formatação\n\n## Formatação nomeada\n\nMensagens de localização:\n\n```js\nconst messages = {\n  en: {\n    message: {\n      hello: '{msg} World'\n    }\n  },\n  pt: {\n    message: {\n      hello: '{msg} Mundo'\n    }\n  }\n}\n```\n\nTemplate:\n\n```html\n<p>{{ $t('message.hello', { msg: 'Olá' }) }}</p>\n```\n\nO resultado será o seguinte:\n\n```html\n<p>Olá Mundo</p>\n```\n\n## Formatação de lista\n\nMensagens de localização:\n\n```js\nconst messages = {\n  en: {\n    message: {\n      hello: '{0} World'\n    }\n  },\n  pt: {\n    message: {\n      hello: '{0} Mundo'\n    }\n  }\n}\n```\n\nTemplate:\n\n```html\n<p>{{ $t('message.hello', ['Olá']) }}</p>\n```\n\nO resultado será o seguinte:\n\n```html\n<p>Olá Mundo</p>\n```\n\nA formatação de lista também aceita objetos do tipo array:\n\n```html\n<p>{{ $t('message.hello', {'0': 'Olá'}) }}</p>\n```\n\nO resultado será o seguinte:\n\n```html\n<p>Olá Mundo</p>\n```\n\n## Formatação HTML\n\n:::warning Nota\n:warning: Localizar HTML arbitrário de forma dinâmica em um site é muito perigoso porque pode facilmente levar a vulnerabilidades de XSS. <br> Use a interpolação HTML apenas para conteúdo confiável, nunca para conteúdo personalizado.\n\nRecomendamos usar os recursos de [interpolação de componente](interpolation.md) nesses casos.\n:::\n\n:::warning Nota\n\n> :new: Adicionado na versão 8.11+\n\nVocê pode controlar o uso da formatação HTML. <br> Consulte para obter mais detalhes a [opção do construtor](../api/#opcoes-de-construtor) `warnHtmlInMessage` e as propriedades da API.\n:::\n\nEm alguns casos, você pode querer renderizar sua tradução como uma mensagem HTML e não como uma string estática.\n\n```js\nconst messages = {\n  en: {\n    message: {\n      hello: 'hello <br> World'\n    }\n  },\n  pt: {\n    message: {\n      hello: 'Olá <br> Mundo'\n    }\n  }\n}\n```\n\nTemplate:\n\n```html\n<p v-html=\"$t('message.hello')\"></p>\n```\n\nResultado (em vez da mensagem pré-formatada):\n\n```html\n<p>\n  Olá\n  <!-- <br> existe, mas é renderizado como html e não uma string -->\n  Mundo\n</p>\n```\n\n## Suporte formatação i18n Ruby on Rails\n\nMensagens de localização:\n\n```js\nconst messages = {\n  en: {\n    message: {\n      hello: '%{msg} World'\n    }\n  },\n  pt: {\n    message: {\n      hello: '%{msg} Mundo'\n    }\n  }\n}\n```\n\nTemplate:\n\n```html\n<p>{{ $t('message.hello', { msg: 'Olá' }) }}</p>\n```\n\nO resultado será o seguinte:\n\n```html\n<p>Olá Mundo</p>\n```\n\n## Formatação personalizada\n\nÀs vezes, você pode precisar traduzir usando uma formatação personalizada (por exemplo, [sintaxe de mensagem ICU](http://userguide.icu-project.org/formatparse/messages)).\n\nVocê pode fazer isso com um formatador personalizado que implementa a [Interface do formatador](https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js#L145-L147).\n\nUm exemplo do método de formatação personalizado com a sintaxe de classe ES2015:\n\n```js\n// Implementação do formatador personalizado\nclass CustomFormatter {\n  constructor(options) {\n    // ...\n  }\n\n  //\n  // interpolate\n  //\n  // @param {string} message\n  //   string de lista ou formato nomeado\n  //   p. ex.\n  //   - formato nomeado: 'Hi {name}'\n  //   - formato de lista: 'Hi {0}'\n  //\n  // @param {Object | Array} values\n  //   valores de interpolação `message`.\n  //   valores transmitidos com `$t`, `$tc` e componente funcional `i18n`.\n  //   p. ex.\n  //   - $t('hello', { name: 'Lucas' }) -> valores passados: Object `{ name: 'Lucas' }`\n  //   - $t('hello', ['Lucas']) -> valores passados: Array `['Lucas']`\n  //   - componente funcional `i18n` (interpolação no componente)\n  //     <i18n path=\"hello\">\n  //       <p>Lucas</p>\n  //       <p>Tudo bem com você?</p>\n  //     </i18n>\n  //     -> valores passados: Array (included VNode):\n  //        `[VNode{ tag: 'p', text: 'Lucas', ...}, VNode{ tag: 'p', text: 'Tudo bem com você?', ...}]`\n  //\n  // @return {Array<any>}\n  //   valores interpolados. Eles são necessários para retornar o seguinte:\n  //   - um array de strings ao usar `$t` ou `$tc`.\n  //   - um array incluindo o objeto VNode, ao usar `i18n` em um componente funcional.\n  //\n  interpolate(message, values) {\n    // implemente a lógica de interpolação aqui\n    // ...\n\n    // retorna o array interpolado\n    return ['resolved message string']\n  }\n}\n\n// Registre com a opção `formatter`\nconst i18n = new VueI18n({\n  locale: 'en-US',\n  formatter: new CustomFormatter(/* aqui as opções do construtor */),\n  messages: {\n    'en-US': {\n      // ...\n    },\n    'pt-BR': {\n      // ...\n    }\n    // ...\n  }\n})\n\n// Iniciando o aplicativo!\nnew Vue({ i18n }).$mount('#app')\n```\n\nVocê também pode verificar [o exemplo oficial do formatador personalizado](https://github.com/kazupon/vue-i18n/tree/dev/examples/formatting/custom).\n"
  },
  {
    "path": "vuepress/pt/guide/hot-reload.md",
    "content": "# Hot reloading\n\nVocê pode usar o recurso [Hot Module Replacement (HMR)](https://webpack.js.org/concepts/hot-module-replacement/), você pode rastrear as mudanças em arquivos de localização e recarregá-los automaticamente em seu aplicativo.\n\n## Exemplo básico\n\nPara um conjunto estático de localidades, você pode especificar explicitamente o recarregamento automático dessas traduções:\n\n```js\nimport Vue from \"vue\"\nimport VueI18n from \"vue-i18n\"\nimport en from './en'\nimport pt from './pt'\n\nconst messages = {\n  en,\n  pt\n}\n\n// Instância VueI18n\nconst i18n = new VueI18n({\n  locale: 'en',\n  messages\n})\n\n// Iniciando aplicativo\nconst app = new Vue({\n  i18n\n  // ...\n}).$mount('#app')\n\n// Atualizações automática\nif (module.hot) {\n  module.hot.accept(['./en', './pt'], function() {\n    i18n.setLocaleMessage('en', require('./en').default)\n    i18n.setLocaleMessage('pt', require('./pt').default)\n    // Ou adicione um recarregamento automático por meio da propriedade $i18n\n    // app.$i18n.setLocaleMessage('en', require('./en').default)\n    // app.$i18n.setLocaleMessage('pt', require('./pt').default)\n  })\n}\n```\n\n## Exemplo avançado\n\nSe precisar de suporte para uma mudança no conjunto de traduções, você pode implementar o recarregamento automático para todos os locais dinamicamente usando `require.context`:\n\n```js\nimport Vue from \"vue\";\nimport VueI18n from \"vue-i18n\";\n\nVue.use(VueI18n);\n\n// Carregue todos os locais e lembre-se do contexto\nfunction loadMessages() {\n  const context = require.context(\"./locales\", tpte, /[a-z0-9-_]+\\.json$/i);\n\n  const messages = context\n    .keys()\n    .map((key) => ({ key, locale: key.match(/[a-z0-9-_]+/i)[0] }))\n    .reduce(\n      (messages, { key, locale }) => ({\n        ...messages,\n        [locale]: context(key),\n      }),\n      {}\n    );\n\n  return { context, messages };\n}\n\nconst { context, messages } = loadMessages();\n\n// Instância VueI18n\nconst i18n = new VueI18n({\n  locale: \"en\",\n  messages,\n});\n\n// Iniciando aplicativo\nconst app = new Vue({\n  i18n,\n  // ...\n}).$mount('#app');\n\n// Atualizações automática\nif (module.hot) {\n  module.hot.accept(context.id, () => {\n    const { messages: newMessages } = loadMessages();\n\n    Object.keys(newMessages)\n      .filter((locale) => messages[locale] !== newMessages[locale])\n      .forEach((locale) => {\n        messages[locale] = newMessages[locale];\n        i18n.setLocaleMessage(locale, messages[locale]);\n      });\n  });\n}\n```\n"
  },
  {
    "path": "vuepress/pt/guide/interpolation.md",
    "content": "# Interpolação de componentes\n\n## Exemplo básico\n\n:::tip Suporta a versão\n:new: 7.0+\n:::\n\nÀs vezes, precisamos localizar uma mensagem de um localidade incluída em uma tag ou um componente HTML.\n\nPor exemplo:\n\n```html\n<p>I accept xxx <a href=\"/term\">Terms of Service Agreement</a></p>\n```\n\nNa mensagem acima, se quisermos usar `$t`, provavelmente tentaremos obtê-lo vinculando as seguintes mensagens de localização:\n\n```js\nconst messages = {\n  en: {\n    term1: \"I Accept xxx's\",\n    term2: 'Terms of Service Agreement'\n  }\n}\n```\n\nComo resultado o template terá a seguinte aparência:\n\n```html\n<p>{{ $t('term1') }}<a href=\"/term\">{{ $t('term2') }}</a></p>\n```\n\nO resultado será o seguinte:\n\n```html\n<p>I accept xxx <a href=\"/term\">Terms of Service Agreement</a></p>\n```\n\nIsso é muito complicado, e se você mover a tag `<a>` para a mensagem de localização, você adicionará a possibilidade de uma vulnerabilidade XSS devido ao uso de `v-html=\"$t('term')\"`.\n\nIsso pode ser evitado usando o componente funcional `i18n`.\n\nPor exemplo:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <i18n path=\"term\" tag=\"label\" for=\"tos\">\n    <a :href=\"url\" target=\"_blank\">{{ $t('tos') }}</a>\n  </i18n>\n  <!-- ... -->\n</div>\n```\n\n```js\nconst messages = {\n  en: {\n    tos: 'Term of Service',\n    term: 'I accept xxx {0}.'\n  },\n  pt: {\n    tos: 'Termos de serviço',\n    term: 'Eu concordo xxx {0}.'\n  }\n}\n\nconst i18n = new VueI18n({\n  locale: 'pt',\n  messages\n})\nnew Vue({\n  i18n,\n  data: {\n    url: '/term'\n  }\n}).$mount('#app')\n```\n\nO resultado será o seguinte:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <label for=\"tos\">\n    Eu concordo xxx <a href=\"/term\" target=\"_blank\">Termos de serviço</a>.\n  </label>\n  <!-- ... -->\n</div>\n```\n\nMais detalhes sobre o exemplo acima, veja o [exemplo](https://github.com/kazupon/vue-i18n/tree/dev/examples/interpolation/places)\n\nDescendentes do componente funcional `i18n` interpola mensagens de localização pelo caminho do parâmetro de `path`.\n\nNo exemplo acima:\n:::v-pre\n`<a :href=\"url\" target=\"_blank\">{{ $t('tos') }}</a>`\n:::\ninterpolado com o `term` da mensagem de localização.\n\nNo exemplo acima, a interpolação de componentes usa **formatação de lista**. Os descendentes do componente da função `i18n` são interpolados na ordem em que aparecem.\n\nVocê pode especificar o tipo do elemento raiz usando o parâmetro de entrada `tag`. Se nenhum parâmetro de entrada for especificado, o padrão é `'span'`. Você também pode defini-lo com o valor booleano `false` para inserir os nós filhos diretamente sem criar um elemento raiz.\n\n## Usando a sintaxe de slots\n\n:::tip Suporta a versão\n:new: 8.14+\n:::\n\nÉ mais conveniente usar a sintaxe de slots nomeados.\n\nPor exemplo:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <i18n path=\"info\" tag=\"p\">\n    <template v-slot:limit>\n      <span>{{ changeLimit }}</span>\n    </template>\n    <template v-slot:action>\n      <a :href=\"changeUrl\">{{ $t('change') }}</a>\n    </template>\n  </i18n>\n  <!-- ... -->\n</div>\n```\n\n```js\nconst messages = {\n  en: {\n    info: 'You can {action} until {limit} minutes from departure.',\n    change: 'change your flight',\n    refund: 'refund the ticket'\n  }\n}\n\nconst i18n = new VueI18n({\n  locale: 'en',\n  messages\n})\n\nnew Vue({\n  i18n,\n  data: {\n    changeUrl: '/change',\n    refundUrl: '/refund',\n    changeLimit: 15,\n    refundLimit: 30\n  }\n}).$mount('#app')\n```\n\nO resultado será o seguinte:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <p>\n    You can <a href=\"/change\">change your flight</a> until\n    <span>15</span> minutes from departure.\n  </p>\n  <!-- ... -->\n</div>\n```\n\nDesde o Vue 2.6, você pode usar a seguinte sintaxe de slots nos templates:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <i18n path=\"info\" tag=\"p\">\n    <template #limit>\n      <span>{{ changeLimit }}</span>\n    </template>\n    <template #action>\n      <a :href=\"changeUrl\">{{ $t('change') }}</a>\n    </template>\n  </i18n>\n  <!-- ... -->\n</div>\n```\n\n:::warning Limitação\n:warning: Os parâmetros de entrada do slot não são suportados no componente `i18n`.\n:::\n\n## Usando a sintaxe de place\n\n:::danger Atenção!\nNa próxima versão principal, os parâmetros de entrada `place` e `places` serão descontinuados. Recomendamos usar a sintaxe de slot.\n:::\n\n:::tip Suporta a versão\n:new: 7.2+\n:::\n\n:::warning Nota\n:warning: No componente `i18n`, o conteúdo de texto consistindo apenas em espaços em branco será omitido.\n:::\n\nA formatação nomeada é suportada com a ajuda do atributo `place`.\n\nPor exemplo:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <i18n path=\"info\" tag=\"p\">\n    <span place=\"limit\">{{ changeLimit }}</span>\n    <a place=\"action\" :href=\"changeUrl\">{{ $t('change') }}</a>\n  </i18n>\n  <!-- ... -->\n</div>\n```\n\n```js\nconst messages = {\n  en: {\n    info: 'You can {action} until {limit} minutes from departure.',\n    change: 'change your flight',\n    refund: 'refund the ticket'\n  }\n}\n\nconst i18n = new VueI18n({\n  locale: 'en',\n  messages\n})\nnew Vue({\n  i18n,\n  data: {\n    changeUrl: '/change',\n    refundUrl: '/refund',\n    changeLimit: 15,\n    refundLimit: 30\n  }\n}).$mount('#app')\n```\n\nO resultado será o seguinte:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <p>\n    You can <a href=\"/change\">change your flight</a> until\n    <span>15</span> minutes from departure.\n  </p>\n  <!-- ... -->\n</div>\n```\n\n:::warning Nota\n:warning: Para usar formatação nomeada, todos os descendentes do componente `i18n` devem ter o atributo `place` definido. Caso contrário, a formatação de lista será usada.\n:::\n\nSe você ainda precisa interpolar o conteúdo do texto usando formatação nomeada, você pode definir a propriedade `places` no componente `i18n`.\n\nPor exemplo:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <i18n path=\"info\" tag=\"p\" :places=\"{ limit: refundLimit }\">\n    <a place=\"action\" :href=\"refundUrl\">{{ $t('refund') }}</a>\n  </i18n>\n  <!-- ... -->\n</div>\n```\n\nO resultado será o seguinte:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <p>\n    You can <a href=\"/refund\">refund your ticket</a> until 30 minutes from\n    departure.\n  </p>\n  <!-- ... -->\n</div>\n```\n"
  },
  {
    "path": "vuepress/pt/guide/lazy-loading.md",
    "content": "# Lazy loading traduções\n\nCarregar todos os seus arquivos de tradução de uma vez é exagero e desnecessário.\n\nLazy loading (carregamento lento) ou carregamento assíncrono de arquivos de tradução é muito fácil de implementar usando o Webpack.\n\nSuponde que temos um diretório de projeto com a seguinte estrutura:\n\n```\nnosso-projeto-legal\n-dist\n-src\n--routes\n--store\n--setup\n---i18n-setup.js\n--lang\n---en.js\n---it.js\n```\n\nO diretório `lang` contém todos os arquivos de tradução. Vários arquivos de configuração são agrupados no diretório `setup`, por exemplo, configurações i18n, registro de componentes globais, inicialização de plugin e muito mais.\n\n```js\n// i18n-setup.js\nimport Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport messages from '@/lang/en'\nimport axios from 'axios'\n\nVue.use(VueI18n)\n\nexport const i18n = new VueI18n({\n  locale: 'en', // defenindo localidade\n  fallbackLocale: 'en',\n  messages // definindo mensagens de localização\n})\n\nconst loadedLanguages = ['en'] // nosso idioma padrão que é pré-carregado\n\nfunction setI18nLanguage(lang) {\n  i18n.locale = lang\n  axios.defaults.headers.common['Accept-Language'] = lang\n  document.querySelector('html').setAttribute('lang', lang)\n  return lang\n}\n\nexport function loadLanguageAsync(lang) {\n  // Se a localização for a mesma\n  if (i18n.locale === lang) {\n    return Promise.resolve(setI18nLanguage(lang))\n  }\n\n  // Se a localização já foi carregada\n  if (loadedLanguages.includes(lang)) {\n    return Promise.resolve(setI18nLanguage(lang))\n  }\n\n  // Se a localização ainda não foi carregada\n  return import(\n    /* webpackChunkName: \"lang-[request]\" */ `@/i18n/messages/${lang}.js`\n  ).then(messages => {\n    i18n.setLocaleMessage(lang, messages.default)\n    loadedLanguages.push(lang)\n    return setI18nLanguage(lang)\n  })\n}\n```\n\nEm resumo, estamos criando uma nova instância `VueI18n` como normalmente faríamos. Então estamos criando um array `loadedLanguages` que irá manter o controle de nossos idiomas carregados. A seguir está função `setI18nLanguage` que realmente mudará a localização na instância vueI18n, axios e onde for necessário.\n\nA função `loadLanguageAsync` será usada para alterar o idioma. O carregamento de novos arquivos é feito pela função `import` que o Webpack fornece e nos permite carregar arquivos dinamicamente, e por usar promessas podemos facilmente esperar que o carregamento termine.\n\nVocê pode aprender mais sobre a função de importações dinâmicas na [documentação do Webpack](https://webpack.js.org/guides/code-splitting/#dynamic-imports).\n\nÉ muito fácil usar `loadLanguageAsync`. Por exemplo, no hook beforeEach do vue-router.\n\n```js\nrouter.beforeEach((to, from, next) => {\n  const lang = to.params.lang\n  loadLanguageAsync(lang).then(() => next())\n})\n```\n\nPoderíamos melhorar isso verificando se `lang` é realmente suportado ou não e chamando `reject` para que possamos pegar isso no `beforeEach` parando a transição da rota de navegação.\n"
  },
  {
    "path": "vuepress/pt/guide/locale.md",
    "content": "# Alternando localização\n\nNormalmente a instância raiz do Vue é usada como o ponto de verdade, e todos os componentes filhos usam a propriedade `locale` da classe` VueI18n` passada por referência.\n\nÀs vezes você pode querer alternar dinamicamente os locais. Para fazer isso, você precisa alterar o valor da propriedade `locale` na instância` VueI18n`.\n\n```js\nconst i18n = new VueI18n({\n  locale: 'pt', // definir a localização padrão\n  ...\n})\n\n// Crie uma instância raiz do Vue\nnew Vue({\n  i18n,\n  ...\n}).$mount('#app')\n\n// Mudar para uma localização diferente\ni18n.locale = 'en'\n```\n\nCada componente contém uma instância `VueI18n` que se refere à propriedade `$i18n`, que também pode ser usada para alterar o local.\n\nExemplo:\n\n```vue\n<template>\n  <div class=\"locale-changer\">\n    <select v-model=\"$i18n.locale\">\n      <option v-for=\"(lang, i) in langs\" :key=\"`Lang${i}`\" :value=\"lang\">\n        {{ lang }}\n      </option>\n    </select>\n  </div>\n</template>\n\n<script>\n  export default {\n    name: 'locale-changer',\n    data() {\n      return { langs: ['pt', 'en'] }\n    }\n  }\n</script>\n```\n\n:::warning Aviso\n:warning: As alterações de localização são ignoradas pelos componentes com a opção `sync: false`.\n:::\n\n:::warning Componente vs. escopo root\n:warning: Alterarando `$i18n.locale` dentro do componente não altera a localização root. Se você está contando com a localização root, por exemplo, ao usar [root fallback](./fallback.html), use `$root.$I18n.locale` ao vez de `$i18n.locale`.\n:::\n"
  },
  {
    "path": "vuepress/pt/guide/messages.md",
    "content": "# Sintaxe mensagens locais\n\n## Estrutura\n\nSintaxe local das mensagens:\n\n```typescript\n// Como definição do Flowtype, a sintaxe das mensagens de tradução é semelhante à anotação BNF\ntype LocaleMessages = { [key: Locale]: LocaleMessageObject }\ntype LocaleMessageObject = { [key: Path]: LocaleMessage }\ntype LocaleMessageArray = LocaleMessage[]\ntype MessageContext = {\n  list: (index: number) => mixed,\n  named: (key: string) => mixed,\n  linked: (key: string) => TranslateResult,\n  values: any,\n  path: string,\n  formatter: Formatter,\n  messages: LocaleMessages,\n  locale: Locale\n};\ntype MessageFunction = (ctx: MessageContext) => string;\ntype LocaleMessage = string | MessageFunction | LocaleMessageObject | LocaleMessageArray;\ntype Locale = string\ntype Path = string\n```\n\nCom base na sintaxe acima, você pode configurar a seguinte estrutura de mensagens locais:\n\n```json\n{\n  // localização 'pt'\n  \"pt\": {\n    \"key1\": \"esta é a mensagem 1\", // uso comum\n    \"nested\": {\n      // aninhado\n      \"message1\": \"esta é a mensagem aninhada 1\"\n    },\n    \"errors\": [\n      // array\n      \"esta é a mensagem de código de erro 0\",\n      {\n        // um objeto em array\n        \"internal1\": \"esta é uma mensagem de código de erro interno 1\"\n      },\n      [\n        // array em array\n        \"este é o erro de array aninhado 1\"\n      ]\n    ]\n  },\n  // localização 'en'\n  \"en\": {\n    // ...\n  }\n}\n```\n\nNa estrutura de mensagens locais acima, você pode traduzir usando os caminhos-chave abaixo.\n\n```html\n<div id=\"app\">\n  <!-- uso comum -->\n  <p>{{ $t('key1') }}</p>\n  <!-- aninhado -->\n  <p>{{ $t('nested.message1') }}</p>\n  <!-- array -->\n  <p>{{ $t('errors[0]') }}</p>\n  <!-- um objeto em array -->\n  <p>{{ $t('errors[1].internal1') }}</p>\n  <!-- array em array -->\n  <p>{{ $t('errors[2][0]') }}</p>\n</div>\n```\n\nO resultado será o seguinte:\n\n```html\n<div id=\"app\">\n  <!-- uso comum -->\n  <p>esta é a mensagem 1</p>\n  <!-- aninhado -->\n  <p>esta é a mensagem aninhada 1</p>\n  <!-- array -->\n  <p>esta é a mensagem de código de erro 0</p>\n  <!-- um objeto em array -->\n  <p>esta é uma mensagem de código de erro interno 1</p>\n  <!-- array em array -->\n  <p>este é o erro de array aninhado 1</p>\n</div>\n```\n\n## Mensagens de localização relacionadas\n\nSe houver uma chave de tradução que sempre terá o mesmo texto concreto igual outra, você pode simplesmente criar um link para essa. Para vincular a outra chave de tradução, tudo que você precisa fazer é prefixar seu conteúdo com um sinal `@:` seguido pelo nome completo da chave de tradução incluindo o namespace ao qual deseja vincular.\n\nMensagens de localização a seguir:\n\n```js\nconst messages = {\n  en: {\n    message: {\n      the_world: 'the world',\n      dio: 'DIO:',\n      linked: '@:message.dio @:message.the_world !!!!'\n    }\n  }\n}\n```\n\nTemplate:\n\n```html\n<p>{{ $t('message.linked') }}</p>\n```\n\nO resultado será o seguinte:\n\n```html\n<p>DIO: the world !!!!</p>\n```\n\n### Formatando mensagens de localização relacionadas\n\nSe o idioma distinguir casos de caracteres, você pode precisar controlar o caso das mensagens de localização relacionadas.\nMensagens relacionadas podem ser formatadas com o modificador `@.modifier:key`\n\nMensagens de localização a seguir:\n\n* `upper`: Letras maiúsculas em todos os caracteres na mensagem vinculada.\n* `lower`: Letras minúsculas em todos os caracteres na mensagem vinculada.\n* `capitalize`: Primeiro caractere em maiúsculo da mensagem vinculada.\n\nMensagens de localização:\n\n```js\nconst messages = {\n  en: {\n    message: {\n      homeAddress: 'Home address',\n      missingHomeAddress: 'Please provide @.lower:message.homeAddress'\n    }\n  },\n  pt: {\n    message: {\n      homeAddress: 'Endereço residencial',\n      missingHomeAddress: 'Por favor, providencie o @.lower:message.homeAddress'\n    }\n  }\n}\n```\n\n```html\n<label>{{ $t('message.homeAddress') }}</label>\n\n<p class=\"error\">{{ $t('message.missingHomeAddress') }}</p>\n```\n\nO resultado será o seguinte:\n\n```html\n<label>Endereço residencial</label>\n\n<p class=\"error\">Por favor, providencie o Endereço residencial</p>\n```\n\nVocê pode adicionar modificadores ou sobrescrever os existentes passando as opções de `modificadores` para o construtor `VueI18n`.\n\n```js\nconst i18n = new VueI18n({\n  locale: 'pt',\n  modifiers: {\n    // Adicionando um novo modificador\n    snakeCase: str => str.split(' ').join('-')\n  },\n  messages: {\n    // ...\n  },\n})\n```\n\n### Agrupando com parêntese\n\nUma chave de tradução de uma mensagem também pode ser especificada com  `@:(message.foo.bar.baz)`, onde a referência a outra chave de tradução está entre parêntese `()`.\n\nIsso pode ser necessário se um ponto `.` for exigido após um link para outra mensagem `@:message.something`, que de outra forma seria considerado parte do link.\n\nMensagens de localização:\n\n```js\nconst messages = {\n  en: {\n    message: {\n      dio: 'DIO',\n      linked: \"There's a reason, you lost, @:(message.dio).\"\n    }\n  },\n  pt: {\n    message: {\n      dio: 'DIO',\n      linked: \"Há uma razão pela qual você falhou, @:(message.dio).\"\n    }\n  }\n}\n```\n\nTemplate:\n\n```html\n<p>{{ $t('message.linked') }}</p>\n```\n\nO resultado será o seguinte:\n\n```html\n<p>Há uma razão pela qual você falhou, DIO.</p>\n```\n\n## Mensagem com função\n\nvue-i18n recomenda o uso de strings para formatação de lista ou formatação nomeada como mensagem de localização ao traduzir as mensagens.\n\nNo entanto, existem situações em que, devido à sintaxe complexa da linguagem, todo o poder do JavaScript é necessário. Nesse caso, em vez de mensagens de string, você pode usar **uma mensagem com função**.\n\nA função abaixo retorna uma saudação:\n\n```js\nconst messages = {\n  en: {\n    greeting: (ctx) => 'Hello!'\n  },\n  pt: {\n    greeting: (ctx) => 'Olá!'\n  }\n}\n```\n\nUsar a função da mensagem é fácil! Você só precisa especificar a chave usando `$t` ou `t`:\n\n```html\n<p>{{ $t('greeting') }}</p>\n```\n\nO resultado será o seguinte:\n\n```html\n<p>Olá!</p>\n```\n\nO resultado de retorno da função é usado para a mensagem.\n\n### Formatação nomeada\n\nvue-i18n suporta [formatação nomeada](./formatting.md#named-formatting) como um formato de mensagem baseado em string. vue-i18n interpola os valores dos parâmetros com `$t` ou `t`, e os retorna.\n\nO mesmo pode ser feito com a função da mensagem usando o **contexto de mensagem**:\n\nAqui está o exemplo de saudação:\n\n```js\nconst messages = {\n  en: {\n    greeting: (ctx) => `Hello, ${ctx.named('name')}!`\n  },\n  pt: {\n    greeting: (ctx) => `Olá, ${ctx.named('name')}!`\n  }\n}\n```\n\nTemplate:\n\n```html\n<p>{{ $t('greeting', { name: 'DIO' }) }}</p>\n```\n\nO resultado será o seguinte:\n\n```html\n<p>Olá, DIO!</p>\n```\n\nO contexto da mensagem fornece acesso à função `named`. Você deve especificar a chave especificada para `$t` ou `t`, que resolverá com o valor necessário.\n\n### Formatação de lista\n\nO uso da formatação de lista é semelhante ao formatação nomeada descrito acima.\n\nvue-i18n suporta [formatação de lista](./formatting.md#list-formatting) para mensagens de string. vue-i18n interpola os valores dos parâmetros com `$t` ou `t`, e os retorna.\n\nO mesmo pode ser feito com a função da mensagem usando o **contexto de mensagem**:\n\nAqui está o exemplo de saudação:\n\n```js\nconst messages = {\n  en: {\n    greeting: (ctx) => `Hello, ${ctx.list(0)}!`\n  },\n  pt: {\n    greeting: (ctx) => `Olá, ${ctx.list(0)}!`\n  }\n}\n```\n\nTemplate:\n\n```html\n<p>{{ $t('greeting', ['DIO']) }}</p>\n```\n\nO resultado será o seguinte:\n\n```html\n<p>Olá, DIO!</p>\n```\n\nO contexto da mensagem fornece acesso à função `list`. Você deve especificar a chave especificada para `$t` ou `t`, que resolverá com o valor necessário.\n\n### Limitação\n\nEm uma função para mensagem, os seguintes recursos, que estão disponíveis em uma versão de string, não estarão disponíveis por meio do contexto da mensagem:\n\n- Mensagens de localidade vinculadas\n- Pluralização\n"
  },
  {
    "path": "vuepress/pt/guide/number.md",
    "content": "# Localização de números\n\n:::tip Suporta a versão\n:new: 7.0+\n:::\n\nVocê pode localizar números com seus formatos de definição.\n\nFormato de exemplo para números:\n\n```js\nconst numberFormats = {\n  'en-US': {\n    currency: {\n      style: 'currency',\n      currency: 'USD'\n    }\n  },\n  'pt-BR': {\n    currency: {\n      style: 'currency',\n      currency: 'BRL',\n      currencyDisplay: 'symbol'\n    }\n  }\n}\n```\n\nConforme declarado acima, você pode especificar formatos numéricos (por exemplo, `currency` para moeda) usando opções [ECMA-402 Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat).\n\nDepois disso, para poder usar este formato em mensagens de localização, você precisa definir a opção `numberFormats` do construtor na instância `VueI18n`:\n\n```js\nconst i18n = new VueI18n({\n  numberFormats\n})\n\nnew Vue({\n  i18n\n}).$mount('#app')\n```\n\nTemplate:\n\n```html\n<div id=\"app\">\n  <p>{{ $n(100, 'currency') }}</p>\n  <p>{{ $n(100, 'currency', 'pt-BR') }}</p>\n</div>\n```\n\nO resultado será o seguinte:\n\n```html\n<div id=\"app\">\n  <p>$100.00</p>\n  <p>100,00 ₽</p>\n</div>\n```\n\n## Formatação personalizada\n\n:::tip Suporta a versão\n:new: 8.10+\n:::\n\nO método `$n` retorna o resultado como uma string numérica totalmente formatada que só pode ser usada em sua totalidade. Nos casos em que você precisa estilizar alguma parte de um número formatado (por exemplo, uma parte fracionária), `$n` não será suficiente. Nesses casos, é necessário usar o componente funcional `<i18n-n>` será útil.\n\nCom um conjunto mínimo de propriedades, `<i18n-n>` gera o mesmo resultado que `$n` envolvido em um elemento DOM configurado.\n\nTemplate:\n\n```html\n<div id=\"app\">\n  <i18n-n :value=\"100\"></i18n-n>\n  <i18n-n :value=\"100\" format=\"currency\"></i18n-n>\n  <i18n-n :value=\"100\" format=\"currency\" locale=\"pt-BR\"></i18n-n>\n</div>\n```\n\nO resultado será o seguinte:\n\n```html\n<div id=\"app\">\n  <span>100</span>\n  <span>$100.00</span>\n  <span>R$ 100,00</span>\n</div>\n```\n\nO verdadeiro poder deste componente entra em ação quando é usado com [slots com escopo](https://br.vuejs.org/v2/guide/components-slots.html#Slots-com-Escopo-Definido).\n\nDigamos que haja um requisito para exibir a parte inteira de um número em negrito. Isso pode ser obtido especificando `integer` no elemento do slot com escopo:\n\n```html\n<i18n-n :value=\"100\" format=\"currency\">\n  <span v-slot:integer=\"slotProps\" styles=\"font-weight: bold\">\n    {{ slotProps.integer }}\n  </span>\n</i18n-n>\n```\n\nO resultado será o seguinte:\n\n```html\n<span>$<span styles=\"font-weight: bold\">100</span>.00</span>\n```\n\nÉ possível especificar vários slots com escopo ao mesmo tempo:\n\n```html\n<i18n-n :value=\"1234\" :format=\"{ key: 'currency', currency: 'EUR' }\">\n  <span v-slot:currency=\"slotProps\" styles=\"color: green\">\n    {{ slotProps.currency }}\n  </span>\n  <span v-slot:integer=\"slotProps\" styles=\"font-weight: bold\">\n    {{ slotProps.integer }}\n  </span>\n  <span v-slot:group=\"slotProps\" styles=\"font-weight: bold\">\n    {{ slotProps.group }}\n  </span>\n  <span v-slot:fraction=\"slotProps\" styles=\"font-size: small\">\n    {{ slotProps.fraction }}\n  </span>\n</i18n-n>\n```\n\n(O HTML de resultado abaixo é formatado para melhor legibilidade)\n\n```html\n<span>\n  <span styles=\"color: green\">€</span>\n  <span styles=\"font-weight: bold\">1</span>\n  <span styles=\"font-weight: bold\">,</span>\n  <span styles=\"font-weight: bold\">234</span>\n  <span styles=\"font-size: small\">00</span>\n</span>\n```\n\nVocê pode especificar o tipo do elemento raiz usando o parâmetro de entrada `tag`. Se nenhum parâmetro de entrada for especificado, o padrão é `'span'`. Você também pode defini-lo com o valor booleano `false` para inserir os nós filhos diretamente sem criar um elemento raiz.\n\nA lista completa dos slots de escopo suportados, bem como outras propriedades `<i18n-n>`, pode ser encontradas [na página da API](../api/readme.md#i18n-n-functional-component).\n"
  },
  {
    "path": "vuepress/pt/guide/pluralization.md",
    "content": "# Pluralização\n\nVocê pode usar pluralização para mensagens traduzidas. Para fazer isso, precisa definir a localidade e especificar as strings de tradução para os diferentes casos por meio do separador `|`.\n\n*Seu template precisará usar `$tc()` em vez de `$t()`.*\n\nMensagens locais abaixo:\n\n```js\nconst messages = {\n  en: {\n    car: 'car | cars',\n    apple: 'no apples | one apple | {count} apples'\n  },\n  pt: {\n    car: 'carro | carros',\n    apple: 'sem maçãs | uma maçã | {count} maçãs'\n  }\n}\n```\n\nTemplate:\n\n```html\n<p>{{ $tc('car', 1) }}</p>\n<p>{{ $tc('car', 2) }}</p>\n\n<p>{{ $tc('apple', 0) }}</p>\n<p>{{ $tc('apple', 1) }}</p>\n<p>{{ $tc('apple', 10, { count: 10 }) }}</p>\n```\n\nO resultado será o seguinte:\n\n```html\n<p>carro</p>\n<p>carros</p>\n\n<p>sem maçãs</p>\n<p>uma maçã</p>\n<p>10 maçãs</p>\n```\n\n## Acessando o número por meio do argumento predefinido\n\nNão há necessidade de passar explicitamente o número para pluralização. Em mensagens de localização, um número está disponível através dos argumentos nomeados `{count}` e/ou `{n}`. Você pode substituí-los, se desejar.\n\nMensagens locais abaixo:\n\n```js\nconst messages = {\n  en: {\n    apple: 'no apples | one apple | {count} apples',\n    banana: 'no bananas | {n} banana | {n} bananas'\n  },\n  pt: {\n    apple: 'sem maçãs | uma maçã | {count} maçãs'\n    banana: 'sem bananas | {n} banana | {n} bananas'\n  }\n}\n```\n\nTemplate:\n\n```html\n<p>{{ $tc('apple', 10, { count: 10 }) }}</p>\n<p>{{ $tc('apple', 10) }}</p>\n\n<p>{{ $tc('banana', 1, { n: 1 }) }}</p>\n<p>{{ $tc('banana', 1) }}</p>\n<p>{{ $tc('banana', 100, { n: 'Muitas' }) }}</p>\n```\n\nO resultado será o seguinte:\n\n```html\n<p>10 maçãs</p>\n<p>10 maçãs</p>\n\n<p>1 banana</p>\n<p>1 banana</p>\n<p>Muitas bananas</p>\n```\n\n## Pluralização personalizadas\n\nEssa pluralização, entretanto, não se aplica a todas as línguas (as línguas eslavas, por exemplo, têm regras de pluralização diferentes).\n\nPara implementar essas regras, você pode passar um objeto `pluralizationRules` opcional para as opções do construtor `VueI18n`.\n\nUm exemplo simplificado para idiomas eslavos (russo, ucraniano e outros):\n```js\nnew VueI18n({\n  // Key - idioma para usar a regra, `'ru'`, neste caso\n  // Value - função para escolher a forma plural correta\n  pluralizationRules: {\n    /**\n     * @param choice {number} um índice de escolha dado pela entrada de $tc: `$tc('path.to.rule', choiceIndex)`\n     * @param choicesLength {number} quantidade geral de opções disponíveis\n     * @returns índice final para selecionar as palavras no plural\n     */\n    'ru': function(choice, choicesLength) {\n      // this === Instância VueI18n, então a propriedade locale também existe aqui\n\n      if (choice === 0) {\n        return 0;\n      }\n\n      const teen = choice > 10 && choice < 20;\n      const endsWithOne = choice % 10 === 1;\n\n      if (choicesLength < 4) {\n        return (!teen && endsWithOne) ? 1 : 2;\n      }\n      if (!teen && endsWithOne) {\n        return 1;\n      }\n      if (!teen && choice % 10 >= 2 && choice % 10 <= 4) {\n        return 2;\n      }\n\n      return (choicesLength < 4) ? 2 : 3;\n    }\n  }\n})\n```\n\nEssa implementação permitirá que você use:\n\n```js\nconst messages = {\n  ru: {\n    car: '0 машин | {n} машина | {n} машины | {n} машин',\n    banana: 'нет бананов | {n} банан | {n} банана | {n} бананов'\n  }\n}\n```\n\nOnde o formato é `0 coisas | número de itens termina em 1 | o número de coisas que termina em 2-4 | o número de coisas que termina com 5-9, 0 e o número coisas que termina de 11 a 19`.\nP.S. A pluralização eslava é complexa, você pode ler mais sobre isso [aqui](http://www.russianlessons.net/lessons/lesson11_main.php).\n\nNo template, você ainda precisa usar `$tc()` em vez de `$t()`:\n\n```html\n<p>{{ $tc('car', 1) }}</p>\n<p>{{ $tc('car', 2) }}</p>\n<p>{{ $tc('car', 4) }}</p>\n<p>{{ $tc('car', 12) }}</p>\n<p>{{ $tc('car', 21) }}</p>\n\n<p>{{ $tc('banana', 0) }}</p>\n<p>{{ $tc('banana', 4) }}</p>\n<p>{{ $tc('banana', 11) }}</p>\n<p>{{ $tc('banana', 31) }}</p>\n```\n\nO resultado será o seguinte:\n\n```html\n<p>1 машина</p>\n<p>2 машины</p>\n<p>4 машины</p>\n<p>12 машин</p>\n<p>21 машина</p>\n\n<p>нет бананов</p>\n<p>4 банана</p>\n<p>11 бананов</p>\n<p>31 банан</p>\n```\n\n### Pluralização padrão\n\nSe nenhuma regra de pluralização for fornecida para a localidade em uso, a regra [padrão](#pluralizacao) do idioma inglês será usada.\n"
  },
  {
    "path": "vuepress/pt/guide/sfc.md",
    "content": "# Componentes de arquivo único\n\n## Uso básico\n\nSe você estiver construindo um componente ou aplicativo Vue usando componentes de arquivo único, você pode gerenciar as mensagens de localização usando um bloco `i18n` personalizado.\n\nCódigo de componente com [exemplo de componentes de arquivo único](https://github.com/kazupon/vue-i18n/tree/dev/examples/sfc):\n\n```vue\n<i18n>\n{\n  \"en\": {\n    \"hello\": \"Hello World!\"\n  },\n  \"pt\": {\n    \"hello\": \"Olá Mundo!\"\n  }\n}\n</i18n>\n\n<template>\n  <div id=\"app\">\n    <label for=\"locale\">Idiomas</label>\n    <select v-model=\"locale\">\n      <option>en</option>\n      <option>pt</option>\n    </select>\n    <p>Mensagem: {{ $t('hello') }}</p>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'app',\n  data () {\n    this.$i18n.locale = 'pt';\n    return { locale: 'pt' }\n  },\n  watch: {\n    locale (val) {\n      this.$i18n.locale = val\n    }\n  }\n}\n</script>\n```\n\n## Instalação vue-i18n-loader\n\nVocê precisa instalar `vue-loader` e `vue-i18n-loader` devido ao uso de blocos personalizados `<i18n>`. Embora [vue-loader](https://github.com/vuejs/vue-loader) provavelmente já seja usado em seu projeto se você estiver trabalhando com componentes de arquivo único, mas você vai precisar instalar [vue-i18n-loader](https://github.com/kazupon/vue-i18n-loader) adicionalmente:\n\n```bash\nnpm i --save-dev @kazupon/vue-i18n-loader\n```\n\n## Webpack\n\nO Webpack requer a seguinte configuração:\n\nPara vue-loader v15 ou posterior:\n\n```js\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader'\n      },\n      {\n        resourceQuery: /blockType=i18n/,\n        type: 'javascript/auto',\n        loader: '@kazupon/vue-i18n-loader'\n      }\n      // ...\n    ]\n  }\n  // ...\n}\n```\n\nPara vue-loader v14:\n\n```js\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader',\n        options: {\n          loaders: {\n            // você precisa especificar a chave do carregador `i18n` com o `vue-i18n-loader`\n            // (https://github.com/kazupon/vue-i18n-loader)\n            i18n: '@kazupon/vue-i18n-loader'\n          }\n        }\n      }\n      // ...\n    ]\n  }\n  // ...\n}\n```\n\n## Vue CLI 3.0\n\n[Vue CLI 3.0](https://github.com/vuejs/vue-cli) ocultar a configuração do Webpack, portanto, para adicionar suporte para tags `<i18n>` em componentes de arquivo único, precisamos modificar a configuração existente.\n\nPara fazer isso, temos que criar um `vue.config.js` na raiz do nosso projeto. Depois de fazer isso, devemos incluir o seguinte código:\n\nPara vue-loader v15 ou posterior:\n\n```js\nmodule.exports = {\n  chainWebpack: config => {\n    config.module\n      .rule('i18n')\n      .resourceQuery(/blockType=i18n/)\n      .type('javascript/auto')\n      .use('i18n')\n        .loader('@kazupon/vue-i18n-loader')\n        .end()\n  }\n}\n```\n\nPara vue-loader v14:\n\n```js\nconst merge = require('deepmerge')\n\nmodule.exports = {\n  chainWebpack: config => {\n    config.module\n      .rule('vue')\n      .use('vue-loader')\n      .tap(options =>\n        merge(options, {\n          loaders: {\n            i18n: '@kazupon/vue-i18n-loader'\n          }\n        })\n      )\n  }\n}\n```\n\n_Não se esqueça de instalar o [deepmerge](https://github.com/KyleAMathews/deepmerge)! (`npm i deepmerge -D` ou `yarn add deepmerge -D`)_\n\nVocê pode aprender mais sobre as possibilidades de modificar a configuração do Webpack existente [neste guia](https://cli.vuejs.org/guide/webpack.html).\n\n## Laravel-Mix\n\nPara Laravel-mix 4 com vue-loader v15 ou posterior:\n\n```js\n// Estenda o Mix usando o método \"i18n\", que carrega o vue-i18n-loader\nmix.extend( 'i18n', new class {\n        webpackRules() {\n            return [\n                {\n                    resourceQuery: /blockType=i18n/,\n                    type:          'javascript/auto',\n                    loader:        '@kazupon/vue-i18n-loader',\n                },\n            ];\n        }\n    }(),\n);\n\n// Certifique-se de chamar .i18n() para carregar o loader antes do .js(..., ...)\nmix.i18n()\n   .js( 'resources/js/App.js', 'public/js/app.js' )\n   ...\n```\n\npara Laravel-mix 2 com vue-loader v14:\n\nNo Laravel-mix, começando na versão [V2.1](https://github.com/JeffreyWay/laravel-mix/releases/tag/v2.1), você pode adicionar regras personalizadas usando `mix.extend()`. O Laravel-mix já possui suas próprias regras para lidar com arquivos `.vue`. Para adicionar `vue-i18n-loader`, no arquivo `webpack.mix.js` adicione o seguinte código:\n\n```js\n// O código a seguir injetará o i18n Kazupon/vue-18-loader como o loader de arquivos .vue\nmix.extend( 'i18n', function( webpackConfig, ...args ) {\n    webpackConfig.module.rules.forEach( ( module ) => {\n        // Procure o componente \"vue-loader\", que processa os arquivos .vue\n        if( module.loader !== 'vue-loader' ) {\n            return;\n        }\n\n        // Neste módulo, adicione o vue-i18n-loader para a tag i18n.\n        module.options.loaders.i18n = '@kazupon/vue-i18n-loader';\n    } );\n} );\n\n// Certifique-se de chamar .i18n() para carregar o loader antes de .js(..., ...)\nmix.i18n()\n   .js( 'resources/assets/js/App.js', 'public/js/app.js' )\n   ...\n```\n\n## Carregando YAML\n\nOs blocos personalizados `i18n` podem ser especificados no formato `JSON` ou `YAML` usando o recurso de pré-carregador do `vue-loader`.\n\nOs blocos personalizados `i18n` no formato `YAML`:\n\n```vue\n<i18n>\n  en:\n    hello: \"Hello World!\"\n  pt:\n    hello: \"Olá Mundo!\"\n</i18n>\n```\n\nConfiguração do Webpack:\n\nPara vue-loader v15 ou posterior:\n\n```js\n// Vue CLI 3.0\nmodule.exports = {\n  chainWebpack: config => {\n    config.module\n      .rule('i18n')\n      .resourceQuery(/blockType=i18n/)\n      .type('javascript/auto')\n      .use('i18n')\n        .loader('@kazupon/vue-i18n-loader')\n        .end()\n      .use('yaml')\n        .loader('yaml-loader')\n        .end()\n  }\n}\n```\n\nPara vue-loader v14:\n\n```js\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader',\n        options: {\n          preLoaders: {\n            i18n: 'yaml-loader'\n          },\n          loaders: {\n            i18n: '@kazupon/vue-i18n-loader'\n          }\n        }\n      }\n      // ...\n    ]\n  }\n  // ...\n}\n```\n\n## Vários blocos personalizados\n\nVocê pode usar mensagens de localização com vários blocos personalizados `i18n`.\n\n```vue\n<i18n src=\"./common/locales.json\"></i18n>\n<i18n>\n  {\n    \"en\": {\n      \"hello\": \"Hello World!\"\n    },\n    \"pt\": {\n      \"hello\": \"Olá Mundo!\"\n    }\n  }\n</i18n>\n```\n\nNo exemplo acima, o primeiro bloco personalizado carrega as mensagens de localização genérica usando o atributo `src`, o segundo bloco personalizado carrega as mensagens de localização que são definidas apenas neste componente de arquivo único. Todos eles serão mesclados com mensagens de localização de componentes.\n\nDesta forma, vários blocos personalizados são úteis quando usados ​​como módulos.\n\n## Estilos Locais\n\nAo usar `vue-i18n` com estilos locais `style scoped`, é importante lembrar de usar [deep selector](https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors) para estilizar o elemento __*dentro*__ da string de tradução.\n\nPor exemplo:\n\n__Quando a tradução contém apenas texto__ (funciona sem deep selector)\n\n```vue\n<i18n>\n  {\n    \"en\": {\n      \"hello\": \"Hello World!\"\n    },\n    \"pt\": {\n      \"hello\": \"Olá Mundo!\"\n    }\n  }\n</i18n>\n\n<template>\n  <div class=\"parent\">\n    <p>Mensagem: {{ $t('hello') }}</p>\n  </div>\n</template>\n\n<!-- Vai funcionar por exemplo -->\n<style scoped>\n  .parent p {\n    color: #42b883;\n  }\n</style>\n```\n\n__Tradução que contém elemento HTML__ (deve usar deep selector)\n\n```vue\n<i18n>\n  {\n    \"en\": {\n      \"hello\": \"Hello <span>World!</span>\"\n    },\n    \"pt\": {\n      \"hello\": \"Olá <span>Mundo!</span>\"\n    }\n  }\n</i18n>\n\n<template>\n  <div class=\"parent\">\n    <p v-html=\"$t('hello')\"></p>\n  </div>\n</template>\n\n<!-- Não vai funcionar por exemplo -->\n<style scoped>\n  .parent p {\n    color: #42b883;\n  }\n\n  .parent p span {\n    color: red;\n  }\n</style>\n\n<!-- Vai funcionar por exemplo >>> -->\n<style scoped>\n  .parent p {\n    color: #42b883;\n  }\n\n  .parent p >>> span {\n    color: red;\n  }\n</style>\n\n<!-- Vai funcionar por exemplo /deep/ -->\n<style scoped>\n  .parent p {\n    color: #42b883;\n  }\n\n  .parent p /deep/ span {\n    color: red;\n  }\n</style>\n\n<!-- Vai funcionar por exemplo ::v-deep -->\n<style scoped>\n  .parent p {\n    color: #42b883;\n  }\n\n  ::v-deep .parent p span {\n    color: red;\n  }\n</style>\n```\n\n## Blocos personalizados em componente funcional\n\nSe os componentes de arquivo único têm o template usando um componente funcional, e você definiu blocos personalizados `i18n`, observe que você não pode localizar usando mensagens de local.\n\nPor exemplo, o código a seguir não pode usar mensagens de localização do bloco `i18n`.\n\n```vue\n<i18n>\n  {\n    \"en\": {\n      \"hello\": \"Hello World\"\n    },\n    \"pt\": {\n      \"hello\": \"Olá Mundo\"\n    }\n  }\n</i18n>\n\n<template functional>\n  <!-- Mensagem de localização 'hello' na instância pai -->\n  <p>{{ parent.$t('hello') }}</p>\n</template>\n```\n"
  },
  {
    "path": "vuepress/pt/guide/tooling.md",
    "content": "# Ferramentas\n\nPara suportar os aplicativos i18n do Vue, algumas ferramentas são fornecidas oficialmente.\n\nExistem também ferramentas de terceiros que integram o Vue I18n.\n\n## Ferramentas oficiais\n\n### Plugin para Vue CLI\n\n[vue-cli-plugin-i18n](https://github.com/kazupon/vue-cli-plugin-i18n) é o plugin oficial para o Vue CLI.\n\nCom este plugin, você pode configurar um ambiente i18n para seu aplicativo Vue e oferecer suporte ao ambiente de desenvolvimento i18n.\n\n### Módulo para Nuxt\n\n[nuxt-i18n](https://github.com/nuxt-community/nuxt-i18n/) é o módulo correspondente para Nuxt.js.\n\n### Loader para Webpack\n\n[vue-i18n-loader](https://github.com/kazupon/vue-i18n-loader) — é o loader para webpack oficial.\n\nCom este loader é possível usar blocos `i18n` personalizados em componentes de arquivo único.\n\nPara obter mais informações sobre blocos `i18n` personalizados, consulte [Componentes de arquivo único](./sfc.md)\n\n### Plugin para ESLint\n\n[eslint-plugin-vue-i18n](https://intlify.github.io/eslint-plugin-vue-i18n/) - Plug-in ESLint para Vue I18n.\n\nPermite que você integre facilmente alguns recursos de localização do lint ao seu aplicativo Vue.js.\n\n### Extensões\n\n[vue-i18n-extensions](https://github.com/kazupon/vue-i18n-extensions) fornece algumas extensões para Vue I18n.\n\nVocê pode usar esta extensão para habilitar o SSR e melhorar o desempenho do i18n.\n\n## Ferramentas de terceiros\n\n### BabelEdit\n\n[BabelEdit](https://www.codeandweb.com/babeledit) é um editor de tradução para aplicativos da web.\n\nO BabelEdit pode traduzir arquivos `json` e também pode trabalhar com blocos personalizados `i18n` de componentes de arquivo único.\n\nMais informações sobre o BabelEdit podem ser encontradas na página de [introdução](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-vue-app-with-vue-i18n).\n\n### i18n Ally\n\n[i18n Ally] (https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally) é uma extensão i18n para VSCode.\n\ni18n Ally oferece um DX(Experiência do desenvolvedor) incrível para o desenvolvimento de i18n.\n\nVocê pode aprender mais sobre a extensão i18n Ally em [README](https://github.com/antfu/i18n-ally/blob/master/README.md).\n\n### i18nPlugin (plataforma intellij)\n\n[i18nPlugin](https://github.com/nyavro/i18nPlugin) — Plugin de suporte para idea Intellij i18next ([Página do plugin Jetbrains](https://plugins.jetbrains.com/plugin/12981-i18n-support)).\n\nPlugin para i18n typescript/javascript/PHP. Suporta vue-i18n. Para habilitar o suporte a vue-i18n vá em configurações -> Ferramentas -> Configuração do plugin i18n e selecione \"Vue-i18n\". É necessário instalar os diretórios com os arquivos de tradução (tradução por padrão).\n\n### vue-i18n-extract\n\n[vue-i18n-extract](https://github.com/pixari/vue-i18n-extract) faz uma análise estática de um projeto Vue.js com base em vue-i18n e relata as seguintes informações:\n\n- lista de todas as **chaves vue-i18n não utilizadas** (entradas encontradas nos arquivos de idioma, mas não utilizadas no projeto)\n- lista de todas as **chaves ausentes** (entradas encontradas no projeto, mas não nos arquivos de idioma)\n\nÉ possível mostrar a saída no console ou gravá-la em um arquivo json.\n\nAs chaves ausentes também podem ser adicionadas automaticamente aos arquivos de tradução fornecidos.\n"
  },
  {
    "path": "vuepress/pt/installation.md",
    "content": "# Instalação\n\n## Nota de compatibilidade\n\n- Vue.js versões `2.0.0`+\n\n## Download direto / CDN\n\n<https://unpkg.com/vue-i18n/dist/vue-i18n>\n\nO serviço [unpkg.com](https://unpkg.com) fornece links CDN com base em pacotes NPM. O link acima sempre apontará para a versão mais recente do NPM. Você pode usar uma versão ou tag específica usando um URL como este <https://unpkg.com/vue-i18n@8.17.5/dist/vue-i18n.js>\n\nAo conectar o vue-i18n após o Vue, o plug-in será instalado automaticamente:\n\n```html\n<script src=\"https://unpkg.com/vue/dist/vue.js\"></script>\n<script src=\"https://unpkg.com/vue-i18n/dist/vue-i18n.js\"></script>\n```\n\n## NPM\n\n```bash\nnpm install vue-i18n\n```\n\n## Yarn\n\n```bash\nyarn add vue-i18n\n```\n\nAo usar o sistema de módulos, você deve definir explicitamente `vue-i18n`\nvia `Vue.use()`:\n\n```js\nimport Vue from 'vue'\nimport VueI18n from 'vue-i18n'\n\nVue.use(VueI18n)\n```\n\nVocê não precisa fazer isso ao usar tags de script globais `<script>`.\n\n## Vue CLI 3.x\n\n```bash\nvue add i18n\n```\n\nO Vue CLI 3.x deve ser instalado previamente, podendo instalá-lo com o próximo comando:\n\n```bash\nnpm install @vue/cli -g\n```\n\n## Dev Build\n\nSe você precisa utilizar a última compilação de dev, precisará clonar o repositório do GitHub e compilar `vue-i18n` você mesmo.\n\n```bash\ngit clone https://github.com/kazupon/vue-i18n.git node_modules/vue-i18n\ncd node_modules/vue-i18n\nnpm install # ou `yarn`\nnpm run build  # ou `yarn run build`\n```\n\n## Explicação sobre diferentes versões\n\n[Dentro do diretório dist/ do pacote NPM](https://cdn.jsdelivr.net/npm/vue-i18n/dist/) você encontrará muitas compilações diferentes do VueI18n. Aqui está uma visão geral da diferença entre eles:\n\n- UMD: `vue-i18n.js`\n- CommonJS: `vue-i18n.common.js`\n- ES Module para empacotadores: `vue-i18n.esm.js`\n- ES Module para navegadores: `vue-i18n.esm.browser.js`\n\n### Termos\n\n- **[UMD](https://github.com/umdjs/umd)**: As compilações UMD podem ser usadas diretamente no navegador através de uma tag `<script>`. O arquivo padrão do Unpkg CDN em [https://unpkg.com/vue-i18n](https://unpkg.com/vue-i18n) é a versão UMD compilada (`vue-i18n.js`).\n\n- **[CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1)**: As compilações do CommonJS são destinadas ao uso com sistemas de compilação mais antigos, como [browserify](http://browserify.org/) ou [webpack 1](https://webpack.github.io). O arquivo padrão para esses sistemas de compilação (`pkg.main`) é a compilação CommonJS (`vue-i18n.common.js`).\n\n- **[ES Module](http://exploringjs.com/es6/ch_modules.html)**: VueI18n desde a versão 8.11 fornece duas compilações de Módulos ES (ESM):\n\n  - ESM para sistemas de compilação: projetado para uso com sistemas de compilação modernos, como [webpack 2](https://webpack.js.org) ou [Rollup](https://rollupjs.org/). O formato ESM é projetado para análise estática para que os sistemas de construção possam realizar uma \"agitação de árvore\" e remover o código não utilizado no pacote final. O arquivo padrão para esses sistemas de construção (`pkg.module`) é a construção do Módulo ES somente em tempo de execução (`vue-i18n.esm.js`).\n  - ESM para navegadores (apenas para 8.11+, `vue-i18n.esm.browser.js`): destinado a importações diretas em navegadores modernos usando a tag `<script type=\"module\">`.\n"
  },
  {
    "path": "vuepress/pt/introduction.md",
    "content": "# Introdução\n\n:::warning Atenção\n:warning: Documentação para Vue I18n v6.0 ou posterior. Se você estiver usando e procurando por documentação para v5.x, consulte [Legado](./legacy/).\n:::\n\nVue I18n é um plugin para internacionalização em Vue.js. Ele integra facilmente recursos de localização ao seu aplicativo Vue.js.\n\nÉ melhor começar o estudo pela a seção [Iniciando](./started.md)\n\n## Patrocinadores\n\n### 🥇 Ouro\n\n<p style=\"text-align: center;\">\n  <a\n    href=\"https://nuxtjs.org/\"\n    style=\"display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      src=\"/vue-i18n/patrons/nuxt.png\"\n      alt=\"Nuxt.js\"\n    />\n  </a>\n</p>\n\n### 🥈 Prata\n\n<p style=\"text-align: center;\">\n  <a\n    href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\"\n    style=\"max-width: 320px; width: 100%; display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      src=\"/vue-i18n/patrons/babeledit.png\"\n      alt=\"Editor de tradução BabelEdit para aplicativos (web)\"\n    />\n  </a>\n</p>\n\n### 🥉 Bronze\n\n<p style=\"text-align: center;\">\n  <a\n    href=\"https://zenarchitects.co.jp/\"\n    style=\"max-width: 200px; width: 100%; height: 80px; display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      src=\"/vue-i18n/patrons/zenarchitects.png\"\n      alt=\"zenarchitects\"\n    />\n  </a>\n  <a\n    href=\"https://www.sendcloud.com/\"\n    style=\"max-width: 200px; width: 100%; height: 80px; display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      src=\"/vue-i18n/patrons/sendcloud.svg\"\n      alt=\"sendcloud\"\n    />\n  </a>\n</p>\n\n## Ajude no Patreon\n\nSua empresa usa vue-i18n ou vue-cli-plugin-i18n para criar aplicativos incríveis? Junte-se a outros patrocinadores ou torne-se um patrocinador para ver seu logotipo na documentação!\nO suporte do Patreon permite ao autor que trabalhe menos e desenvolva mais em software de código aberto como o vue-i18n!\nObrigado!\n\n<p style=\"text-align: center;\">\n  <iframe src=\"https://github.com/sponsors/kazupon/card\" title=\"Sponsor kazupon\" height=\"225\" width=\"600\" style=\"border: 0; margin: 24px\"></iframe>\n</p>\n"
  },
  {
    "path": "vuepress/pt/started.md",
    "content": "# Iniciando\n\n:::tip NOTA\nNeste guia usamos [ES2015](https://github.com/lukehoban/es6features) nos exemplos de código.\n:::\n\n## HTML\n\n```html\n<script src=\"https://unpkg.com/vue/dist/vue.js\"></script>\n<script src=\"https://unpkg.com/vue-i18n/dist/vue-i18n.js\"></script>\n\n<div id=\"app\">\n  <p>{{ $t(\"message.hello\") }}</p>\n</div>\n```\n\n## JavaScript\n\n```js\n// Se você usa um sistema de módulos (p. ex. via vue-cli)\n// Importe o Vue e VueI18n assim utilize-o Vue.use(VueI18n).\n//\n// import Vue from 'vue'\n// import VueI18n from 'vue-i18n'\n//\n// Vue.use(VueI18n)\n\n// Mensagens traduzidas de suas localidades\nconst messages = {\n  en: {\n    message: {\n      hello: 'Hello World'\n    }\n  },\n  pt: {\n    message: {\n      hello: 'Olá Mundo'\n    }\n  }\n}\n\n// Crie uma instância do VueI18n com opções\nconst i18n = new VueI18n({\n  locale: 'pt', // Defina uma localidade\n  messages, // Defina as mensagens\n})\n\n\n// Crie uma instância Vue com a opção `i18n`\nnew Vue({ i18n }).$mount('#app')\n\n// Pronto agora o aplicativo foi iniciado!\n```\n\nO resultado será o seguinte:\n\n```html\n<div id=\"#app\">\n  <p>Olá Mundo</p>\n</div>\n```\n"
  },
  {
    "path": "vuepress/ru/README.md",
    "content": "---\nhome: true\nheroImage: ./../vue-i18n-logo.png\nactionText: Введение →\nactionLink: introduction.md\nfooter: MIT Licensed | Copyright © 2020 kazuya kawaguchi\n---\n\n<div class=\"sponsors\" style=\"text-align:center; padding: 0 0 24px 0;\">\n  <h4>🥇 Золотые спонсоры</h4>\n  <a\n    href=\"https://nuxtjs.org/\"\n    style=\"display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      src=\"/vue-i18n/patrons/nuxt.png\"\n      alt=\"Nuxt.js\"\n    />\n  </a>\n  <h4>🥈 Серебряные спонсоры</h4>\n  <a\n    href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\" target=\"_blank\"\n    style=\"max-width: 320px; width: 100%; display: inline-block; vertical-align: middle;\"\n  >\n    <img\n      src=\"/vue-i18n/patrons/babeledit.png\"\n      alt=\"Редактор переводов BabelEdit для приложений (веб-приложений)\"\n    />\n  </a>\n  <h4 style=\"padding: 12px 0 0 0;\">🥉 Бронзовые спонсоры</h4>\n  <a\n    href=\"https://zenarchitects.co.jp/\"\n    style=\"max-width: 200px; width: 100%; height: 80px; display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      src=\"/vue-i18n/patrons/zenarchitects.png\"\n      alt=\"zenarchitects\"\n    />\n  </a>\n  <a\n    href=\"https://www.sendcloud.com/\"\n    style=\"max-width: 200px; width: 100%; height: 80px; display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      src=\"/vue-i18n/patrons/sendcloud.svg\"\n      alt=\"sendcloud\"\n    />\n  </a>\n</div>\n\n<div class=\"github\" style=\"text-align:center; padding: 0 0 24px 0;\">\n  <sponsor-button />\n</div>\n\n<div class=\"features\">\n  <div class=\"feature\">\n    <h2>Простой</h2>\n    <p>Позволяет легко добавить интернационализацию в приложение с помощью простого API</p>\n  </div>\n  <div class=\"feature\">\n    <h2>Функциональный</h2>\n    <p>В дополнение к переводам, поддерживает плюрализацию, локализацию для чисел, дат ... и т.д.</p>\n  </div>\n  <div class=\"feature\">\n    <h2>Ориентированный на компоненты</h2>\n    <p>Можно управлять сообщениями локализации в однофайловых компонентах</p>\n  </div>\n</div>\n"
  },
  {
    "path": "vuepress/ru/api/README.md",
    "content": "---\nsidebar: auto\n---\n\n# Справочник API\n\n## Расширение прототипа Vue\n\n### Опции конструктора Vue\n\n#### i18n\n\n* **Тип:** `I18nOptions`\n\nОпция локализации на основе компонентов.\n\n* **См. также:** Опции конструктора класса `VueI18n`\n\n### Внедряемые методы\n\n#### $t\n\n* **Аргументы:**\n\n  * `{Path} key`: обязательный\n  * `{Locale} locale`: опционально\n  * `{Array | Object} values`: опционально\n\n* **Возвращает:** `TranslateResult`\n\nПолучение переведённого сообщения по ключу `key`. Сообщения локализации в компоненте имеют приоритет над глобальными сообщениями. Если сообщений локализации в компоненте нет, то локализация осуществляется с помощью глобальных сообщений локализации. Если указана `locale`, то используются сообщения локализации из `locale`. Если был указан `key` именованного формата / формата списков сообщений локализации, то необходимо указывать также `values`. Подробнее про значения `values` можно изучить в разделе [Формат сообщений локализации](../guide/formatting.md).\n\n:::danger Совет\nОбратите внимание, что в хуках жизненного цикла контекст должен быть экземпляром компонента (например в опции `data`, `const $t = this.$t.bind(this)`).\n:::\n\n#### $tc\n\n* **Аргументы:**\n\n  * `{Path} key`: обязательный\n  * `{number} choice`: опционально, по умолчанию `1`\n  * `{Locale} locale`: опционально\n  * `{string | Array | Object} values`: опционально\n\n* **Возвращает:** `TranslateResult`\n\nПолучение переведённого сообщения по ключу `key` с использованием плюрализации. Сообщения локализации компонента имеют приоритет над глобальными сообщениями. Если сообщений локализации в компоненте нет, то локализация осуществляется с помощью глобальных сообщений локализации. Если указана `locale`, то используются сообщения локализации из `locale`. Если указано строковое значение для `values`, то локализация выполняется для этого значения. Если указано значение Array или Object в `values`, то необходимо указывать с `values` из $t.\n\nЕсли вам не подходит реализация плюрализации по умолчанию, смотрите [pluralization rules в опциях конструктора](#pluralizationrules) и [пользовательскую плюрализацию](../guide/pluralization.md).\n\n:::danger Совет\nОбратите внимание, что в хуках жизненного цикла контекст должен быть экземпляром компонента (например в опции `data`, `const $tc = this.$tc.bind(this)`).\n:::\n\n#### $te\n\n* **Аргументы:**\n\n  * `{Path} key`: обязательный\n  * `{Locale} locale`: опционально\n\n* **Возвращает:** `boolean`\n\nПроверяет существует ли перевод для ключа в сообщениях локализации. Если нет сообщений локализации в компоненте, то проверяет в глобальных сообщениях локализации. Если указана `locale`, то проверяется наличие в сообщениях локализации `locale`.\n\n:::danger Совет\nОбратите внимание, что в хуках жизненного цикла контекст должен быть экземпляром компонента (например в опции `data`, `const $te = this.$te.bind(this)`).\n:::\n\n#### $d\n\n> :new: Добавлено в версии 7.0+\n\n* **Аргументы:**\n\n  * `{number | Date} value`: обязательный\n  * `{Path | Object} key`: опционально\n  * `{Locale | Object} locale`: опционально\n\n* **Возвращает:** `DateTimeFormatResult`\n\nЛокализация даты из `value` по указанному формату даты из `key`. Формат указанный в `key` должен быть зарегистрирован в опции `dateTimeFormats` класса `VueI18n`, и зависит от опции `locale` конструктора `VueI18n`. Если указать аргумент `locale`, то он будет иметь приоритет над опцией `locale` конструктора `VueI18n`.\n\nЕсли формата даты для `key` нет в опции `dateTimeFormats`, то будет использован запасной формат, основываясь на опции `fallbackLocale` конструктора `VueI18n`.\n\n:::danger Совет\nОбратите внимание, что в хуках жизненного цикла контекст должен быть экземпляром компонента (например в опции `data`, `const $d = this.$d.bind(this)`).\n:::\n\n#### $n\n\n> :new: Добавлено в версии 7.0+\n\n* **Аргументы:**\n\n  * `{number} value`: обязательный\n  * `{Path | Object} format`: опционально\n  * `{Locale} locale`: опционально\n\n* **Возвращает:** `NumberFormatResult`\n\nЛокализация числа `value` с помощью формата чисел `format`. Числовой формат из `format` должен быть зарегистрирован в опции `numberFormats` класса `VueI18n`, и зависит от опции `locale` конструктора `VueI18n`. Если указать аргумент `locale`, то он будет иметь приоритет над опцией `locale` конструктора `VueI18n`.\n\nЕсли формат чисел для `format` не указан в опции `numberFormats`, будет использован запасной формат, основываясь на опции `fallbackLocale` конструктора `VueI18n`.\n\nЕсли второй аргумент `format` указан объектом, то в нём должны быть следующие свойства:\n\n* `key {Path}`: опционально, форматируемое число\n* `locale {Locale}`: опционально, локализация\n* `compactDisplay {string}`: опционально, опция форматирования чисел\n* `currency {string}`: опционально, опция форматирования чисел\n* `currencyDisplay {string}`: опционально, опция форматирования чисел\n* `currencySign {string}`: опционально, опция форматирования чисел\n* `localeMatcher {string}`: опционально, опция форматирования чисел\n* `notation {string}`: опционально, опция форматирования чисел\n* `numberingSystem {string}`: опционально, опция форматирования чисел\n* `signDisplay {string}`: опционально, опция форматирования чисел\n* `style {string}`: опционально, опция форматирования чисел\n* `unit {string}`: опционально, опция форматирования чисел\n* `unitDisplay {string}`: опционально, опция форматирования чисел\n* `useGrouping {boolean}`: опционально, опция форматирования чисел\n* `minimumIntegerDigits {string}`: опционально, опция форматирования чисел\n* `minimumFractionDigits {string}`: опционально, опция форматирования чисел\n* `maximumFractionDigits {string}`: опционально, опция форматирования чисел\n* `minimumSignificantDigits {string}`: опционально, опция форматирования чисел\n* `maximumSignificantDigits {string}`: опционально, опция форматирования чисел\n\nЛюбые указанные опции форматирования числа будут иметь приоритет над значениями `numberFormats` из конструктора `VueI18n`.\n\n:::danger Совет\nОбратите внимание, что в хуках жизненного цикла контекст должен быть экземпляром компонента (например в опции `data`, `const $n = this.$n.bind(this)`).\n:::\n\n### Внедряемые свойства\n\n#### $i18n\n\n* **Тип:** `I18n`\n\n* **Только для чтения**\n\nПолучение экземпляра `VueI18n`, если был определён.\n\nЕсли в компоненте указана опция `i18n`, то получение экземпляра `VueI18n` компонента. В противном случае, получение корневого экземпляра `VueI18n`.\n\n## Класс `VueI18n`\n\nКласс `VueI18n` реализует интерфейс `I18n` из [определений flowtype](https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js)\n\n### Статические свойства\n\n#### version\n\n* **Тип:** `string`\n\nВерсия `vue-i18n`.\n\n#### availabilities\n\n> :new: Добавлено в версии 7.0+\n\n* **Тип:** `IntlAvailability`\n\nПроверка доступности следующих возможностей интернационализации:\n\n* `{boolean} dateTimeFormat`: форматирование дат для локалей\n\n* `{boolean} numberFormat`: форматирование чисел для локалей\n\nУказанные выше возможности интернационализации зависят от [окружения браузера](http://kangax.github.io/compat-table/esintl/), в котором реализован ECMAScript Internationalization API (ECMA-402).\n\n### Опции конструктора\n\nМожно указывать некоторые опции конструктора `I18nOptions`, основываясь на [определениях flowtype](https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js)\n\n#### locale\n\n* **Тип:** `Locale`\n\n* **По умолчанию:** `'en-US'`\n\nЛокаль используемая для локализации. Если локаль содержит территорию и диалект, то эта локаль явно определяет запасную локализацию.\n\n#### fallbackLocale\n\n* **Тип:** `FallbackLocale`\n\n* **По умолчанию:** `false`\n\nЗапасная локаль для локализации. Подробнее в разделе [Запасная локализация](../guide/fallback.md).\n\n#### messages\n\n* **Тип:** `LocaleMessages`\n\n* **По умолчанию:** `{}`\n\nСообщения локализации для локали.\n\n#### dateTimeFormats\n\n> :new: Добавлено в версии 7.0+\n\n* **Тип:** `DateTimeFormats`\n\n* **По умолчанию:** `{}`\n\nФорматы дат для локализации.\n\n* **См. также:** тип `DateTimeFormats` в [определениях flowtype](https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js)\n\n#### numberFormats\n\n> :new: Добавлено в версии 7.0+\n\n* **Тип:** `NumberFormats`\n\n* **По умолчанию:** `{}`\n\nФорматы чисел для локализации.\n\n* **См. также:** тип `NumberFormats` в [определениях flowtype](https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js)\n\n#### availableLocales\n\n> :new: Добавлено в версии 8.9.0+\n\n* **Тип:** `Locale[]`\n\n* **По умолчанию:** `[]`\n\n* **Примеры:** `[\"en\", \"ru\"]`\n\nСписок доступных локалей в `messages` в лексическом порядке.\n\n#### formatter\n\n* **Тип:** `Formatter`\n\n* **По умолчанию:** Встроенный formatter\n\nМетод форматирования, реализующий интерфейс `Formatter`.\n\n#### modifiers\n\n> :new: Добавлено в версии 8.15.0+\n\n* **Тип:** `Modifiers`\n\n* **По умолчанию:** модификаторы `lower` и `upper`\n\nФункции модификаторов для связанных сообщений\n\n#### missing\n\n* **Тип:** `MissingHandler`\n\n* **По умолчанию:** `null`\n\nОбработчик для отсутствующих сообщений локализации. Обработчик будет вызван с локалью, ключом сообщения локализации и значениями values.\n\nЕсли указан этот обработчик и произойдёт попытка доступа к отсутствующему сообщению локализации, то предупреждения в консоли не будет.\n\n#### fallbackRoot\n\n* **Тип:** `Boolean`\n\n* **По умолчанию:** `true`\n\nПри использовании локализации в компонентах определяет обращаться ли к локализации корневого уровня (глобальной) при неудаче.\n\nПри значении `false` будет выбрасываться предупреждение и возвращаться ключ.\n\n#### fallbackRootWithEmptyString\n\n> :new: Добавлено в версии 8.26+\n\n* **Тип:** `Boolean`\n\n* **По умолчанию:** `true`\n\nВ локализации компонента укажите, следует ли вернуться к локализации корневого уровня (глобальной), если локальное сообщение представляет собой пустую строку.\n\nОбратите внимание, что поведение по умолчанию в vue-i18n 9.x заключается в том, чтобы не возвращаться к корневому каталогу для локального сообщения, которое является пустой строкой.\n\nЕсли `false`, пустое локальное сообщение не будет возвращено в корень и будет храниться как пустая строка.\n\n#### sync\n\n* **Тип:** `Boolean`\n\n* **По умолчанию:** `true`\n\nСинхронизировать ли локализацию корневого уровня с локализацией компонента.\n\nПри значении `false`, независимо от локали определённой на корневом уровне, будет использоваться локаль установленная в компоненте.\n\n#### silentTranslationWarn\n\n> 6.1+, :up: 8.13\n\n* **Тип:** `Boolean | RegExp`\n\n* **По умолчанию:** `false`\n\nОтключение предупреждений, отображаемых при неудаче локализации.\n\nПри значении `true`, отключаются предупреждения об ошибках локализации. Если использовать регулярное выражение, то можно отключать предупреждения об ошибках, которые будут соответствовать `key` (например, `$t`).\n\n#### silentFallbackWarn\n\n> :new: Добавлено в версии 8.8+, :up: 8.13\n\n* **Тип:** `Boolean | RegExp`\n\n* **По умолчанию:** `false`\n\nОтключение предупреждений при использовании запасной локали из `fallbackLocale` или `root`.\n\nПри значении `true` предупреждения будут генерироваться только если недоступна локализация вообще, а не для случаев использования запасной локали. При использовании регулярного выражения можно отключать предупреждения которые будут соответствовать `key` (например, `$t`).\n\n#### pluralizationRules\n\n> 8.5+\n\n  * **Тип:** `PluralizationRules`\n\n  * **По умолчанию:** `{}`\n\n  Набор правил для плюрализации в следующем формате:\n  ```js\n    {\n      // Ключ - локаль для которой будет применяться правило.\n      // Value - функция для получения индекса варианта плюрализации от текущего числа и заданного количества вариантов. (См. функцию getChoiceIndex)\n      'pt': function(choice, choiceIndex) => Number/* index of the plural word */;\n      'ru': function(choice, choiceIndex) => Number/* index of the plural word */;\n      'en': function(choice, choiceIndex) => Number/* index of the plural word */;\n      'jp': function(choice, choiceIndex) => Number/* index of the plural word */;\n    }\n  ```\n\n#### preserveDirectiveContent\n\n> Добавлено в версии 8.7+\n\n* **Тип:** `Boolean`\n\n* **По умолчанию:** `false`\n\nОпределяет должен ли элемент директивы `v-t` сохранять `textContent` после того как директива будет снята с элемента.\n\n#### warnHtmlInMessage\n\n> Добавлено в версии 8.11+\n\n* **Тип:** `WarnHtmlInMessageLevel`\n\n* **По умолчанию:** `off`\n\nРазрешить ли использование HTML-форматирования в сообщениях локализации. См. также свойство `warnHtmlInMessage`.\n\n:::danger Внимание!\nСо следующей мажорной версии значение по умолчанию `warnHtmlInMessage` будет `warn`.\n:::\n\n#### sharedMessages\n\n> Добавлено в версии 8.12+\n\n* **Тип:** `LocaleMessages`\n\n* **По умолчанию:** `undefined`\n\nОбщие сообщения локализации при локализации в компонентах. Подробнее в разделе [Локализация на основе компонентов](../guide/component.md#локаnизация-на-основе-компонентов).\n\n#### postTranslation\n\n> Добавлено в версии 8.16+\n\n* **Тип:** `PostTranslationHandler`\n\n* **По умолчанию:** `null`\n\nПост-обработчик локализации. Выполняется после вызова `$t`, `t`, `$tc` и `tc`.\n\nМожет пригодиться при необходимости дополнительно обработать итоговый текст перевода, например избавиться от висящих пробелов.\n\n#### componentInstanceCreatedListener\n\n> Добавлено в версии 8.18+\n\n* **Тип:** `ComponentInstanceCreatedListener`\n\n* **По умолчанию:** `null`\n\nОбработчик получения уведомления о создании локального экземпляра компонента. Вызывается с новым и старым (корневыми) экземплярами VueI18n.\n\nОбработчик может потребоваться при расширении корневого экземпляра VueI18n и необходимости ожидания для применения этих расширений к локальному экземпляру компонента.\n\n#### escapeParameterHtml\n\n> Добавлено в версии 8.22+\n\n  * **Тип:** `Boolean`\n\n  * **По умолчанию:** `false`\n\nЕсли `escapeParameterHtml` установлен в значение `true`, то параметры интерполяции будут экранированы перед переводом сообщения. Это полезно, когда результат перевода используется в `v-html` и текст для перевода содержит HTML-разметку (например, `<b>` вокруг предоставленного пользователем значения). Этот шаблон в основном предназначен для случаев, когда передаются предварительно скомпилированные текстовые строки в компоненты UI.\n\nПроцесс экранирования включает в себя замену следующих символов на соответствующие HTML-сущности: `<`, `>`, `\"`, `'`.\n\nУстановка `escapeParameterHtml` в значение `true` не должна нарушать существующую функциональность, а предоставит защиту от векторов атаки типа XSS.\n\n### Свойства\n\n#### locale\n\n* **Тип:** `Locale`\n\n* **Чтение/Запись**\n\nЛокаль используемая для локализации. Если локаль содержит территорию и диалект, то эта локаль неявно указывает на запасные варианты.\n\n#### fallbackLocale\n\n* **Тип:** `FallbackLocale`\n\n* **Чтение/Запись**\n\nЛокаль используемая для запасной локализации. Способы определения и переключения на запасную локализацию можно изучить в разделе [Запасная локализация](../guide/fallback.md).\n\n#### messages\n\n* **Тип:** `LocaleMessages`\n\n* **Только для чтения**\n\nПереведённые сообщения используемые для локализации.\n\n#### dateTimeFormats\n\n> :new: Добавлено в версии 7.0+\n\n* **Тип:** `DateTimeFormats`\n\n* **Только для чтения**\n\nФорматы форматирования дат для локализации.\n\n#### numberFormats\n\n> :new: Добавлено в версии 7.0+\n\n* **Тип:** `NumberFormats`\n\n* **Только для чтения**\n\nФорматы форматирования чисел для локализации.\n\n#### missing\n\n* **Тип:** `MissingHandler`\n\n* **Чтение/Запись**\n\nОбработчик для отсутствующих ключей локализаций.\n\n#### formatter\n\n* **Тип:** `Formatter`\n\n* **Чтение/Запись**\n\nМетод форматирования, который реализует интерфейс `Formatter`.\n\n#### silentTranslationWarn\n\n> 6.1+, :up: 8.13\n\n* **Тип:** `Boolean | RegExp`\n\n* **Чтение/Запись**\n\nОтключение предупреждений выводимых при ошибке локализации.\n\n#### silentFallbackWarn\n\n> :new: Добавлено в версии 8.8+, :up: 8.13\n\n* **Тип:** `Boolean | RegExp`\n\n* **Чтение/Запись**\n\nОтключение предупреждений выводимых при ошибке использования запасной локализации.\n\n#### pluralizationRules\n\n> 8.5+\n\n* **Тип:** `PluralizationRules`\n\n* **Чтение/Запись**\n\nНабор зависимых от локали правил плюрализации.\n\n#### preserveDirectiveContent\n\n> Добавлено в версии 8.7+\n\n* **Тип:** `Boolean`\n\n* **Чтение/Запись**\n\nДолжен ли элемент директивы `v-t` сохранять `textContent` после того как директива снята с элемента.\n\n#### warnHtmlInMessage\n\n> Добавлено в версии 8.11+\n\n* **Тип:** `WarnHtmlInMessageLevel`\n\n* **Чтение/Запись**\n\nРазрешить ли использование HTML-форматирования в сообщениях локализации.\n\n\nПри установке `warn` или `error` проверяются сообщения локализации экземпляра VueI18n.\n\nПри установке `warn` выводятся предупреждения в консоль.\n\nПри установке `error` генерируется Error.\n\nВ качестве значения по умолчанию в экземпляре VueI18n установлено `off`.\n\n#### postTranslation\n\n> Добавлено в версии 8.16+\n\n* **Тип:** `PostTranslationHandler`\n\n* **Чтение/Запись**\n\nОбработчик для пост-обработки перевода.\n\n### Методы\n\n#### getChoiceIndex\n\n* **Аргументы:**\n\n  * `{number} choice`\n  * `{number} choicesLength`\n\n* **Возвращает:** `finalChoice {number}`\n\nПолучение индекса для плюрализации текущего числа и заданного количества вариантов. Реализация может быть переопределена через изменение прототипа:\n\n```js\nVueI18n.prototype.getChoiceIndex = /* пользовательская реализация */\n```\n\nОднако в большинстве случаев достаточно передать нужную функцию в [pluralizationRules опцию конструктора](#pluralizationrules).\n\n#### getLocaleMessage( locale )\n\n* **Аргументы:**\n\n  * `{Locale} locale`\n\n* **Возвращает:** `LocaleMessageObject`\n\nПолучение сообщений локализации для локали.\n\n#### setLocaleMessage( locale, message )\n\n* **Аргументы:**\n\n  * `{Locale} locale`\n  * `{LocaleMessageObject} message`\n\nУстановка сообщений локализации для локали.\n\n:::tip ПРИМЕЧАНИЕ\n\n> Добавлено в версии 8.11+\n\nПри использовании `warn` или `error` в свойстве `warnHtmlInMessage`, при выполнении этого метода будет проверено используется ли HTML-форматирование для сообщения локализации.\n:::\n\n#### mergeLocaleMessage( locale, message )\n\n> 6.1+\n\n* **Аргументы:**\n\n  * `{Locale} locale`\n  * `{LocaleMessageObject} message`\n\nОбъединение указанных сообщений локализации с сообщениями локализации локали.\n\n:::tip ПРИМЕЧАНИЕ\n\n> Добавлено в версии 8.11+\n\nПри использовании `warn` или `error` в свойстве `warnHtmlInMessage`, при выполнении этого метода будет проверено используется ли HTML-форматирование для сообщения локализации.\n:::\n\n#### t( key, [locale], [values] )\n\n* **Аргументы:**\n\n  * `{Path} key`: обязательный\n  * `{Locale} locale`: опционально\n  * `{Array | Object} values`: опционально\n\n* **Возвращает:** : `TranslateResult`\n\nАналогично функции возвращаемой методом `$t`. Подробнее см. [$t](#t).\n\n#### tc( key, [choice], [values] )\n\n* **Аргументы:**\n\n  * `{Path} key`: обязательный\n  * `{number} choice`: опционально, по умолчанию `1`\n  * `{string | Array | Object} values`: опционально\n\n* **Возвращает:** `TranslateResult`\n\nАналогично функции возвращаемой методом `$tc`. Подробнее см. [$tc](#tc).\n\n#### te( key, [locale] )\n\n* **Аргументы:**\n\n  * `{string} key`: обязательный\n  * `{Locale} locale`: опционально\n\n* **Возвращает:** `boolean`\n\nПроверяет существует ли указанный ключ в глобальных сообщениях локализации. Если указать `locale`, проверка будет осуществляться в сообщениях локализации `locale`.\n\n#### getDateTimeFormat ( locale )\n\n> :new: Добавлено в версии 7.0+\n\n* **Аргументы:**\n\n  * `{Locale} locale`\n\n* **Возвращает:** `DateTimeFormat`\n\nПолучение форматов форматирования дат локализации.\n\n#### setDateTimeFormat ( locale, format )\n\n> :new: Добавлено в версии 7.0+\n\n* **Аргументы:**\n\n  * `{Locale} locale`\n  * `{DateTimeFormat} format`\n\nУстановка форматов форматирования дат для локализации.\n\n#### mergeDateTimeFormat ( locale, format )\n\n> :new: Добавлено в версии 7.0+\n\n* **Аргументы:**\n\n  * `{Locale} locale`\n  * `{DateTimeFormat} format`\n\nОбъединение указанных форматов форматирования дат с форматами локализации.\n\n#### d( value, [key], [locale] )\n\n> :new: Добавлено в версии 7.0+\n\n* **Аргументы:**\n\n  * `{number | Date} value`: обязательный\n  * `{Path | Object} key`: опционально\n  * `{Locale | Object} locale`: опционально\n\n* **Возвращает:** `DateTimeFormatResult`\n\nАналогично функции возвращаемой методом `$d`. Подробнее см. [$d](#d).\n\n#### getNumberFormat ( locale )\n\n> :new: Добавлено в версии 7.0+\n\n* **Аргументы:**\n\n  * `{Locale} locale`\n\n* **Возвращает:** `NumberFormat`\n\nПолучение форматов форматирования чисел для локализации.\n\n#### setNumberFormat ( locale, format )\n\n> :new: Добавлено в версии 7.0+\n\n* **Аргументы:**\n\n  * `{Locale} locale`\n  * `{NumberFormat} format`\n\nУстановка форматов форматирования чисел для локализации.\n\n#### mergeNumberFormat ( locale, format )\n\n> :new: Добавлено в версии 7.0+\n\n* **Аргументы:**\n\n  * `{Locale} locale`\n  * `{NumberFormat} format`\n\nОбъединение указанных форматов форматирования чисел с форматами локализации.\n\n#### n( value, [format], [locale] )\n\n> :new: Добавлено в версии 7.0+\n\n* **Аргументы:**\n\n  * `{number} value`: обязательный\n  * `{Path | Object} format`: опционально\n  * `{Locale} locale`: опционально\n\n* **Возвращает:** `NumberFormatResult`\n\nАналогично функции возвращаемой методом `$n`. Подробнее см. [$n](#n).\n\n## Директивы\n\n> :new: Добавлено в версии 7.3+\n\n### v-t\n\n* **Ожидает:** `string | Object`\n\n* **Модификаторы:**\n\n  * `.preserve`: (8.7.0+) сохраняет `textContent` элемента при снятии директивы с элемента.\n\n* **Подробности:**\n\nОбновление `textContent` элемента, который был переведён с помощью сообщений локализации. Можно использовать строковый или объектный синтаксис. Строковый синтаксис может быть задан в качестве пути к сообщению локализации. При использовании объектного синтаксиса необходимо указать следующие свойства:\n\n  * `path`: обязательный, ключ сообщения локализации\n  * `locale`: опционально, локализация\n  * `args`: опционально, для списка или именованного форматирования\n\n:::tip ПРИМЕЧАНИЕ\nПо умолчанию значение `textContent` элемента удаляется при снятии директивы `v-t`. Это может быть нежелательной ситуацией например при [анимировании списков](https://ru.vuejs.org/v2/guide/transitions.html). Для сохранения данных `textContent` после снятия директивы следует использовать модификатор `.preserve` или глобальную опцию [`preserveDirectiveContent`](#preservedirectivecontent).\n:::\n\n* **Примеры:**\n\n```html\n<!-- строковый синтаксис: литерал -->\n<p v-t=\"'foo.bar'\"></p>\n\n<!-- строковый синтаксис: привязка к данным -->\n<p v-t=\"msg\"></p>\n\n<!-- объектный синтаксис: литерал -->\n<p v-t=\"{ path: 'hi', локализация: 'ru', args: { name: 'kazupon' } }\"></p>\n\n<!-- объектный синтаксис: привязка к данным -->\n<p v-t=\"{ path: greeting, args: { name: fullName } }\"></p>\n\n<!-- с модификатором preserve -->\n<p v-t.preserve=\"'foo.bar'\"></p>\n```\n\n* **См. также:** [Пользовательская директива для локализации](../guide/directive.md)\n\n## Компоненты\n\n### Функциональный компонент i18n\n\n> :new: Добавлено в версии 7.0+\n\n#### Входные параметры:\n\n* `path {Path}`: обязательный, путь к сообщению локализации\n* `locale {Locale}`: опционально, локализация\n* `tag {string | boolean | Object}`: опционально, по умолчанию `'span'`\n* `places {Array | Object}`: опционально (7.2+)\n\n:::danger Внимание!\nСо следующей мажорной версии опция `places` будет удалена. Используйте синтаксис слотов.\n:::\n\n#### Использование:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <i18n path=\"term\" tag=\"label\" for=\"tos\">\n    <a :href=\"url\" target=\"_blank\">{{ $t('tos') }}</a>\n  </i18n>\n  <!-- ... -->\n</div>\n```\n\n```js\nconst messages = {\n  en: {\n    tos: 'Term of Service',\n    term: 'I accept xxx {0}.'\n  },\n  ru: {\n    tos: 'Условия обслуживания',\n    term: 'Я соглашаюсь с xxx {0}.'\n  }\n}\n\nconst i18n = new VueI18n({\n  locale: 'en',\n  messages\n})\nnew Vue({\n  i18n,\n  data: {\n    url: '/term'\n  }\n}).$mount('#app')\n```\n\n#### См. также:\n\n[Интерполяция компонента](../guide/interpolation.md)\n\n### Функциональный компонент i18n-n\n\n> :new: Добавлено в версии 8.10+\n\n#### Входные параметры:\n\n* `value {number}`: обязательный, число для форматирования\n* `format {string | NumberFormatOptions}`: опционально, форматируемое число или объект с указанными опциями форматирования\n* `locale {Locale}`: опционально, локализация\n* `tag {string | boolean | Object}`: опционально, по умолчанию `'span'`\n\n#### Использование:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <i18n-n :value=\"money\" format=\"currency\" tag=\"label\">\n    <span v-slot:currency=\"slotProps\" class=\"font-weight: bold\">\n      {{ slotProps.currency }}\n    <span>\n  </i18n-n>\n  <!-- ... -->\n</div>\n```\n\n```js\nvar numberFormats = {\n  'en-US': {\n    currency: {\n      style: 'currency',\n      currency: 'USD'\n    }\n  },\n  'ru-RU': {\n    currency: {\n      style: 'currency',\n      currency: 'RUB'\n    }\n  }\n}\n\nconst i18n = new VueI18n({\n  locale: 'en-US',\n  numberFormats\n})\n\nnew Vue({\n  i18n,\n  data: {\n    money: 10234\n  }\n}).$mount('#app')\n```\n\n#### Слоты с ограниченной областью видимости\n\nФункциональный компонент `<i18n-n>` может принимать различные слоты с ограниченной областью видимости. Список поддерживаемых имён слотов основан на [выходных типах `Intl.NumberFormat.formatToParts()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/formatToParts):\n\n* `currency`\n* `decimal`\n* `fraction`\n* `group`\n* `infinity`\n* `integer`\n* `literal`\n* `minusSign`\n* `nan`\n* `plusSign`\n* `percentSign`\n\nКаждый из слотов предоставляет доступ к значениям трёх параметров:\n\n* `[slotName] {FormattedNumberPartType}`: параметр с тем же именем, что и имя слота (например, `integer`)\n* `index {Number}`: индекс конкретной части в массиве частей числа\n* `parts {Array}`: массив со всеми отформатированными частями числа\n\n#### См. также:\n\n[Локализация чисел](../guide/number.md#custom-formatting)\n\n## Специальные атрибуты\n\n### place\n\n> :new: Добавлено в версии 7.2+\n\n#### Ожидает: `{number | string}`\n\nИспользуется при интерполяции компонента для указания индекса при форматировании списком или ключа при именованном форматировании.\n\nПодробнее об использовании в разделе по ссылке ниже.\n\n#### См. также:\n\n[Интерполяция компонента](../guide/interpolation.md)\n"
  },
  {
    "path": "vuepress/ru/guide/component.md",
    "content": "# Локализация на основе компонентов\n\nВ основном данные для локализации (например, `locale`,`messages`, и т.д.) задаются опциями конструктора экземпляра `VueI18n` и устанавливаются через свойство `i18n` в корневой экземпляр Vue.\n\nПоэтому можно глобально выполнять переводы, используя методы `$t` или `$tc` в корневом экземпляре Vue и любом из компонентов в нём. Но также возможно указывать данные для локализации в каждом компоненте в отдельности, что может быть удобнее благодаря компонентно-ориентированному дизайну.\n\nПример локализации на основе компонентов:\n\n```js\n// Установка локализации в корневой экземпляр Vue\nconst i18n = new VueI18n({\n  locale: 'ru',\n  messages: {\n    en: {\n      message: {\n        hello: 'hello world',\n        greeting: 'good morning'\n      }\n    },\n    ru: {\n      message: {\n        hello: 'привет мир',\n        greeting: 'доброе утро'\n      }\n    }\n  }\n})\n\n// Определение компонента\nconst Component1 = {\n  template: `\n    <div class=\"container\">\n     <p>Component1 locale messages: {{ $t(\"message.hello\") }}</p>\n     <p>Fallback global locale messages: {{ $t(\"message.greeting\") }}</p>\n   </div>`,\n  i18n: {\n    // опция `i18n`, определение данных локализации для компонента\n    messages: {\n      en: { message: { hello: 'hello component1' } },\n      ru: { message: { hello: 'привет component1' } }\n    }\n  }\n}\n\nnew Vue({\n  i18n,\n  components: {\n    Component1\n  }\n}).$mount('#app')\n```\n\nШаблон:\n\n```html\n<div id=\"app\">\n  <p>{{ $t(\"message.hello\") }}</p>\n  <component1></component1>\n</div>\n```\n\nРезультат:\n\n```html\n<div id=\"app\">\n  <p>привет мир</p>\n  <div class=\"container\">\n    <p>Component1 locale messages: привет component1</p>\n    <p>Fallback global locale messages: доброе утро</p>\n  </div>\n</div>\n```\n\nЕсли компонент не имеет собственного сообщения для локализации, то в качестве запасного выхода он обратится к глобальным данным для локализации. Компонент использует локаль, установленную в корневом экземпляре (в примере выше установлена: `locale: 'ru'`).\n\nОбратите внимание, по умолчанию при обращении к данным корневой локализации будут генерироваться предупреждения в консоли:\n\n```\n[vue-i18n] Value of key 'message.greeting' is not a string!\n[vue-i18n] Fall back to translate the keypath 'message.greeting' with root locale.\n```\n\nЧтобы скрыть эти предупреждения (оставив те, что предупреждают о полном отсутствии перевода для данного ключа) установите опцию `silentFallbackWarn: true` при инициализации экземпляра `VueI18n`.\n\nЕсли необходимо осуществлять перевод, основываясь на локали компонента, то это можно сделать с помощью опции `sync: false` и `locale` в настройках `i18n`.\n\n## Общие сообщения локализации для компонентов\n\nИногда может потребоваться импортировать сообщения локализации в определённых компонентах, чтобы не обращаться к глобальным сообщениям локализации (например, общие сообщения для определённых функций компонентов).\n\nДля этого можно использовать опцию `sharedMessages` в свойстве `i18n` компонента.\n\nПример использования общих сообщений локализации:\n\n```js\nexport default {\n  en: {\n    buttons: {\n      save: 'Save'\n      // ...\n    }\n  },\n  ru: {\n    buttons: {\n      save: 'Сохранить'\n      // ...\n    }\n  }\n}\n```\n\nКомпонент:\n\n```js\nimport commonMessage from './locales/common' // импорт общих сообщений локализации\n\nexport default {\n  name: 'ServiceModal',\n  template: `\n    <div class=\"modal\">\n      <div class=\"body\">\n        <p>Это хороший сервис</p>\n      </div>\n      <div class=\"footer\">\n        <button type=\"button\">\n          {{ $t('buttons.save') }}\n        </button>\n      </div>\n    </div>\n  `,\n  i18n: {\n    messages: { ... },\n    sharedMessages: commonMessages\n  }\n}\n```\n\nЕсли указаны опции `sharedMessages` и `messages`, то их сообщения будут объединены в сообщения локализации в экземпляре VueI18n этого компонента.\n\n## Локализация в функциональных компонентах\n\nПри использовании функционального компонента все данные (включая `props`, `children`, `slots`, `parent`, и т.д.) передаются через `context`, в котором содержатся все эти атрибуты. Кроме того отсутствует возможность использовать `this`, поэтому при использовании vue-i18n с функциональными компонентами следует обращаться к `$t` как к `parent.$t`, например так:\n\n```html\n...\n<div>\n  <a href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\">\n    <img src=\"./assets/example.jpg\" :alt=\"parent.$t('message.hello')\" />\n  </a>\n</div>\n...\n```\n"
  },
  {
    "path": "vuepress/ru/guide/datetime.md",
    "content": "# Локализация дат\n\n:::tip Поддержка с версии\n:new: 7.0+\n:::\n\nМожно выполнять локализацию дат по соответствующему формату.\n\nПример формата для дат:\n\n```js\nconst dateTimeFormats = {\n  'en-US': {\n    short: {\n      year: 'numeric',\n      month: 'short',\n      day: 'numeric'\n    },\n    long: {\n      year: 'numeric',\n      month: 'long',\n      day: 'numeric',\n      weekday: 'long',\n      hour: 'numeric',\n      minute: 'numeric'\n    }\n  },\n  'pt-BR': {\n    short: {\n      year: 'numeric',\n      month: 'short',\n      day: 'numeric'\n    },\n    long: {\n      year: 'numeric',\n      month: 'long',\n      day: 'numeric',\n      weekday: 'long',\n      hour: 'numeric',\n      minute: 'numeric',\n      hour12: true\n    }\n  }\n}\n```\n\nКак видно выше, можно определять именованный формат даты (например, `short`, `long` и т.д.) используя [опции ECMA-402 Intl.DateTimeFormat](http://www.ecma-international.org/ecma-402/2.0/#sec-intl-datetimeformat-constructor)\n\nПосле этого, для возможности использования данного формата в сообщениях локализации, необходимо задать опцию `dateTimeFormats` в конструкторе `VueI18n`:\n\n```js\nconst i18n = new VueI18n({\n  dateTimeFormats\n})\n\nnew Vue({\n  i18n\n}).$mount('#app')\n```\n\nШаблон:\n\n```html\n<div id=\"app\">\n  <p>{{ $d(new Date(), 'short') }}</p>\n  <p>{{ $d(new Date(), 'long', 'pt-BR') }}</p>\n</div>\n```\n\nРезультат:\n\n```html\n<div id=\"app\">\n  <p>Jan 18, 2021</p>\n  <p>domingo, 18 de janeiro de 2021 5:47 AM</p>\n</div>\n```\n"
  },
  {
    "path": "vuepress/ru/guide/directive.md",
    "content": "# Пользовательская директива\n\n:::tip Поддержка с версии\n:new: 7.3+\n:::\n\nПереводы можно осуществлять не только используя пользовательскую директиву `v-t`, но и с помощью метода `$t`.\n\n## Строковый синтаксис\n\nМожно передавать ключ сообщения локализации строкой.\n\nJavaScript:\n\n```js\nnew Vue({\n  i18n: new VueI18n({\n    locale: 'en',\n    messages: {\n      en: { hello: 'hi there!' },\n      ru: { hello: 'привет всем!' }\n    }\n  }),\n  data: { path: 'hello' }\n}).$mount('#string-syntax')\n```\n\nШаблон:\n\n```html\n<div id=\"string-syntax\">\n  <!-- строковый литерал -->\n  <p v-t=\"'hello'\"></p>\n  <!-- привязка пути к сообщению из данных -->\n  <p v-t=\"path\"></p>\n</div>\n```\n\nРезультат:\n\n```html\n<div id=\"string-syntax\">\n  <p>привет всем!</p>\n  <p>привет всем!</p>\n</div>\n```\n\n## Объектный синтаксис\n\nМожно использовать объектный синтаксис.\n\nJavaScript:\n\n```js\nnew Vue({\n  i18n: new VueI18n({\n    locale: 'en',\n    messages: {\n      en: { hello: 'hi {name}!' },\n      ru: { hello: 'привет {name}！' }\n    }\n  }),\n  computed: {\n    nickName() { return 'kazupon' }\n  },\n  data: { path: 'hello' }\n}).$mount('#object-syntax')\n```\n\nШаблон:\n\n```html\n<div id=\"object-syntax\">\n  <!-- литерал -->\n  <p v-t=\"{ path: 'hello', locale: 'ru', args: { name: 'kazupon' } }\"></p>\n  <!-- привязка к данным -->\n  <p v-t=\"{ path: path, args: { name: nickName } }\"></p>\n</div>\n```\n\nРезультат:\n\n```html\n<div id=\"object-syntax\">\n  <p>привет、kazupon！</p>\n  <p>hi kazupon!</p>\n</div>\n```\n\n## Использование с transition\n\n:::tip Поддержка с версии\n:new: 8.7+\n:::\n\nПри использовании директивы `v-t` на элементе внутри [компонента `<transition>`](https://ru.vuejs.org/v2/api/#transition), можно заметить как переведённое сообщение исчезает во время анимации перехода. Это поведение связано с реализацией самого компонента `<transition>` — все директивы в исчезающем элементе внутри компонента `<transition>` должны быть уничтожены **до начала анимации**. Это может привести к мерцанию содержимого на коротких анимациях, но наиболее заметно при длинных анимациях переходов.\n\nЧтобы сохранить содержимое директивы во время анимации перехода, необходимо добавить [модификатор `.preserve`](../api/#v-t) при определении директивы `v-t`.\n\nJavascript:\n\n```js\nnew Vue({\n  i18n: new VueI18n({\n    locale: 'en',\n    messages: {\n      en: { preserve: 'with preserve' }\n    }\n  }),\n  data: { toggle: true }\n}).$mount('#in-transitions')\n```\n\nШаблон:\n\n```html\n<div id=\"in-transitions\">\n  <transition name=\"fade\">\n    <span v-if=\"toggle\" v-t.preserve=\"'preserve'\"></span>\n  </transition>\n  <button @click=\"toggle = !toggle\">Toggle</button>\n</div>\n```\n\nТакже можно глобально установить настройку `preserveDirectiveContent` в экземпляре `VueI18n`, что повлияет на все директивы `v-t` без добавления модификатора к ним.\n\nJavaScript:\n\n```js\nnew Vue({\n  i18n: new VueI18n({\n    locale: 'en',\n    messages: {\n      en: { preserve: 'with preserve' }\n    },\n    preserveDirectiveContent: true\n  }),\n  data: { toggle: true }\n}).$mount('#in-transitions')\n```\n\nШаблон:\n\n```html\n<div id=\"in-transitions\">\n  <transition name=\"fade\">\n    <span v-if=\"toggle\" v-t=\"'preserve'\"></span>\n  </transition>\n  <button @click=\"toggle = !toggle\">Toggle</button>\n</div>\n```\n\nПодробнее о примерах выше можно изучить [здесь](https://github.com/kazupon/vue-i18n/tree/dev/examples/directive)\n\n## `$t` или `v-t`\n\n### `$t`\n\n`$t` — это метод, добавленный в экземпляр Vue. У него следующие плюсы и минусы:\n\n#### Плюсы\n\nПредоставляет **гибкость** в использовании синтаксиса фигурных скобок `{{}}` в шаблонах, а также применять в вычисляемых свойствах и методах экземпляра Vue.\n\n#### Минусы\n\n`$t` выполняется **каждый раз** когда происходит перерисовка, поэтому у него есть расходы на осуществление перевода.\n\n### `v-t`\n\n`v-t` — пользовательская директива. У неё следующие плюсы и минусы:\n\n#### Плюсы\n\n`v-t` имеет **лучшую производительность** в сравнении с методом `$t`, благодаря кэшу в пользовательской директиве после выполнения перевода. Также можно реализовать предварительный перевод с помощью модуля для компилятора Vue, который предоставляет плагин [`vue-i18n-extensions`](https://github.com/kazupon/vue-i18n-extensions).\n\nТаким образом, можно достичь **большей оптимизации производительности**.\n\n#### Минусы\n\n`v-t` нельзя использовать также гибко, как `$t`, и это добавляет **сложности**. Перевод с помощью `v-t` вставляется в `textContent` элемента. Также, при использовании рендеринга на стороне сервера необходимо установить [пользовательскую директиву](https://github.com/kazupon/vue-i18n-extensions#directive-v-t-custom-directive-for-server-side) через опцию `directives` функции `createRenderer`.\n"
  },
  {
    "path": "vuepress/ru/guide/fallback.md",
    "content": "# Запасная локализация\n\n*Вкратце: указывайте `fallbackLocale: '<lang>'` для определения языка, который будет использоваться, если нет перевода в выбранной локализации.*\n\n## Неявное определение запасных локализаций при использовании локалей\n\nЕсли `locale` содержит территорию и опционально диалект, то неявно будут определены автоматически запасные локали.\n\nНапример для `de-DE-bavarian` в качестве запасных будут считаться следующие:\n1. `de-DE-bavarian`\n2. `de-DE`\n3. `de`\n\nДля отключения автоматического определения запасных локалей укажите символ `!`, например `de-DE!`\n\n## Явное определение одной локали запасной локализации\n\nИногда не все ключи сообщений переведены на другие языки. В примере ниже, сообщение для ключа `hello` доступно в английской локали, но отсутствует в русской:\n\n```js\nconst messages = {\n  en: {\n    hello: 'Hello, world!'\n  },\n  ru: {\n    // упс, не все переведено\n  }\n}\n```\n\nЕсли хочется использовать сообщения локализации из `en`, когда перевод отсутствует в нужной локализации, то следует указать опцию `fallbackLocale` в конструкторе VueI18n:\n\n```js\nconst i18n = new VueI18n({\n  locale: 'ru',\n  fallbackLocale: 'en',\n  messages\n})\n```\n\nШаблон:\n\n```html\n<p>{{ $t('hello') }}</p>\n```\n\nРезультат:\n\n```html\n<p>Hello, world!</p>\n```\n\nПо умолчанию, если использовались сообщения запасной локализации из `fallbackLocale`, то в консоли будут выведены соответствующие предупреждения:\n\n```\n[vue-i18n] Value of key 'hello' is not a string!\n[vue-i18n] Fall back to translate the keypath 'hello' with 'en' locale.\n```\n\nЧтобы скрыть такие предупреждения (оставив при этом те, в случаях полного отсутствия переводов для данного ключа) установите `silentFallbackWarn: true` при инициализации экземпляра `VueI18n`.\n\n## Явное определение запасной локали с помощью массива\n\nМожно указать более одной запасной локализации с помощью массива. Например:\n\n```js\nfallbackLocale: ['ru', 'en'],\n```\n\n## Явное определение запасной локали с помощью объекта\n\nБолее сложный алгоритм принятия решений для определения запасной локали можно реализовать с помощью карты принятия решений в виде объекта.\n\nНапример для подобного объекта:\n\n```js\nfallbackLocale: {\n  /* 1 */ 'de-CH':   ['fr', 'it'],\n  /* 2 */ 'zh-Hant': ['zh-Hans'],\n  /* 3 */ 'es-CL':   ['es-AR'],\n  /* 4 */ 'es':      ['en-GB'],\n  /* 5 */ 'pt':      ['es-AR'],\n  /* 6 */ 'default': ['en', 'ru']\n},\n```\n\nБудут следующие цепочки выбора запасной локали:\n\n| Локаль      | Цепочка выбора                            |\n| ----------- | ----------------------------------------- |\n| `'de-CH'`   | de-CH > fr > it > en > ru                 |\n| `'de'`      | de > en > ru                              |\n| `'zh-Hant'` | zh-Hant > zh-Hans > zh > en > ru          |\n| `'es-SP'`   | es-SP > es > en-GB > en > ru              |\n| `'es-SP!'`  | es-SP > en > ru                           |\n| `'fr'`      | fr > en > ru                              |\n| `'pt-BR'`   | pt-BR > pt > es-AR > es > en-GB > en > ru |\n| `'es-CL'`   | es-CL > es-AR > es > en-GB > en > ru      |\n\n## Резервная интерполяция\n\n_Вкратце: установите `formatFallbackMessages: true` чтобы выполнять интерполяции шаблона по ключам перевода, когда в выбранном языке отсутствует данный ключ для перевода._\n\nТак как ключи переводов являются строками, то можно использовать само сообщение в качестве ключа (для определённого языка). Например:\n\n```js\nconst messages = {\n  ru: {\n    'Hello, world!': 'Привет мир!'\n  }\n}\n```\n\nЭто может быть полезным, потому что не нужно будет указывать перевод для строки \"Hello, world!\" в английской локализации.\n\nФактически, можно указывать даже параметры в ключе. Вместе с `formatFallbackMessages: true` это позволит опустить создание шаблонов для «базового» языка; потому что его ключи _уже находятся_ в шаблоне.\n\n```js\nconst messages = {\n  ru: {\n    'Hello {name}': 'Здравствуйте {name}'\n  }\n}\n\nconst i18n = new VueI18n({\n  locale: 'ru',\n  fallbackLocale: 'en',\n  formatFallbackMessages: true,\n  messages\n})\n```\n\nШаблон:\n\n```html\n<p>{{ $t('Hello {name}', { name: 'John' }}) }}</p>\n<p>{{ $t('The weather today is {condition}!', { condition: 'sunny' }) }}</p>\n```\n\nРезультат:\n\n```html\n<p>Здравствуйте, John</p>\n<p>The weather today is sunny!</p>\n```\n"
  },
  {
    "path": "vuepress/ru/guide/formatting.md",
    "content": "# Формат сообщений локализации\n\n## Именованный формат\n\nСообщения локализации:\n\n```js\nconst messages = {\n  en: {\n    message: {\n      hello: '{msg} world'\n    }\n  },\n  ru: {\n    message: {\n      hello: '{msg} мир'\n    }\n  }\n}\n```\n\nШаблон:\n\n```html\n<p>{{ $t('message.hello', { msg: 'привет' }) }}</p>\n```\n\nРезультат:\n\n```html\n<p>привет мир</p>\n```\n\n## Формат списков\n\nСообщения локализации:\n\n```js\nconst messages = {\n  en: {\n    message: {\n      hello: '{0} world'\n    }\n  },\n  ru: {\n    message: {\n      hello: '{0} мир'\n    }\n  }\n}\n```\n\nШаблон:\n\n```html\n<p>{{ $t('message.hello', ['привееет']) }}</p>\n```\n\nРезультат:\n\n```html\n<p>привееет мир</p>\n```\n\nФорматирование списков также принимает объекты, соответствующие по структуре массиву:\n\n```html\n<p>{{ $t('message.hello', {'0': 'привееет'}) }}</p>\n```\n\nРезультат:\n\n```html\n<p>привееет мир</p>\n```\n\n## HTML формат\n\n:::warning Обратите внимание\n:warning: Динамическая локализация произвольного HTML на вебсайте очень опасна, потому что легко может привести к XSS-уязвимостям. Используйте HTML-интерполяцию только для доверенного контента и никогда для пользовательского.\n\nРекомендуем в таких случаях использовать возможности [интерполяции компонента](interpolation.md).\n:::\n\n:::warning Обратите внимание\n\n> :new: Добавлено в версии 8.11+\n\nМожно управлять использованием HTML форматирования. Для подробностей см. опцию конструктора `warnHtmlInMessage` и свойства API.\n:::\n\nИногда требуется отобразить сообщение локализации HTML-кодом, а не статической строкой.\n\n```js\nconst messages = {\n  en: {\n    message: {\n      hello: 'hello <br> world'\n    }\n  },\n  ru: {\n    message: {\n      hello: 'привет <br> мир'\n    }\n  }\n}\n```\n\nШаблон:\n\n```html\n<p v-html=\"$t('message.hello')\"></p>\n```\n\nРезультат (вместо отформатированного сообщения)\n\n```html\n<p>\n  привет\n  <!-- <br> существует, но отрисован как html, а не строкой -->\n  мир\n</p>\n```\n\n## Формат ruby on rails i18n\n\nСообщения локализации:\n\n```js\nconst messages = {\n  en: {\n    message: {\n      hello: '%{msg} world'\n    }\n  },\n  ru: {\n    message: {\n      hello: '%{msg} мир'\n    }\n  }\n}\n```\n\nШаблон:\n\n```html\n<p>{{ $t('message.hello', { msg: 'привет' }) }}</p>\n```\n\nРезультат:\n\n```html\n<p>привет мир</p>\n```\n\n## Пользовательский формат\n\nИногда может потребоваться реализовать локализацию для собственного формата сообщений (например, использовать [синтаксиса сообщений ICU](http://userguide.icu-project.org/formatparse/messages)).\n\nРеализовать это можно с помощью специального пользовательского метода форматирования, который должен реализовать [интерфейс Formatter](https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js#L145-L147).\n\nПример пользовательского метода форматирования с синтаксисом класса ES2015:\n\n```js\n// Реализация пользовательского Formatter\nclass CustomFormatter {\n  constructor(options) {\n    // ...\n  }\n\n  //\n  // interpolate\n  //\n  // @param {string} message\n  //   строка или список или именованный формат\n  //   напр.\n  //   - именованный формат: 'Hi {name}'\n  //   - формат списка: 'Hi {0}'\n  //\n  // @param {Object | Array} values\n  //   значения интерполяции `message`.\n  //   переданные значения с `$t`, `$tc` и функциональным компонентом `i18n`.\n  //   напр.\n  //   - $t('hello', { name: 'Alex' }) -> переданные значения: Object `{ name: 'Alex' }`\n  //   - $t('hello', ['Alex']) -> переданные значения: Array `['Alex']`\n  //   - функциональный компонент `i18n` (интерполяция в компоненте)\n  //     <i18n path=\"hello\">\n  //       <p>Alex</p>\n  //       <p>how are you?</p>\n  //     </i18n>\n  //     -> переданные значения: Array (included VNode):\n  //        `[VNode{ tag: 'p', text: 'Alex', ...}, VNode{ tag: 'p', text: 'how are you?', ...}]`\n  //\n  // @return {Array<any>}\n  //   интерполированные значения. Они необходимы чтобы вернуть следующее:\n  //   - массив строк, когда используется `$t` или `$tc`.\n  //   - массив, включая объект VNode, когда используется функциональный компонент `i18n`.\n  //\n  interpolate(message, values) {\n    // реализация логики интерполяции\n    // ...\n\n    // возвращаем интерполированный массив\n    return ['resolved message string']\n  }\n}\n\n// Регистрация через опцию `formatter`\nconst i18n = new VueI18n({\n  locale: 'en-US',\n  formatter: new CustomFormatter(/* опции конструктора */),\n  messages: {\n    'en-US': {\n      // ...\n    },\n    'ru-RU': {\n      // ...\n    }\n    // ...\n  }\n})\n\n// Запускаем приложение!\nnew Vue({ i18n }).$mount('#app')\n```\n\nТакже посмотрите [официальный пример пользовательского метода форматирования](https://github.com/kazupon/vue-i18n/tree/dev/examples/formatting/custom).\n"
  },
  {
    "path": "vuepress/ru/guide/hot-reload.md",
    "content": "# Горячая перезагрузка переводов\n\nС помощью функции Webpack для [горячей перезагрузки модулей (HMR)](https://webpack.js.org/concepts/hot-module-replacement/) можно отслеживать изменения в файлах локализации и осуществлять их горячую перезагрузку в приложении.\n\n## Простой пример\n\nДля статичного набора локалей, можно явно указать горячую перезагрузку этих переводов:\n\n```js\nimport Vue from \"vue\"\nimport VueI18n from \"vue-i18n\"\nimport en from './en'\nimport ru from './ru'\n\nconst messages = {\n  en,\n  ru\n}\n\n// Экземпляр VueI18n\nconst i18n = new VueI18n({\n  locale: 'en',\n  messages\n})\n\n// Запускаем приложение\nconst app = new Vue({\n  i18n\n  // ...\n}).$mount('#app')\n\n// Добавляем горячую перезагрузку сообщений локализации\nif (module.hot) {\n  module.hot.accept(['./en', './ru'], function() {\n    i18n.setLocaleMessage('en', require('./en').default)\n    i18n.setLocaleMessage('ru', require('./ru').default)\n    // Или добавляем горячую перезагрузку через свойство $i18n\n    // app.$i18n.setLocaleMessage('en', require('./en').default)\n    // app.$i18n.setLocaleMessage('ru', require('./ru').default)\n  })\n}\n```\n\n## Продвинутый пример\n\nЕсли требуется поддержка изменяющегося набор переводов, можно реализовать горячую перезагрузку для всех локалей динамически через `require.context`:\n\n```js\nimport Vue from \"vue\";\nimport VueI18n from \"vue-i18n\";\n\nVue.use(VueI18n);\n\n// Загрузка всех локалей и сохранение контекста\nfunction loadMessages() {\n  const context = require.context(\"./locales\", true, /[a-z0-9-_]+\\.json$/i);\n\n  const messages = context\n    .keys()\n    .map((key) => ({ key, locale: key.match(/[a-z0-9-_]+/i)[0] }))\n    .reduce(\n      (messages, { key, locale }) => ({\n        ...messages,\n        [locale]: context(key),\n      }),\n      {}\n    );\n\n  return { context, messages };\n}\n\nconst { context, messages } = loadMessages();\n\n// Экземпляр VueI18n\nconst i18n = new VueI18n({\n  locale: \"en\",\n  messages,\n});\n\n// Запускаем приложение\nconst app = new Vue({\n  i18n,\n  // ...\n}).$mount('#app');\n\n// Добавляем горячую перезагрузку сообщений локализации\nif (module.hot) {\n  module.hot.accept(context.id, () => {\n    const { messages: newMessages } = loadMessages();\n\n    Object.keys(newMessages)\n      .filter((locale) => messages[locale] !== newMessages[locale])\n      .forEach((locale) => {\n        messages[locale] = newMessages[locale];\n        i18n.setLocaleMessage(locale, messages[locale]);\n      });\n  });\n}\n```\n"
  },
  {
    "path": "vuepress/ru/guide/interpolation.md",
    "content": "# Интерполяция компонента\n\n## Базовое использование\n\n:::tip Поддержка с версии\n:new: 7.0+\n:::\n\nИногда требуется перевести сообщения в которых есть HTML теги или компоненты. Например:\n\n```html\n<p>I accept xxx <a href=\"/term\">Terms of Service Agreement</a></p>\n```\n\nДля такого сообщения, если хотим использовать `$t`, то, вероятно, попробуем достичь скомпоновав из следующих сообщений локализации:\n\n```js\nconst messages = {\n  en: {\n    term1: \"I Accept xxx's\",\n    term2: 'Terms of Service Agreement'\n  }\n}\n```\n\nИ в итоге шаблон станет выглядеть так:\n\n```html\n<p>{{ $t('term1') }}<a href=\"/term\">{{ $t('term2') }}</a></p>\n```\n\nРезультат:\n\n```html\n<p>I accept xxx <a href=\"/term\">Terms of Service Agreement</a></p>\n```\n\nЭто выглядит очень громоздко, но если перенести тег `<a>` в сообщение локализации, то добавится вероятность XSS-уязвимости из-за применения `v-html=\"$t('term')\"`.\n\nЭтого можно избежать воспользовавшись функциональным компонентом `i18n`. Например:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <i18n path=\"term\" tag=\"label\" for=\"tos\">\n    <a :href=\"url\" target=\"_blank\">{{ $t('tos') }}</a>\n  </i18n>\n  <!-- ... -->\n</div>\n```\n\n```js\nconst messages = {\n  en: {\n    tos: 'Term of Service',\n    term: 'I accept xxx {0}.'\n  },\n  ru: {\n    tos: 'Условия обслуживания',\n    term: 'Я соглашаюсь с xxx {0}.'\n  }\n}\n\nconst i18n = new VueI18n({\n  locale: 'en',\n  messages\n})\nnew Vue({\n  i18n,\n  data: {\n    url: '/term'\n  }\n}).$mount('#app')\n```\n\nРезультат:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <label for=\"tos\">\n    I accept xxx <a href=\"/term\" target=\"_blank\">Term of Service</a>.\n  </label>\n  <!-- ... -->\n</div>\n```\n\nПодробнее о примере можно изучить [здесь](https://github.com/kazupon/vue-i18n/tree/dev/examples/interpolation/places)\n\nПотомки функционального компонента `i18n` интерполируют сообщения локализации по входному параметру `path`.\n\nВ примере выше:\n:::v-pre\n`<a :href=\"url\" target=\"_blank\">{{ $t('tos') }}</a>`\n:::\nинтерполируется с сообщением локализации `term`.\n\nВ примере выше интерполяция компонента использует **формат в виде списка**. Потомки функционального компонента `i18n` интерполируются по порядку их появления.\n\nОпределить тип корневого элемента можно указать с помощью входного параметра `tag`. Если входной параметр не указан, то по умолчанию будет `'span'`. Также можно указать значение `false`, чтобы вставлять дочерние элементы без создания и оборачивания в корневой.\n\n## Использование синтаксиса слотов\n\n:::tip Поддержка с версии\n:new: 8.14+\n:::\n\nГораздо удобнее использовать синтаксис именованных слотов. Например:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <i18n path=\"info\" tag=\"p\">\n    <template v-slot:limit>\n      <span>{{ changeLimit }}</span>\n    </template>\n    <template v-slot:action>\n      <a :href=\"changeUrl\">{{ $t('change') }}</a>\n    </template>\n  </i18n>\n  <!-- ... -->\n</div>\n```\n\n```js\nconst messages = {\n  en: {\n    info: 'You can {action} until {limit} minutes from departure.',\n    change: 'change your flight',\n    refund: 'refund the ticket'\n  }\n}\n\nconst i18n = new VueI18n({\n  locale: 'en',\n  messages\n})\n\nnew Vue({\n  i18n,\n  data: {\n    changeUrl: '/change',\n    refundUrl: '/refund',\n    changeLimit: 15,\n    refundLimit: 30\n  }\n}).$mount('#app')\n```\n\nРезультат:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <p>\n    You can <a href=\"/change\">change your flight</a> until\n    <span>15</span> minutes from departure.\n  </p>\n  <!-- ... -->\n</div>\n```\n\nС версии Vue 2.6 можно использовать сокращённый синтаксис слотов в шаблонах:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <i18n path=\"info\" tag=\"p\">\n    <template #limit>\n      <span>{{ changeLimit }}</span>\n    </template>\n    <template #action>\n      <a :href=\"changeUrl\">{{ $t('change') }}</a>\n    </template>\n  </i18n>\n  <!-- ... -->\n</div>\n```\n\n:::warning Ограничение\n:warning: В компоненте `i18n` входные параметры слота не поддерживаются.\n:::\n\n## Использование синтаксиса places\n\n:::danger Внимание!\nВ следующей мажорной версии входные параметры `place` и `places` будут объявлены устаревшими. Рекомендуем использовать синтаксис слотов.\n:::\n\n:::tip Поддержка с версии\n:new: 7.2+\n:::\n\n:::warning Обратите внимание\n:warning: В компоненте `i18n` содержимое, состоящее только из пробелов, будет опущено.\n:::\n\nИменованное форматирование поддерживается с помощью атрибута `place`. Например:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <i18n path=\"info\" tag=\"p\">\n    <span place=\"limit\">{{ changeLimit }}</span>\n    <a place=\"action\" :href=\"changeUrl\">{{ $t('change') }}</a>\n  </i18n>\n  <!-- ... -->\n</div>\n```\n\n```js\nconst messages = {\n  en: {\n    info: 'You can {action} until {limit} minutes from departure.',\n    change: 'change your flight',\n    refund: 'refund the ticket'\n  }\n}\n\nconst i18n = new VueI18n({\n  locale: 'en',\n  messages\n})\nnew Vue({\n  i18n,\n  data: {\n    changeUrl: '/change',\n    refundUrl: '/refund',\n    changeLimit: 15,\n    refundLimit: 30\n  }\n}).$mount('#app')\n```\n\nРезультат:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <p>\n    You can <a href=\"/change\">change your flight</a> until\n    <span>15</span> minutes from departure.\n  </p>\n  <!-- ... -->\n</div>\n```\n\n:::warning Обратите внимание\n:warning: Для использования именованного форматирования все потомки компонента `i18n` должны иметь установленный атрибут `place`. В противном случае будет использовано форматирование списком.\n:::\n\nЕсли всё же необходимо интерполировать текстовое содержимое с помощью именованного форматирования, можно определить свойство `places` на компоненте `i18n`. Например:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <i18n path=\"info\" tag=\"p\" :places=\"{ limit: refundLimit }\">\n    <a place=\"action\" :href=\"refundUrl\">{{ $t('refund') }}</a>\n  </i18n>\n  <!-- ... -->\n</div>\n```\n\nРезультат:\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <p>\n    You can <a href=\"/refund\">refund your ticket</a> until 30 minutes from\n    departure.\n  </p>\n  <!-- ... -->\n</div>\n```\n"
  },
  {
    "path": "vuepress/ru/guide/lazy-loading.md",
    "content": "# Ленивая загрузка переводов\n\nОдновременная загрузка всех файлов переводов может быть излишней и ненужной.\n\nЛенивая или асинхронная загрузка файлов переводов очень просто реализуется при использовании Webpack.\n\nПредположим, что у нас есть каталог проекта следующей структуры:\n\n```\nнаш-проект-отлично\n-dist\n-src\n--routes\n--store\n--setup\n---i18n-setup.js\n--lang\n---en.js\n---it.js\n```\n\nВ каталоге `lang` располагаются все файлы переводов. В каталоге `setup` сгруппированы различные файлы настроек, например настройки i18n, регистрация глобальных компонентов, инициализации плагинов и другое.\n\n```js\n// i18n-setup.js\nimport Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport messages from '@/lang/en'\nimport axios from 'axios'\n\nVue.use(VueI18n)\n\nexport const i18n = new VueI18n({\n  locale: 'en', // установка локализации\n  fallbackLocale: 'en',\n  messages // установка сообщений локализации\n})\n\nconst loadedLanguages = ['en'] // список локализаций, которые пред-загружены\n\nfunction setI18nLanguage(lang) {\n  i18n.locale = lang\n  axios.defaults.headers.common['Accept-Language'] = lang\n  document.querySelector('html').setAttribute('lang', lang)\n  return lang\n}\n\nexport function loadLanguageAsync(lang) {\n  // Если локализация та же\n  if (i18n.locale === lang) {\n    return Promise.resolve(setI18nLanguage(lang))\n  }\n\n  // Если локализация уже была загружена\n  if (loadedLanguages.includes(lang)) {\n    return Promise.resolve(setI18nLanguage(lang))\n  }\n\n  // Если локализация ещё не была загружена\n  return import(\n    /* webpackChunkName: \"lang-[request]\" */ `@/i18n/messages/${lang}.js`\n  ).then(messages => {\n    i18n.setLocaleMessage(lang, messages.default)\n    loadedLanguages.push(lang)\n    return setI18nLanguage(lang)\n  })\n}\n```\n\nДля начала создаём новый экземпляр VueI18n как обычно. Затем определяем массив `loadedLanguages` в котором будем хранить список загруженных языков. Далее создаём функцию `setI18nLanguage`, которая будет переключать локализацию в экземпляре vueI18n, axios и где ещё это необходимо.\n\nФункция `loadLanguageAsync` будет использоваться для изменения языка. Загрузка новых файлов осуществляется функцией `import`, которую предоставляет Webpack и позволяет загружать файлы динамически, а поскольку она возвращает Promise, то можем легко дождаться окончания загрузки.\n\nПодробнее о динамических импортах можно изучить в [документации Webpack](https://webpack.js.org/guides/code-splitting/#dynamic-imports).\n\nИспользовать `loadLanguageAsync` очень просто. Например, в хуке beforeEach vue-router.\n\n```js\nrouter.beforeEach((to, from, next) => {\n  const lang = to.params.lang\n  loadLanguageAsync(lang).then(() => next())\n})\n```\n\nМожно доработать реализацию, например добавив проверку поддерживается ли переданный `lang` или нет и вызывать `reject` чтобы отловить подобные случаи в хуке `beforeEach` и остановить навигацию.\n"
  },
  {
    "path": "vuepress/ru/guide/locale.md",
    "content": "# Переключение локализации\n\nОбычно используют корневой экземпляр Vue в качестве точки истины, а все дочерние компоненты используют свойство `locale` от класса `VueI18n` передаваемого по ссылке.\n\nИногда может потребоваться динамически переключать локализацию. Для этого нужно изменить значение свойства `locale` экземпляра `VueI18n`.\n\n```js\nconst i18n = new VueI18n({\n  locale: 'ru', // устанавливаем локализацию по умолчанию\n  ...\n})\n\n// Создаём корневой экземпляр Vue\nnew Vue({\n  i18n,\n  ...\n}).$mount('#app')\n\n// Переключаем на другую локализацию\ni18n.locale = 'en'\n```\n\nКаждый компонент содержит экземпляр `VueI18n`, ссылающийся на свойство `$i18n`, которое также можно использовать для переключения локализации.\n\nПример:\n\n```vue\n<template>\n  <div class=\"locale-changer\">\n    <select v-model=\"$i18n.locale\">\n      <option v-for=\"(lang, i) in langs\" :key=\"`Lang${i}`\" :value=\"lang\">\n        {{ lang }}\n      </option>\n    </select>\n  </div>\n</template>\n\n<script>\n  export default {\n    name: 'locale-changer',\n    data() {\n      return { langs: ['ru', 'en'] }\n    }\n  }\n</script>\n```\n\n:::warning Обратите внимание\n:warning: Изменение локализации игнорируется компонентами с опцией `sync: false`.\n:::\n\n:::warning Компонент vs. корневая область видимости\n:warning: Изменение `$i18n.locale` внутри компонента не приводит к изменению корневой локализации. Если вы полагаетесь на корневую локализацию, например, при использовании [корневой запасной локализации](./fallback.html), используйте `$root.$i18n.locale` вместо `$i18n.locale`.\n:::\n"
  },
  {
    "path": "vuepress/ru/guide/messages.md",
    "content": "# Синтаксис сообщений локализации\n\n## Структура\n\nСинтаксис сообщений локализации:\n\n```typescript\n// Как определение Flowtype, синтаксис сообщений перевода аналогичен аннотации BNF\ntype LocaleMessages = { [key: Locale]: LocaleMessageObject }\ntype LocaleMessageObject = { [key: Path]: LocaleMessage }\ntype LocaleMessageArray = LocaleMessage[]\ntype MessageContext = {\n  list: (index: number) => mixed,\n  named: (key: string) => mixed,\n  linked: (key: string) => TranslateResult,\n  values: any,\n  path: string,\n  formatter: Formatter,\n  messages: LocaleMessages,\n  locale: Locale\n};\ntype MessageFunction = (ctx: MessageContext) => string;\ntype LocaleMessage = string | MessageFunction | LocaleMessageObject | LocaleMessageArray;\ntype Locale = string\ntype Path = string\n```\n\nИспользуя синтаксис выше, можно создать следующую структуру сообщений локализации:\n\n```json\n{\n  // локализация 'ru'\n  \"ru\": {\n    \"key1\": \"это сообщение 1\", // обычное использование\n    \"nested\": {\n      // вложенное\n      \"message1\": \"это вложенное сообщение 1\"\n    },\n    \"errors\": [\n      // массив\n      \"это сообщение кода ошибки 0\",\n      {\n        // объект в массиве\n        \"internal1\": \"это внутреннее сообщение кода ошибки 1\"\n      },\n      [\n        // массив в массиве\n        \"это вложенный массив ошибки 1\"\n      ]\n    ]\n  },\n  // локализация 'en'\n  \"en\": {\n    // ...\n  }\n}\n```\n\nДля такой структуры сообщений локализации, можно переводить сообщения используя ключи:\n\n```html\n<div id=\"app\">\n  <!-- обычное использование -->\n  <p>{{ $t('key1') }}</p>\n  <!-- вложенное -->\n  <p>{{ $t('nested.message1') }}</p>\n  <!-- массив -->\n  <p>{{ $t('errors[0]') }}</p>\n  <!-- объект в массиве -->\n  <p>{{ $t('errors[1].internal1') }}</p>\n  <!-- массив в массиве -->\n  <p>{{ $t('errors[2][0]') }}</p>\n</div>\n```\n\nРезультат:\n\n```html\n<div id=\"app\">\n  <!-- обычное использование -->\n  <p>это сообщение 1</p>\n  <!-- вложенное -->\n  <p>это вложенное сообщение 1</p>\n  <!-- массив -->\n  <p>это сообщение кода ошибки 0</p>\n  <!-- объект в массиве -->\n  <p>это внутреннее сообщение кода ошибки 1</p>\n  <!-- массив в массиве -->\n  <p>это вложенный массив ошибки 1</p>\n</div>\n```\n\n## Связанные сообщения локализации\n\nКогда есть ключ с сообщением перевода, которое в точности повторяется в сообщении по другому ключу, то вместо дублирования можно поставить ссылку на него. Для этого к его содержимому нужно добавить префикс `@:` после которого указать полное имя ключа к сообщению перевода, включая пространство имён, к которому делаем ссылку.\n\nСообщения локализации:\n\n```js\nconst messages = {\n  en: {\n    message: {\n      the_world: 'the world',\n      dio: 'DIO:',\n      linked: '@:message.dio @:message.the_world !!!!'\n    }\n  }\n}\n```\n\nШаблон:\n\n```html\n<p>{{ $t('message.linked') }}</p>\n```\n\nРезультат:\n\n```html\n<p>DIO: the world !!!!</p>\n```\n\n### Форматирование связанных сообщений локализации\n\nЕсли важен регистр символов в переводе, то можно управлять регистром связанного сообщения локализации. Связанные сообщения можно отформатировать используя модификатор `@.modifier:key`\n\nДоступны следующие модификаторы:\n\n* `upper`: Форматирование в верхний регистр всех символов в связанном сообщении.\n* `lower`: Форматирование в нижний регистр всех символов в связанном сообщении.\n* `capitalize`: Форматирование заглавной первой буквы в связанном сообщении.\n\nСообщения локализации:\n\n```js\nconst messages = {\n  en: {\n    message: {\n      homeAddress: 'Home address',\n      missingHomeAddress: 'Please provide @.lower:message.homeAddress'\n    }\n  },\n  ru: {\n    message: {\n      homeAddress: 'Домашний адрес',\n      missingHomeAddress: 'Пожалуйста укажите @.lower:message.homeAddress'\n    }\n  }\n}\n```\n\n```html\n<label>{{ $t('message.homeAddress') }}</label>\n\n<p class=\"error\">{{ $t('message.missingHomeAddress') }}</p>\n```\n\nРезультат:\n\n```html\n<label>Домашний адрес</label>\n\n<p class=\"error\">Пожалуйста укажите домашний адрес</p>\n```\n\nПри необходимости можно добавлять новые модификаторы или перезаписывать существующие через опцию `modifiers` в конструкторе `VueI18n`.\n\n```js\nconst i18n = new VueI18n({\n  locale: 'ru',\n  modifiers: {\n    // Добавление нового модификатора\n    snakeCase: str => str.split(' ').join('-')\n  },\n  messages: {\n    // ...\n  },\n})\n```\n\n### Группировка с помощью скобок\n\nКлюч связанного сообщения также можно указывать в виде `@:(message.foo.bar.baz)`, где ссылка на другой ключ перевода обрамляется в скобки `()`.\n\nПодобное может потребоваться, если за ссылкой на другое сообщение `@:message.something` требуется поставить точку `.`, которая в противном случае считалась бы частью ссылки.\n\nСообщения локализации:\n\n```js\nconst messages = {\n  en: {\n    message: {\n      dio: 'DIO',\n      linked: \"There's a reason, you lost, @:(message.dio).\"\n    }\n  },\n  ru: {\n    message: {\n      dio: 'DIO',\n      linked: \"Есть причина по которой ты проиграл, @:(message.dio).\"\n    }\n  }\n}\n```\n\nШаблон:\n\n```html\n<p>{{ $t('message.linked') }}</p>\n```\n\nРезультат:\n\n```html\n<p>There's a reason, you lost, DIO.</p>\n```\n\n## Функция для сообщения\n\nvue-i18n рекомендует использовать строки для формата списком или именованного формата в качестве сообщения локализации при переводе сообщений.\n\nОднако бывают ситуации, когда из-за сложного синтаксиса языка, необходима полная мощь возможностей JavaScript. В таком случае, вместо строковых сообщений можно использовать **функцию для сообщения**.\n\nФункция ниже просто возвращает приветствие:\n\n```js\nconst messages = {\n  en: {\n    greeting: (ctx) => 'hello!'\n  },\n  ru: {\n    greeting: (ctx) => 'привет!'\n  }\n}\n```\n\nИспользовать функцию для сообщения очень просто! Необходимо просто указать ключ с помощью `$t` или `t`:\n\n```html\n<p>{{ $t('greeting') }}</p>\n```\n\nРезультат будет таким:\n\n```html\n<p>привет!</p>\n```\n\nИспользуется возвращаемый результат из функции для сообщения.\n\n### Именованный формат\n\nvue-i18n поддерживает [именованный формат](./formatting.md#именованный-формат) для строковых сообщений. vue-i18n интерполирует значения с помощью `$t` или `t` и выводит их.\n\nТоже самое можно сделать и с функцией для сообщения, используя **контекст сообщения**:\n\nПример приветствия:\n\n```js\nconst messages = {\n  en: {\n    greeting: (ctx) => `hello, ${ctx.named('name')}!`\n  },\n  ru: {\n    greeting: (ctx) => `привет, ${ctx.named('name')}!`\n  }\n}\n```\n\nШаблон:\n\n```html\n<p>{{ $t('greeting', { name: 'DIO' }) }}</p>\n```\n\nРезультат:\n\n```html\n<p>привет, DIO!</p>\n```\n\nКонтекст сообщения предоставляет доступ к функции `named`. Необходимо указать ключ, указываемым для `$t` или `t`, который разрешится требуемым значением.\n\n### Формат списков\n\nИспользование формата списков аналогично именованному формату, описанному выше.\n\nvue-i18n поддерживает [формат списков](./formatting.md#формат-списков) для строковых сообщений. vue-i18n интерполирует значения с помощью `$t` или `t` и выводит их.\n\nТоже самое можно сделать и с функцией для сообщения, используя **контекст сообщения**:\n\nПример приветствия:\n\n```js\nconst messages = {\n  en: {\n    greeting: (ctx) => `hello, ${ctx.list(0)}!`\n  },\n  ru: {\n    greeting: (ctx) => `привет, ${ctx.list(0)}!`\n  }\n}\n```\n\nШаблон:\n\n```html\n<p>{{ $t('greeting', ['DIO']) }}</p>\n```\n\nРезультат:\n\n```html\n<p>привет, DIO!</p>\n```\n\nКонтекст сообщения предоставляет доступ к функции `list`. Необходимо указать ключ, указываемым для `$t` или `t`, который разрешится требуемым значением.\n\n### Ограничение\n\nВ функции для сообщения следующие возможности, которые доступны в строковом варианте, не будут доступны через контекст сообщения:\n\n- Связанные сообщения локализации\n- Плюрализация\n"
  },
  {
    "path": "vuepress/ru/guide/number.md",
    "content": "# Локализация чисел\n\n:::tip Поддержка с версии\n:new: 7.0+\n:::\n\nМожно выполнять локализацию чисел по соответствующему формату.\n\nПример формата для чисел:\n\n```js\nconst numberFormats = {\n  'en-US': {\n    currency: {\n      style: 'currency',\n      currency: 'USD'\n    }\n  },\n  'ru-RU': {\n    currency: {\n      style: 'currency',\n      currency: 'RUB',\n      currencyDisplay: 'symbol'\n    }\n  }\n}\n```\n\nКак указано выше, можно задать числовые форматы (например, `currency` для валюты) используя [опции ECMA-402 Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat).\n\nПосле этого, для возможности использования данного формата в сообщениях локализации, необходимо задать опцию `numberFormats` конструктора `VueI18n`:\n\n```js\nconst i18n = new VueI18n({\n  numberFormats\n})\n\nnew Vue({\n  i18n\n}).$mount('#app')\n```\n\nШаблон:\n\n```html\n<div id=\"app\">\n  <p>{{ $n(100, 'currency') }}</p>\n  <p>{{ $n(100, 'currency', 'ru-RU') }}</p>\n</div>\n```\n\nРезультат:\n\n```html\n<div id=\"app\">\n  <p>$100.00</p>\n  <p>100,00 ₽</p>\n</div>\n```\n\n## Пользовательское форматирование\n\n:::tip Поддержка с версии\n:new: 8.10+\n:::\n\nМетод `$n` возвращает результат в виде строки с полностью отформатированным числом, которую можно использовать лишь целиком. В случаях, когда нужно стилизовать некоторую часть отформатированного числа (например, дробную часть), `$n` будет недостаточно. В таких случаях необходимо использовать функциональный компонент `<i18n-n>`.\n\nПри минимальном наборе свойств `<i18n-n>` генерирует тот же результат, что и `$n` обернутый в сконфигурированный DOM-элемент.\n\nШаблон:\n\n```html\n<div id=\"app\">\n  <i18n-n :value=\"100\"></i18n-n>\n  <i18n-n :value=\"100\" format=\"currency\"></i18n-n>\n  <i18n-n :value=\"100\" format=\"currency\" locale=\"ru-RU\"></i18n-n>\n</div>\n```\n\nРезультат:\n\n```html\n<div id=\"app\">\n  <span>100</span>\n  <span>$100.00</span>\n  <span>100,00 ₽</span>\n</div>\n```\n\nНо по-настоящему оценить удобство компонента можно лишь тогда, когда он применяется с использованием [слотов с ограниченной областью видимости](https://ru.vuejs.org/v2/guide/components-slots.html#%D0%A1%D0%BB%D0%BE%D1%82%D1%8B-%D1%81-%D0%BE%D0%B3%D1%80%D0%B0%D0%BD%D0%B8%D1%87%D0%B5%D0%BD%D0%BD%D0%BE%D0%B9-%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D1%8C%D1%8E-%D0%B2%D0%B8%D0%B4%D0%B8%D0%BC%D0%BE%D1%81%D1%82%D0%B8).\n\nДопустим, есть требование выводить целую часть числа полужирным шрифтом. Реализовать это можно с помощью слота `integer`:\n\n```html\n<i18n-n :value=\"100\" format=\"currency\">\n  <span v-slot:integer=\"slotProps\" styles=\"font-weight: bold\">\n    {{ slotProps.integer }}\n  </span>\n</i18n-n>\n```\n\nРезультат:\n\n```html\n<span>$<span styles=\"font-weight: bold\">100</span>.00</span>\n```\n\nМожно использовать несколько слотов одновременно:\n\n```html\n<i18n-n :value=\"1234\" :format=\"{ key: 'currency', currency: 'EUR' }\">\n  <span v-slot:currency=\"slotProps\" styles=\"color: green\">\n    {{ slotProps.currency }}\n  </span>\n  <span v-slot:integer=\"slotProps\" styles=\"font-weight: bold\">\n    {{ slotProps.integer }}\n  </span>\n  <span v-slot:group=\"slotProps\" styles=\"font-weight: bold\">\n    {{ slotProps.group }}\n  </span>\n  <span v-slot:fraction=\"slotProps\" styles=\"font-size: small\">\n    {{ slotProps.fraction }}\n  </span>\n</i18n-n>\n```\n\n(Полученный HTML ниже отформатирован для лучшей читаемости)\n\n```html\n<span>\n  <span styles=\"color: green\">€</span>\n  <span styles=\"font-weight: bold\">1</span>\n  <span styles=\"font-weight: bold\">,</span>\n  <span styles=\"font-weight: bold\">234</span>\n  <span styles=\"font-size: small\">00</span>\n</span>\n```\n\nОпределить тип корневого элемента можно указать с помощью входного параметра `tag`. Если входной параметр не указан, то по умолчанию будет `'span'`. Также можно указать значение `false`, чтобы вставлять дочерние элементы без создания и оборачивания в корневой.\n\nПолный список поддерживаемых слотов, а также другие свойства `<i18n-n>` можно найти [на странице справочника API](../api/readme.md#i18n-n-functional-component).\n"
  },
  {
    "path": "vuepress/ru/guide/pluralization.md",
    "content": "# Плюрализация\n\nДля переводимых сообщений есть возможность использовать плюрализацию. Для этого необходимо указывать строки переводов для различных случаев через разделитель `|`.\n\n*В шаблоне в таких случаях необходимо использовать метод `$tc()` вместо `$t()`.*\n\nСообщения локализации:\n\n```js\nconst messages = {\n  en: {\n    car: 'car | cars',\n    apple: 'no apples | one apple | {count} apples'\n  },\n  ru: {\n    car: 'машина | машины',\n    apple: 'нет яблок | одно яблоко | {count} яблок'\n  }\n}\n```\n\nШаблон:\n\n```html\n<p>{{ $tc('car', 1) }}</p>\n<p>{{ $tc('car', 2) }}</p>\n\n<p>{{ $tc('apple', 0) }}</p>\n<p>{{ $tc('apple', 1) }}</p>\n<p>{{ $tc('apple', 10, { count: 10 }) }}</p>\n```\n\nРезультат:\n\n```html\n<p>машина</p>\n<p>машины</p>\n\n<p>нет яблок</p>\n<p>одно яблоко</p>\n<p>10 яблок</p>\n```\n\n## Аргумент для доступа к числу\n\nНет необходимости явно передавать число для плюрализации. В сообщениях локализации число доступно через именованные аргументы `{count}` и/или `{n}`. При желании их можно переопределить.\n\nСообщения локализации:\n\n```js\nconst messages = {\n  en: {\n    apple: 'no apples | one apple | {count} apples',\n    banana: 'no bananas | {n} banana | {n} bananas'\n  },\n  ru: {\n    apple: 'нет яблок | одно яблоко | {count} яблок',\n    banana: 'нет бананов | {n} банан | {n} бананов'\n  }\n}\n```\n\nШаблон:\n\n```html\n<p>{{ $tc('apple', 10, { count: 10 }) }}</p>\n<p>{{ $tc('apple', 10) }}</p>\n\n<p>{{ $tc('banana', 1, { n: 1 }) }}</p>\n<p>{{ $tc('banana', 1) }}</p>\n<p>{{ $tc('banana', 100, { n: 'слишком много' }) }}</p>\n```\n\nРезультат:\n\n```html\n<p>10 яблок</p>\n<p>10 яблок</p>\n\n<p>1 банан</p>\n<p>1 банан</p>\n<p>слишком много бананов</p>\n```\n\n## Пользовательская плюрализация\n\nСтандартная реализация плюрализации не подходит для некоторых языков (к примеру, в славянских языках другие правила множественности).\n\nМожно предоставить собственную реализацию, передав `pluralizationRules` в конструктор `VueI18n`.\n\nУпрощенный пример для славянских языков (Русский, Украинский и другие):\n```js\nnew VueI18n({\n  // Ключ - язык, для которого будет применяться правило, в этом примере - `'ru'`\n  // Value - функция плюрализации\n  pluralizationRules: {\n    /**\n     * @param choice {number} индекс выбора, переданный в $tc: `$tc('path.to.rule', choiceIndex)`\n     * @param choicesLength {number} общее количество доступных вариантов\n     * @returns финальный индекс для выбора соответственного варианта слова\n     */\n    'ru': function(choice, choicesLength) {\n      // this === VueI18n экземпляра, так что свойство locale также существует здесь\n\n      if (choice === 0) {\n        return 0;\n      }\n\n      const teen = choice > 10 && choice < 20;\n      const endsWithOne = choice % 10 === 1;\n\n      if (choicesLength < 4) {\n        return (!teen && endsWithOne) ? 1 : 2;\n      }\n      if (!teen && endsWithOne) {\n        return 1;\n      }\n      if (!teen && choice % 10 >= 2 && choice % 10 <= 4) {\n        return 2;\n      }\n\n      return (choicesLength < 4) ? 2 : 3;\n    }\n  }\n})\n```\n\nТакая реализация позволит использовать:\n\n```js\nconst messages = {\n  ru: {\n    car: '0 машин | {n} машина | {n} машины | {n} машин',\n    banana: 'нет бананов | {n} банан | {n} банана | {n} бананов'\n  }\n}\n```\n\nДля такого формата вариантов `0 вещей | количество вещей заканчивается на 1 | количество вещей заканчивается на 2-4 | количество вещей заканчивается на 5-9, 0 и числа от 11 до 19`.\nP.S. Славянское множественное число - сложное явление, подробнее о нем можно прочитать [здесь](http://www.russianlessons.net/lessons/lesson11_main.php).\n\nВ шаблоне, по-прежнему, необходимо использовать `$tc()` вместо `$t()`:\n\n```html\n<p>{{ $tc('car', 1) }}</p>\n<p>{{ $tc('car', 2) }}</p>\n<p>{{ $tc('car', 4) }}</p>\n<p>{{ $tc('car', 12) }}</p>\n<p>{{ $tc('car', 21) }}</p>\n\n<p>{{ $tc('banana', 0) }}</p>\n<p>{{ $tc('banana', 4) }}</p>\n<p>{{ $tc('banana', 11) }}</p>\n<p>{{ $tc('banana', 31) }}</p>\n```\n\nРезультат:\n\n```html\n<p>1 машина</p>\n<p>2 машины</p>\n<p>4 машины</p>\n<p>12 машин</p>\n<p>21 машина</p>\n\n<p>нет бананов</p>\n<p>4 банана</p>\n<p>11 бананов</p>\n<p>31 банан</p>\n```\n\n### Плюрализация по умолчанию\n\nЕсли для используемой локали не предоставить правило плюрализации, [по умолчанию](#плюрализация) будет использовано правило для английского языка\n"
  },
  {
    "path": "vuepress/ru/guide/sfc.md",
    "content": "# Однофайловые компоненты\n\n## Базовое использование\n\nВ компоненте Vue или приложении Vue с использованием однофайловых компонентов, можно управлять сообщениями локализации с помощью пользовательского блока `i18n`.\n\nКод компонента из [примера использования с однофайловыми компонентами](https://github.com/kazupon/vue-i18n/tree/dev/examples/sfc):\n\n```vue\n<i18n>\n{\n  \"en\": {\n    \"hello\": \"hello world!\"\n  },\n  \"ru\": {\n    \"hello\": \"Привет мир!\"\n  }\n}\n</i18n>\n\n<template>\n  <div id=\"app\">\n    <label for=\"locale\">Язык</label>\n    <select v-model=\"locale\">\n      <option>en</option>\n      <option>ru</option>\n    </select>\n    <p>Сообщение: {{ $t('hello') }}</p>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'app',\n  data () {\n    this.$i18n.locale = 'ru';\n    return { locale: 'ru' }\n  },\n  watch: {\n    locale (val) {\n      this.$i18n.locale = val\n    }\n  }\n}\n</script>\n```\n\n## Установка vue-i18n-loader\n\nТребуется установить `vue-loader` и `vue-i18n-loader` чтобы использовать пользовательские блоки `<i18n>`. Скорее всего [vue-loader](https://github.com/vuejs/vue-loader) уже используется в проекте, если уже работаете с однофайловыми компонентами, но необходимо дополнительно установить [vue-i18n-loader](https://github.com/kazupon/vue-i18n-loader):\n\n```bash\nnpm i --save-dev @kazupon/vue-i18n-loader\n```\n\n## Webpack\n\nДля Webpack требуется следующая конфигурация:\n\nДля vue-loader v15 или более поздних версий:\n\n```js\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader'\n      },\n      {\n        resourceQuery: /blockType=i18n/,\n        type: 'javascript/auto',\n        loader: '@kazupon/vue-i18n-loader'\n      }\n      // ...\n    ]\n  }\n  // ...\n}\n```\n\nДля vue-loader v14:\n\n```js\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader',\n        options: {\n          loaders: {\n            // необходимо указать ключ `i18n` для загрузчика `vue-i18n-loader`\n            // (https://github.com/kazupon/vue-i18n-loader)\n            i18n: '@kazupon/vue-i18n-loader'\n          }\n        }\n      }\n      // ...\n    ]\n  }\n  // ...\n}\n```\n\n## Vue CLI 3.0\n\n[Vue CLI 3.0](https://github.com/vuejs/vue-cli) скрывает конфигурацию Webpack, поэтому для добавления поддержки тегов `<i18n>` в однофайловых компонентах необходимо изменить существующую конфигурацию.\n\nДля этого нужно создать файл `vue.config.js` в корне проекта и добавить в него следующее:\n\nДля vue-loader v15 или более поздних версий:\n\n```js\nmodule.exports = {\n  chainWebpack: config => {\n    config.module\n      .rule('i18n')\n      .resourceQuery(/blockType=i18n/)\n      .type('javascript/auto')\n      .use('i18n')\n        .loader('@kazupon/vue-i18n-loader')\n        .end()\n  }\n}\n```\n\nДля vue-loader v14:\n\n```js\nconst merge = require('deepmerge')\n\nmodule.exports = {\n  chainWebpack: config => {\n    config.module\n      .rule('vue')\n      .use('vue-loader')\n      .tap(options =>\n        merge(options, {\n          loaders: {\n            i18n: '@kazupon/vue-i18n-loader'\n          }\n        })\n      )\n  }\n}\n```\n\n_Не забудьте установить [deepmerge](https://github.com/KyleAMathews/deepmerge)! (`npm i deepmerge -D` или `yarn add deepmerge -D`)_\n\nПодробнее о возможностях изменения существующей конфигурации Webpack можно изучить [здесь](https://cli.vuejs.org/ru/guide/webpack.html).\n\n## Laravel-Mix\n\nДля Laravel-mix 4 с vue-loader v15 или более поздней версии:\n\n```js\n// Расширяем Mix с помощью метода \"i18n\", который загрузит vue-i18n-loader\nmix.extend( 'i18n', new class {\n        webpackRules() {\n            return [\n                {\n                    resourceQuery: /blockType=i18n/,\n                    type:          'javascript/auto',\n                    loader:        '@kazupon/vue-i18n-loader',\n                },\n            ];\n        }\n    }(),\n);\n\n// Убедитесь что вызвали .i18n() (для загрузки загрузчика) перед .js(..., ...)\nmix.i18n()\n   .js( 'resources/js/App.js', 'public/js/app.js' )\n   ...\n```\n\nДля Laravel-mix 2 с vue-loader v14:\n\nВ Laravel-mix, начиная с версии [V2.1](https://github.com/JeffreyWay/laravel-mix/releases/tag/v2.1), можно добавлять пользовательские правила с помощью `mix.extend()`. Laravel-mix уже имеет собственные правила для обработки `.vue` файлов. Чтобы добавить `vue-i18n-loader`, нужно добавить в `webpack.mix.js` следующее:\n\n```js\n// Код ниже внедрит загрузчик i18n (@kazupon/vue-i18n-loader) в качестве загрузчика .vue файлов.\nmix.extend( 'i18n', function( webpackConfig, ...args ) {\n    webpackConfig.module.rules.forEach( ( module ) => {\n        // Поиск компонента \"vue-loader\", который обрабатывает .vue файлы.\n        if( module.loader !== 'vue-loader' ) {\n            return;\n        }\n\n        // В этом модуле добавляем vue-i18n-loader для тега i18n.\n        module.options.loaders.i18n = '@kazupon/vue-i18n-loader';\n    } );\n} );\n\n// Убедитесь что вызвали .i18n() (для загрузки загрузчика) перед .js(..., ...)\nmix.i18n()\n   .js( 'resources/assets/js/App.js', 'public/js/app.js' )\n   ...\n```\n\n## Загрузка YAML\n\nПользовательские блоки `i18n` можно указывать в формате `JSON` или `YAML` (используя функцию предварительного загрузчика `vue-loader`).\n\nПользовательский блок `i18n` в формате `YAML`:\n\n```vue\n<i18n>\n  en:\n    hello: \"hello world!\"\n  ru:\n    hello: \"привет мир!\"\n</i18n>\n```\n\nКонфигурация Webpack:\n\nДля vue-loader v15 или более поздних версий:\n\n```js\n// Vue CLI 3.0\nmodule.exports = {\n  chainWebpack: config => {\n    config.module\n      .rule('i18n')\n      .resourceQuery(/blockType=i18n/)\n      .type('javascript/auto')\n      .use('i18n')\n        .loader('@kazupon/vue-i18n-loader')\n        .end()\n      .use('yaml')\n        .loader('yaml-loader')\n        .end()\n  }\n}\n```\n\nДля vue-loader v14:\n\n```js\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader',\n        options: {\n          preLoaders: {\n            i18n: 'yaml-loader'\n          },\n          loaders: {\n            i18n: '@kazupon/vue-i18n-loader'\n          }\n        }\n      }\n      // ...\n    ]\n  }\n  // ...\n}\n```\n\n## Несколько пользовательских блоков\n\nМожно использовать сообщения локализации из нескольких пользовательских блоков `i18n`.\n\n```vue\n<i18n src=\"./common/locales.json\"></i18n>\n<i18n>\n  {\n    \"en\": {\n      \"hello\": \"hello world!\"\n    },\n    \"ru\": {\n      \"hello\": \"Привет мир!\"\n    }\n  }\n</i18n>\n```\n\nВ примере выше, первый пользовательский блок загружает общие сообщения локализации с помощью атрибута `src`, второй пользовательский блок загружает сообщения локализации, которые определены только в этом однофайловом компоненте. Все они будут объединены в качестве сообщений локализации компонента.\n\nНесколько пользовательских блоков полезны, когда использовать их в качестве модулей.\n\n## Локальные стили\n\nПри использовании `vue-i18n` с локальными стилями (`style scoped`) необходимо помнить и использовать [глубокий селектор](https://vue-loader.vuejs.org/ru/guide/scoped-css.html#%D0%BA%D0%BE%D1%80%D0%BD%D0%B5%D0%B2%D0%BE%D0%B9-%D1%8Dn%D0%B5%D0%BC%D0%B5%D0%BD%D1%82-%D0%B4%D0%BE%D1%87%D0%B5%D1%80%D0%BD%D0%B5%D0%B3%D0%BE-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0) для стилизации элемента __*внутри*__ строки перевода. Например:\n\n__Когда перевод содержит только текст__ (работает без глубокого селектора)\n\n```vue\n<i18n>\n  {\n    \"en\": {\n      \"hello\": \"hello world!\"\n    },\n    \"ru\": {\n      \"hello\": \"Привет мир!\"\n    }\n  }\n</i18n>\n\n<template>\n  <div class=\"parent\">\n    <p>Сообщение: {{ $t('hello') }}</p>\n  </div>\n</template>\n\n<!-- Будет работать -->\n<style scoped>\n  .parent p {\n    color: #42b883;\n  }\n</style>\n```\n\n__Когда перевод содержит HTML-элемент__ (необходимо использовать глубокий селектор)\n\n```vue\n<i18n>\n  {\n    \"en\": {\n      \"hello\": \"hello<span>world!</span>\"\n    },\n    \"ru\": {\n      \"hello\": \"привет <span>мир!</span>\"\n    }\n  }\n</i18n>\n\n<template>\n  <div class=\"parent\">\n    <p v-html=\"$t('hello')\"></p>\n  </div>\n</template>\n\n<!-- НЕ БУДЕТ РАБОТАТЬ! -->\n<style scoped>\n  .parent p {\n    color: #42b883;\n  }\n\n  .parent p span {\n    color: red;\n  }\n</style>\n\n<!-- Будет работать >>> -->\n<style scoped>\n  .parent p {\n    color: #42b883;\n  }\n\n  .parent p >>> span {\n    color: red;\n  }\n</style>\n\n<!-- Будет работать /deep/ -->\n<style scoped>\n  .parent p {\n    color: #42b883;\n  }\n\n  .parent p /deep/ span {\n    color: red;\n  }\n</style>\n\n<!-- Будет работать ::v-deep -->\n<style scoped>\n  .parent p {\n    color: #42b883;\n  }\n\n  ::v-deep .parent p span {\n    color: red;\n  }\n</style>\n```\n\n## Пользовательские блоки в функциональном компоненте\n\nЕсли в шаблоне однофайловых компонентов используется функциональный компонент и определены пользовательские блоки `i18n`, то обратите внимание что невозможно локализовать с помощью сообщений локализации.\n\nНапример, следующий код не может использовать сообщения локализации из блока `i18n`.\n\n```vue\n<i18n>\n  {\n    \"en\": {\n      \"hello\": \"hello world\"\n    },\n    \"ru\": {\n      \"hello\": \"привет мир\"\n    }\n  }\n</i18n>\n\n<template functional>\n  <!-- Сообщение локализации 'hello' из родительского экземпляра -->\n  <p>{{ parent.$t('hello') }}</p>\n</template>\n```\n"
  },
  {
    "path": "vuepress/ru/guide/tooling.md",
    "content": "# Инструментарий\n\nДля поддержки i18n приложений Vue некоторые инструменты предоставляются официально.\n\nТакже есть инструменты от сторонних разработчиков, которые интегрируются в Vue I18n.\n\n## Официальный инструментарий\n\n### Плагин для Vue CLI\n\n[vue-cli-plugin-i18n](https://github.com/kazupon/vue-cli-plugin-i18n) — официальный плагин для Vue CLI.\n\nС помощью этого плагина можно настроить среду i18n для приложения Vue и поддерживать среду разработки i18n.\n\n### Модуль для Nuxt\n\n[nuxt-i18n](https://github.com/nuxt-community/nuxt-i18n/) — соответствующий модуль для Nuxt.js.\n\n### Загрузчик для Webpack\n\n[vue-i18n-loader](https://github.com/kazupon/vue-i18n-loader) — официальный загрузчик для webpack.\n\nС помощью этого загрузчика можно использовать пользовательские блоки `i18n` в однофайловых компонентах.\n\nПодробнее о пользовательских блоках `i18n` можно изучить в разделе [Однофайловых компонентов](./sfc.md)\n\n### Плагин для ESLint\n\n[eslint-plugin-vue-i18n](https://intlify.github.io/eslint-plugin-vue-i18n/) — ESLint-плагин для Vue I18n.\n\nПозволяет легко интегрировать функции проверки локализацией в ваше приложение Vue.js.\n\n### Расширения\n\n[vue-i18n-extensions](https://github.com/kazupon/vue-i18n-extensions) — предоставляет некоторые расширения дляVue I18n.\n\nЭти расширения позволяет использовать в рендеринге на стороне сервера (SSR) и улучшить производительность i18n.\n\n## Сторонние разработки\n\n### BabelEdit\n\n[BabelEdit](https://www.codeandweb.com/babeledit) — редактор переводов для веб-приложений.\n\nBabelEdit может переводить файлы `json`, а также умеет работать с пользовательскими блоками `i18n` однофайловых компонентов.\n\nПодробнее про BabelEdit можно узнать [на странице введения](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-vue-app-with-vue-i18n).\n\n### i18n Ally\n\n[i18n Ally](https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally) — расширение i18n для VSCode.\n\ni18n Ally предоставляет потрясающий DX для разработки с использованием i18n.\n\nПодробнее о расширении i18n Ally можно изучить в [README](https://github.com/antfu/i18n-ally/blob/master/README.md).\n\n### i18nPlugin (платформа intellij)\n\n[i18nPlugin](https://github.com/nyavro/i18nPlugin) — плагин Intellij idea для поддержки i18next ([Jetbrains plugin page](https://plugins.jetbrains.com/plugin/12981-i18n-support)).\n\nПлагин для i18n typescript/javascript/PHP. Поддерживает vue-i18n. Для включения поддержки vue-i18n в настройках -> Tools -> i18n Plugin configuration выберите \"Vue-i18n\". Необходимо установить каталоги с файлами локализаций (по умолчанию locales).\n\n### vue-i18n-extract\n\n[vue-i18n-extract](https://github.com/pixari/vue-i18n-extract) выполняет статический анализ проекта Vue.js на основе vue-i18n и сообщает следующую информацию:\n\n- список всех **неиспользуемых ключей vue-i18n** (записи, найденные в файлах перевода, но не использованные в проекте)\n- список всех **пропущенных ключей** (записи, найденные в проекте, но отсутствующие в файлах перевода)\n\nИмеется возможность отобразить результат в консоли или записать его в файл json.\n\nПропущенные ключи также могут быть автоматически добавлены в заданные файлы переводов.\n"
  },
  {
    "path": "vuepress/ru/installation.md",
    "content": "# Установка\n\n## Примечание совместимости\n\n- Vue.js версии `2.0.0`+\n\n## Загрузка файла / CDN\n\n<https://unpkg.com/vue-i18n@8>\n\nСервис [unpkg.com](https://unpkg.com) предоставляет CDN-ссылки на основе NPM-пакетов. Ссылка выше будет всегда указывать на последнюю версию на NPM. Можно использовать конкретную версию или тег с помощью URL следующего вида <https://unpkg.com/vue-i18n@8.17.5/dist/vue-i18n.js>\n\nПри подключении vue-i18n после Vue плагин установит себя автоматически:\n\n```html\n<script src=\"https://unpkg.com/vue/dist/vue.js\"></script>\n<script src=\"https://unpkg.com/vue-i18n@8\"></script>\n```\n\n## NPM\n\n```bash\nnpm install vue-i18n\n```\n\n## Yarn\n\n```bash\nyarn add vue-i18n\n```\n\nПри использовании системы модулей нужно явно устанавливать `vue-i18n`\nчерез `Vue.use()`:\n\n```js\nimport Vue from 'vue'\nimport VueI18n from 'vue-i18n'\n\nVue.use(VueI18n)\n```\n\nПодобного не требуется делать при подключении через глобальный тег `<script>`.\n\n## Vue CLI 3.x\n\n```bash\nvue add i18n\n```\n\nПредварительно требуется установить Vue CLI 3.x, его можно установить следующей командой:\n\n```bash\nnpm install @vue/cli -g\n```\n\n## Dev-сборка\n\nПри необходимости использовать последнюю dev-сборку нужно склонировать репозиторий с GitHub и выполнить сборку `vue-i18n` самостоятельно.\n\n```bash\ngit clone https://github.com/kazupon/vue-i18n.git node_modules/vue-i18n\ncd node_modules/vue-i18n\nnpm install # или `yarn`\nnpm run build  # или `yarn run build`\n```\n\n## Отличия различных сборок\n\n[Внутри каталога dist / NPM-пакета](https://cdn.jsdelivr.net/npm/vue-i18n/dist/) можно обнаружить несколько различных сборок VueI18n. Вот следующие отличия между ними:\n\n- UMD: `vue-i18n.js`\n- CommonJS: `vue-i18n.common.js`\n- ES Module для систем сборки: `vue-i18n.esm.js`\n- ES Module для браузеров: `vue-i18n.esm.browser.js`\n\n### Термины\n\n- **[UMD](https://github.com/umdjs/umd)**: UMD-сборки можно использовать непосредственно в браузере через тег `<script>`. Файл по умолчанию с Unpkg CDN [https://unpkg.com/vue-i18n](https://unpkg.com/vue-i18n) указывает на UMD-сборку (`vue-i18n.js`).\n\n- **[CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1)**: CommonJS сборки предназначены для использования со старыми системами сборки, такими как [browserify](http://browserify.org/) или [webpack 1](https://webpack.github.io). Файлом по умолчанию для этих систем сборки (`pkg.main`) будет сборка CommonJS (`vue-i18n.common.js`).\n\n- **[ES Module](http://exploringjs.com/es6/ch_modules.html)**: VueI18n, начиная с версии 8.11, предоставляет две сборки ES-модулей (ESM):\n\n  - ESM для систем сборки: предназначен для использования с современными системами сборки, такими как [webpack 2](https://webpack.js.org) или [Rollup](https://rollupjs.org/). Формат ESM разработан для возможности статического анализа, чтобы системы сборки могли применять \"tree-shaking\" и удалять неиспользуемый код из финального приложения. Файлом по умолчанию для этих систем сборки (`pkg.module`) будет ES-сборка (`vue-i18n.esm.js`).\n  - ESM для браузеров (только для 8.11+, `vue-i18n.esm.browser.js`): предназначен для импорта напрямую в современных браузерах через тег `<script type=\"module\">`.\n"
  },
  {
    "path": "vuepress/ru/introduction.md",
    "content": "# Введение\n\n:::warning Предупреждение\n:warning: Документация для Vue I18n v6.0 или более поздних версий. Если используете и ищете документацию для версии v5.x, обратитесь к разделу [устаревшей версии](./legacy/).\n:::\n\nVue I18n — плагин для интернационализации во Vue.js. Он легко интегрирует дополнительные возможности по локализации приложения Vue.js.\n\nИзучение лучше начинать с раздела [Начало работы](./started.md)\n\n## Спонсоры\n\n### 🥇 Золото\n\n<p style=\"text-align: center;\">\n  <a\n    href=\"https://nuxtjs.org/\"\n    style=\"display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      src=\"/vue-i18n/patrons/nuxt.png\"\n      alt=\"Nuxt.js\"\n    />\n  </a>\n</p>\n\n### 🥈 Серебряные\n\n<p style=\"text-align: center;\">\n  <a\n    href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\"\n    style=\"max-width: 320px; width: 100%; display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      src=\"/vue-i18n/patrons/babeledit.png\"\n      alt=\"Редактор переводов BabelEdit для приложений (веб-приложений)\"\n    />\n  </a>\n</p>\n\n### 🥉 Бронза\n\n<p style=\"text-align: center;\">\n  <a\n    href=\"https://zenarchitects.co.jp/\"\n    style=\"max-width: 200px; width: 100%; height: 80px; display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      src=\"/vue-i18n/patrons/zenarchitects.png\"\n      alt=\"zenarchitects\"\n    />\n  </a>\n  <a\n    href=\"https://www.sendcloud.com/\"\n    style=\"max-width: 200px; width: 100%; height: 80px; display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      src=\"/vue-i18n/patrons/sendcloud.svg\"\n      alt=\"sendcloud\"\n    />\n  </a>\n</p>\n\n## Поддержите на Patreon\n\nВаша компания для создания потрясающих приложений использует vue-i18n или vue-cli-plugin-i18n? Присоединяйтесь к другим патронам или становитесь спонсором, чтобы увидеть свой логотип в документации! Поддержка на Patreon позволяет автору меньше работать и больше заниматься развитием свободным опенсорсом, таким как vue-i18n! Спасибо!\n\n<p style=\"text-align: center;\">\n  <iframe src=\"https://github.com/sponsors/kazupon/card\" title=\"Sponsor kazupon\" height=\"225\" width=\"600\" style=\"border: 0; margin: 24px\"></iframe>\n</p>\n"
  },
  {
    "path": "vuepress/ru/started.md",
    "content": "# Начало работы\n\n:::tip ПРИМЕЧАНИЕ\nВ примерах кода этого руководства используется [ES2015](https://github.com/lukehoban/es6features).\n:::\n\n## HTML\n\n```html\n<script src=\"https://unpkg.com/vue/dist/vue.js\"></script>\n<script src=\"https://unpkg.com/vue-i18n@8\"></script>\n\n<div id=\"app\">\n  <p>{{ $t(\"message.hello\") }}</p>\n</div>\n```\n\n## JavaScript\n\n```js\n// При использовании модульной системы (например, через vue-cli)\n// нужно импортировать Vue и VueI18n и вызвать Vue.use(VueI18n).\n//\n// import Vue from 'vue'\n// import VueI18n from 'vue-i18n'\n//\n// Vue.use(VueI18n)\n\n// Готовые переводы сообщений локализаций\nconst messages = {\n  en: {\n    message: {\n      hello: 'hello world'\n    }\n  },\n  ru: {\n    message: {\n      hello: 'Привет мир'\n    }\n  }\n}\n\n// Создание экземпляра VueI18n с настройками\nconst i18n = new VueI18n({\n  locale: 'ru', // установка локализации по умолчанию\n  messages // установка сообщений локализаций\n})\n\n// Создание экземпляра Vue с опцией `i18n`\nnew Vue({ i18n }).$mount('#app')\n\n// Теперь можно запускать приложение!\n```\n\nРезультат будет таким:\n\n```html\n<div id=\"#app\">\n  <p>Привет мир</p>\n</div>\n```\n"
  },
  {
    "path": "vuepress/started.md",
    "content": "# Getting started\n\n:::tip NOTE\nWe will be using [ES2015](https://github.com/lukehoban/es6features) in the\ncode samples in the guide.\n:::\n\n## HTML\n\n```html\n<script src=\"https://unpkg.com/vue/dist/vue.js\"></script>\n<script src=\"https://unpkg.com/vue-i18n@8\"></script>\n\n<div id=\"app\">\n  <p>{{ $t(\"message.hello\") }}</p>\n</div>\n``` \n\n## JavaScript\n\n```js\n// If using a module system (e.g. via vue-cli), import Vue and VueI18n and then call Vue.use(VueI18n).\n// import Vue from 'vue'\n// import VueI18n from 'vue-i18n'\n//\n// Vue.use(VueI18n)\n\n// Ready translated locale messages\nconst messages = {\n  en: {\n    message: {\n      hello: 'hello world'\n    }\n  },\n  ja: {\n    message: {\n      hello: 'こんにちは、世界'\n    }\n  }\n}\n\n// Create VueI18n instance with options\nconst i18n = new VueI18n({\n  locale: 'ja', // set locale\n  messages, // set locale messages\n})\n\n\n// Create a Vue instance with `i18n` option\nnew Vue({ i18n }).$mount('#app')\n\n// Now the app has started!\n``` \n\nOutput the following:\n\n```html \n<div id=\"#app\">\n  <p>こんにちは、世界</p>\n</div>\n```\n"
  },
  {
    "path": "vuepress/zh/README.md",
    "content": "---\nhome: true\nheroImage: ./../vue-i18n-logo.png\nactionText: 快速上手 →\nactionLink: introduction.md\nfooter: MIT Licensed | Copyright © 2020 kazuya kawaguchi\n---\n\n<div class=\"sponsors\" style=\"text-align:center; padding: 0 0 24px 0;\">\n  <h4>🥇 金牌赞助商</h4>\n  <a\n    href=\"https://nuxtjs.org/\"\n    style=\"display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      src=\"/vue-i18n/patrons/nuxt.png\"\n      alt=\"Nuxt.js\"\n    />\n  </a>\n  <h4>🥈 白银赞助商</h4>\n  <a\n    href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\"\n    style=\"max-width: 320px; width: 100%; display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      src=\"/vue-i18n/patrons/babeledit.png\"\n      alt=\"适用于应用程序（Web应用程序）的BabelEdit翻译编辑器\"\n    />\n  </a>\n  <h4 style=\"padding: 12px 0 0 0;\">🥉 青铜赞助商</h4>\n  <a\n    href=\"https://zenarchitects.co.jp/\"\n    alt=\"zenarchitects\"\n    style=\"max-width: 200px; width: 100%; height: 80px; display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      src=\"/vue-i18n/patrons/zenarchitects.png\"\n      alt=\"zenarchitects\"\n    />\n  </a>\n  <a\n    href=\"https://www.sendcloud.com/\"\n    style=\"max-width: 200px; width: 100%; height: 80px; display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      src=\"/vue-i18n/patrons/sendcloud.svg\"\n      alt=\"sendcloud\"\n    />\n  </a>\n</div>\n\n<div class=\"github\" style=\"text-align:center; padding: 0 0 24px 0;\">\n  <sponsor-button />\n</div>\n\n<div class=\"features\">\n  <div class=\"feature\">\n    <h2>简单</h2>\n    <p>通过简单的 API 将你的应用国际化</p>\n  </div>\n  <div class=\"feature\">\n    <h2>强大</h2>\n    <p>除了简单的翻译外，还支持复数，数字，日期时间等本地化处理</p>\n  </div>\n  <div class=\"feature\">\n    <h2>面向组件</h2>\n    <p>你可以在单文件组件上管理语言环境信息</p>\n  </div>\n</div>\n"
  },
  {
    "path": "vuepress/zh/api/README.md",
    "content": "---\nsidebar: auto\n---\n\n# API参考\n\n## 扩展 Vue\n\n### Vue 构造函数选项\n\n#### i18n\n\n  * **类型：** `I18nOptions`\n\n基于组件的本地化选项\n\n  * **请参阅：** `VueI18n` 类构造函数选项\n\n### Vue 注入方法\n\n#### $t\n\n  * **参数**\n\n    * `{Path} key`：必填\n    * `{Locale} locale`：可选\n    * `{Array | Object} values`：可选\n\n  * **返回值：**`TranslateResult`\n\n本地化语言环境信息 `key`，在本地化时组件的语言环境信息优先于全局语言环境信息。如果未指定组件的语言环境信息，就使用全局语言环境信息进行本地化。如果你指定了 `locale` 参数，则使用 `locale` 提供的语言环境进行本地化。如果你为列表/格式化的语言环境信息指定了 `key`，就必须同时指定 `values`。有关 `values` 的详细信息，请参阅[格式化](../guide/formatting.md)。\n\n:::danger 提示\n注意，你需要在生命周期方法中保证上下文是组件实例 (例如在 `data` 选项中，`const $t = this.$t.bind(this)`)。\n:::\n\n#### $tc\n\n  * **参数：**\n\n    * `{Path} key`：必填\n    * `{number} choice`：可选，默认为 1\n    * `{Locale} locale`：可选\n    * `{string | Array | Object} values`：可选\n\n  * **返回值：**`TranslateResult`\n\n以复数形式将语言环境信息 `key` 本地化。在本地化时组件的语言环境信息优先于全局语言环境信息。如果未指定组件的语言环境信息，就使用全局语言环境信息进行本地化。如果你指定了 `locale` 参数，则使用 `locale` 提供的语言环境进行本地化。如果将 `values` 指定为字符串，则该字符串会作为语言环境信息进行本地化。如果将 `values` 指定为 Array 或 Object，则格式必须为 `$t` 的 `values`。\n\n:::danger 提示\n注意，你需要在生命周期方法中保证上下文是组件实例 (例如在 `data` 选项中，`const $tc = this.$tc.bind(this)`)\n:::\n\n#### $te\n\n  * **参数：**\n\n    * `{Path} key`：必填\n    * `{Locale} locale`：可选\n\n  * **返回值：**`boolean`\n\n检查 key 是否存在。在 Vue 实例中，如果未指定组件语言环境信息，则使用全局语言环境信息。如果指定了 `locale`，则使用 `locale` 的语言环境。\n\n:::danger 提示\n注意，你需要在生命周期方法中保证上下文是组件实例 (例如在 `data` 选项中，`const $te = this.$te.bind(this)`)。\n:::\n\n#### $d\n\n> :new: 7.0+ 新增\n\n  * **参数：**\n\n    * `{number | Date} value`：必填\n    * `{Path | Object} key`：可选\n    * `{Locale | Object} locale`：可选\n\n  * **返回值：**`DateTimeFormatResult`\n\n将日期时间 `value` 以 `key` 的格式本地化。日期时间格式 `key` 需要注册到 `VueI18n` 类的 `dateTimeFormats` 选项，并依赖于 `VueI18n` 构造函数的 `locale` 选项。如果要指定 `locale` 参数，它将优先于 `VueI18n` 构造函数的 `locale` 选项。\n\n如果 `dateTimeFormats` 选项中不存在日期时间格式的 `key`，则根据 `VueI18n` 构造函数的 `fallbackLocale` 选项回退。\n\n:::danger 提示\n注意，你需要在生命周期方法中保证上下文是组件实例 (例如在 `data` 选项中，`const $d = this.$d.bind(this)`)。\n:::\n\n#### $n\n\n> :new: 7.0+ 新增\n\n  * **参数：**\n\n    * `{number} value`：必填\n    * `{Path | Object} key`：可选\n    * `{Locale} locale`：可选\n\n  * **返回值：**`NumberFormatResult`\n\n将数字 `value` 以 `key` 的格式本地化。数字格式 `key` 需要注册到 `VueI18n` 类的 `numberFormats` 选项，并依赖于 `VueI18n` 构造函数的 `locale` 选项。如果要指定 `locale` 参数，它将优先于 `VueI18n` 构造函数的 `locale` 选项。\n\n如果 `numberFormats` 选项中不存在用数字格式 `key`，则根据 `VueI18n` 构造函数的 `fallbackLocale` 选项回退。\n\n如果第二个 `key` 参数指定为对象，则它应具有以下属性：\n\n* `key {Path}`：可选，数字格式\n* `locale {Locale}`：可选，语言环境\n* `style {string}`：可选，数字格式选项\n* `currency {string}`：可选，数字格式选项\n* `currencyDisplay {string}`：可选，数字格式选项\n* `useGrouping {boolean}`：可选，数字格式选项\n* `minimumIntegerDigits {string}`：可选，数字格式选项\n* `minimumFractionDigits {string}`：可选，数字格式选项\n* `maximumFractionDigits {string}`：可选，数字格式选项\n* `minimumSignificantDigits {string}`：可选，数字格式选项\n* `maximumSignificantDigits {string}`：可选，数字格式选项\n* `localeMatcher {string}`：可选，数字格式选项\n* `formatMatcher {string}`：可选，数字格式选项\n\n任何指定数字的格式选项将优先于 `VueI18n` 构造函数的 `numberFormats`。\n\n:::danger 提示\n注意，你需要在生命周期方法中保证上下文是组件实例 (例如在 `data` 选项中，`const $n = this.$n.bind(this)`)。\n:::\n\n### 注入属性\n\n#### $i18n\n\n  * **类型：**`I18n`\n\n  * **只读**\n\n若已经指定了 `VueI18n` 实例，则将其返回。\n\n如果在组件选项中指定了 `i18n` 选项，则可以在组件上获得 `VueI18n` 实例，否则，你将获得 `VueI18n` 的根实例。\n\n## `VueI18n` 类\n\n`Vuei18n` 类实现了 `I18n` [flowtype 接口](https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js)\n\n### 静态属性\n\n#### version\n\n  * **类型：**`string`\n\nvue-i18n 版本\n\n#### availabilities\n\n> :new: 7.0+ 新增\n\n  * **类型：**`IntlAvailability`\n\n是否提供以下国际化功能：\n\n  * `{boolean} dateTimeFormat`：环境敏感的时间格式\n\n  * `{boolean} numberFormat`：环境敏感的数字格式\n\n由于使用 ECMAScript Internationalization API (ECMA-402) 实现，上述国际化功能取决于[浏览器环境](http://kangax.github.io/compat-table/esintl/)。\n\n### 构造函数选项\n\n你可以基于[flowtype 定义](https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js) 中的 `I18nOptions` 指定下列构造函数选项\n\n#### locale\n\n  * **类型：**`Locale`\n\n  * **默认值：**`'en-US'`\n\n语言环境。\n\n#### fallbackLocale\n\n  * **类型：**`Locale`\n\n  * **默认值：**`'en-US'`\n\n预设的语言环境。\n\n#### messages\n\n  * **类型：**`LocaleMessages`\n\n  * **默认值：**`{}`\n\n本地化的语言环境信息。\n\n#### dateTimeFormats\n\n> :new: 7.0+ 新增\n\n  * **类型：**`DateTimeFormats`\n\n  * **默认值：**`{}`\n\n本地化的日期时间格式。\n\n  * **请参阅：**`DateTimeFormats` 类型的[flowtype 接口](https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js)\n\n#### numberFormats\n\n> :new: 7.0+ 新增\n\n  * **类型：**`NumberFormats`\n\n  * **默认值：**`{}`\n\n本地化的数字格式。\n\n  * **请参阅：**`NumberFormats` 类型的[flowtype 接口](https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js)\n\n#### availableLocales\n\n> :new: 8.9.0+ 新增\n\n  * **类型：**`Locale[]`\n\n  * **默认值：**`[]`\n\n  * **示例：**`[\"en\", \"ja\"]`\n\n以词法顺序排列的 `messages` 中的可用语言环境列表。\n\n#### formatter\n\n  * **类型：**`Formatter`\n\n  * **默认值：** Built in formatter\n\n使用 `Formatter` 接口实现的格式化。\n\n#### missing\n\n  * **类型：**`MissingHandler`\n\n  * **默认值：**`null`\n\n缺少本地化时的处理函数。该处理函数在被调用时会使用本地化目标语言环境，本地化路径关键字和 Vue 实例。\n\n如果设置了该函数，则本地化信息未定义时不会产生警告。\n\n#### fallbackRoot\n\n  * **类型：**`Boolean`\n\n  * **默认值：**`true`\n\n在组件本地化中，当本地化失败时是否回退到根级别 (全局) 本地化。\n\n如果为 `false`，则会发出警告，并返回 key。\n\n#### fallbackRootWithEmptyString\n\n> :new: 8.26+ 新增\n\n  * **Type:** `Boolean`\n\n  * **Default:** `true`\n\n在组件本地化中，当本地化文本为空字符串时，是否回退到根级别 (全局) 本地化。\n\n请注意，vue-i18n 9.x版本的默认行为是对空字符串本地化文本进行回退到根级别本地化。\n\n如果为`false`，则空的本地化文本将不会回退到根目录，并将保留为空字符串。\n\n#### sync\n\n  * **类型：**`Boolean`\n\n  * **默认值：**`true`\n\n是否将根级别语言环境与组件本地化语言环境同步。\n\n如果为 `false`，则无论根级别语言环境如何，都要为每个组件语言环境进行本地化。\n\n#### silentTranslationWarn\n\n> 6.1+ 新增\n\n  * **类型：**`Boolean`\n\n  * **默认值：**`false`\n\n是否取消本地化失败时输出的警告。\n\n如果为 `true`，则禁止本地化失败警告。\n\n#### silentFallbackWarn\n\n> :new: 8.8 新增\n\n  * **类型：**`Boolean`\n  * **默认值：**`false`\n\n是否在回退到 `fallbackLocale` 或 `root` 时取消警告。\n\n如果为 `true`，则仅在根本没有可用的转换时生成警告，而不是在回退时。\n\n#### pluralizationRules\n\n> 8.5+\n\n  * **Type:** `PluralizationRules`\n\n  * **Default:** `{}`\n\n  A set of rules for word pluralization in a following format:\n  ```js\n    {\n      // Key - locale for the rule to be applied to.\n      // Value - mapping function that maps a choice index from `$tc` to the actual choice of the plural word. (See getChoiceIndex for details)\n      'pt': function(choice, choiceIndex) => Number/* index of the plural word */;\n      'ru': function(choice, choiceIndex) => Number/* index of the plural word */;\n      'en': function(choice, choiceIndex) => Number/* index of the plural word */;\n      'jp': function(choice, choiceIndex) => Number/* index of the plural word */;\n    }\n  ```\n\n#### preserveDirectiveContent\n\n> 8.7+ 新增\n\n  * **类型：**`Boolean`\n\n  * **默认值：**`false`\n\n在指令解除绑定后，`v-t` 指令的元素是否应该保留 `textContent`。\n\n### Properties\n\n#### locale\n\n  * **类型：**`Locale`\n\n  * **可读/可写**\n\n语言环境。\n\n#### fallbackLocale\n\n  * **类型：**`Locale`\n\n  * **可读/可写**\n\n预设的语言环境。\n\n#### messages\n\n  * **类型：**`LocaleMessages`\n\n  * **只读**\n\n本地化的语言环境信息。\n\n#### dateTimeFormats\n\n> :new: 7.0+ 新增\n\n  * **类型：**`DateTimeFormats`\n\n  * **只读**\n\n本地化的日期时间格式。\n\n#### numberFormats\n\n> :new: 7.0+ 新增\n\n  * **类型：**`NumberFormats`\n\n  * **只读**\n\n本地化的数字格式。\n\n#### missing\n\n  * **类型：**`MissingHandler`\n\n  * **可读/可写**\n\n缺少本地化时的处理函数。\n\n#### formatter\n\n  * **类型：**`Formatter`\n\n  * **可读/可写**\n\n使用 `Formatter` 接口实现的格式化。\n\n#### silentTranslationWarn\n\n> 6.1 新增\n\n  * **类型：**`boolean`\n\n  * **可读/可写**\n\n是否取消本地化失败时输出的警告。\n\n#### pluralizationRules\n\n> 8.5+\n\n  * **Type:** `PluralizationRules`\n\n  * **Read/Write**\n\nA set of locale-dependent rules for word pluralization.\n\n#### preserveDirectiveContent\n\n> 8.7+ 新增\n\n  * **类型：**`boolean`\n\n  * **可读/可写**\n\n在指令解除绑定后，`v-t` 指令的元素是否应该保留 `textContent`。\n\n### 方法\n\n#### getChoiceIndex\n\n  * **参数：**\n\n    * `{number} choice`\n    * `{number} choicesLength`\n\n  * **返回值：**`finalChoice {number}`\n\n根据当前的数字和一组给定的选项，获取其复数索引，可以通过原型变更覆盖：\n\n```js\nVueI18n.prototype.getChoiceIndex = /* 自定义实现 */\n```\n\nHowever, for most usages [pluralizationRules constructor option](#pluralizationrules) should be enough.\n\n#### getLocaleMessage( locale )\n\n  * **参数：**\n\n    * `{Locale} locale`\n\n  * **返回值：**`LocaleMessageObject`\n\n获取语言环境的 `locale` 信息。\n\n#### setLocaleMessage( locale, message )\n\n  * **参数：**\n\n    * `{Locale} locale`\n    * `{LocaleMessageObject} message`\n\n设置语言环境的 `locale` 信息。\n\n#### mergeLocaleMessage( locale, message )\n\n> 6.1+ 新增\n\n  * **参数：**\n\n    * `{Locale} locale`\n    * `{LocaleMessageObject} message`\n\n将语言环境信息 `locale` 合并到已注册的语言环境信息中。\n\n#### t( key, [locale], [values] )\n\n  * **参数：**\n\n    * `{Path} key`：必填\n    * `{Locale} locale`：可选\n    * `{Array | Object} values`：可选\n\n  * **返回值：**：`TranslateResult`\n\n这与 `$t` 方法返回的 `Function` 相同。更多细节见[$t](#t)。\n\n#### tc( key, [choice], [values] )\n\n  * **参数：**\n\n    * `{Path} key`：必填\n    * `{number} choice`：可选，默认为 1\n    * `{string | Array | Object} values`：可选\n\n  * **返回值：**`TranslateResult`\n\n这与 `$tc` 方法返回的 `Function` 相同。更多细节见[$tc](#tc)。\n\n#### te( key, [locale] )\n\n  * **参数：**\n\n    * `{string} key`：必填\n    * `{Locale} locale`：可选\n\n  * **返回值：**`boolean`\n\n检查全局语言环境信息中是否存在键名路径。如果指定了 `locale`，请检查语言环境信息 `locale`。\n\n#### getDateTimeFormat ( locale )\n\n> :new: 7.0+ 新增\n\n  * **参数：**\n\n    * `{Locale} locale`\n\n  * **返回值：**`DateTimeFormat`\n\n获取语言环境的日期时间格式。\n\n#### setDateTimeFormat ( locale, format )\n\n> :new: 7.0+ 新增\n\n  * **参数：**\n\n    * `{Locale} locale`\n    * `{DateTimeFormat} format`\n\n设置语言环境的日期时间格式。\n\n#### mergeDateTimeFormat ( locale, format )\n\n> :new: 7.0+ 新增\n\n  * **参数：**\n\n    * `{Locale} locale`\n    * `{DateTimeFormat} format`\n\n将已注册的日期时间格式与语言环境的日期时间格式合并。\n\n#### d( value, [key], [locale] )\n\n> :new: 7.0+ 新增\n\n  * **参数：**\n\n    * `{number | Date} value`：必填\n    * `{Path | Object} key`：可选\n    * `{Locale | Object} locale`：可选\n\n  * **返回值：**`DateTimeFormatResult`\n\n这与 Vue 实例方法的 `$d` 方法相同。更多细节见[$d](#d)。\n\n#### getNumberFormat ( locale )\n\n> :new: 7.0+ 新增\n\n  * **参数：**\n\n    * `{Locale} locale`\n\n  * **返回值：**`NumberFormat`\n\n获取语言环境的数字格式。\n\n#### setNumberFormat ( locale, format )\n\n> :new: 7.0+ 新增\n\n  * **参数：**\n\n    * `{Locale} locale`\n    * `{NumberFormat} format`\n\n设置语言环境的数字格式。\n\n#### mergeNumberFormat ( locale, format )\n\n> :new: 7.0+ 新增\n\n  * **参数：**\n\n    * `{Locale} locale`\n    * `{NumberFormat} format`\n\n将已注册的数字格式与语言环境的数字格式合并。\n\n#### n( value, [key], [locale] )\n\n> :new: 7.0+ 新增\n\n  * **参数：**\n\n    * `{number} value`：必填\n    * `{Path | Object} key`：可选\n    * `{Locale} locale`：可选\n\n  * **返回值：**`NumberFormatResult`\n\n这与 Vue 实例方法的 `$n` 方法相同。更多细节见[$n](#n)。\n\n## 指令\n\n> :new: 7.3+ 新增\n\n### v-t\n\n  * **预期：**`string | Object`\n\n  * **修饰符：**\n\n    * `.preserve`：(8.7.0 新增) 当指令解除绑定时，保留元素 `textContent`。\n\n  * **详细：**\n\n更新使用语言环境信息进行本地化的元素 `textContent`。你可以使用字符串语法或对象语法。字符串语法可以指定为语言环境信息的关键字路径。如果可以使用对象语法，则需要将以下参数指定为对象键：\n\n  * `path`：必填，语言环境信息的关键字\n  * `locale`：可选，语言环境\n  * `args`：可选，用于列表或命名格式\n\n::::tip 注意\n当 `v-t` 指令解除绑定时，默认情况下将清除元素 `textContent`。在[过渡动画](https://cn.vuejs.org/v2/guide/transitions.html)内部使用的时候，可能出现不合预期的情况。为了在指令解除绑定之后保留 `textContent` 数据，可使用 `.preserve` 修饰符或全局的 [`preserveDirectiveContent` 选项](#preservedirectivecontent)。\n::::\n  * **示例：**\n```html\n<!-- 字符串语法：字面量 -->\n<p v-t=\"'foo.bar'\"></p>\n\n<!-- 字符串语法：通过数据或计算属性绑定 -->\n<p v-t=\"msg\"></p>\n\n<!-- 对象语法： 字面量 -->\n<p v-t=\"{ path: 'hi', locale: 'ja', args: { name: 'kazupon' } }\"></p>\n\n<!-- 对象语法： 通过数据或计算属性绑定 -->\n<p v-t=\"{ path: greeting, args: { name: fullName } }\"></p>\n\n<!-- `preserve` 修饰符 -->\n<p v-t.preserve=\"'foo.bar'\"></p>\n```\n\n  * **请参阅：**[自定义指令本地化](../guide/directive.md)\n\n## 组件\n\n### i18n 函数式组件\n\n> :new: 7.0+ 新增\n\n#### 参数：\n\n  * `path {Path}`：必填，关于语言环境信息的键名路径\n  * `locale {Locale}`：可选，语言环境\n  * `tag {string}`：可选，默认值 `span`\n  * `places {Array | Object}`：可选 (7.2 新增)\n\n#### 用法：\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <i18n path=\"term\" tag=\"label\" for=\"tos\">\n    <a :href=\"url\" target=\"_blank\">{{ $t('tos') }}</a>\n  </i18n>\n  <!-- ... -->\n</div>\n```\n```js\nconst messages = {\n  en: {\n    tos: 'Term of Service',\n    term: 'I accept xxx {0}.'\n  },\n  ja: {\n    tos: '利用規約',\n    term: '私は xxx の{0}に同意します。'\n  }\n}\n\nconst i18n = new VueI18n({\n  locale: 'en',\n  messages\n})\nnew Vue({\n  i18n,\n  data: {\n    url: '/term'\n  }\n}).$mount('#app')\n```\n\n#### 请参阅：\n\n[组件插值](../guide/interpolation.md)\n\n## 特殊属性\n\n### place\n\n> :new: 7.2+ 新增\n\n#### 预期：`{number | string}`\n\n用于组件插槽，指示格式列表的索引值或具名格式的关键字。\n\n有关详细用法，请参阅下面链接的指南部分。\n\n#### 请参阅：\n\n[组件插值](../guide/interpolation.md)\n"
  },
  {
    "path": "vuepress/zh/guide/component.md",
    "content": "# 基于组件的本地化\n\n通常语言环境信息 (例如：`locale`、`messages` 等) 会被设置为 `VueI18n` 实例的构造函数选项，并且该实例会被作为 `i18n` 选项设置在 Vue 的根实例上。\n\n因此你可以全局地在 Vue 的根实例以及任何被组合的组件中使用 `$t` 或者 `$tc` 进行翻译。当然面向 Vue 组件的设计，你也可以更方便的分别控制每个组件的语言环境信息。\n\n基于组件的本地化示例：\n\n```js\n// 为 Vue 的根实例设置语言环境信息\nconst i18n = new VueI18n({\n  locale: 'ja',\n  messages: {\n    en: {\n      message: {\n        hello: 'hello world',\n        greeting: 'good morning'\n      }\n    },\n    ja: {\n      message: {\n        hello: 'こんにちは、世界',\n        greeting: 'おはようございます'\n      }\n    }\n  }\n})\n\n// 定义组件\nconst Component1 = {\n  template: `\n    <div class=\"container\">\n     <p>Component1 locale messages: {{ $t(\"message.hello\") }}</p>\n     <p>Fallback global locale messages: {{ $t(\"message.greeting\") }}</p>\n   </div>`,\n  i18n: { // `i18n` 选项，为组件设置语言环境信息\n    messages: {\n      en: { message: { hello: 'hello component1' } },\n      ja: { message: { hello: 'こんにちは、component1' } }\n    }\n  }\n}\n\nnew Vue({\n  i18n,\n  components: {\n    Component1\n  }\n}).$mount('#app')\n```\n\n模板：\n\n\n```html\n<div id=\"app\">\n  <p>{{ $t(\"message.hello\") }}</p>\n  <component1></component1>\n</div>\n```\n\n输出如下：\n\n```html\n<div id=\"app\">\n  <p>こんにちは、世界</p>\n  <div class=\"container\">\n    <p>Component1 locale messages: こんにちは、component1</p>\n    <p>Fallback global locale messages: おはようございます</p>\n  </div>\n</div>\n```\n\n在上面的例子中，如果组件没有语言环境信息，它将回退到全局定义的本地化信息。组件使用根实例中设置的语言 (在上面的例子中：`locale: 'ja'`)。\n\n注意，在默认情况下，回退到根语言环境会在控制台中生成两个警告：\n\n```\n[vue-i18n] Value of key 'message.greeting' is not a string!\n[vue-i18n] Fall back to translate the keypath 'message.greeting' with root locale.\n```\n\n为避免以上警告 (同时保留那些完全没有翻译给定关键字的警告) 需初始化 `VueI18n` 实例时设置 `silentFallbackWarn：true`。\n\n如果你希望在组件语言环境中进行本地化，可以在 `i18n` 选项中用 `sync: false` 和 `locale`。\n\n## 组件的共享语言环境消息\n\n有时您可能想为某些组件导入共享的语言环境消息，而不是从全局语言环境消息（例如，组件某些功能的常用消息）回退。\n\n您可以使用 `i18n` 的 `sharedMessages` 选项。\n\n通用语言环境消息示例：\n\n```js\nexport default {\n  en: {\n    buttons: {\n      save: \"Save\",\n      // ...\n    }\n  },\n  ja: {\n    buttons: {\n      save: \"保存\",\n      // ...\n    }\n  }\n}\n```\n\nComponents:\n```js\nimport commonMessage from './locales/common' // 导入通用语言环境消息\n\nexport default {\n  name: 'ServiceModal',\n  template: `\n    <div class=\"modal\">\n      <div class=\"body\">\n        <p>This is good service</p>\n      </div>\n      <div class=\"footer\">\n        <button type=\"button\">\n          {{ $t('buttons.save') }}\n        </button>\n      </div>\n    </div>\n  `,\n  i18n: {\n    messages: { ... },\n    sharedMessages: commonMessages\n  }\n}\n```\n\n如果将 `sharedMessages` 选项与 `messages` 选项一起指定，则这些消息将被合并为语言环境消息，并进入目标组件的VueI18n实例。\n\n## 函数式组件的翻译\n\n使用函数式组件时，所有数据 (包括 prop、子内容、插槽、父级内容等) 都通过包含属性的 `context` 传递，并且它无法识别 `this` 的范围，因此在函数式组件上使用 vue-i18n 时，你必须将 `$t` 称为 `parent.$t`，请查看以下示例：\n\n```html\n...\n<div>\n  <a href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\">\n    <img src=\"./assets/example.jpg\" :alt=\"parent.$t('message.hello')\">\n  </a>\n</div>\n...\n```\n"
  },
  {
    "path": "vuepress/zh/guide/datetime.md",
    "content": "# 日期时间本地化\n\n:::tip 支持版本\n:new: 7.0+ 新增\n:::\n\n你可以使用你定义的格式来本地化日期时间。\n\n日期时间格式如下：\n\n```js\nconst dateTimeFormats = {\n  'en-US': {\n    short: {\n      year: 'numeric',\n      month: 'short',\n      day: 'numeric'\n    },\n    long: {\n      year: 'numeric',\n      month: 'long',\n      day: 'numeric',\n      weekday: 'long',\n      hour: 'numeric',\n      minute: 'numeric'\n    }\n  },\n  'ja-JP': {\n    short: {\n      year: 'numeric',\n      month: 'short',\n      day: 'numeric'\n    },\n    long: {\n      year: 'numeric',\n      month: 'long',\n      day: 'numeric',\n      weekday: 'long',\n      hour: 'numeric',\n      minute: 'numeric',\n      hour12: true\n    }\n  }\n}\n```\n\n如上，你可以定义具名的 (例如：`short`、`long` 等) 日期时间格式，并需要使用 [ECMA-402 Intl.DateTimeFormat 的选项](http://www.ecma-international.org/ecma-402/2.0/#sec-intl-datetimeformat-constructor)。\n\n之后就像语言环境信息一样，你需要指定 `VueI18n` 构造函数的 `dateTimeFormats` 选项：\n\n```js\nconst i18n = new VueI18n({\n  dateTimeFormats\n})\n\nnew Vue({\n  i18n\n}).$mount('#app')\n```\n\n模板如下：\n\n```html\n<div id=\"app\">\n  <p>{{ $d(new Date(), 'short') }}</p>\n  <p>{{ $d(new Date(), 'long', 'ja-JP') }}</p>\n</div>\n```\n\n输出如下：\n\n```html\n<div id=\"app\">\n  <p>Jan 18, 2021</p>\n  <p>2021年1月18日日曜日 午前5:47</p>\n</div>\n```\n"
  },
  {
    "path": "vuepress/zh/guide/directive.md",
    "content": "# 自定义指令本地化\n\n:::tip 支持的版本\n:new: 7.3+ 新增\n:::\n\n你不仅可以使用 `$t` 方法进行翻译，还可以使用 `v-t` 自定义指令。\n\n## 字符串语法\n\n你可以使用字符串语法传递语言环境信息的键名路径。\n\nJavaScript：\n\n```js\nnew Vue({\n  i18n: new VueI18n({\n    locale: 'en',\n    messages: {\n      en: { hello: 'hi there!' },\n      ja: { hello: 'こんにちは！' }\n    }\n  }),\n  data: { path: 'hello' }\n}).$mount('#string-syntax')\n```\n\n模板：\n\n```html\n<div id=\"string-syntax\">\n  <!-- 字符串 -->\n  <p v-t=\"'hello'\"></p>\n  <!-- 通过数据进行键名路径绑定 -->\n  <p v-t=\"path\"></p>\n</div>\n```\n\n输出：\n\n```html\n<div id=\"string-syntax\">\n  <p>hi there!</p>\n  <p>hi there!</p>\n</div>\n```\n\n## 对象语法\n\n你可以使用对象语法。\n\nJavascript：\n\n```js\nnew Vue({\n  i18n: new VueI18n({\n    locale: 'en',\n    messages: {\n      en: { hello: 'hi {name}!' },\n      ja: { hello: 'こんにちは、{name}！' }\n    }\n  }),\n  computed: {\n    nickName () { return 'kazupon' }\n  },\n  data: { path: 'hello' }\n}).$mount('#object-syntax')\n```\n\n模板：\n\n```html\n<div id=\"object-syntax\">\n  <!-- 文字 -->\n  <p v-t=\"{ path: 'hello', locale: 'ja', args: { name: 'kazupon' } }\"></p>\n  <!-- 通过 `data` 绑定数据 -->\n  <p v-t=\"{ path: path, args: { name: nickName } }\"></p>\n</div>\n```\n\n输出：\n\n```html\n<div id=\"object-syntax\">\n  <p>こんにちは、kazupon！</p>\n  <p>hi kazupon!</p>\n</div>\n```\n\n## 使用翻译\n\n:::tip 支持版本\n:new: 8.7+ 新增\n:::\n\n当 `v-t` 指令应用于 [`<transition>` 组件](https://cn.vuejs.org/v2/api/#transition)内的元素时，你可能会注意到过渡动画之后的翻译过的信息会消失。这与 `<transition>` 组件实现的方式有关——**在过渡开始之前** ，`<transition>` 组件内消失元素中的所有指令都将被销毁。此行为可能导致内容在短过渡时闪烁，但在长过渡时最明显。\n\n为了确保在转换期间指令内容不会被触及，只需将[`.preserve` 修饰符](../api/#v-t)添加到 `v-t` 指令定义中。\n\nJavascript：\n\n```js\nnew Vue({\n  i18n: new VueI18n({\n    locale: 'en',\n    messages: {\n      en: { preserve: 'with preserve' },\n    }\n  }),\n  data: { toggle: true }\n}).$mount('#in-transitions')\n```\n\n模板：\n\n```html\n<div id=\"in-transitions\">\n  <transition name=\"fade\">\n    <span v-if=\"toggle\" v-t.preserve=\"'preserve'\"></span>\n  </transition>\n  <button @click=\"toggle = !toggle\">Toggle</button>\n</div>\n```\n\n也可以在 `VueI18n` 实例本身设置全局设置，这将对没有修饰符的所有 `v-t` 指令产生影响。\n\nJavascript：\n\n```js\nnew Vue({\n  i18n: new VueI18n({\n    locale: 'en',\n    messages: {\n      en: { preserve: 'with preserve' },\n    },\n    preserveDirectiveContent: true\n  }),\n  data: { toggle: true }\n}).$mount('#in-transitions')\n```\n\n模板：\n\n```html\n<div id=\"in-transitions\">\n  <transition name=\"fade\">\n    <span v-if=\"toggle\" v-t=\"'preserve'\"></span>\n  </transition>\n  <button @click=\"toggle = !toggle\">Toggle</button>\n</div>\n```\n\n关于上面的例子，请参阅[示例](https://github.com/kazupon/vue-i18n/tree/dev/examples/directive)\n\n## `$t` vs `v-t`\n\n### `$t`\n\n`$t` 是扩展的 Vue 实例方法， 它有以下优点和缺点：\n\n#### 优点\n\n你可以**灵活地**在模板以及 Vue 实例的计算属性和方法中使用 mustash 语法 `{{}}`。\n\n#### 缺点\n\n`$t` 在**每次**重新渲染时都会被执行，因此它确实有翻译成本。\n\n### `v-t`\n\n`v-t` 是一个自定义指令，它有以下优点和缺点：\n\n#### 优点\n\n`v-t` 比 `$t` 方法具有**更好的**性能，因为在一次翻译时自定义指令会进行缓存。此外可以使用由 [`vue-i18n-extensions`](https://github.com/kazupon/vue-i18n-extensions) 提供的 Vue 编译器模块进行预翻译。\n\n因此，可以进行**更多性能优化**。\n\n#### 缺点\n\n`v-t` 不能像 `$t` 一样灵活使用，它更**复杂**。带有 `v-t` 的翻译内容会被插入到元素的 `textContent` 中。此外，当你使用服务器渲染时，你需要设置[自定义指令](https://github.com/kazupon/vue-i18n-extensions#directive-v-t-custom-directive-for-server-side)到 `createRenderer` 函数的 `directives` 选项。\n"
  },
  {
    "path": "vuepress/zh/guide/fallback.md",
    "content": "# 回退本地化\n\n*总结：使用`fallbackLocale：'<lang>'`选择首选语言缺少翻译时要使用的语言。*\n\n## 使用语言环境的隐式回退\n\n如果给出的 `locale` 包含领土和可选的方言，则隐式回退将自动激活。\n\n例如，对于 `de-DE-bavarian`，以下内容将被视为备用：\n1. `de-DE-Bavarian`\n2. `de-DE`\n3. `de`\n\n要禁止自动回退，请添加后缀感叹号 `!`，例如 `de-DE!`。\n\n# 具有一个语言环境的显式回退\n\n以下语言环境信息的 `ja` 语言环境中不存在 `message` 键：\n\n```js\nconst messages = {\n  en: {\n    message: 'hello world'\n  },\n  ja: {\n    // 没有翻译的本地化 `hello`\n  }\n}\n```\n\n当为 VueI18n 构造函数选项指定 `fallbackLocale` 选项时，`message` 键使用 `en` 语言环境进行本地化：\n\n```js\nconst i18n = new VueI18n({\n  locale: 'ja',\n  fallbackLocale: 'en',\n  messages\n})\n```\n\n模板如下：\n\n```html\n<p>{{ $t('message') }}</p>\n```\n\n输出如下：\n\n```html\n<p>hello world</p>\n```\n\n注意，默认情况下回退到 `fallbackLocale` 会产生两个控制台警告：\n\n```\n[vue-i18n] Value of key 'message' is not a string!\n[vue-i18n] Fall back to translate the keypath 'message' with 'en' locale.\n```\n\n为了避免这些警告 (同时保留那些完全没有翻译给定关键字的警告)，需初始化 `VueI18n` 实例时设置 `silentFallbackWarn：true`。\n\n## 回退插值\n\n由于翻译的键值是字符串，因此也可以作为翻译的值：\n\n```javascript\nconst messages = {\n  ja: {\n    'Hello world': 'こんにちは、世界'\n  }\n}\n```\n\n这是一种很自然的书写方式，如果在`message`中找不到相应的键值将回退到原本的语言：\n\n*注意: `fallbackRoot`的优先级高于`formatFallbackMessages`*\n\n```html\n<p>{{ $t('Hello world') }}</p>\n```\n\n为了实现此功能，可以通过设置`formatFallbackMessages`为`true`：\n\n```javascript\nconst messages = {\n  ru: {\n    'Hello {name}': 'Здравствуйте {name}'\n  }\n}\n\nconst i18n = new VueI18n({\n  locale: 'ru',\n  fallbackLocale: 'en',\n  formatFallbackMessages: true,\n  messages\n})\n```\n\n模板如下：\n\n```html\n<p>{{ $t('Hello {name}', { name: 'John' }}) }}</p>\n<p>{{ $t('The weather today is {condition}!', { condition: 'sunny' }) }}</p>\n```\n\n将会输出：\n\n```html\n<p>Здравствуйте John</p>\n<p>The weather today is sunny!</p>\n```\n"
  },
  {
    "path": "vuepress/zh/guide/formatting.md",
    "content": "# 格式化\n\n## 具名格式\n\n语言环境信息如下：\n\n```js\nconst messages = {\n  en: {\n    message: {\n      hello: '{msg} world'\n    }\n  }\n}\n```\n\n模板如下：\n\n```html\n<p>{{ $t('message.hello', { msg: 'hello' }) }}</p>\n```\n\n输出如下：\n\n```html\n<p>hello world</p>\n```\n\n## 列表格式\n\n语言环境信息如下：\n\n```js\nconst messages = {\n  en: {\n    message: {\n      hello: '{0} world'\n    }\n  }\n}\n```\n\n模板如下：\n\n```html\n<p>{{ $t('message.hello', ['hello']) }}</p>\n```\n\n输出如下：\n\n```html\n<p>hello world</p>\n```\n\n列表格式也接受类似数组的对象：\n\n\n```html\n<p>{{ $t('message.hello', {'0': 'hello'}) }}</p>\n```\n\n输出如下：\n\n```html\n<p>hello world</p>\n```\n\n## HTML 格式化\n\n:::warning 提示\n:warning: 在你的网站上动态插入任意 HTML 可能非常危险，因为它很容易导致 XSS 攻击。仅对可信内容使用 HTML 插值，而不对用户提供的内容使用。\n\n我们建议使用[组件插值](interpolation.md) 功能。\n:::\n\n在某些情况下，你可能希望将翻译呈现为 HTML 信息而不是静态字符串。\n\n\n```js\nconst messages = {\n  en: {\n    message: {\n      hello: 'hello <br> world'\n    }\n  }\n}\n```\n\n模板如下：\n\n\n```html\n<p v-html=\"$t('message.hello')\"></p>\n```\n\n输出如下 (取代预先格式化的信息)\n\n\n```html\n<p>hello\n<!--<br> 存在，但呈现为 html 而不是字符串-->\nworld</p>\n```\n\n\n## 支持 ruby on rails 的 i18n 格式\n\n语言环境信息如下：\n\n```js\nconst messages = {\n  en: {\n    message: {\n      hello: '%{msg} world'\n    }\n  }\n}\n```\n\n模板如下：\n\n```html\n<p>{{ $t('message.hello', { msg: 'hello' }) }}</p>\n```\n\n输出如下：\n\n```html\n<p>hello world</p>\n```\n\n## 自定义格式\n\n有时，你可能需要使用自定义格式进行翻译 (例如：[ICU 信息语法](http://userguide.icu-project.org/formatparse/messages))。\n\n你可以使用实现[格式化接口](https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js#L41-L43) 的自定义格式化函数来实现。\n\n以下使用 ES2015 class 语法的自定义格式化函数：\n\n```js\n// 实现自定义格式\nclass CustomFormatter {\n     constructor (options) {\n       // ...\n     }\n\n     //\n     // 插值\n     //\n     // @param {string} 信息\n     //   列表或具名格式的字符串。\n     //   例如：\n     //   - 具名格式：'Hi {name}'\n     //   - 列表格式：'Hi {0}'\n     //\n     // @param {Object | Array} 值\n     //   `message` 插值的值\n     //   使用 `$t`， `$tc` 和 `i18n` 函数式组件传递值。\n     //   e.g.\n     //   - $t('hello', { name: 'kazupon' }) -> 传递值：Object `{ name: 'kazupon' }`\n     //   - $t('hello', ['kazupon']) -> 传递值：Array `['kazupon']`\n     //   - `i18n` 函数式组件 (组件插值)\n     //     <i18n path=\"hello\">\n     //       <p>kazupon</p>\n     //       <p>how are you?</p>\n     //     </i18n>\n     //     -> 传递值：Array (included VNode):\n     //        `[VNode{ tag: 'p', text: 'kazupon', ...}, VNode{ tag: 'p', text: 'how are you?', ...}]`\n     //\n     // @return {Array<any>}\n     //   插值，你需要返回以下内容：\n     //   - 当使用 `$t` 或 `$tc` 数组中应该是字符串。\n     //   - 当使用 `i18n` 函数式组件时 数组中应包含 VNode 对象。\n     //\n     interpolate (message, values) {\n       // 在这里实现插值逻辑\n       // ...\n\n       // 返回插值数组\n       return ['resolved message string']\n     }\n}\n\n// 注册 `formatter` 选项\nconst i18n = new VueI18n({\n  locale: 'en-US',\n  formatter: new CustomFormatter(/* 这里是构造函数选项 */),\n  messages: {\n    'en-US': {\n      // ...\n    },\n    // ...\n  }\n})\n\n// 启动!\nnew Vue({ i18n }).$mount('#app')\n```\n\n你可以查看[自定义格式化函数的官方示例](https://github.com/kazupon/vue-i18n/tree/dev/examples/formatting/custom)。\n"
  },
  {
    "path": "vuepress/zh/guide/hot-reload.md",
    "content": "# 热重载\n\n您可以使用Webpack的 [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/) (HMR) 功能来监视本地化文件中的更改以及将热更改重新加载到您的应用程序中。\n\n你可以监视本地化文件中的更改，并将更改热重载到应用程序中。\n\n## 基本例子\n\n如果仅使用静态语言环境集，则可以显式热加载这些语言环境：\n\n```js\nimport Vue from \"vue\"\nimport VueI18n from \"vue-i18n\"\nimport en from './en'\nimport ja from './ja'\n\n// 语言环境信息\nconst messages = {\n  en,\n  ja\n}\n\n// VueI18n 实例\nconst i18n = new VueI18n({\n  locale: 'en',\n  messages\n})\n\n// 运行程序\nconst app = new Vue({\n  i18n,\n  // ...\n}).$mount('#app')\n\n// 热更新\nif (module.hot) {\n  module.hot.accept(['./en', './ja'], function () {\n    i18n.setLocaleMessage('en', require('./en').default)\n    i18n.setLocaleMessage('ja', require('./ja').default)\n    // 同样可以通过 $i18n 属性进行热更新\n    // app.$i18n.setLocaleMessage('en', require('./en').default)\n    // app.$i18n.setLocaleMessage('ja', require('./ja').default)\n  })\n}\n```\n\n## 进阶范例\n\n如果您想支持一组不断变化的语言环境，则可以使用 `require.context` 动态地重新加载这些语言环境：\n\n```js\nimport Vue from \"vue\";\nimport VueI18n from \"vue-i18n\";\n\nVue.use(VueI18n);\n\n// 加载所有语言环境并记住上下文\nfunction loadMessages() {\n  const context = require.context(\"./locales\", true, /[a-z0-9-_]+\\.json$/i);\n\n  const messages = context\n    .keys()\n    .map((key) => ({ key, locale: key.match(/[a-z0-9-_]+/i)[0] }))\n    .reduce(\n      (messages, { key, locale }) => ({\n        ...messages,\n        [locale]: context(key),\n      }),\n      {}\n    );\n\n  return { context, messages };\n}\n\nconst { context, messages } = loadMessages();\n\n// VueI18n 实例\nconst i18n = new VueI18n({\n  locale: \"en\",\n  messages,\n});\n\n// 运行程序\nconst app = new Vue({\n  i18n,\n  // ...\n}).$mount('#app');\n\n// 热更新\nif (module.hot) {\n  module.hot.accept(context.id, () => {\n    const { messages: newMessages } = loadMessages();\n\n    Object.keys(newMessages)\n      .filter((locale) => messages[locale] !== newMessages[locale])\n      .forEach((locale) => {\n        messages[locale] = newMessages[locale];\n        i18n.setLocaleMessage(locale, messages[locale]);\n      });\n  });\n}\n```\n"
  },
  {
    "path": "vuepress/zh/guide/interpolation.md",
    "content": "# 组件插值\n\n## 基本用法\n\n:::tip 支持版本\n:new: 7.0+ 新增\n:::\n\n有时，我们需要使用包含 HTML 标签或组件的语言环境信息进行本地化。例如：\n\n```html\n<p>I accept xxx <a href=\"/term\">Terms of Service Agreement</a></p>\n```\n\n在上面的信息中，如果你使用 `$t`，可能你会尝试编写以下语言环境信息：\n\n```js\nconst messages = {\n  en: {\n    term1: 'I Accept xxx\\'s',\n    term2: 'Terms of Service Agreement'\n  }\n}\n```\n\n你可能会尝试在以下模板中实现：\n\n```html\n<p>{{ $t('term1') }}<a href=\"/term\">{{ $t('term2') }}</a></p>\n```\n\n输出：\n\n```html\n<p>I accept xxx <a href=\"/term\">Terms of Service Agreement</a></p>\n```\n\n这是非常麻烦的，如果在语言环境信息中配置 `<a>` 标签，则可能由于使用了 `v-html=\"$t('term')\"` 进行本地化而存在被 XSS 攻击的可能性。\n\n你可以使用 `i18n` 函数式组件来避免它。例如：\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <i18n path=\"term\" tag=\"label\" for=\"tos\">\n    <a :href=\"url\" target=\"_blank\">{{ $t('tos') }}</a>\n  </i18n>\n  <!-- ... -->\n</div>\n```\n```js\nconst messages = {\n  en: {\n    tos: 'Term of Service',\n    term: 'I accept xxx {0}.'\n  },\n  ja: {\n    tos: '利用規約',\n    term: '私は xxx の{0}に同意します。'\n  }\n}\n\nconst i18n = new VueI18n({\n  locale: 'en',\n  messages\n})\nnew Vue({\n  i18n,\n  data: {\n    url: '/term'\n  }\n}).$mount('#app')\n```\n\n输出如下：\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <label for=\"tos\">\n    I accept xxx <a href=\"/term\" target=\"_blank\">Term of Service</a>.\n  </label>\n  <!-- ... -->\n</div>\n```\n\n关于上面的例子，见[示例](https://github.com/kazupon/vue-i18n/tree/dev/examples/interpolation)\n\n`i18n` 函数式组件的子元素用 `path` 属性的语言环境信息进行插值。\n\n在上面的例子中:\n:::v-pre\n`<a :href=\"url\" target=\"_blank\">{{ $t('tos') }}</a>`\n:::\n被插入了语言环境信息 `term`。\n\n在上面的示例中，组件插值遵循**列表格式**。`i18n` 函数式组件的子项按其出现顺序进行插值。\n\n## 高级用法\n\n:::危险提示!!\n在下一个主要版本中，`place` 和 `places` 属性将被弃用。 请切换到插槽语法。\n:::\n\n:::tip 支持版本\n:new: 7.2+ 新增\n:::\n:::warning 提示\n:warning: 在 `i18n` 组件中，仅包含空格的文本内容将被省略。\n:::\n\n在 `place` 特性的帮助下支持具名格式。例如：\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <i18n path=\"info\" tag=\"p\">\n    <span place=\"limit\">{{ changeLimit }}</span>\n    <a place=\"action\" :href=\"changeUrl\">{{ $t('change') }}</a>\n  </i18n>\n  <!-- ... -->\n</div>\n```\n```js\nconst messages = {\n  en: {\n    info: 'You can {action} until {limit} minutes from departure.',\n    change: 'change your flight',\n    refund: 'refund the ticket'\n  }\n}\n\nconst i18n = new VueI18n({\n  locale: 'en',\n  messages\n})\nnew Vue({\n  i18n,\n  data: {\n    changeUrl: '/change',\n    refundUrl: '/refund',\n    changeLimit: 15,\n    refundLimit: 30\n  }\n}).$mount('#app')\n```\n\n输出：\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <p>\n    You can <a href=\"/change\">change your flight</a> until <span>15</span> minutes from departure.\n  </p>\n  <!-- ... -->\n</div>\n```\n\n:::warning 提示\n:warning: `i18n` 组件的所有子项都必须设置 `place` 属性。否则它将回退到列表格式。\n:::\n\n\n如果你仍想在命名格式中插入文本内容，可以在 `i18n` 组件上定义 `places` 属性。例如：\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <i18n path=\"info\" tag=\"p\" :places=\"{ limit: refundLimit }\">\n    <a place=\"action\" :href=\"refundUrl\">{{ $t('refund') }}</a>\n  </i18n>\n  <!-- ... -->\n</div>\n```\n\n输出：\n\n```html\n<div id=\"app\">\n  <!-- ... -->\n  <p>\n    You can <a href=\"/refund\">refund your ticket</a> until 30 minutes from departure.\n  </p>\n  <!-- ... -->\n</div>\n```\n"
  },
  {
    "path": "vuepress/zh/guide/lazy-loading.md",
    "content": "# 延迟加载翻译\n\n一次加载所有翻译文件是过度和不必要的。\n\n使用 Webpack 时，延迟加载或异步加载转换文件非常简单。\n\n让我们假设我们有一个类似于下面的项目目录\n\n```\nour-cool-project\n-dist\n-src\n--routes\n--store\n--setup\n---i18n-setup.js\n--lang\n---en.js\n---it.js\n```\n\n`lang` 文件夹是我们所有翻译文件所在的位置。`setup` 文件夹是我们的任意设置的文件，如 i18n-setup，全局组件 inits，插件 inits 和其他位置。\n\n```js\n//i18n-setup.js\nimport Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport messages from '@/lang/en'\nimport axios from 'axios'\n\nVue.use(VueI18n)\n\nexport const i18n = new VueI18n({\n  locale: 'en', // 设置语言环境\n  fallbackLocale: 'en',\n  messages // 设置语言环境信息\n})\n\nconst loadedLanguages = ['en'] // 我们的预装默认语言\n\nfunction setI18nLanguage (lang) {\n  i18n.locale = lang\n  axios.defaults.headers.common['Accept-Language'] = lang\n  document.querySelector('html').setAttribute('lang', lang)\n  return lang\n}\n\nexport function loadLanguageAsync(lang) {\n  // 如果语言相同\n  if (i18n.locale === lang) {\n    return Promise.resolve(setI18nLanguage(lang))\n  }\n\n  // 如果语言已经加载\n  if (loadedLanguages.includes(lang)) {\n    return Promise.resolve(setI18nLanguage(lang))\n  }\n\n  // 如果尚未加载语言\n  return import(/* webpackChunkName: \"lang-[request]\" */ `@/i18n/messages/${lang}.js`).then(\n    messages => {\n      i18n.setLocaleMessage(lang, messages.default)\n      loadedLanguages.push(lang)\n      return setI18nLanguage(lang)\n    }\n  )\n}\n```\n\n简而言之，我们正在创建一个新的 VueI18n 实例。然后我们创建一个 `loadedLanguages` 数组，它将跟踪我们加载的语言。接下来是 `setI18nLanguage` 函数，它将实际更改 vueI18n 实例、axios 以及其它需要本地化的地方。\n\n`loadLanguageAsync` 是实际用于更改语言的函数。加载新文件是通过import功能完成的，`import` 功能由 Webpack 慷慨提供，它允许我们动态加载文件，并且因为它使用 promise，我们可以轻松地等待加载完成。\n\n你可以在 [Webpack 文档](https://webpack.js.org/guides/code-splitting/#dynamic-imports) 中了解有关导入功能的更多信息。\n\n使用 `loadLanguageAsync` 函数很简单。一个常见的用例是在 vue-router beforeEach 钩子里面。\n\n```js\nrouter.beforeEach((to, from, next) => {\n  const lang = to.params.lang\n  loadLanguageAsync(lang).then(() => next())\n})\n```\n\n我们可以通过检查 `lang` 实际上是否支持来改进这一点，调用 `reject` 这样我们就可以在 beforeEach 捕获路由转换。\n"
  },
  {
    "path": "vuepress/zh/guide/locale.md",
    "content": "# 语言环境变更\n\n通常，使用 Vue 根实例作为起点，使用 `VueI18n` 类的 `locale` 属性作为参考来本地化所有子组件。\n\n有时你可能希望动态更改语言环境。在这种情况下，你可以更改 `VueI18n` 实例的 `locale` 属性的值。\n\n```js\nconst i18n = new VueI18n({\n  locale: 'ja', // 设置语言环境\n  ...\n})\n\n// 创建 Vue 根实例\nnew Vue({\n  i18n,\n  ...\n}).$mount('#app')\n\n// 更改为其它的 locale\ni18n.locale = 'en'\n```\n\n每个组件都包含一个引用为 `$i18n` 属性的 `VueI18n` 实例，该实例也可用于更改语言环境。\n\n示例：\n\n```vue\n<template>\n  <div class=\"locale-changer\">\n    <select v-model=\"$i18n.locale\">\n      <option v-for=\"(lang, i) in langs\" :key=\"`Lang${i}`\" :value=\"lang\">\n        {{ lang }}\n      </option>\n    </select>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'locale-changer',\n  data () {\n    return { langs: ['ja', 'en'] }\n  }\n}\n</script>\n```\n\n:::warning 警告\n:warning: 对于使用了 `sync: false` 的组件，语言环境的更改将被忽略。\n:::\n\n:::warning 组件与根范围\n:warning: 在组件内更改 `$i18n.locale` 不会更新根语言环境。\n如果您依靠根语言环境，例如在使用 [root fallbacks](./fallback.html) 时，请使用 `$root.$i18n.locale` 而不是$ `i18n.locale`。\n:::\n"
  },
  {
    "path": "vuepress/zh/guide/messages.md",
    "content": "# 语言环境信息的语法\n\n## 结构\n\n语言环境信息的语法如下：\n\n```typescript\n// 作为 Flowtype 定义，语言环境信息的语法类似于 BNF 注释\ntype LocaleMessages = { [key: Locale]: LocaleMessageObject };\ntype LocaleMessageObject = { [key: Path]: LocaleMessage };\ntype LocaleMessageArray = LocaleMessage[];\ntype MessageContext = {\n  list: (index: number) => mixed,\n  named: (key: string) => mixed,\n  linked: (key: string) => TranslateResult,\n  values: any,\n  path: string,\n  formatter: Formatter,\n  messages: LocaleMessages,\n  locale: Locale\n};\ntype MessageFunction = (ctx: MessageContext) => string;\ntype LocaleMessage = string | MessageFunction | LocaleMessageObject | LocaleMessageArray;\ntype Locale = string;\ntype Path = string;\n```\n\n基于以上语法，你可以配置以下结构的 Locale 信息：\n\n```json\n{\n  \"en\": {  // 'en' Locale\n    \"key1\": \"this is message1\", // 基本的\n    \"nested\": { // 嵌套\n      \"message1\": \"this is nested message1\"\n    },\n    \"errors\": [ // 数组\n      \"this is 0 error code message\",\n      {  // 数组嵌套对象\n        \"internal1\": \"this is internal 1 error message\"\n      },\n      [  // 数组嵌套数组\n        \"this is nested array error 1\"\n      ]\n    ]\n  },\n  \"ja\": { // 'ja' Locale\n    // ...\n  }\n}\n```\n\n在上面的语言环境信息的结构中，你可以使用以下键名路径进行翻译。\n\n```html\n<div id=\"app\">\n  <!-- 基本的 -->\n  <p>{{ $t('key1') }}</p>\n  <!-- 嵌套 -->\n  <p>{{ $t('nested.message1') }}</p>\n  <!-- 数组 -->\n  <p>{{ $t('errors[0]') }}</p>\n  <!-- 数组嵌套对象 -->\n  <p>{{ $t('errors[1].internal1') }}</p>\n  <!-- 数组嵌套数组 -->\n  <p>{{ $t('errors[2][0]') }}</p>\n</div>\n```\n\n输出以下内容：\n\n```html\n<div id=\"app\">\n  <!-- 基本的 -->\n  <p>this is message1</p>\n  <!-- 嵌套 -->\n  <p>this is nested message1</p>\n  <!-- 数组 -->\n  <p>this is 0 error code message</p>\n  <!-- 数组嵌套对象 -->\n  <p>this is internal 1 error message</p>\n  <!-- 数组嵌套数组 -->\n  <p>this is nested array error 1</p>\n</div>\n```\n\n## Linked locale messages\n\n如果有一个翻译关键字总是与另一个具有相同的具体文本，你可以链接到它。要链接到另一个翻译关键字，你所要做的就是在其内容前加上一个 `@:` 符号后跟完整的翻译键名，包括你要链接到的命名空间。\n\n语言环境信息如下：\n\n```js\nconst messages = {\n  en: {\n    message: {\n      the_world: 'the world',\n      dio: 'DIO:',\n      linked: '@:message.dio @:message.the_world !!!!'\n    }\n  }\n}\n```\n\n模板如下：\n\n```html\n<p>{{ $t('message.linked') }}</p>\n```\n\n输出如下：\n\n```html\n<p>DIO: the world !!!!</p>\n```\n### 格式化链接的语言环境消息\n\n如果语言区分字符大小写，则可能需要控制链接的语言环境消息的大小写。\n链接的消息可以用修饰符 `@.modifier:key` 格式化。\n\n以下修饰符当前可用。\n\n* `upper`: 链接消息中的所有字符均大写\n* `lower`: 小写链接消息中的所有字符\n* `capitalize`: 大写链接消息中的第一个字符\n\n语言环境消息如下：\n\n```javascript\nconst messages = {\n  en: {\n    message: {\n      homeAddress: 'Home address',\n      missingHomeAddress: 'Please provide @.lower:message.homeAddress'\n    }\n  }\n}\n```\n\n```html\n<label>{{ $t('message.homeAddress') }}</label>\n\n<p class=\"error\">{{ $t('message.missingHomeAddress') }}</p>\n```\n\n输出以下内容：\n\n```html\n<label>Home address</label>\n\n<p class=\"error\">Please provide home address</p>\n```\n\n您可以添加修饰符或覆盖将 `modifiers` 选项传递给 `VueI18n` 构造函数的现有修饰符。\n\n```javascript\nconst i18n = new VueI18n({\n  locale: 'en',\n  modifiers: {\n    snakeCase: (str) => str.split(' ').join('-')\n  },\n  messages: {\n    // ...\n  },\n})\n```\n\n### 按括号分组\n\n链接到的语言环境信息的键名也可以形如 `@:(message.foo.bar.baz)`，其中链接到另一段翻译的键名在括号 `()` 里。\n\n如果链接 `@:message.something` 后紧跟着一个点 `.`，则此选项非常有用，因为它本不该成为但却成为了链接的一部分。\n\n语言环境信息如下：\n\n```js\nconst messages = {\n  en: {\n    message: {\n      dio: 'DIO',\n      linked: 'There\\'s a reason, you lost, @:(message.dio).'\n    }\n  }\n}\n```\n\n模板如下：\n\n```html\n<p>{{ $t('message.linked') }}</p>\n```\n\n输出如下：\n\n```html\n<p>There's a reason, you lost, DIO.</p>\n```\n\n## 留言功能\n\nvue-i18n 建议在翻译消息时使用基于列表的字符串或命名格式作为语言环境消息。\n\n但是，在某些情况下，由于复杂的语言语法，您确实需要JavaScript的全部编程功能。 因此，您可以使用 **message function** 来代替基于字符串的消息。\n\n以下是一个返回简单问候语的消息函数：\n\n```js\nconst messages = {\n  en: {\n    greeting: (ctx) => 'hello!'\n  }\n}\n```\n\n使用消息功能非常容易！ 您只需使用 `$t` 或 `t` 指定消息功能的键：\n\n```html\n<p>{{ $t('greeting') }}</p>\n```\n\n输出如下：\n\n```html\n<p>hello!</p>\n```\n\n消息功能输出消息，该消息具有消息功能的返回值。\n\n### 命名格式\n\nvue-i18n 支持[命名格式](./formatting.md#named-formatting) 作为基于字符串的消息格式。 vue-i18n用$ t或t插值参数值，并可以将其输出。\n\n使用 **消息上下文** 的消息功能可以完成以下操作：\n\n这是问候的示例：\n\n```js\nconst messages = {\n  en: {\n    greeting: (ctx) => `hello, ${ctx.named('name')}!`\n  }\n}\n```\n\n模板：\n\n```html\n<p>{{ $t('greeting', { name: 'DIO' }) }}</p>\n```\n\n输出如下：\n\n```html\n<p>hello, DIO!</p>\n```\n\n消息上下文具有命名函数。 您需要指定键来解析以 `$t` 或 `t` 命名的值。\n\n### 清单格式\n\n列表格式的使用类似于上述命名格式。\n\nvue-i18n 支持 [列表格式](./formatting.md#list-formatting) 作为基于字符串的消息格式。 vue-i18n用$ t或t插值参数值，并可以将其输出。\n\n您可以通过使用消息上下文对消息函数执行相同的操作：\n\n这是问候的示例：\n\n```js\nconst messages = {\n  en: {\n    greeting: (ctx) => `hello, ${ctx.list(0)}!`\n  }\n}\n```\n\n模板：\n\n```html\n<p>{{ $t('greeting', ['DIO']) }}</p>\n```\n\n输出如下：\n\n```html\n<p>hello, DIO!</p>\n```\n\n消息上下文具有列表功能。 您需要指定索引来解析由 `$t` 或 `t` 列表指定的值。\n\n### 局限性\n\n在消息功能中，以下基于字符串提供的功能无法通过消息上下文使用：\n\n- 链接的区域设置消息\n- 复数\n"
  },
  {
    "path": "vuepress/zh/guide/number.md",
    "content": "# 数字本地化\n\n:::tip 支持版本\n:new: 7.0+ 新增\n:::\n\n你可以使用你定义的格式来本地化数字。\n\n数字格式如下：\n\n```js\nconst numberFormats = {\n  'en-US': {\n    currency: {\n      style: 'currency',\n      currency: 'USD'\n    }\n  },\n  'ja-JP': {\n    currency: {\n      style: 'currency',\n      currency: 'JPY',\n      currencyDisplay: 'symbol'\n    }\n  }\n}\n```\n\n如上，你可以指定具名的 (例如：`currency` 等) 的数字格式，并且需要使用 [ECMA-402 Intl.NumberFormat 的选项](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat)。\n\n之后就像语言环境信息一样，你需要指定 `VueI18n` 构造函数的 `numberFormats` 选项：\n\n```js\nconst i18n = new VueI18n({\n  numberFormats\n})\n\nnew Vue({\n  i18n\n}).$mount('#app')\n```\n\n模板如下：\n\n```html\n<div id=\"app\">\n  <p>{{ $n(100, 'currency') }}</p>\n  <p>{{ $n(100, 'currency', 'ja-JP') }}</p>\n</div>\n```\n\n\n输出如下：\n\n```html\n<div id=\"app\">\n  <p>$100.00</p>\n  <p>￥100</p>\n</div>\n```\n\n## 自定义格式\n\n:::tip 支持版本\n:new: 8.10+ 新增\n:::\n\n`$n` 方法返回的结果字符串带有完全格式化的数字，该数字只能作为整体使用。 在需要格式化格式化数字的某些部分（例如小数位）的情况下，`$n` 是不够的。 在这种情况下，`<i18n-n>` 功能组件将有所帮助。\n\n有了最少的一组属性，`<i18n-n>` 产生的输出与 `$n` 相同，并包装到已配置的DOM元素中。\n\n以下模板：\n\n```html\n<div id=\"app\">\n  <i18n-n :value=\"100\"></i18n-n>\n  <i18n-n :value=\"100\" format=\"currency\"></i18n-n>\n  <i18n-n :value=\"100\" format=\"currency\" locale=\"ja-JP\"></i18n-n>\n</div>\n```\n\n将产生以下输出：\n\n```html\n<div id=\"app\">\n  <span>100</span>\n  <span>$100.00</span>\n  <span>￥100</span>\n</div>\n```\n\n但是，当与[范围内的插槽](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots) 一起使用时，该组件的真正功能就会发挥作用。\n\n假设需要用较粗的字体呈现数字的整数部分。 这可以通过指定 `integer` 作用域的插槽元素来实现：\n\n```html\n<i18n-n :value=\"100\" format=\"currency\">\n  <span v-slot:integer=\"slotProps\" styles=\"font-weight: bold\">{{ slotProps.integer }}</span>\n</i18n-n>\n```\n\n上面的模板将产生以下 HTML：\n\n```html\n<span>$<span styles=\"font-weight: bold\">100</span>.00</span>\n```\n\n可以同时指定多个作用域插槽：\n\n```html\n<i18n-n :value=\"1234\" :format=\"{ key: 'currency', currency: 'EUR' }\">\n  <span v-slot:currency=\"slotProps\" styles=\"color: green\">{{ slotProps.currency }}</span>\n  <span v-slot:integer=\"slotProps\" styles=\"font-weight: bold\">{{ slotProps.integer }}</span>\n  <span v-slot:group=\"slotProps\" styles=\"font-weight: bold\">{{ slotProps.group }}</span>\n  <span v-slot:fraction=\"slotProps\" styles=\"font-size: small\">{{ slotProps.fraction }}</span>\n</i18n-n>\n```\n\n（此结果 HTML 进行了格式化，以提高可读性）\n\n```html\n<span>\n  <span styles=\"color: green\">€</span>\n  <span styles=\"font-weight: bold\">1</span>\n  <span styles=\"font-weight: bold\">,</span>\n  <span styles=\"font-weight: bold\">234</span>\n  <span styles=\"font-size: small\">00</span>\n</span>\n```\n\n您可以通过指定 `tag` 属性来选择根容器的节点类型。 如果省略，则默认为 `'span'`。 您也可以将其设置为布尔值 `false` 以直接插入子节点，而无需创建根元素。\n\n可以在 [API 页面](../api/readme.md#i18n-n-functional-component) 中找到受支持的作用域插槽以及其他 `<i18n-n>` 属性的完整列表。\n"
  },
  {
    "path": "vuepress/zh/guide/pluralization.md",
    "content": "# 复数\n\n你可以使用复数进行翻译。你必须定义具有管道 `|` 分隔符的语言环境，并在管道分隔符中定义复数。\n\n*您的模板将需要使用 `$tc()` 而不是 `$t()`。\n\n语言环境信息如下：\n\n```js\nconst messages = {\n  en: {\n    car: 'car | cars',\n    apple: 'no apples | one apple | {count} apples'\n  }\n}\n```\n\n模板如下：\n\n```html\n<p>{{ $tc('car', 1) }}</p>\n<p>{{ $tc('car', 2) }}</p>\n\n<p>{{ $tc('apple', 0) }}</p>\n<p>{{ $tc('apple', 1) }}</p>\n<p>{{ $tc('apple', 10, { count: 10 }) }}</p>\n```\n\n输出如下：\n\n```html\n<p>car</p>\n<p>cars</p>\n\n<p>no apples</p>\n<p>one apple</p>\n<p>10 apples</p>\n```\n\n## 通过预定义的参数访问该数字\n\n你无需明确指定复数的数字。可以通过预定义的命名参数 `{count}` 和/或 `{n}` 在语言环境信息中访问该数字。如有必要，你可以覆盖这些预定义的命名参数。\n\n语言环境信息如下：\n\n```js\nconst messages = {\n  en: {\n    apple: 'no apples | one apple | {count} apples',\n    banana: 'no bananas | {n} banana | {n} bananas'\n  }\n}\n```\n\n模板如下：\n\n```html\n<p>{{ $tc('apple', 10, { count: 10 }) }}</p>\n<p>{{ $tc('apple', 10) }}</p>\n\n<p>{{ $tc('banana', 1, { n: 1 }) }}</p>\n<p>{{ $tc('banana', 1) }}</p>\n<p>{{ $tc('banana', 100, { n: 'too many' }) }}</p>\n```\n\n输出如下：\n\n```html\n<p>10 apples</p>\n<p>10 apples</p>\n\n<p>1 banana</p>\n<p>1 banana</p>\n<p>too many bananas</p>\n```\n\n\n## 自定义复数\n\n但是，这种多元化并不适用于所有语言（例如，斯拉夫语言具有不同的多元化规则）。\n\n为了实现这些规则，您可以将可选的 `pluralizationRules` 对象传递给`VueI18n` 构造函数选项。\n\n使用针对斯拉夫语言（俄语，乌克兰语等）的规则的非常简化的示例：\n```js\nnew VueI18n({\n  // Key - 在这种情况下，用于规则 `'ru'` 的语言\n  // Value - 选择正确的复数形式的功能\n  pluralizationRules: {\n    /**\n     * @param choice {number} 输入给$的选择索引 $tc：`$tc('path.to.rule', choiceIndex)`\n     * @param choicesLength {number} 可用选择总数\n     * @returns 最终选择索引以选择复数单词\n     */\n    'ru': function(choice, choicesLength) {\n      // this === VueI18n 实例，因此本地属性也存在于此\n\n      if (choice === 0) {\n        return 0;\n      }\n\n      const teen = choice > 10 && choice < 20;\n      const endsWithOne = choice % 10 === 1;\n\n      if (choicesLength < 4) {\n        return (!teen && endsWithOne) ? 1 : 2;\n      }\n      if (!teen && endsWithOne) {\n        return 1;\n      }\n      if (!teen && choice % 10 >= 2 && choice % 10 <= 4) {\n        return 2;\n      }\n\n      return (choicesLength < 4) ? 2 : 3;\n    }\n  }\n})\n```\n\n这将有效地实现以下目的：\n\n```javascript\nconst messages = {\n  ru: {\n    car: '0 машин | {n} машина | {n} машины | {n} машин',\n    banana: 'нет бананов | {n} банан | {n} банана | {n} бананов'\n  }\n}\n```\n格式在哪里 `0 东西 | 事情以结尾结束 1 | 事情以结尾结束 2-4 | 事情以结尾结束 5-9, 0 和青少年 (10-19)`.\n附言 斯拉夫多元化是困难的，您可以阅读有关它的更多信息 [这里](http://www.russianlessons.net/lessons/lesson11_main.php).\n\n你的模板仍然需要使用 `$tc()`，而不是 `$t()` ：\n\n```html\n<p>{{ $tc('car', 1) }}</p>\n<p>{{ $tc('car', 2) }}</p>\n<p>{{ $tc('car', 4) }}</p>\n<p>{{ $tc('car', 12) }}</p>\n<p>{{ $tc('car', 21) }}</p>\n\n<p>{{ $tc('banana', 0) }}</p>\n<p>{{ $tc('banana', 4) }}</p>\n<p>{{ $tc('banana', 11) }}</p>\n<p>{{ $tc('banana', 31) }}</p>\n```\n\n结果如下：\n\n```html\n<p>1 машина</p>\n<p>2 машины</p>\n<p>4 машины</p>\n<p>12 машин</p>\n<p>21 машина</p>\n\n<p>нет бананов</p>\n<p>4 банана</p>\n<p>11 бананов</p>\n<p>31 банан</p>\n```\n\n### 默认多元\n\n如果在多元化地图中找不到您当前的语言环境，则将使用英语的 [默认](#复数) 规则。\n"
  },
  {
    "path": "vuepress/zh/guide/sfc.md",
    "content": "# 单文件组件\n\n## 基本用法\n\n如果使用单文件组件构建 Vue 组件或 Vue 应用程序，则可以管理 `i18n` 自定义块的语言环境信息。\n\n以下是[单文件组件示例](https://github.com/kazupon/vue-i18n/tree/dev/examples/sfc):\n\n```vue\n<i18n>\n{\n  \"en\": {\n    \"hello\": \"hello world!\"\n  },\n  \"ja\": {\n    \"hello\": \"こんにちは、世界！\"\n  }\n}\n</i18n>\n\n<template>\n  <div id=\"app\">\n    <label for=\"locale\">locale</label>\n    <select v-model=\"locale\">\n      <option>en</option>\n      <option>ja</option>\n    </select>\n    <p>message: {{ $t('hello') }}</p>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'app',\n  data () { return { locale: 'en' } },\n  watch: {\n    locale (val) {\n      this.$i18n.locale = val\n    }\n  }\n}\n</script>\n```\n\n## 安装 vue-i18n-loader\n\n为了使用 `<i18n>` 自定义块，你需要安装 `vue-loader` 和 `vue-i18n-loader`。如果你使用了单文件组件，[vue-loader](https://github.com/vuejs/vue-loader) 很可能已在项目中使用了，那么 [vue-i18n-loader](https://github.com/kazupon/vue-i18n-loader) 必须另外安装：\n\n```sh\nnpm i --save-dev @kazupon/vue-i18n-loader\n```\n\n## Webpack\n\n需要对 Webpack 进行以下配置：\n\n对于 vue-loader v15 或更高版本：\n```js\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader',\n      },\n      {\n        resourceQuery: /blockType=i18n/,\n        type: 'javascript/auto',\n        loader: '@kazupon/vue-i18n-loader'\n      }\n      // ...\n    ]\n  },\n  // ...\n}\n```\n\n对于 vue-loader v14：\n```js\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader',\n        options: {\n          loaders: {\n            // 你需要指定 `i18n` 的值为 `vue-i18n-loader`\n            i18n: '@kazupon/vue-i18n-loader'\n          }\n        }\n      },\n      // ...\n    ]\n  },\n  // ...\n}\n```\n\n## Vue CLI 3.0\n\n[Vue CLI 3.0](https://github.com/vuejs/vue-cli) 隐藏了 webpack 配置，因此，如果我们想在单文件组件中添加对 `<i18n>` 标记的支持，我们需要修改现有配置。\n\n为此，我们必须在项目的根目录下创建一个 `vue.config.js`。完成后，我们必须包括以下内容：\n\n对于 vue-loader v15 或更高版本：\n```js\nmodule.exports = {\n  chainWebpack: config => {\n    config.module\n      .rule(\"i18n\")\n      .resourceQuery(/blockType=i18n/)\n      .type('javascript/auto')\n      .use(\"i18n\")\n        .loader(\"@kazupon/vue-i18n-loader\")\n        .end();\n  }\n}\n```\n\n对于 vue-loader v14：\n```js\nconst merge = require('deepmerge')\n\nmodule.exports = {\n  chainWebpack: config => {\n    config.module\n      .rule('vue')\n      .use('vue-loader')\n      .tap(options =>\n        merge(options, {\n          loaders: {\n            i18n: '@kazupon/vue-i18n-loader'\n          }\n        })\n      )\n  }\n}\n```\n_别忘了安装[deepmerge](https://github.com/KyleAMathews/deepmerge)! (`npm i deepmerge -D` 或 `yarn add deepmerge -D`)_\n\n如果你想了解有关修改现有配置的更多信息[点击这里](https://cli.vuejs.org/guide/webpack.html)。\n\n## Laravel-Mix\n\n对于带有 vue-loader v15 或更高版本的 Laravel-mix 4：\n```js\n// 使用 “i18n” 方法扩展 Mix ，加载 vue-i18n-loader\nmix.extend( 'i18n', new class {\n        webpackRules() {\n            return [\n                {\n                    resourceQuery: /blockType=i18n/,\n                    type:          'javascript/auto',\n                    loader:        '@kazupon/vue-i18n-loader',\n                },\n            ];\n        }\n    }(),\n);\n\n// 确保在 `.js(..., ...)` 之前调用 `.i18n()` (来加载加载器)\nmix.i18n()\n   .js( 'resources/js/App.js', 'public/js/app.js' )\n   ...\n```\n\n对于带有 vue-loader v14 的 Laravel-mix 2：\n\n从 Laravel-mix 的 [V2.1](https://github.com/JeffreyWay/laravel-mix/releases/tag/v2.1) 开始，你可以通过 `mix.extend()` 添加自定义规则。Laravel mix 已经有了处理 .vue 文件的规则。要添加 `vue-i18n-loader`，请将以下内容添加到 `webpack.mix.js`：\n\n```js\n// 下面的代码将注入 i18n Kazupon/vue-18-loader 作为 .vue 文件的加载器。\nmix.extend( 'i18n', function( webpackConfig, ...args ) {\n    webpackConfig.module.rules.forEach( ( module ) => {\n        // 搜索处理 .vue 文件的 “vue-loader” 组件。\n        if( module.loader !== 'vue-loader' ) {\n            return;\n        }\n\n        // 在此模块中，为 i18n 标记添加 vue-i18n-loader。\n        module.options.loaders.i18n = '@kazupon/vue-i18n-loader';\n    } );\n} );\n\n// 确保在 `.js(...，...)` 之前调用 `.i18n()`\nmix.i18n()\n   .js( 'resources/assets/js/App.js', 'public/js/app.js' )\n   ...\n```\n\n## 加载 YAML\n\n`i18n` 自定义块需要指定为 JSON 格式，你也可以通过使用 `vue-loader` 预加载器功能来使用 `YAML` 格式。\n\n以下是 `YAML` 格式的 `i18n` 自定义块：\n\n```vue\n<i18n>\nen:\n  hello: \"hello world!\"\nja:\n  hello: \"こんにちは、世界！\"\n</i18n>\n```\n\n\nWebpack 配置如下：\n\n对于 vue-loader v15 或更高版本：\n```js\n// Vue CLI 3.0\nmodule.exports = {\n  chainWebpack: config => {\n    config.module\n      .rule(\"i18n\")\n      .resourceQuery(/blockType=i18n/)\n      .type('javascript/auto')\n      .use(\"i18n\")\n        .loader(\"@kazupon/vue-i18n-loader\")\n        .end()\n      .use('yaml')\n        .loader('yaml-loader')\n        .end()\n  }\n}\n```\n\n对于 vue-loader v14：\n```js\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader',\n        options: {\n          preLoaders: {\n            i18n: 'yaml-loader'\n          },\n          loaders: {\n            i18n: '@kazupon/vue-i18n-loader'\n          }\n        }\n      },\n      // ...\n    ]\n  },\n  // ...\n}\n```\n\n## 多个自定义块\n\n你可以使用具有多个 `i18n` 自定义块的语言环境信息。\n\n```vue\n<i18n src=\"./common/locales.json\"></i18n>\n<i18n>\n  {\n    \"en\": {\n      \"hello\": \"hello world!\"\n    },\n    \"ja\": {\n      \"hello\": \"こんにちは、世界！\"\n    }\n  }\n</i18n>\n```\n\n如上所见，第一个自定义块使用 `src` 特性加载常用的语言环境信息，第二个自定义块加载仅在该单文件组件中定义的语言环境信息。这些语言环境信息将合并为组件的语言环境信息。\n\n这样，多个自定义块在想要用作模块时非常有用。\n\n## Scoped 风格\n\n当使用带有 `scoped style` `vue-i18n` 时，重要的是要记住使用[深度选择器](https://vue-loader.vuejs.org/zh/guide/scoped-css.html#深度作用选择器) 来设置嵌套转换的样式。例如：\n\n__翻译仅包含文本__（不使用深层选择器）\n\n```vue\n<i18n>\n{\n  \"en\": {\n    \"hello\": \"hello world!\"\n  },\n  \"ja\": {\n    \"hello\": \"こんにちは、世界\"\n  }\n}\n</i18n>\n\n<template>\n  <div class=\"parent\">\n    <p>message: {{ $t('hello') }}</p>\n  </div>\n</template>\n\n<!-- 可行 -->\n<style scoped>\n  .parent p {\n    color: #42b883;\n  }\n</style>\n```\n\n__使用 HTML 元素翻译__（必须使用深度选择器）\n\n```vue\n<i18n>\n{\n  \"en\": {\n    \"hello\": \"hello<span>world!</span>\"\n  },\n  \"ja\": {\n    \"hello\": \"こんにちは、<span>世界！</span>\"\n  }\n}\n</i18n>\n\n<template>\n  <div class=\"parent\">\n    <p v-html=\"$t('hello')\"></p>\n  </div>\n</template>\n\n<!-- 不可行-->\n<style scoped>\n  .parent p {\n    color: #42b883;\n  }\n\n  .parent p span {\n    color: red;\n  }\n</style>\n\n<!-- 可行 >>> -->\n<style scoped>\n  .parent p {\n    color: #42b883;\n  }\n\n  .parent p >>> span {\n    color: red;\n  }\n</style>\n\n<!-- 可行 /deep/ -->\n<style scoped>\n  .parent p {\n    color: #42b883;\n  }\n\n  .parent p /deep/ span {\n    color: red;\n  }\n</style>\n\n<!-- 可行 ::v-deep -->\n<style scoped>\n  .parent p {\n    color: #42b883;\n  }\n\n  ::v-deep .parent p span {\n    color: red;\n  }\n</style>\n```\n\n## 函数式组件中的自定义块\n\n如果单个文件组件具有使用函数式组件的模板，并且你已经定义了 `i18n` 自定义块，请注意你无法使用语言环境信息进行本地化。\n\n例如，以下代码无法使用 `i18n` 自定义块的语言环境信息进行本地化。\n\n```vue\n<i18n>\n{\n  \"en\": {\n    \"hello\": \"hello world\"\n  },\n  \"ja\": {\n    \"hello\": \"こんにちは、世界\"\n  }\n}\n</i18n>\n\n<template functional>\n  <!-- 'hello' 的父实例的语言环境信息 -->\n  <p>{{ parent.$t('hello') }}</p>\n</template>\n```\n"
  },
  {
    "path": "vuepress/zh/guide/tooling.md",
    "content": "# 工具\n\n为了支持开发，我们官方提供了一些工具。\n\n此外，还有第三方供应商提供的集成了 Vue I18n 的工具。\n\n## 官方工具\n\n### Vue Cli 插件\n\n[vue-cli-plugin-i18n](https://github.com/kazupon/vue-cli-plugin-i18n) 是官方提供的 Vue Cli 插件。\n\n使用此插件，您可以为Vue应用程序设置 i18n 环境，并支持 i18n 开发环境。\n\n### Webpack Loader\n\n[vue-i18n-loader](https://github.com/kazupon/vue-i18n-loader) 是官方提供的 Webpack Loader。\n使用此加载程序，您可以在单个文件组件中使用 `i18n` 自定义块。\n\n关于 `i18n` 自定义块，请参见 [单文件组件](./sfc.md)\n\n### ESLint 插件\n\n[eslint-plugin-vue-i18n](https://intlify.github.io/eslint-plugin-vue-i18n/) 是为 Vue I18n 编写的 ESLint 插件。\n\n它可以轻松地将一些本地化 lint 功能集成到 Vue.js 应用程序中。\n\n### Extensions\n\n在[vue-i18n-extensions](https://github.com/kazupon/vue-i18n-extensions) 你可以找到为 Vue I18n 编写的插件。\n\n您可以使用此扩展来启用 SSR 并提高 Vue I18n 的性能。\n\n## 第三方工具\n\n### BabelEdit\n\n[BabelEdit](https://www.codeandweb.com/babeledit) 是 Web 应用程序的翻译编辑器。\n\nBabelEdit可以翻译 `json` 文件，也可以翻译单文件组件的 `i18n` 自定义块。\n\n欲了解更多，请看[教程](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-vue-app-with-vue-i18n)\n\n### i18n Ally\n\n[i18n Ally](https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally) 是 VSCode 的 i18n 扩展。\n\ni18n Ally 为您的 i18n 开发提供了出色的 DX。\n\n在[自述文件](https://github.com/antfu/i18n-ally/blob/master/README.md)中了解有关 i18n Ally 的更多信息。\n\n### i18nPlugin (intellij 平台)\n\n[i18nPlugin](https://github.com/nyavro/i18nPlugin) Intellij idea i18next 支持插件([Jetbrains 插件页面](https://plugins.jetbrains.com/plugin/12981-i18n-support))。\n\n适用于 i18n typescript/javascript/PHP 的插件。 支持 vue-i18n。 要启用 vue-i18n 支持，请转到 设置- > 工具 -> i18n 插件配置，然后选中 \"Vue-i18n\"。 您需要设置您的语言环境目录（默认为语言环境）。\n\n### vue-i18n-extract\n\n[vue-i18n-extract](https://github.com/pixari/vue-i18n-extract) 对基于 vue-i18n 的 Vue.js 项目执行静态分析，并报告以下信息：\n\n- 所有 **未使用的 vue-i18n 键**的列表（在语言文件中找到但在项目中未使用的条目）\n- 所有 **缺失键** 的列表（在项目中使用但在语言文件中不存在的条目）\n\n可以在控制台中显示输出或将其写入json文件\n\n丢失的键也可以自动添加到给定的语言文件中\n"
  },
  {
    "path": "vuepress/zh/installation.md",
    "content": "# 安装\n\n## 兼容性说明\n\n- Vue.js `2.0.0`+\n\n## 直接下载 / CDN\n\n<https://unpkg.com/vue-i18n/dist/vue-i18n>\n\n[unpkg.com](https://unpkg.com) 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以通过 <https://unpkg.com/vue-i18n@8.9.0/dist/vue-i18n.js> 这样的 URL 指定版本号或者 tag。\n\n在 Vue 之后引入 vue-i18n，它会自动安装：\n\n\n```html\n<script src=\"https://unpkg.com/vue/dist/vue.js\"></script>\n<script src=\"https://unpkg.com/vue-i18n/dist/vue-i18n.js\"></script>\n```\n\n## NPM\n\n```sh\nnpm install vue-i18n\n```\n\n## Yarn\n\n```sh\nyarn add vue-i18n\n```\n\n如果在一个模块系统中使用它，你必须通过 `Vue.use()` 明确地安装 `vue-i18n`：\n\n\n```javascript\nimport Vue from 'vue'\nimport VueI18n from 'vue-i18n'\n\nVue.use(VueI18n)\n```\n\n如果使用全局的 script 标签，则无须如此 (手动安装) `<script>`。\n\n## Vue Cli 3.x\n\n```sh\nvue add i18n\n```\n\n你需要 Vue cli 3.x 作为先决条件，你可以在命令行上使用下面的命令来安装：\n\n```sh\nnpm install @vue/cli -g\n```\n\n## 开发版构建\n\n如果你想使用最新的开发版构建，就得从 GitHub 上直接 clone，然后自己构建一个 `vue-i18n`。\n\n```sh\ngit clone https://github.com/kazupon/vue-i18n.git node_modules/vue-i18n\ncd node_modules/vue-i18n\nnpm install # or `yarn`\nnpm run build  # or `yarn run build`\n```\n"
  },
  {
    "path": "vuepress/zh/introduction.md",
    "content": "# 介绍\n\n:::warning 说明\n:warning: 本文档适用于 Vue I18n v6.0 或更高版本. 如果你使用 v5.x，请参阅[旧版](./legacy/)部分。\n:::\n\nVue I18n 是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。\n\n让我们[开始吧](./started.md)\n\n## 赞助商\n\n### 🥇 金\n\n<p style=\"text-align: center;\">\n  <a\n    href=\"https://nuxtjs.org/\"\n    style=\"display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      src=\"/vue-i18n/patrons/nuxt.png\"\n      alt=\"Nuxt.js\"\n    />\n  </a>\n</p>\n\n### 🥈 白银赞助商\n\n<p style=\"text-align: center;\">\n  <a\n    href=\"https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01\"\n    style=\"display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      src=\"/vue-i18n/patrons/babeledit.png\"\n      alt=\"适用于应用程序（Web应用程序）的BabelEdit翻译编辑器\"\n    />\n  </a>\n</p>\n\n### 🥉 青铜\n\n<p style=\"text-align: center;\">\n  <a\n    href=\"https://zenarchitects.co.jp/\"\n    style=\"max-width: 200px; width: 100%; height: 80px; display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      src=\"/vue-i18n/patrons/zenarchitects.png\"\n      alt=\"zenarchitects\"\n    />\n  </a>\n  <a\n    href=\"https://www.sendcloud.com/\"\n    style=\"max-width: 200px; width: 100%; height: 80px; display: inline-block; vertical-align: middle;\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <img\n      src=\"/vue-i18n/patrons/sendcloud.svg\"\n      alt=\"sendcloud\"\n    />\n  </a>\n</p>\n\n## 成为一名 Patreon 赞助商\n\n贵公司是否使用 vue-i18n 或 vue-cli-plugin-i18n 来构建出色的应用程序？ 加入其他会员并成为赞助商，在此文档中添加你的徽标！在 Patreon 上支持我使我能够更少地完成工作并在免费开源软件上工作，例如 vue-i18n！ 谢谢！\n\n\n<p style=\"text-align: center;\">\n  <iframe src=\"https://github.com/sponsors/kazupon/card\" title=\"Sponsor kazupon\" height=\"225\" width=\"600\" style=\"border: 0; margin: 24px\"></iframe>\n</p>\n"
  },
  {
    "path": "vuepress/zh/started.md",
    "content": "# 开始\n\n:::tip 说明\n我们将在指南中的代码示例中使用 [ES2015](https://github.com/lukehoban/es6features) 语法。\n:::\n\n## HTML\n\n```html\n<script src=\"https://unpkg.com/vue/dist/vue.js\"></script>\n<script src=\"https://unpkg.com/vue-i18n/dist/vue-i18n.js\"></script>\n\n<div id=\"app\">\n  <p>{{ $t(\"message.hello\") }}</p>\n</div>\n```\n\n## JavaScript\n\n```js\n// 如果使用模块系统 (例如通过 vue-cli)，则需要导入 Vue 和 VueI18n ，然后调用 Vue.use(VueI18n)。\n// import Vue from 'vue'\n// import VueI18n from 'vue-i18n'\n//\n// Vue.use(VueI18n)\n\n// 准备翻译的语言环境信息\nconst messages = {\n  en: {\n    message: {\n      hello: 'hello world'\n    }\n  },\n  ja: {\n    message: {\n      hello: 'こんにちは、世界'\n    }\n  }\n}\n\n// 通过选项创建 VueI18n 实例\nconst i18n = new VueI18n({\n  locale: 'ja', // 设置地区\n  messages, // 设置地区信息\n})\n\n\n// 通过 `i18n` 选项创建 Vue 实例\nnew Vue({ i18n }).$mount('#app')\n\n// 现在应用程序已经准备好了！\n```\n\n输出如下：\n\n```html\n<div id=\"#app\">\n  <p>こんにちは、世界</p>\n</div>\n```\n"
  }
]