i18n

2022-02-15 08:46:02 +01:00 · 2022-02-15 08:46:02 +01:00 · adb185e4d4
commit adb185e4d4
parent 3b126086fe
7 changed files with 186 additions and 35 deletions
--- a/package.json
+++ b/package.json
@ -12,11 +12,13 @@
  },
  "dependencies": {
    "vue": "^3.2.30",
+    "vue-i18n": "9",
    "vue-router": "^4.0.12"
  },
  "devDependencies": {
    "@iconify-json/bx": "^1.0.3",
    "@iconify-json/ph": "^1.0.4",
+    "@intlify/vite-plugin-vue-i18n": "^3.3.0",
    "@rushstack/eslint-patch": "^1.1.0",
    "@types/node": "^16.11.24",
    "@typescript-eslint/eslint-plugin": "^5.11.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -3,6 +3,7 @@ lockfileVersion: 5.3
 specifiers:
  '@iconify-json/bx': ^1.0.3
  '@iconify-json/ph': ^1.0.4
+  '@intlify/vite-plugin-vue-i18n': ^3.3.0
  '@rushstack/eslint-patch': ^1.1.0
  '@types/node': ^16.11.24
  '@typescript-eslint/eslint-plugin': ^5.11.0
@ -21,7 +22,6 @@ specifiers:
  eslint-plugin-tailwindcss: ^3.4.4
  eslint-plugin-vue: ^8.4.1
  jsdom: ^19.0.0
-  pinia: ^2.0.11
  postcss: ^8.4.6
  prettier: ^2.5.1
  prettier-eslint: ^13.0.0
@ -31,17 +31,19 @@ specifiers:
  vite: ^2.8.1
  vitest: ^0.1.27
  vue: ^3.2.30
+  vue-i18n: '9'
  vue-router: ^4.0.12
  vue-tsc: ^0.29.8

 dependencies:
-  pinia: 2.0.11_typescript@4.5.5+vue@3.2.30
  vue: 3.2.30
+  vue-i18n: 9.1.9_vue@3.2.30
  vue-router: 4.0.12_vue@3.2.30

 devDependencies:
  '@iconify-json/bx': 1.0.3
  '@iconify-json/ph': 1.0.4
+  '@intlify/vite-plugin-vue-i18n': 3.3.0_vite@2.8.1+vue-i18n@9.1.9
  '@rushstack/eslint-patch': 1.1.0
  '@types/node': 16.11.24
  '@typescript-eslint/eslint-plugin': 5.11.0_ae020354c3da76ce329e71c9084ef5bf
@ -206,6 +208,120 @@ packages:
      - supports-color
    dev: true

+  /@intlify/bundle-utils/2.2.0_vue-i18n@9.1.9:
+    resolution: {integrity: sha512-qVuN7+c84UB6rlLHSued2J9R86LG1rHg6ZibCghGMyPXnW0nOuIfkUFf1F7tXIqfMXjIPeJzlbpmzjWTI2z9Kw==}
+    engines: {node: '>= 12'}
+    peerDependencies:
+      petite-vue-i18n: '*'
+      vue-i18n: '*'
+    peerDependenciesMeta:
+      petite-vue-i18n:
+        optional: true
+      vue-i18n:
+        optional: true
+    dependencies:
+      '@intlify/message-compiler': 9.2.0-beta.30
+      '@intlify/shared': 9.2.0-beta.30
+      jsonc-eslint-parser: 1.4.1
+      source-map: 0.6.1
+      vue-i18n: 9.1.9_vue@3.2.30
+      yaml-eslint-parser: 0.3.2
+    dev: true
+
+  /@intlify/core-base/9.1.9:
+    resolution: {integrity: sha512-x5T0p/Ja0S8hs5xs+ImKyYckVkL4CzcEXykVYYV6rcbXxJTe2o58IquSqX9bdncVKbRZP7GlBU1EcRaQEEJ+vw==}
+    engines: {node: '>= 10'}
+    dependencies:
+      '@intlify/devtools-if': 9.1.9
+      '@intlify/message-compiler': 9.1.9
+      '@intlify/message-resolver': 9.1.9
+      '@intlify/runtime': 9.1.9
+      '@intlify/shared': 9.1.9
+      '@intlify/vue-devtools': 9.1.9
+    dev: false
+
+  /@intlify/devtools-if/9.1.9:
+    resolution: {integrity: sha512-oKSMKjttG3Ut/1UGEZjSdghuP3fwA15zpDPcjkf/1FjlOIm6uIBGMNS5jXzsZy593u+P/YcnrZD6cD3IVFz9vQ==}
+    engines: {node: '>= 10'}
+    dependencies:
+      '@intlify/shared': 9.1.9
+    dev: false
+
+  /@intlify/message-compiler/9.1.9:
+    resolution: {integrity: sha512-6YgCMF46Xd0IH2hMRLCssZI3gFG4aywidoWQ3QP4RGYQXQYYfFC54DxhSgfIPpVoPLQ+4AD29eoYmhiHZ+qLFQ==}
+    engines: {node: '>= 10'}
+    dependencies:
+      '@intlify/message-resolver': 9.1.9
+      '@intlify/shared': 9.1.9
+      source-map: 0.6.1
+    dev: false
+
+  /@intlify/message-compiler/9.2.0-beta.30:
+    resolution: {integrity: sha512-2kj/0nLIFrgiO86f9VifcUUcV8LdzXt4YYPIujx/LkTEQOuSFUo/bNiMaG1hyfiU/8mfq6tsaWKjoOZjeao1eQ==}
+    engines: {node: '>= 12'}
+    dependencies:
+      '@intlify/shared': 9.2.0-beta.30
+      source-map: 0.6.1
+    dev: true
+
+  /@intlify/message-resolver/9.1.9:
+    resolution: {integrity: sha512-Lx/DBpigeK0sz2BBbzv5mu9/dAlt98HxwbG7xLawC3O2xMF9MNWU5FtOziwYG6TDIjNq0O/3ZbOJAxwITIWXEA==}
+    engines: {node: '>= 10'}
+    dev: false
+
+  /@intlify/runtime/9.1.9:
+    resolution: {integrity: sha512-XgPw8+UlHCiie3fI41HPVa/VDJb3/aSH7bLhY1hJvlvNV713PFtb4p4Jo+rlE0gAoMsMCGcsiT982fImolSltg==}
+    engines: {node: '>= 10'}
+    dependencies:
+      '@intlify/message-compiler': 9.1.9
+      '@intlify/message-resolver': 9.1.9
+      '@intlify/shared': 9.1.9
+    dev: false
+
+  /@intlify/shared/9.1.9:
+    resolution: {integrity: sha512-xKGM1d0EAxdDFCWedcYXOm6V5Pfw/TMudd6/qCdEb4tv0hk9EKeg7lwQF1azE0dP2phvx0yXxrt7UQK+IZjNdw==}
+    engines: {node: '>= 10'}
+    dev: false
+
+  /@intlify/shared/9.2.0-beta.30:
+    resolution: {integrity: sha512-E1WHRTIlUEse3d/6t1pAagSXRxmeVeNIhx5kT80dfpYxw8lOnCWV9wLve2bq9Fkv+3TD2I5j+CdN7jvSl3LdsA==}
+    engines: {node: '>= 12'}
+    dev: true
+
+  /@intlify/vite-plugin-vue-i18n/3.3.0_vite@2.8.1+vue-i18n@9.1.9:
+    resolution: {integrity: sha512-RxtqVe8ia/5eEH+RFzRKMhO6eyYRGssNpVcaxOoocgKDJuA+1QHF5jZGnioIQpZcIwFxLUlf42C4YdAatIJFEw==}
+    engines: {node: '>= 12'}
+    peerDependencies:
+      petite-vue-i18n: ^9.0.0
+      vite: ^2.0.0
+      vue-i18n: ^9.0.0
+    peerDependenciesMeta:
+      petite-vue-i18n:
+        optional: true
+      vue-i18n:
+        optional: true
+    dependencies:
+      '@intlify/bundle-utils': 2.2.0_vue-i18n@9.1.9
+      '@intlify/shared': 9.2.0-beta.30
+      '@rollup/pluginutils': 4.1.2
+      debug: 4.3.3
+      fast-glob: 3.2.11
+      source-map: 0.6.1
+      vite: 2.8.1
+      vue-i18n: 9.1.9_vue@3.2.30
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@intlify/vue-devtools/9.1.9:
+    resolution: {integrity: sha512-YPehH9uL4vZcGXky4Ev5qQIITnHKIvsD2GKGXgqf+05osMUI6WSEQHaN9USRa318Rs8RyyPCiDfmA0hRu3k7og==}
+    engines: {node: '>= 10'}
+    dependencies:
+      '@intlify/message-resolver': 9.1.9
+      '@intlify/runtime': 9.1.9
+      '@intlify/shared': 9.1.9
+    dev: false
+
  /@nodelib/fs.scandir/2.1.5:
    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
    engines: {node: '>= 8'}
@ -227,6 +343,14 @@ packages:
      fastq: 1.13.0
    dev: true

+  /@rollup/pluginutils/4.1.2:
+    resolution: {integrity: sha512-ROn4qvkxP9SyPeHaf7uQC/GPFY6L/OWy9+bd9AwcjOAWQwxRscoEyAUD8qCY5o5iL4jqQwoLk2kaTKJPb/HwzQ==}
+    engines: {node: '>= 8.0.0'}
+    dependencies:
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+    dev: true
+
  /@rushstack/eslint-patch/1.1.0:
    resolution: {integrity: sha512-JLo+Y592QzIE+q7Dl2pMUtt4q8SKYI5jDrZxrozEQxnGVOyYE+GWK9eLkwTaeN9DDctlaRAQ3TBmzZ1qdLE30A==}
    dev: true
@ -2425,6 +2549,17 @@ packages:
      minimist: 1.2.5
    dev: true

+  /jsonc-eslint-parser/1.4.1:
+    resolution: {integrity: sha512-hXBrvsR1rdjmB2kQmUjf1rEIa+TqHBGMge8pwi++C+Si1ad7EjZrJcpgwym+QGK/pqTx+K7keFAtLlVNdLRJOg==}
+    engines: {node: '>=8.10.0'}
+    dependencies:
+      acorn: 7.4.1
+      eslint-utils: 2.1.0
+      eslint-visitor-keys: 1.3.0
+      espree: 6.2.1
+      semver: 6.3.0
+    dev: true
+
  /jsonc-parser/2.3.1:
    resolution: {integrity: sha512-H8jvkz1O50L3dMZCsLqiuB2tA7muqbSg1AtGEkN0leAqGjsUzDJir3Zwr02BhqdcITPg3ei3mZ+HjMocAknhhg==}
    dev: true
@ -2834,24 +2969,6 @@ packages:
    engines: {node: '>=0.10.0'}
    dev: true

-  /pinia/2.0.11_typescript@4.5.5+vue@3.2.30:
-    resolution: {integrity: sha512-JzcmnMqu28PNWOjDgEDK6fTrIzX8eQZKPPKvu/fpHdpXARUj1xeVdFi3YFIMOWswqaBd589cpmAMdSSTryI9iw==}
-    peerDependencies:
-      '@vue/composition-api': ^1.4.0
-      typescript: '>=4.4.4'
-      vue: ^2.6.14 || ^3.2.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-      typescript:
-        optional: true
-    dependencies:
-      '@vue/devtools-api': 6.0.7
-      typescript: 4.5.5
-      vue: 3.2.30
-      vue-demi: 0.12.1_vue@3.2.30
-    dev: false
-
  /postcss-js/4.0.0_postcss@8.4.6:
    resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==}
    engines: {node: ^12 || ^14 || >= 16}
