How do you handle non-breaking hyphen in vue-i18n translations?

One technique is to use the slot syntax of vue-i18n:

1. In your i18n messages, extract the hyphenated word into its own string, replacing the original string section with a reference in curly brackets:

   // i18n.js
   const messages = {
     en: {             👇
       status: 'My {readyToUse} card',
       readyToUse: 'ready-to-use',
     },    👆
     ru: {             👇               
       status: 'Моя {readyToUse} карта',
       readyToUse: 'готовая',
     },    👆
   }
   

2. Use the <i18n-t> tag in your template to render the target string with a scoped slot, using the slot name declared in the previous step. Inside the slot, render the hyphenated word (i.e., $t('readyToUse')) within a <span> that can be styled to disable word-wrapping when necessary:

   <template>
     <i18n-t keypath="status" tag="p">
       <template v-slot:readyToUse>
         <span class="nowrap">{{ $t('readyToUse') }}</span>
       </template>
     </i18n-t>
   </template>
   
   <style scoped>
   .nowrap {
     white-space: nowrap;
   }
   </style>
   

demo