add translations

Author: Romper9

adminforth/documentation/docs/tutorial/03-Customization/07-alert.md

@@ -13,17 +13,21 @@ Create a Vue component in the custom directory of your project, e.g. Alerts.vue:
 ```html title="./custom/Alerts.vue"
 <template>
     <div class="ml-3 mt-16">
-        <button @click="callAlert('Example success alert')" class="focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">Call alert</button>
-        <button @click="callConfirmation" class="focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900">Confirmation</button>
-        <button @click="callAlert('Example danger alert','warning')" class="focus:outline-none text-white bg-orange-500 hover:bg-orange-400 focus:ring-4 focus:ring-orange-100 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-orange-600 dark:hover:bg-orange-700 dark:focus:ring-orange-900">Danger alert</button>
+        <button @click="callAlert('Example success alert')" class="focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">{{$t('Call alert')}}</button>
+        <button @click="callConfirmation" class="focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900">{{$t('Confirmation')}}</button>
+        <button @click="callAlert('Example danger alert','warning')" class="focus:outline-none text-white bg-orange-500 hover:bg-orange-400 focus:ring-4 focus:ring-orange-100 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-orange-600 dark:hover:bg-orange-700 dark:focus:ring-orange-900">{{$t('Danger alert')}}</button>
     </div>
 </template>
 <script setup>
+
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
+
 function callAlert(message,variant='success'){
     window.adminforth.alert({message: message, variant: variant})
 };
 async function callConfirmation(){
-    const isConfirmed = await window.adminforth.confirm({message: 'Are you sure?', yes: 'Yes', no: 'No'})
+    const isConfirmed = await window.adminforth.confirm({message: t('Are you sure?'), yes: t('Yes'), no: t('No')})
 }
 </script>
 ```

adminforth/documentation/docs/tutorial/05-Plugins/10-i18n.md

@@ -153,6 +153,7 @@ Also add the resource to main file and add menu item in `./index.ts`:
 
 ```ts title='./index.ts'
 
+//diff-add
 import translations from "./resources/translations";
 ...
 

dev-demo/custom/Dash.vue

@@ -46,7 +46,7 @@
         <div class="flex justify-between mb-5">
           <div>
             <p class="text-base font-normal text-gray-500 dark:text-gray-400">
-              Unlisted vs Listed price
+              {{ $('Unlisted vs Listed price' ) }}
             </p>
           </div>
         </div>
@@ -63,14 +63,16 @@ import dayjs from 'dayjs';
 import { callApi } from '@/utils';
 import { Input, Select, VerticalTabs, LinkButton, Dropzone } from '@/afcl';
 import { useCoreStore } from '@/stores/core';
-
+import { useI18n } from 'vue-i18n';
 const coreStore = useCoreStore();
 
 const selected = ref(null);
 const activeTab = ref('Dashboard');
 
 const data = ref({});
 
+const  { t } = useI18n();
+
 function onFileChange(file) {
   console.log(12, file);
 }
@@ -119,7 +121,7 @@ const optionsC1 = {
   },
   series: [
     {
-      name: "Added apartments",
+      name: t("Added apartments"),
       data: [],
       color: "#1A56DB",
     },
@@ -279,12 +281,12 @@ const optionsC3 = {
   },
   series: [
     {
-      name: "Listed Price",
+      name: t("Listed Price"),
       data: [],
       color: "#1A56DB",
     },
     {
-      name: "Unlisted Price",
+      name: t("Unlisted Price"),
       data: [],
       color: "#7E3BF2",
     },