feat: add vite-plugin-vue-i18n and some updates (#31)

* feat: add vite-plugin-vue-i18n

* feat: add ja locale messages

* refactor: tweak word

* chore: omit yarn.lock

* refactor: move resource importing to i18n.ts

* Restore pnpm-lock.yaml

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

src/components/Footer.vue

@@ -25,13 +25,13 @@
 
 <script setup lang='ts'>
 import { useI18n } from 'vue-i18n'
-import { locales } from '/~/messages'
 import { isDark } from '/~/logics'
 
 const i18n = useI18n()
 
 const toggleLocales = () => {
   // change to some real logic
+  const locales = i18n.availableLocales
   i18n.locale.value = locales[(locales.indexOf(i18n.locale.value) + 1) % locales.length]
 }
 

src/messages.ts

@@ -1,15 +0,0 @@
-import en from '../locales/en.json'
-import zhCN from '../locales/zh-CN.json'
-import fr from '../locales/fr.json'
-import es from '../locales/es.json'
-import vi from '../locales/vi.json'
-
-export const messages = {
-  en,
-  'zh-CN': zhCN,
-  fr,
-  es,
-  vi,
-}
-
-export const locales = Object.keys(messages)

src/pages/about.md

@@ -5,7 +5,7 @@
 
 ### About
 
-[Vitesse](https://github.com/antfu/vitesse) is an opinionated [Vite](https://github.com/vitejs/vite) starter template made by [@antfu](https://github.com/antfu) for mocking apps swiftly. It has **file-based routing**, **components auto importing**, **markdown support**, i18n, PWA and uses **Tailwind** v2 for UI.
+[Vitesse](https://github.com/antfu/vitesse) is an opinionated [Vite](https://github.com/vitejs/vite) starter template made by [@antfu](https://github.com/antfu) for mocking apps swiftly. It has **file-based routing**, **components auto importing**, **markdown support**, I18n, PWA and uses **Tailwind** v2 for UI.
 
 ```js
 // syntax highlighting example

src/plugins/i18n.ts

@@ -1,11 +1,26 @@
 import { App } from 'vue'
 import { createI18n } from 'vue-i18n'
-import { messages } from '../messages'
+
+// import i18n resources
+import en from '../../locales/en.json'
+import zhCN from '../../locales/zh-CN.json'
+import fr from '../../locales/fr.json'
+import es from '../../locales/es.json'
+import vi from '../../locales/vi.json'
+import ja from '../../locales/ja.json'
+
 
 export default (app: App) => {
   const i18n = createI18n({
     locale: 'en',
-    messages,
+    messages: {
+      en,
+      'zh-CN': zhCN,
+      fr,
+      es,
+      vi,
+      ja
+    }
   })
 
   app.use(i18n)