feat: don't require to use vue-i18n

.gitignore

@@ -26,3 +26,4 @@ pnpm-debug.log*
 
 # vitepress
 public
+docs/.vitepress/cache

docs/.vitepress/theme/index.ts

-import { createI18n } from 'vue-i18n'
-
 import DefaultTheme from 'vitepress/theme'
-import en from '~/locales/en.yaml'
 import Funkwhale from '~/main'
 
 export default {
   ...DefaultTheme,
   enhanceApp({ app }) {
-    const i18n = createI18n({
-      legacy: false,
-      locale: 'en',
-      fallbackLocale: 'en',
-      messages: { en }
-    })
-
     app.use(Funkwhale)
-    app.use(i18n)
   }
 }

src/composables/useI18n.ts

+import type { I18n } from "vue-i18n"
+
+import { isRef, watch, type Ref } from "vue"
+
+import en from '~/locales/en.yaml'
+
+let i18nInstance: I18n
+const provideI18n = (i18n: I18n) => {
+  if (!isRef(i18n.global.locale) || i18n.mode !== 'composition') {
+    console.warn('[vui] locales won\'t be updated when provided i18n instance is in legacy mode')
+    i18nInstance = i18n
+    return
+  }
+
+  const globalMessages = i18n.global.messages as Ref<Record<string, typeof en>>
+  watch(i18n.global.locale, async (locale, from) => {
+    globalMessages.value[locale] ??= {}
+    if ('vui' in globalMessages.value[locale]) return
+
+    try {
+      const { default: messages } = await import(`~/locales/${locale}.yaml`)
+      globalMessages.value[locale] = { ...globalMessages.value[locale], ...messages }
+    } catch (err) {
+      console.warn(`[vui] Locale '${locale}' not found`)
+    }
+  }, { immediate: true })
+
+  i18nInstance = i18n
+}
+
+const useI18nInstance = () => {
+  return i18nInstance
+}
+
+export { provideI18n, useI18nInstance }

src/main.ts

+import { createI18n, type I18n } from 'vue-i18n'
 import type { App } from 'vue'
 
 import '~/styles/funkwhale.scss'
 
 import * as components from '~/components'
+import { provideI18n } from './composables/useI18n'
+import en from '~/locales/en.yaml'
+
 export * from '~/components'
 
+interface VuiOptions {
+  i18n?: I18n
+}
+
 export default {
-  install (app: App) {
+  install (app: App, options: VuiOptions = {}) {
+    if (!options.i18n) {
+      options.i18n = createI18n({
+        legacy: false,
+        locale: 'en',
+        fallbackLocale: 'en',
+        messages: { en }
+      })
+
+      app.use(options.i18n)
+    }
+
+    provideI18n(options.i18n)
+
     for (const prop in components) {
       const component = components[prop as keyof typeof components]
       app.component(prop, component)

vite.config.ts

 import { defineConfig } from 'vite'
 import { resolve } from 'path'
 
+import yaml from '@modyfi/vite-plugin-yaml'
 import vue from '@vitejs/plugin-vue'
 import dts from 'vite-plugin-dts'
 
@@ -8,6 +9,7 @@ import dts from 'vite-plugin-dts'
 export default defineConfig(() => ({
   plugins: [
     vue(),
+    yaml(),
     dts({
       insertTypesEntry: true,
       outputDir: resolve(__dirname, 'dist/types')