Register $t & $tdate as globalProperties

Author: lcharette

.vscode/settings.json

@@ -1,3 +1,8 @@
 {
-    "cSpell.words": ["axios", "pinia", "Sprunjer"]
+    "cSpell.words": [
+        "axios",
+        "pinia",
+        "Sprunjer",
+        "tdate"
+    ]
 }

package-lock.json

@@ -1,15 +1,12 @@
 <script setup>
 import { useRouter } from 'vue-router'
 import { useAuthStore } from '@userfrosting/sprinkle-account/stores'
-import { useConfigStore, useTranslator } from '@userfrosting/sprinkle-core/stores'
+import { useConfigStore } from '@userfrosting/sprinkle-core/stores'
 const router = useRouter()
 const config = useConfigStore()
 
 // Logout API variables
 const auth = useAuthStore()
-
-// Translator
-const { $t } = useTranslator()
 </script>
 
 <template>

packages/skeleton/app/assets/components/NavBar.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import { usePageMeta } from '@userfrosting/sprinkle-core/composables'
-import { useTranslator } from '@userfrosting/sprinkle-core/stores'
-const { $t } = useTranslator()
 const page = usePageMeta()
 
 // Hide the title on this page

packages/skeleton/app/assets/views/AboutView.vue

@@ -6,10 +6,10 @@ import { useConfigStore, useTranslator } from '@userfrosting/sprinkle-core/store
 
 const auth = useAuthStore()
 const config = useConfigStore()
-const { $t, $tdate } = useTranslator()
+const { translate } = useTranslator()
 
 const helloMsg = computed(() => {
-    return $t('WELCOME_TO', {
+    return translate('WELCOME_TO', {
         title: config.get('site.title'),
         user: auth.user?.full_name ?? '&GUEST'
     })

packages/skeleton/app/assets/views/HomeView.vue

@@ -1,4 +1,5 @@
 /// <reference types="vite/client" />
+/// <reference types="@userfrosting/sprinkle-core" />
 /// <reference types="@userfrosting/theme-pink-cupcake/components" />
 /**
  * This is required for webpack to correctly import vue file when using TypeScript.

packages/skeleton/env.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="vite/client" />
+/// <reference types="@userfrosting/sprinkle-core" />
 
 import { createPinia } from 'pinia'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

packages/sprinkle-account/env.d.ts

@@ -1,8 +1,3 @@
-<script setup lang="ts">
-import { useTranslator } from '@userfrosting/sprinkle-core/stores'
-const { $t } = useTranslator()
-</script>
-
 <template>
     <UFSideBarItem :to="{ name: 'admin.dashboard' }" faIcon="gauge-high" :label="$t('DASHBOARD')" />
     <UFSideBarItem :to="{ name: 'admin.users' }" faIcon="user" label="Users" />

packages/sprinkle-admin/app/assets/components/SidebarMenuItems.vue

@@ -1,4 +1,5 @@
 /// <reference types="vite/client" />
+/// <reference types="@userfrosting/sprinkle-core" />
 
 import { createPinia } from 'pinia'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

packages/sprinkle-admin/env.d.ts

@@ -18,7 +18,7 @@ export const usePageMeta = defineStore('pageMeta', () => {
      * Globally provided properties
      */
     const route = useRoute()
-    const { $t } = useTranslator()
+    const { translate } = useTranslator()
 
     /**
      * States
@@ -70,7 +70,7 @@ export const usePageMeta = defineStore('pageMeta', () => {
 
         // Update Page Title & Description with current route
         title.value = route.meta.title || ''
-        description.value = $t(route.meta.description || '')
+        description.value = translate(route.meta.description || '')
     }
 
     // Update the document title
@@ -92,7 +92,7 @@ export const usePageMeta = defineStore('pageMeta', () => {
      */
     const siteTitle = computed<string>(() => useConfigStore().get('site.title') || '')
     const pageFullTitle = computed<string>(() => {
-        return title.value ? $t(title.value) + ' | ' + siteTitle.value : siteTitle.value
+        return title.value ? translate(title.value) + ' | ' + siteTitle.value : siteTitle.value
     })
 
     /**