Example usage of translation keys from yaml files within vue component

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue

@@ -17,7 +17,7 @@
                 <slot name="body"></slot>
               </div>
               <div class="modal-footer" v-if="!hideFooter">
-                <button class="btn btn-cancel" @click="$emit('close')">{{ $t('action.close') }}</button>
+                <button class="btn btn-cancel" @click="$emit('close')">{{ closeKey }}</button>
                 <slot name="footer"></slot>
               </div>
             </div>
@@ -30,6 +30,7 @@
 
 <script lang="ts">
 import {defineComponent} from "vue";
+import { trans, MODAL_ACTION_CLOSE } from '../../../../../../../../../../assets/translator'
 /*
  *    This Modal component is a mix between Vue3 modal implementation
  *    [+] with 'v-if:showModal' directive:parameter, html scope is added/removed not just shown/hidden
@@ -53,7 +54,13 @@ export default defineComponent({
          default: false
       }
    },
-   emits: ['close']
+   emits: ['close'],
+    computed: {
+       closeKey() {
+           console.log('close key', trans(MODAL_ACTION_CLOSE))
+           return trans(MODAL_ACTION_CLOSE)
+       }
+    }
 });
 </script>
 

src/Bundle/ChillMainBundle/translations/messages.fr.yml

@@ -1,3 +1,7 @@
+modal:
+    action:
+        close: Fermer
+
 "This program is free software: you can redistribute it and/or modify it under the terms of the <strong>GNU Affero General Public License</strong>": "Ce programme est un logiciel libre: vous pouvez le redistribuer et/ou le modifier selon les termes de la licence <strong>GNU Affero GPL</strong>"
 User manual: Manuel d'utilisation
 Search: Rechercher