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') }}