How can I use vue-i18n configuration inside and outside Vue components with Quasar?

Question

colleagues. I'm trying to implement internationalization in Quasar, Vue 3 (Composition API), and vue-i18n, and I would like to have internationalization available throughout my application, even outside Vue components, but it always throws an error.

This is how I have set up i18n initialization for Quasar:

I saw the corresponding i18n = lang in a blog

import { boot } from 'quasar/wrappers'
import VueI18n from 'vue-i18n'
const { createI18n } = VueI18n
import messages from '../config/i18n'

let i18n

export default boot(({ app, Vue }) => {
  Vue.use(VueI18n)

  const lang = createI18n({
    locale: 'en',
    legacy: false,
    messages,
  })

  i18n = lang

  app.use(lang)
})

export { i18n }

In the following usage example, I import the configuration variable, but I have tried importing what the export default returns, but neither of the two options has worked for me:

import { i18n } from './../boot/i18n'

console.log(i18n)

export default {
  required: (value) => !!value || i18n.t('errors.rules.required'),
  email: (value) => {
    return (
      /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(value) ||
      i18n.global.t('errors.rules.email')
    )
  },
  password: (value) => value.length >= 6 || i18n.t('errors.rules.password'),
  integer: (value) => /^\d+$/.test(value) || i18n.t('errors.rules.integer'),
  float: (value, decimals) => {
    const regex = new RegExp(`^\\d+\\.\\d{${decimals},}$`)
    return regex.test(value) || i18n.t('errors.rules.float', { decimals })
  },
  stringsOnly: (value) => !/\d/.test(value) || i18n.t('errors.rules.stringsOnly'),
  min: (value, min) => value >= min || i18n.t('errors.rules.min', { min }),
  max: (value, max) => value <= max || i18n.t('errors.rules.max', { max }),
  minLength: (value, min) => {
    value = String(value)
    return value.length >= min || i18n.t('errors.rules.minLength', { min })
  },
  maxLength: (value, max) => {
    value = String(value)
    return value.length <= max || i18n.t('errors.rules.maxLength', { max })
  },
  isUrl: (value) => {
    return /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/.test(value) || i18n.t('errors.rules.isUrl')
  },
}

Yes, I made sure the path is correct, and it is. But when I try to translate the object, it fails.

This is the English language object (en):

export default {
  errors: {
    rules: {
      required: 'Required',
      email: 'Invalid email address',
      password: 'This password is weak',
      integer: 'Only integers are allowed',
      float: 'Only numbers with at least {decimals} decimals are allowed',
      stringsOnly: 'Only text strings are allowed, no numbers',
      min: 'Value must be greater than or equal to {min}',
      max: 'Value must be less than or equal to {max}',
      minLength: 'Value length must be greater than or equal to {min}',
      maxLength: 'Value length must be less than or equal to {max}',
      isUrl: 'Invalid URL',
    },
  },
}

This is the version I am using:

{
   "dependencies":{
      "@quasar/extras":"^1.16.9",
      "quasar":"^2.14.5",
      "vue":"^3.3.11",
      "vue-i18n":"^9.9.0"
   }
}

How can I use internationalization outside Vue components?

Please, I have tried several things, but nothing works.

Answer 1

At the end I only did:

import { boot } from 'quasar/wrappers'
import VueI18n from 'vue-i18n'
const { createI18n } = VueI18n
import messages from '../config/i18n'

const i18n = createI18n({
  locale: 'en',
  legacy: false,
  messages,
})

export default boot(({ app, Vue }) => {
  Vue.use(VueI18n)
  app.use(i18n)
})

export { i18n }