feat: add vue-i18n

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,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)
 

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,7 +5,7 @@
       <Icon class="iconify inline-block" icon="carbon:pedestrian" />
     </p>
     <p>
-      Hi, {{ name }}!
+      {{ t('intro.hi', {name}) }}
     </p>
 
     <div>
@@ -13,7 +13,7 @@
         class="btn m-3 text-sm mt-8"
         @click="back"
       >
-        Back
+        {{ t('button.back') }}
       </button>
     </div>
   </div>
@@ -21,6 +21,7 @@
 
 <script setup='props' lang='ts'>
 import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 
 declare const props: {
   name: string
@@ -28,4 +29,7 @@ declare const props: {
 
 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>