feat: create with vue-i18n

.github/workflows/ci.yml

@@ -44,6 +44,7 @@ jobs:
         flag-for-router: ['', '--router']
         flag-for-pinia: ['', '--pinia']
         flag-for-vitest: ['', '--vitest']
+        flag-for-i18n: ['', '--vue-i18n']
 
         # It's quite costly to install Cypress & Playwright even with cache.
         # Maybe we can split them into another job so that all the projects
@@ -68,6 +69,7 @@ jobs:
             flag-for-e2e: '--cypress'
             flag-for-eslint: '--eslint'
             flag-for-devtools: '--devtools'
+            flag-for-i18n: '--vue-i18n'
 
           - node-version: 18
             os: macos-latest
@@ -79,6 +81,7 @@ jobs:
             flag-for-e2e: '--cypress'
             flag-for-eslint: '--eslint'
             flag-for-devtools: '--devtools'
+            flag-for-i18n: '--vue-i18n'
 
           - node-version: 20
             os: ubuntu-latest
@@ -90,6 +93,7 @@ jobs:
             flag-for-e2e: '--cypress'
             flag-for-eslint: '--eslint'
             flag-for-devtools: '--devtools'
+            flag-for-i18n: '--vue-i18n'
 
           - node-version: 22
             os: ubuntu-latest
@@ -101,10 +105,11 @@ jobs:
             flag-for-e2e: '--cypress'
             flag-for-eslint: '--eslint'
             flag-for-devtools: '--devtools'
+            flag-for-i18n: '--vue-i18n'
     runs-on: ${{ matrix.os }}
     continue-on-error: ${{ matrix.os == 'windows-latest' }}
     env:
-      FEATURE_FLAGS: ${{ matrix.flag-for-ts }} ${{ matrix.flag-for-jsx }} ${{ matrix.flag-for-router }} ${{ matrix.flag-for-pinia }} ${{ matrix.flag-for-vitest }} ${{ matrix.flag-for-e2e }} ${{matrix.flag-for-eslint}} ${{matrix.flag-for-devtools}}
+      FEATURE_FLAGS: ${{ matrix.flag-for-ts }} ${{ matrix.flag-for-jsx }} ${{ matrix.flag-for-router }} ${{ matrix.flag-for-pinia }} ${{ matrix.flag-for-vitest }} ${{ matrix.flag-for-e2e }} ${{matrix.flag-for-eslint}} ${{matrix.flag-for-devtools}} ${{ matrix.flag-for-i18n }}
       # Sometimes the Linux runner can't verify Cypress in 30s
       CYPRESS_VERIFY_TIMEOUT: 60000
     steps:

__test__/sortDependencies.spec.ts

@@ -20,7 +20,8 @@ describe('sortDependencies', () => {
         '@vitejs/plugin-vue': '^4.4.0',
         'eslint-plugin-cypress': '^2.15.1',
         'eslint-plugin-vue': '^9.17.0',
-        vitest: '^0.34.6'
+        vitest: '^0.34.6',
+        'vue-i18n': '^9.13.1'
       }
     }
     expect(sortDependencies(packageJson)).toStrictEqual({
@@ -40,7 +41,8 @@ describe('sortDependencies', () => {
         jsdom: '^22.1.0',
         'start-server-and-test': '^2.0.1',
         vite: '^4.4.11',
-        vitest: '^0.34.6'
+        vitest: '^0.34.6',
+        'vue-i18n': '^9.13.1'
       }
     })
   })

index.ts