@ -3772,21 +3889,6 @@ packages:
      vscode-typescript-languageservice: 0.29.8
    dev: true

-  /vue-demi/0.12.1_vue@3.2.30:
-    resolution: {integrity: sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==}
-    engines: {node: '>=12'}
-    hasBin: true
-    requiresBuild: true
-    peerDependencies:
-      '@vue/composition-api': ^1.0.0-rc.1
-      vue: ^3.0.0-0 || ^2.6.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-    dependencies:
-      vue: 3.2.30
-    dev: false
-
  /vue-eslint-parser/7.1.1_eslint@7.32.0:
    resolution: {integrity: sha512-8FdXi0gieEwh1IprIBafpiJWcApwrU+l2FEj8c1HtHFdNXMd0+2jUSjBVmcQYohf/E72irwAXEXLga6TQcB3FA==}
    engines: {node: '>=8.10'}
@ -3822,6 +3924,19 @@ packages:
      - supports-color
    dev: true

+  /vue-i18n/9.1.9_vue@3.2.30:
+    resolution: {integrity: sha512-JeRdNVxS2OGp1E+pye5XB6+M6BBkHwAv9C80Q7+kzoMdUDGRna06tjC0vCB/jDX9aWrl5swxOMFcyAr7or8XTA==}
+    engines: {node: '>= 10'}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      '@intlify/core-base': 9.1.9
+      '@intlify/shared': 9.1.9
+      '@intlify/vue-devtools': 9.1.9
+      '@vue/devtools-api': 6.0.7
+      vue: 3.2.30
+    dev: false
+
  /vue-router/4.0.12_vue@3.2.30:
    resolution: {integrity: sha512-CPXvfqe+mZLB1kBWssssTiWg4EQERyqJZes7USiqfW9B5N2x+nHlnsM1D3b5CaJ6qgCvMmYJnz+G0iWjNCvXrg==}
    peerDependencies:
