feat: add vue-i18n

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "octref.vetur",
+    "antfu.i18n-ally",
+    "dbaeumer.vscode-eslint",
+    "bradlc.vscode-tailwindcss"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "i18n-ally.localesPaths": "locales",
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.sortKeys": true,
+
+  "vetur.experimental.templateInterpolationService": true
+}

README.md

@@ -11,7 +11,7 @@
 <br>
 
 <p align='center'>
-<a href="https://vitesse.netilfy.app">Live Example</a>
+<a href="https://vitesse.netilfy.app">Live Demo</a>
 </p>
 
 <br>
@@ -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.

locales/en.json

@@ -0,0 +1,10 @@
+{
+  "intro": {
+    "whats-your-name": "What's your name?",
+    "hi": "Hi, {name}!"
+  },
+  "button": {
+    "go": "GO",
+    "back": "Back"
+  }
+}

locales/fr.json

@@ -0,0 +1,10 @@
+{
+  "button": {
+    "back": "Arrière",
+    "go": "ALLER"
+  },
+  "intro": {
+    "hi": "Salut, {name}!",
+    "whats-your-name": "Quel est ton nom?"
+  }
+}

locales/zh-CN.json

@@ -0,0 +1,10 @@
+{
+  "button": {
+    "back": "返回",
+    "go": "确定"
+  },
+  "intro": {
+    "hi": "你好，{name}！",
+    "whats-your-name": "输入你的名字"
+  }
+}

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": {

src/components/Footer.vue

@@ -1,10 +1,7 @@
-
 <template>
-  <div
-    class="text-xl mt-4"
-  >
+  <div class="text-xl mt-6">
     <div
-      class="inline-block mx-2 cursor-pointer select-none"
+      class="icon-btn mx-2"
       @click="isDark = !isDark"
     >
       <Icon
@@ -14,7 +11,7 @@
     </div>
 
     <a
-      class="mx-2"
+      class="icon-btn mx-2"
       href="https://github.com/antfu/vitesse"
       target="_blank"
     >
@@ -23,9 +20,28 @@
         icon="carbon:code"
       />
     </a>
+
+    <div
+      class="icon-btn mx-2"
+      @click="toggleLocales"
+    >
+      <Icon
+        class="inline-block"
+        icon="carbon:globe"
+      />
+    </div>
   </div>
 </template>
 
 <script setup lang='ts'>
+import { useI18n } from 'vue-i18n'
+import { locales } from '../messages'
 export { isDark } from '../utils/dark'
+
+const i18n = useI18n()
+
+export const toggleLocales = () => {
+  // change to some real logic
+  i18n.locale.value = locales[(locales.indexOf(i18n.locale.value) + 1) % locales.length]
+}
 </script>

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;
 }

src/main.ts

@@ -1,17 +1,26 @@
 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({
   history: createWebHistory(),
   routes,
 })
 
+const i18n = createI18n({
+  locale: 'en',
+  messages,
+})
+
+app.use(i18n)
 app.use(router)
 app.use(registerComponents)
 

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)

src/pages/hi/[name].vue

@@ -5,27 +5,31 @@
       <Icon class="iconify inline-block" icon="carbon:pedestrian" />
     </p>
     <p>
-      Hi, {{ name }}!
+      {{ t('intro.hi', {name}) }}
     </p>
 
     <div>
       <button
         class="btn m-3 text-sm mt-8"
         @click="back"
       >
-        Back
+        {{ t('button.back') }}
       </button>
     </div>
   </div>
 </template>
 
 <script setup='props' lang='ts'>
 import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 
 declare const props: {
   name: string
 }
 
 const router = useRouter()
 export const back = () => router.push('/')
+
+const { t } = useI18n()
+export { t }
 </script>

src/pages/index.vue

@@ -12,7 +12,7 @@
 
     <input
       v-model="name"
-      placeholder="What's your name?"
+      :placeholder="t('intro.whats-your-name')"
       class="px-4 py-2 border border-gray-200 rounded text-center outline-none active:outline-none bg-transparent dark:border-gray-700"
       @keydown.enter="go"
     >
@@ -23,7 +23,7 @@
         :disabled="!name"
         @click="go"
       >
-        GO
+        {{ t('button.go') }}
       </button>
     </div>
   </div>
@@ -32,6 +32,7 @@
 <script setup='props' lang='ts'>
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 
 export const name = ref('')
 
@@ -40,4 +41,7 @@ export const go = () => {
   if (name.value)
     router.push(`/hi/${name.value}`)
 }
+
+const { t } = useI18n()
+export { t }
 </script>