From b93c6c8314f671737203f798815dd1397f6c1648 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Mon, 10 Aug 2020 11:17:26 +0800 Subject: [PATCH] feat: add vue-i18n --- .vscode/extensions.json | 8 ++++++++ .vscode/settings.json | 7 +++++++ README.md | 19 +++++++++++++------ locales/en.json | 10 ++++++++++ locales/fr.json | 10 ++++++++++ locales/zh-CN.json | 10 ++++++++++ package.json | 1 + pnpm-lock.yaml | 14 +++++++++++++- src/components/Footer.vue | 28 ++++++++++++++++++++++------ src/main.postcss | 8 ++++++++ src/main.ts | 11 ++++++++++- src/messages.ts | 11 +++++++++++ src/pages/hi/[name].vue | 8 ++++++-- src/pages/index.vue | 8 ++++++-- 14 files changed, 135 insertions(+), 18 deletions(-) create mode 100644 .vscode/extensions.json create mode 100644 .vscode/settings.json create mode 100644 locales/en.json create mode 100644 locales/fr.json create mode 100644 locales/zh-CN.json create mode 100644 src/messages.ts diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..50ec3a1 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,8 @@ +{ + "recommendations": [ + "octref.vetur", + "antfu.i18n-ally", + "dbaeumer.vscode-eslint", + "bradlc.vscode-tailwindcss" + ] +} \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..8b15df4 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,7 @@ +{ + "i18n-ally.localesPaths": "locales", + "i18n-ally.keystyle": "nested", + "i18n-ally.sortKeys": true, + + "vetur.experimental.templateInterpolationService": true +} \ No newline at end of file diff --git a/README.md b/README.md index 0116d72..41f8f19 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@

-Live Example +Live Demo