@ -3962,6 +4077,14 @@ packages:
    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
    dev: true

+  /yaml-eslint-parser/0.3.2:
+    resolution: {integrity: sha512-32kYO6kJUuZzqte82t4M/gB6/+11WAuHiEnK7FreMo20xsCKPeFH5tDBU7iWxR7zeJpNnMXfJyXwne48D0hGrg==}
+    dependencies:
+      eslint-visitor-keys: 1.3.0
+      lodash: 4.17.21
+      yaml: 1.10.2
+    dev: true
+
  /yaml/1.10.2:
    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
    engines: {node: '>= 6'}
--- a/src/locales/en.json
+++ b/src/locales/en.json
@ -0,0 +1,3 @@
+{
+
+}
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@ -0,0 +1,6 @@
+{
+  "playAgain": "Rejouer",
+  "endGame.victoryLabel": "Bien joué !",
+  "endGame.failureLabel": "Presque",
+  "startGame": "Démarrer"
+}
--- a/src/main.ts
+++ b/src/main.ts
@ -1,12 +1,22 @@
 import './index.css'

+import messages from '@intlify/vite-plugin-vue-i18n/messages'
 import { createApp } from 'vue'
+import { createI18n } from 'vue-i18n'

 import App from './App.vue'
 import router from './router'

+const i18n = createI18n({
+  legacy: false,
+  locale: 'fr',
+  fallbackLocale: 'en',
+  messages,
+})
+
 const app = createApp(App)

 app.use(router)
+app.use(i18n)

 app.mount('#app')
--- a/tsconfig.json
+++ b/tsconfig.json
@ -15,6 +15,7 @@
    },
    "types": [
      "unplugin-icons/types/vue",
+      "@intlify/vite-plugin-vue-i18n/client",
    ],
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
    "skipLibCheck": true
--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,15 +1,21 @@
+import vueI18n from '@intlify/vite-plugin-vue-i18n'
 import vue from '@vitejs/plugin-vue'
+import path from 'path'
 import Icons from 'unplugin-icons/vite'
 import { fileURLToPath, URL } from 'url'
 import { defineConfig } from 'vite'

 // https://vitejs.dev/config/
 export default defineConfig({
+  base: '/compte/',
  plugins: [
    vue({
      reactivityTransform: true,
    }),
    Icons({ autoInstall: true }),
+    vueI18n({
+      include: path.resolve(__dirname, 'src/locales/**'),
+    }),
  ],
  resolve: {
    alias: {