simplify usage

Author: larbish

src/app/src/composables/useStudio.ts

@@ -40,6 +40,8 @@ export const useStudio = createSharedComposable(() => {
   const mediaTree = useTree(StudioFeature.Media, host, draftMedias)
   const context = useContext(host, git, documentTree, mediaTree)
 
+  ui.setLocale(host.meta.defaultLocale)
+
   host.on.mounted(async () => {
     if (devMode.value) {
       initDevelopmentMode()

src/app/src/composables/useUI.ts

@@ -1,5 +1,5 @@
 import { createSharedComposable } from '@vueuse/core'
-import { ref, watch } from 'vue'
+import { getCurrentInstance, ref, watch } from 'vue'
 import type { StudioHost } from '../types'
 import { useSidebar } from './useSidebar'
 
@@ -21,6 +21,17 @@ export const useUI = createSharedComposable((host: StudioHost) => {
     }
   })
 
+  function setLocale(locale: string) {
+    const currentVueInstance = getCurrentInstance()
+    if (currentVueInstance) {
+      import(`../locales/${locale}.json`).then((locales) => {
+        const i18n = currentVueInstance.appContext.provides.i18n.global
+        i18n.locale.value = locale
+        i18n.setLocaleMessage(locale, locales.default)
+      })
+    }
+  }
+
   return {
     colorMode,
     sidebar,
@@ -30,5 +41,6 @@ export const useUI = createSharedComposable((host: StudioHost) => {
     },
     toggle: () => isOpen.value = !isOpen.value,
     close: () => isOpen.value = false,
+    setLocale,
   }
 })

src/app/src/i18n.ts

@@ -6,7 +6,7 @@ import styles from './assets/css/main.css?inline'
 import { createHead } from '@unhead/vue/client'
 import { generateColors, tailwindColors } from './utils/colors'
 import { refineTailwindStyles } from './utils/styles.ts'
-import { createStudioI18n } from './i18n'
+import { createI18n } from 'vue-i18n'
 import App from './app.vue'
 import Content from './pages/content.vue'
 import Media from './pages/media.vue'
@@ -54,8 +54,14 @@ if (typeof window !== 'undefined' && 'customElements' in window) {
 
         app.use(router)
 
-        // @ts-expect-error - Global variable defined in plugin
-        const i18n = createStudioI18n(window.__NUXT_STUDIO_DEFAULT_LOCALE__, window.__NUXT_STUDIO_I18N_MESSAGES__)
+        const i18n = createI18n({
+          legacy: false,
+          locale: 'en',
+          fallbackLocale: 'en',
+          globalInjection: true,
+        })
+
+        app.provide('i18n', i18n)
 
         app.use(i18n)
 

src/module/src/locales/en.json renamed to src/app/src/locales/en.json

@@ -21,6 +21,7 @@ export interface StudioHost {
   meta: {
     dev: boolean
     components: () => ComponentMeta[]
+    defaultLocale: string
   }
   on: {
     routeChange: (fn: (to: RouteLocationNormalized, from: RouteLocationNormalized) => void) => void

src/module/src/locales/fr.json renamed to src/app/src/locales/fr.json

@@ -7,7 +7,6 @@ import { createStorage } from 'unstorage'
 import { getAssetsStorageDevTemplate, getAssetsStorageTemplate } from './templates'
 import { version } from '../../../package.json'
 import { setupDevMode } from './dev'
-import { setupI18n } from './i18n'
 
 interface ModuleOptions {
   /**
@@ -91,11 +90,6 @@ interface ModuleOptions {
      * @default 'en'
      */
     defaultLocale?: string
-    /**
-     * Directly override or add translations.
-     * @default {}
-     */
-    translations?: Record<string, unknown>
   }
 }
 
@@ -126,7 +120,6 @@ export default defineNuxtModule<ModuleOptions>({
     },
     i18n: {
       defaultLocale: 'en',
-      translations: {},
     },
   },
   async setup(options, nuxt) {
@@ -158,6 +151,8 @@ export default defineNuxtModule<ModuleOptions>({
       },
       // @ts-expect-error Autogenerated type does not match with options
       repository: options.repository,
+      // @ts-expect-error Autogenerated type does not match with options
+      i18n: options.i18n,
     }
 
     nuxt.options.runtimeConfig.studio = {
@@ -212,8 +207,6 @@ export default defineNuxtModule<ModuleOptions>({
         : getAssetsStorageTemplate(assetsStorage, nuxt),
     })
 
-    await setupI18n(nuxt, options.i18n!)
-
     if (options.dev) {
       setupDevMode(nuxt, runtime, assetsStorage)
     }

src/app/src/main.ts

@@ -8,7 +8,7 @@ import { kebabCase } from 'scule'
 import type { StudioHost, StudioUser, DatabaseItem, MediaItem, Repository } from 'nuxt-studio/app'
 import type { RouteLocationNormalized, Router } from 'vue-router'
 // @ts-expect-error queryCollection is not defined in .nuxt/imports.d.ts
-import { clearError, getAppManifest, queryCollection, queryCollectionItemSurroundings, queryCollectionNavigation, queryCollectionSearchSections } from '#imports'
+import { clearError, getAppManifest, queryCollection, queryCollectionItemSurroundings, queryCollectionNavigation, queryCollectionSearchSections, useRuntimeConfig } from '#imports'
 import { collections } from '#content/preview'
 import { publicAssetsStorage } from '#build/studio-public-assets'
 import { useHostMeta } from './composables/useMeta'
@@ -107,6 +107,7 @@ export function useStudioHost(user: StudioUser, repository: Repository): StudioH
     meta: {
       dev: false,
       components: () => meta.componentsMeta.value,
+      defaultLocale: useRuntimeConfig().public.studio.i18n?.defaultLocale || 'en',
     },
     on: {
       routeChange: (fn: (to: RouteLocationNormalized, from: RouteLocationNormalized) => void) => {