vue i18n v9 - using it as a javascript object (not inside the template)?-CodePudding

Is it possible to use vue, vue-i18n only with javascript (as an object), not in the template?

in the src/boot/i18n.js

import { boot } from 'quasar/wrappers'
import { createI18n } from 'vue-i18n'
import messages from 'src/i18n'

export default boot(({ app }) => {
  const i18n = createI18n({
    locale: 'es-CO',
    fallbackLocale: 'en-US',
    globalInjection: true,
    messages
  })

  // Set i18n instance on app
  app.use(i18n)
})

but I create a src/support/errors, and utils, and more extended files were I need insert messages but can access i18n.

enter image description here

I spanish native, and junior in quasar vue, so please help me

Thanks.

CodePudding user response：

This work for me, but I don't know if is the best way

in store define a variable that contains i18n instance and define a getter to access it:

import { boot } from 'quasar/wrappers'
import { createI18n } from 'vue-i18n'
import messages from 'src/i18n'
import {useCommonStore} from 'stores/all'

const $commonStore = useCommonStore()

export default boot(({ app }) => {
  const i18n = createI18n({
    locale: 'es-CO',
    fallbackLocale: 'en-US',
    globalInjection: true,
    messages
  })

  // Set i18n instance on app
  app.use(i18n)
  app.provide('i18n',i18n)
  app.config.globalProperties.$i18n = i18n
  $commonStore.$i18n = i18n
})

create a Store like

import {defineStore} from 'pinia'

export const commonStore = defineStore('common', {
  state: () => ({
    $i18n: {},
  }),
  getters: {
    i18n() {
      return this.$i18n.global;
    },
  },
  actions: {
    TRANSLATE(message) {
      return this.$i18n.global.t(message)
    }
  },
});

and it work in a js file outside components, like the example

import { Notify } from 'quasar'
import {useCommonStore} from 'stores/all'

const $commonStore = useCommonStore()

export const handleErrors = (error) => {
  if (!error.response)
    if (error.hasOwnProperty('message')) notify(error.message)
    else notify($commonStore.TRANSLATE('httpErrors.failedConnection'))
  else if (error.response.hasOwnProperty('message')) notify(error.response.message)
  else if (error.response.hasOwnProperty('data')) {
    const errorData = error.response.data
    if (errorData && Array.isArray(errorData))
      errorData.forEach((error, index) => notify(error[error.keys(errorData)[index]]))
    else if (errorData) {
      const object = errorData[Object.keys(errorData)[0]]
      if (Array.isArray(object)) return object.forEach((error) => notify(error))
      const customError = customMessageByErrorType(error)
      if (customError) notify(customError)
      else notify(errorData[Object.keys(errorData)[0]])
    }
  } else notify($commonStore.TRANSLATE('httpErrors.unexpectedError'))
}

const notify = (message) => {
  Notify.create({
    message: message,
    color: 'negative',
    textColor: 'white'
  })
}

const customMessageByErrorType = (error) => {
  const messages = {
    401: $commonStore.TRANSLATE('httpErrors.error401'),
    403: $commonStore.TRANSLATE('httpErrors.error403'),
    404: $commonStore.TRANSLATE('httpErrors.error404'),
    422: $commonStore.TRANSLATE('httpErrors.error422'),
    500: $commonStore.TRANSLATE('httpErrors.error500')
  }
  return messages[error.response.status]
}

I hope it helps whoever needs it

CodePudding user response：

There is a more simple builtin solution using the global property

import { boot } from 'quasar/wrappers'
import { createI18n } from 'vue-i18n'
import messages from 'src/i18n'

export const i18n = createI18n({
    locale: 'es-CO',
    fallbackLocale: 'en-US',
    globalInjection: true,
    messages
  })

export default boot(({ app }) => {
  // Set i18n instance on app
  app.use(i18n)
})

import { i18n } from "src/boot/i18n";

const { t } = i18n.global;

...
const customMessageByErrorType = (error) => {
  const messages = {
    401: t('httpErrors.error401'),
    403: t('httpErrors.error403'),
    ...
  }
  return messages[error.response.status]
}