@@ -97,7 +97,9 @@ async function init() {
     'vue-router': { type: 'boolean' },
     router: { type: 'boolean' },
     'vue-devtools': { type: 'boolean' },
-    devtools: { type: 'boolean' }
+    devtools: { type: 'boolean' },
+    'vue-i18n': { type: 'boolean' },
+    i18n: { type: 'boolean' }
   } as const
 
   const { values: argv, positionals } = parseArgs({
@@ -121,7 +123,9 @@ async function init() {
       argv.playwright ??
       argv.eslint ??
       argv['eslint-with-prettier'] ??
-      (argv.devtools || argv['vue-devtools'])
+      (argv.devtools || argv['vue-devtools']) ??
+      argv['vue-i18n'] ??
+      argv.i18n
     ) === 'boolean'
 
   let targetDir = positionals[0]
@@ -144,6 +148,7 @@ async function init() {
     needsEslint?: boolean
     needsPrettier?: boolean
     needsDevTools?: boolean
+    needsVueI18n?: boolean
   } = {}
 
   try {
@@ -300,6 +305,14 @@ async function init() {
           initial: false,
           active: language.defaultToggleOptions.active,
           inactive: language.defaultToggleOptions.inactive
+        },
+        {
+          name: 'needsVueI18n',
+          type: () => (isFeatureFlagsUsed ? null : 'toggle'),
+          message: language.needsVueI18n.message,
+          initial: false,
+          active: language.defaultToggleOptions.active,
+          inactive: language.defaultToggleOptions.inactive
         }
       ],
       {
@@ -326,7 +339,8 @@ async function init() {
     needsVitest = argv.vitest || argv.tests,
     needsEslint = argv.eslint || argv['eslint-with-prettier'],
     needsPrettier = argv['eslint-with-prettier'],
-    needsDevTools = argv.devtools || argv['vue-devtools']
+    needsDevTools = argv.devtools || argv['vue-devtools'],
+    needsVueI18n = argv['vue-i18n'] || argv.i18n
   } = result
 
   const { needsE2eTesting } = result
@@ -475,6 +489,10 @@ async function init() {
   if (needsDevTools) {
     render('config/devtools')
   }
+
+  if (needsVueI18n) {
+    render('config/vue-i18n')
+  }
   // Render code template.
   // prettier-ignore
   const codeTemplate =
@@ -489,6 +507,8 @@ async function init() {
     render('entry/pinia')
   } else if (needsRouter) {
     render('entry/router')
+  } else if (needsVueI18n) {
+    render('entry/i18n')
   } else {
     render('entry/default')
   }
@@ -521,7 +541,7 @@ async function init() {
   // We try to share as many files between TypeScript and JavaScript as possible.
   // If that's not possible, we put `.ts` version alongside the `.js` one in the templates.
   // So after all the templates are rendered, we need to clean up the redundant files.
-  // (Currently it's only `cypress/plugin/index.ts`, but we might add more in the future.)
+  // (Currently it's only `cypress/plugin/index.js`, but we might add more in the future.)
   // (Or, we might completely get rid of the plugins folder as Cypress 10 supports `cypress.config.ts`)
 
   if (needsTypeScript) {

locales/en-US.json

@@ -53,6 +53,9 @@
   "needsDevTools": {
     "message": "Add Vue DevTools 7 extension for debugging? (experimental)"
   },
+  "needsVueI18n": {
+    "message": "Add Vue I18n for internationalization?"
+  },
   "errors": {
     "operationCancelled": "Operation cancelled"
   },

locales/fr-FR.json

@@ -53,6 +53,9 @@
   "needsDevTools": {
     "message": "Ajouter l'extension Vue DevTools 7 pour le débogage\u00a0? (expérimental)"
   },
+  "needsVueI18n": {
+    "message": "Ajouter Vue I18n pour l'internationalisation\u00a0?"
+  },
   "errors": {
     "operationCancelled": "Operation annulée"
   },

locales/tr-TR.json

@@ -53,6 +53,9 @@
   "needsDevTools": {
     "message": "Hata ayıklama için Vue DevTools 7 eklentisi eklensin mi? (deneysel)"
   },
+  "needsVueI18n": {
+    "message": "Uluslararasılaştırma için Vue I18n eklensin mi?"
+  },
   "errors": {
     "operationCancelled": "İşlem iptal edildi"
   },

locales/zh-Hans.json

@@ -53,6 +53,9 @@
   "needsDevTools": {
     "message": "是否引入 Vue DevTools 7 扩展用于调试? (试验阶段)"
   },
+  "needsVueI18n": {
+    "message": "是否引入 Vue I18n 用于国际化？"
+  },
   "errors": {
     "operationCancelled": "操作取消"
   },

locales/zh-Hant.json

@@ -57,6 +57,9 @@
   "needsDevTools": {
     "message": "是否引入 Vue DevTools 7 擴充元件以協助偵錯？（試驗性功能）"
   },
+  "needsVueI18n": {
+    "message": "是否引入 Vue I18n 用於國際化？"
+  },
   "errors": {
     "operationCancelled": "操作取消"
   },

package.json

@@ -52,7 +52,8 @@
     "prettier": "^3.3.3",
     "prompts": "^2.4.2",
     "vitest": "^2.0.5",
-    "zx": "^8.1.4"
+    "zx": "^8.1.4",
+    "vue-i18n": "^9.13.1"
   },
   "lint-staged": {
     "*.{js,ts,vue,json}": [