From adb185e4d4b0386b615c4d249262f756fb383c92 Mon Sep 17 00:00:00 2001 From: Simon Cambier Date: Tue, 15 Feb 2022 08:46:02 +0100 Subject: [PATCH] i18n --- package.json | 2 + pnpm-lock.yaml | 193 ++++++++++++++++++++++++++++++++++++-------- src/locales/en.json | 3 + src/locales/fr.json | 6 ++ src/main.ts | 10 +++ tsconfig.json | 1 + vite.config.ts | 6 ++ 7 files changed, 186 insertions(+), 35 deletions(-) create mode 100644 src/locales/en.json create mode 100644 src/locales/fr.json diff --git a/package.json b/package.json index 4fa47fa..99fa312 100644 --- 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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index aeaeaf9..fb8defc 100644 --- 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'} diff --git a/src/locales/en.json b/src/locales/en.json new file mode 100644 index 0000000..0db3279 --- /dev/null +++ b/src/locales/en.json @@ -0,0 +1,3 @@ +{ + +} diff --git a/src/locales/fr.json b/src/locales/fr.json new file mode 100644 index 0000000..b8ac2b6 --- /dev/null +++ b/src/locales/fr.json @@ -0,0 +1,6 @@ +{ + "playAgain": "Rejouer", + "endGame.victoryLabel": "Bien joué !", + "endGame.failureLabel": "Presque", + "startGame": "Démarrer" +} diff --git a/src/main.ts b/src/main.ts index 6e224c7..a0918fc 100644 --- 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') diff --git a/tsconfig.json b/tsconfig.json index b956cb9..256995b 100644 --- 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 diff --git a/vite.config.ts b/vite.config.ts index 019f738..9e8c0dc 100644 --- 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: {