vue3 with vue-i18n-next only works with unsafe-eval CSP header

While trying to update to Vue3, we have noticed that apps won’t work with CSP headers that don’t allow unsafe-eval. Apparently this is because the newest vue-i18n is using eval, are there any plans to fix this, or will Vue3 apps require unsafe-eval moving forward?

Module versions (please complete the following information):

• vue: 3.0.11
• vue-i18n: 9.1.6

To Reproduce Steps to reproduce the behavior: ex:

1. set Content-Security-Policy header with a script-src that doesn’t contain unsafe-eaval
2. try to use any vue3 app that contains vue-i18n-next
3. See error in browser console

Expected behavior In many organizations the security guidelines dictate that CSP headers are set and unsafe-eval is usually not allowed

[kascat]

An alternative is:

import { useI18n } from 'vue-i18n'
const { messages, locale } = useI18n()
console.log(messages.value?.[locale.value]?.example)

So, can create a function to otimize: messages.value?.[locale.value]?.example

Ex:

function t (labelToTranslate) {
  const localeMessages = messages.value?.[locale.value]
  const keys = (labelToTranslate || '').split('.')
  const translatedLabel = keys.reduce((ac, key) => ac?.[key], localeMessages)

  return translatedLabel !== undefined ? translatedLabel : labelToTranslate;
}

console.log(t('role.admin'))

[bencevass]

Thank you, I will have a look