feat: create with vue-i18n

Author: Procrustes5

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
@@ -474,6 +488,10 @@ async function init() {
   if (needsDevTools) {
     render('config/devtools')
   }
+
+  if (needsVueI18n) {
+    render('config/vue-i18n')
+  }
   // Render code template.
   // prettier-ignore
   const codeTemplate =
@@ -488,6 +506,8 @@ async function init() {
     render('entry/pinia')
   } else if (needsRouter) {
     render('entry/router')
+  } else if (needsVueI18n) {
+    render('entry/i18n')
   } else {
     render('entry/default')
   }
@@ -520,7 +540,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": "操作取消"
   },

template/config/vue-i18n/package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "vue": "^3.4.34",
+    "vue-i18n": "^9.2.2"
+  }
+}

template/config/vue-i18n/src/i18n/en.json

@@ -0,0 +1,15 @@
+import { createI18n } from 'vue-i18n'
+
+const messages = {
+  en: {
+    // English Transtlations
+  }
+}
+
+export default createI18n({
+  legacy: false,
+  globalInjection: true,
+  locale: 'en',
+  fallbackLocale: 'en',
+  messages
+})

template/config/vue-i18n/src/i18n/index.js

@@ -0,0 +1,7 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import i18n from './main.js'
+
+const app = createApp(App)
+app.use(i18n)
+app.mount('#app')