devex: migrate to vue-i18n (#4966)

* sample languages refactor

* feat: consistency + dedupe impl of i18n

* fix: broken imports

* fix: intl formatted component

* fix: use relative imports

* fix: imports

* fix: comment out incomplete locales + fix imports

* feat: cleanup

* fix: ui imports

* fix: lint

* fix: admonition import

* make footer a component, fix language reactivity

* make copyright notice untranslatable

---------

Co-authored-by: Calum H. <contact@cal.engineer>

apps/app-frontend/src/main.js

@@ -3,31 +3,14 @@ import 'floating-vue/dist/style.css'
 import * as Sentry from '@sentry/vue'
 import { VueScanPlugin } from '@taijased/vue-render-tracker'
 import { VueQueryPlugin } from '@tanstack/vue-query'
-import { createPlugin } from '@vintl/vintl/plugin'
 import FloatingVue from 'floating-vue'
 import { createPinia } from 'pinia'
 import { createApp } from 'vue'
 
 import App from '@/App.vue'
+import i18n from '@/i18n.config'
 import router from '@/routes'
 
-const VIntlPlugin = createPlugin({
-	controllerOpts: {
-		defaultLocale: 'en-US',
-		locale: 'en-US',
-		locales: [
-			{
-				tag: 'en-US',
-				meta: {
-					displayName: 'American English',
-				},
-			},
-		],
-	},
-	globalMixin: true,
-	injectInto: [],
-})
-
 const vueScan = new VueScanPlugin({
 	enabled: false, // Enable or disable the tracker
 	showOverlay: true, // Show overlay to visualize renders
@@ -60,6 +43,6 @@ app.use(FloatingVue, {
 		},
 	},
 })
-app.use(VIntlPlugin)
+app.use(i18n)
 
 app.mount('#app')