@@ -32,6 +32,7 @@ ### Utils +- [vue-i18n](https://github.com/intlify/vue-i18n-next) - [VueUse](https://github.com/antfu/vueuse) ### Misc @@ -44,16 +45,22 @@ - [pnpm](https://pnpm.js.org/) - [Netlify](https://www.netlify.com/) - [ESLint](https://eslint.org/) with [@antfu/eslint-config-vue](https://github.com/antfu/eslint-config) +- [VS Code Extensions](./.vscode/extensions.json) -## Use It! +## Try it now! + +[Create a repo from this template on Github](https://github.com/antfu/vitesse/generate). + +Or if you prefers do to manually with cleaner git history ```bash -npx degit antfu/vitesse my-vitesse-app \ -cd my-vitesse-app \ -git init \ +npx degit antfu/vitesse my-vitesse-app +cd my-vitesse-app pnpm i # If you don't have pnpm installed, run: npm install -g pnpm ``` ## Why -I have created several Vite apps recently. Setting the configs up is kinda the bottleneck for me to make the idea simply comes true in very a short time. So I made this starter template for myself to create apps more easily, along with some good practices that I have learned during making those apps. It's strongly opinionated, but feel free to tweak it or even maintains your own forks. +I have created several Vite apps recently. Setting the configs up is kinda the bottleneck for me to make the idea simply comes true in a very short time. + +So I made this starter template for myself to create apps more easily, along with some good practices that I have learned from making those apps. It's strongly opinionated, but feel free to tweak it or even maintains your own forks. diff --git a/locales/en.json b/locales/en.json new file mode 100644 index 0000000..3be9ee3 --- /dev/null +++ b/locales/en.json @@ -0,0 +1,10 @@ +{ + "intro": { + "whats-your-name": "What's your name?", + "hi": "Hi, {name}!" + }, + "button": { + "go": "GO", + "back": "Back" + } +} diff --git a/locales/fr.json b/locales/fr.json new file mode 100644 index 0000000..6e9aac3 --- /dev/null +++ b/locales/fr.json @@ -0,0 +1,10 @@ +{ + "button": { + "back": "Arrière", + "go": "ALLER" + }, + "intro": { + "hi": "Salut, {name}!", + "whats-your-name": "Quel est ton nom?" + } +} diff --git a/locales/zh-CN.json b/locales/zh-CN.json new file mode 100644 index 0000000..62d2c2f --- /dev/null +++ b/locales/zh-CN.json @@ -0,0 +1,10 @@ +{ + "button": { + "back": "返回", + "go": "确定" + }, + "intro": { + "hi": "你好，{name}！", + "whats-your-name": "输入你的名字" + } +} diff --git a/package.json b/package.json index 3bd6899..f37b7e0 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "@vueuse/core": "^4.0.0-beta.4", "variantwind": "^0.3.4", "vue": "^3.0.0-rc.1", + "vue-i18n": "^9.0.0-alpha.13", "vue-router": "^4.0.0-beta.6" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7991d60..57570b3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3,6 +3,7 @@ dependencies: '@vueuse/core': 4.0.0-beta.4_vue@3.0.0-rc.5 variantwind: 0.3.4 vue: 3.0.0-rc.5 + vue-i18n: 9.0.0-alpha.13_vue@3.0.0-rc.5 vue-router: 4.0.0-beta.6_vue@3.0.0-rc.5 devDependencies: '@antfu/eslint-config-vue': 0.2.14_eslint@7.6.0+typescript@3.9.7 @@ -3817,10 +3818,20 @@ packages: eslint: '>=5.0.0' resolution: integrity: sha512-Kr21uPfthDc63nDl27AGQEhtt9VrZ9nkYk/NTftJ2ws9XiJwzJJCnCr3AITQ2jpRMA0XPGDECxYH8E027qMK9Q== - /vue-router/4.0.0-beta.6_vue@3.0.0-rc.5: + /vue-i18n/9.0.0-alpha.13_vue@3.0.0-rc.5: dependencies: vue: 3.0.0-rc.5 dev: false + engines: + node: '>= 10' + peerDependencies: + vue: ^3.0.0-rc.5 + resolution: + integrity: sha1-Y1SRXPruZumXOyFmnIvLbPge6rI= + tarball: vue-i18n/download/vue-i18n-9.0.0-alpha.13.tgz + /vue-router/4.0.0-beta.6_vue@3.0.0-rc.5: + dependencies: + vue: 3.0.0-rc.5 peerDependencies: vue: ^3.0.0-beta.20 resolution: @@ -3910,4 +3921,5 @@ specifiers: vite: ^1.0.0-rc.1 vite-plugin-voie: ^0.2.0 vue: ^3.0.0-rc.1 + vue-i18n: ^9.0.0-alpha.13 vue-router: ^4.0.0-beta.6 diff --git a/src/components/Footer.vue b/src/components/Footer.vue index c2cade8..80b8f2e 100644 --- a/src/components/Footer.vue +++ b/src/components/Footer.vue @@ -1,10 +1,7 @@ - diff --git a/src/main.postcss b/src/main.postcss index edb6895..d2ddd64 100755 --- a/src/main.postcss +++ b/src/main.postcss @@ -23,4 +23,12 @@ html, body, #app { .btn[disabled] { @apply cursor-default bg-gray-600 opacity-50; +} + +.icon-btn { + @apply opacity-75 transition duration-200 ease-in-out cursor-pointer inline-block select-none; +} + +.icon-btn:hover { + @apply opacity-100; } \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index f21821a..44b651b 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,10 +1,13 @@ import './main.postcss' import { createApp } from 'vue' import { createRouter, createWebHistory } from 'vue-router' -// @ts-ignore +import { createI18n } from 'vue-i18n' + +// @ts-ignore: this is generated from voie, which TypeScript is not able to infer types correctly import routes from '/@voie/pages' import { registerComponents } from './components' import App from './App.vue' +import { messages } from './messages' const app = createApp(App) const router = createRouter({ @@ -12,6 +15,12 @@ const router = createRouter({ routes, }) +const i18n = createI18n({ + locale: 'en', + messages, +}) + +app.use(i18n) app.use(router) app.use(registerComponents) diff --git a/src/messages.ts b/src/messages.ts new file mode 100644 index 0000000..1c88b5d --- /dev/null +++ b/src/messages.ts @@ -0,0 +1,11 @@ +import en from '../locales/en.json' +import zhCN from '../locales/zh-CN.json' +import fr from '../locales/fr.json' + +export const messages = { + en, + 'zh-CN': zhCN, + fr, +} + +export const locales = Object.keys(messages) diff --git a/src/pages/hi/[name].vue b/src/pages/hi/[name].vue index ce6872d..c0e1d94 100644 --- a/src/pages/hi/[name].vue +++ b/src/pages/hi/[name].vue @@ -5,7 +5,7 @@

- Hi, {{ name }}! + {{ t('intro.hi', {name}) }}

@@ -13,7 +13,7 @@ class="btn m-3 text-sm mt-8" @click="back" > - Back + {{ t('button.back') }}
@@ -21,6 +21,7 @@ diff --git a/src/pages/index.vue b/src/pages/index.vue index f2c3d08..ca6805e 100644 --- a/src/pages/index.vue +++ b/src/pages/index.vue @@ -12,7 +12,7 @@ @@ -23,7 +23,7 @@ :disabled="!name" @click="go" > - GO + {{ t('button.go') }} @@ -32,6 +32,7 @@