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>

README.md

@@ -29,7 +29,7 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
 
 - 😃 [Use icons from any icon sets, with no compromise](./src/components)
 
-- 🌍 [i18n ready](./locales)
+- 🌍 [I18n ready](./locales)
 
 - 🗒 [Markdown Support](https://github.com/antfu/vite-plugin-md)
 
@@ -63,7 +63,8 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
 - [vite-plugin-pwa](https://github.com/antfu/vite-plugin-pwa) - PWA
 - [vite-plugin-md](https://github.com/antfu/vite-plugin-md) - Markdown as components / components in Markdown
   - [markdown-it-prism](https://github.com/jGleitz/markdown-it-prism) - [Prism](https://prismjs.com/) for syntax highlighting
-- [vue-i18n](https://github.com/intlify/vue-i18n-next) - internationalization
+- [Vue I18n](https://github.com/intlify/vue-i18n-next) - Internationalization
+  - [vite-plugin-vue-i18n](https://github.com/intlify/vite-plugin-vue-i18n) - Vite plugin for Vue I18n
 - [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs
 
 ### Coding Style

locales/ja.json

@@ -0,0 +1,17 @@
+{
+  "button": {
+    "about": "これは？",
+    "back": "戻る",
+    "go": "進む",
+    "home": "ホーム",
+    "toggle_dark": "ダークモード切り替え",
+    "toggle_langs": "言語切り替え"
+  },
+  "intro": {
+    "desc": "固執された Vite スターターテンプレート",
+    "dynamic-route": "動的ルートのデモ",
+    "hi": "こんにちは、{name}！",
+    "whats-your-name": "あなたの名前は？"
+  },
+  "not-found": "見つかりませんでした"
+}

package.json

@@ -14,6 +14,7 @@
   "devDependencies": {
     "@antfu/eslint-config-vue": "^0.4.3",
     "@iconify/json": "^1.1.283",
+    "@intlify/vite-plugin-vue-i18n": "^1.0.0-beta.11",
     "@tailwindcss/typography": "^0.3.1",
     "@types/nprogress": "^0.2.0",
     "@typescript-eslint/eslint-plugin": "^4.12.0",

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)

vite.config.ts

@@ -7,6 +7,7 @@ import ViteComponents from 'vite-plugin-components'
 import Markdown from 'vite-plugin-md'
 import Prism from 'markdown-it-prism'
 import { VitePWA } from 'vite-plugin-pwa'
+import VueI18n from '@intlify/vite-plugin-vue-i18n'
 
 const config: UserConfig = {
   alias: {
@@ -80,6 +81,11 @@ const config: UserConfig = {
         ],
       },
     }),
+
+    // https://github.com/intlify/vite-plugin-vue-i18n
+    VueI18n({
+      include: [path.resolve(__dirname, 'locales/**')]
+    })
   ],
 }