feat: add vue-i18n and Vue Macros

.fes.js

@@ -1,12 +1,14 @@
 import path from 'node:path'
 
+import VueI18n from '@intlify/unplugin-vue-i18n/vite'
 import Unocss from '@unocss/vite'
 import AutoImport from 'unplugin-auto-import/vite'
 import ElementPlus from 'unplugin-element-plus/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 import Components from 'unplugin-vue-components/vite'
+import VueMacros from 'unplugin-vue-macros/vite'
+// import VueDevTools from 'vite-plugin-vue-devtools'
 import Inspect from 'vite-plugin-inspect'
-import Preview from 'vite-plugin-vue-component-preview'
 import Inspector from 'vite-plugin-vue-inspector'
 
 // .fes.js 只负责管理编译时配置，只能使用plain Object
@@ -42,7 +44,7 @@ export default {
       // port: 8000,
     },
     plugins: [
-      Preview(),
+      VueMacros(),
 
       // https://github.com/antfu/unplugin-auto-import
       AutoImport({
@@ -59,6 +61,8 @@ export default {
         // auto import Element Plus functions
         resolvers: [ElementPlusResolver()],
         dts: 'src/types/auto-imports.d.ts',
+        dirs: ['src/composables', 'src/stores'],
+        vueTemplate: true,
       }),
 
       // https://github.com/antfu/unplugin-vue-components
@@ -79,9 +83,17 @@ export default {
       ElementPlus(),
 
       // https://github.com/unocss/unocss
-      // see unocss.config.ts for config
+      // see uno.config.ts for config
       Unocss(),
 
+      // https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n
+      VueI18n({
+        runtimeOnly: true,
+        compositionOnly: true,
+        fullInstall: true,
+        include: [path.resolve(__dirname, 'locales/**')],
+      }),
+
       // https://github.com/antfu/vite-plugin-inspect
       // Visit http://localhost:3333/__inspect/ to see the inspector
       Inspect(),
@@ -91,6 +103,8 @@ export default {
         toggleButtonVisibility: 'never',
         toggleComboKey: 'control-alt-i',
       }),
+
+      // VueDevTools(),
     ],
   },
 }

README.md

@@ -14,7 +14,7 @@ Checkout the [`single-page` branch](https://github.com/daotl/fes-starter/tree/si
 - 🤙🏻 [Reactivity Transform](https://vuejs.org/guide/extras/reactivity-transform.html) enabled
 - 📥 [APIs auto importing](https://github.com/antfu/unplugin-auto-import) - use Composition API and others directly
 - 📦 [Components auto importing](./src/components)
-- 🔎 [Component Preview](https://github.com/johnsoncodehk/vite-plugin-vue-component-preview) and [jump to code](https://github.com/webfansplz/vite-plugin-vue-inspector)
+- 🔎 [Jump to component code](https://github.com/webfansplz/vite-plugin-vue-inspector)
 - 🍍 [Pinia](https://pinia.vuejs.org/) - state management
 - 🖌️ [SASS](https://sass-lang.com/) with [SCSS](https://sass-lang.com/documentation/syntax#scss) syntax for styling
 - 🧰 [Element Plus](https://element-plus.org/) - component library

locales/README.md

@@ -0,0 +1,7 @@
+## i18n
+
+This directory is to serve your locale translation files. YAML under this folder would be loaded automatically and register with their filenames as locale code.
+
+Check out [`vue-i18n`](https://github.com/intlify/vue-i18n-next) for more details.
+
+If you are using VS Code, [`i18n Ally`](https://github.com/lokalise/i18n-ally) is recommended to make the i18n experience better.

locales/en.yml

@@ -0,0 +1 @@
+title: Fes.js Starter Template

locales/zh-CN.yml

@@ -0,0 +1 @@
+title: Fes.js 项目模板

package.json

@@ -52,6 +52,7 @@
     "pinia": "^2.1.7",
     "prism-theme-vars": "^0.2.4",
     "vue": "^3.3.6",
+    "vue-i18n": "^9.5.0",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
@@ -61,8 +62,11 @@
     "@daotl/tsconfig": "^0.1.2",
     "@fesjs/builder-vite": "^3.0.3",
     "@iconify-json/mdi": "^1.1.54",
+    "@intlify/unplugin-vue-i18n": "^1.4.0",
     "@types/node": "^20.8.8",
     "@unocss/eslint-plugin": "^0.57.0",
+    "@vitejs/plugin-vue": "^4.4.0",
+    "@vue-macros/volar": "^0.17.0",
     "core-js": "^3.33.1",
     "cross-env": "^7.0.3",
     "dotenv-cli": "^7.3.0",
@@ -83,9 +87,10 @@
     "unplugin-auto-import": "^0.16.6",
     "unplugin-element-plus": "^0.8.0",
     "unplugin-vue-components": "^0.25.2",
+    "unplugin-vue-macros": "^2.6.1",
     "vite": "^4.5.0",
     "vite-plugin-inspect": "^0.7.40",
-    "vite-plugin-vue-component-preview": "^1.1.6",
+    "vite-plugin-vue-devtools": "1.0.0-rc.5",
     "vite-plugin-vue-inspector": "^4.0.0"
   }
 }