[vue-intl] Is there a Vue.js 2 syntax?

[0xMANFRE]

Hello everyone,
me and my team are working on a Nuxt 2 project and we are looking to add i18n to it.
We are aware of vue-i18n and @nuxtjs/i18n, but unfortunately these modules follow a non-standard message format, which is a big let down.
Since the discovery of this project (basically the only one that support the ICU message format), we are looking for a syntax that works in Vue 2/Nuxt 2. The already provided one in the official docs is written in Vue 3.
Upgrading to Nuxt 3 is not currently an option for us because it's still in beta as of december 2021 and most external components we are using are for Vue 2/Nuxt 2.

So my question is: can Vue.js 2 syntax be used? Is it even supported?

[longlho]

I'd say give it a try and lmk if it doesn't work

[0xMANFRE]

It does not seems to be working.

I've added to my nuxt.config.js file my plugin called format.js:

export default {
  plugins: [
    { src: "~/plugins/format.js" }
  #]
}

This is my plugins/format.js file:

const Vue = require("vue");
const { createIntl } = require("vue-intl");

Vue.use(
  createIntl({
    locale: "en-GB",
    defaultLocale: "en-GB",
    messages: {
      APP_NAME: "My app name",
      HELLO_USER: "Hello, {user}."
    }
  })
);

My Nuxt project will not run, it says TypeError: Cannot set properties of undefined (setting '$intl') on this line:

formatjs/packages/vue-intl/plugin.ts

Line 12 in 9c50fd1

app.config.globalProperties.$intl = intl

I guess globalProperties is available only in Vue 3.
Are there any other solutions?

[longlho]

do you have a codesandbox I can look at?

[0xMANFRE]

do you have a codesandbox I can look at?

No, but one of my dev team members found the solution.
Basically, when the ownership transfer from the learningequality org to formatjs org took place, the vue-intl package switched from Vue 2 to Vue 3 so vue-intl@3.1.0 and lower still uses Vue 2 and vue-intl@4.0.0 and newer versions are using Vue 3.

Vue 2 is no longer supported on the newer versions.
This is not specified anywhere so I would suggest making it clear on the website, maybe with a warning alert.

For now, we will use the vue-intl@3.1.0 package until vue-i18n or @nuxtjs/i18n will support the ICU message format.

[0xMANFRE]

As said here: #3289 (reply in thread) vue-intl does no longer support Vue 2/Nuxt 2, but an older version (vue-intl@3.1.0) still support it.

My solution (in Nuxt 2) is this:
npm i vue-intl@3.1.0

My nuxt-config.js file:

export default {
  plugins: [
    { src: "~/plugins/format.js" }
  ]
}

My plugins/format.js file:

import Vue from "vue";
import VueIntl from "vue-intl";

// Install the vue-intl plugin and register the custom formats.
VueIntl.install(Vue, {
    defaultFormats: require("../locales/customFormats")
});

// Set the default language.
Vue.setLocale("en-GB");

// Set the project languages.
const locales = ["de-DE", "en-GB", "es-ES", "fr-FR", "it-IT"];

locales.forEach(locale => {
    // Add the locale data for plurals and relative dates.
    VueIntl.addLocaleData(require("vue-intl/locale-data/" + locale.slice(0, 2)));

    // Register the messages for each locale.
    Vue.registerMessages(locale, require("../locales/data/" + locale));
});