feat: Add i18n module for translations (#41)

Author: zoey-kaiser

src/configs/i18n.ts

@@ -0,0 +1,84 @@
+import { generateModuleHTMLComponent, generateModuleHTMLSnippet } from '../generators/generateModuleComponents'
+import type { ModuleConfig } from '../types'
+
+const localeDetector = `// Detect language to enable server side translations https://i18n.nuxtjs.org/docs/guide/server-side-translations
+export default defineI18nLocaleDetector((event, config) => {
+  // try to get locale from query
+  const query = tryQueryLocale(event, { lang: '' })
+  if (query) {
+    return query.toString()
+  }
+
+  // try to get locale from cookie
+  const cookie = tryCookieLocale(event, { lang: '', name: 'i18n_locale' })
+  if (cookie) {
+    return cookie.toString()
+  }
+
+  // try to get locale from header accept-header
+  const header = tryHeaderLocale(event, { lang: '' })
+  if (header) {
+    return header.toString()
+  }
+
+  // fallback to default locale
+  return config.defaultLocale
+})`
+
+const englishLocaleFile = `{
+    "title": "Nuxt i18n",
+    "description": "I18n (Internationalization) module for your Nuxt project powered by Vue I18n."
+}
+`
+
+const i18nDemoComponent = `<template>
+  ${generateModuleHTMLComponent(
+    `{{ $t('title') }}`,
+    `{{ $t('description') }}`,
+    'https://i18n.nuxtjs.org/',
+    '',
+    '',
+  ).html}
+</template>
+`
+
+const i18n: ModuleConfig = {
+  humanReadableName: 'i18n',
+  description: 'I18n (Internationalization) module for your Nuxt project powered by Vue I18n. See more: https://i18n.nuxtjs.org/',
+  scripts: [],
+  dependencies: [{
+    name: '@nuxtjs/i18n',
+    version: '^8.3.1',
+    isDev: true
+  }],
+  nuxtConfig: {
+    modules: ['@nuxtjs/i18n'],
+    // @ts-expect-error i18n is not set in default Nuxt Config, as the package is not installed
+    i18n: {
+      strategy: 'prefix_except_default',
+      lazy: true,
+      langDir: 'locales',
+      defaultLocale: 'en',
+      locales: [
+        { name: 'English', code: 'en', file: 'en.json' },
+      ],
+      experimental: {
+        localeDetector: './localeDetector.ts'
+      }
+    }
+  },
+  files: [{
+    path: 'localeDetector.ts',
+    content: localeDetector
+  }, {
+    path: 'locales/en.json',
+    content: englishLocaleFile
+  }, {
+    path: 'components/Welcome/I18nDemo.vue',
+    content: i18nDemoComponent
+  }],
+  tasksPostInstall: [],
+  indexVue: generateModuleHTMLSnippet('WelcomeI18nDemo'),
+}
+
+export default i18n

src/configs/index.ts

@@ -10,14 +10,16 @@ import typescript from './typescript'
 import pnpm from './pnpm'
 import vscode from './vscode'
 import droneCI from './droneCI'
+import i18n from './i18n'
 
-export type Modules = 'prisma' | 'sidebase-auth' | 'trpc' | 'tailwind' | 'naiveui'
+export type Modules = 'prisma' | 'sidebase-auth' | 'trpc' | 'tailwind' | 'naiveui' | 'i18n'
 export const modules: Record<Modules, ModuleConfig> = {
   'tailwind': tailwind,
   'naiveui': naiveui,
   'prisma': prisma,
   'trpc': trpc,
-  'sidebase-auth': sidebaseAuth
+  'sidebase-auth': sidebaseAuth,
+  'i18n': i18n
 }
 
 export type Configs = 'eslint' | 'github-actions' | 'typescript' | 'pnpm' | 'vscode' | 'droneCI'

src/steps/4.buildNuxtConfig.ts

@@ -28,7 +28,7 @@ export default async function (templateDir: string, configs: Config[], modules:
     nuxtConfig = defu(nuxtConfig, nuxtConfigExtension)
   }
   const nuxtConfigFile = `// https://nuxt.com/docs/api/configuration/nuxt-config
-export default defineNuxtConfig(${inspect(nuxtConfig, { compact: false })})
+export default defineNuxtConfig(${inspect(nuxtConfig, { compact: false, depth: 3 })})
 `
   await writeFile(resolver('nuxt.config.ts'), nuxtConfigFile)
 }