Vue 3 + vue-i18n-next: what am I doing wrong?

Question

I've started a Vue 3 project (currently not much more than a boilerplate with TypeScript) and tried to add i18n to it.

As far as I've got, vue-i18n does not work properly with Vue 3; but vue-i18n-next should.

here is my main.ts

import { createApp } from "vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
import { createI18n } from 'vue-i18n'
import App from "./App.vue";

//import en from "./locale/en.json"
//import ru from "./locale/ru.json"

const messages = {
    en: {
        message: {
            hello: 'hello world'
        }
    },
    ru: {
        message: {
            hello: 'Таки здравствуйте'
        }
    }
}

const i18n = createI18n({
    locale: 'ru',
/*    messages: {
        en,
        ru
        },*/
    messages,
    fallbackLocale: 'en'
})

const app = createApp(App)
    .use(store)
    .use(router)
    .use(i18n);
    .mount("#app");

here is my App.vue

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <div>{{ $t("message.hello") }}</div>
  <router-view />
</template>

However, I get a warning

[intlify] The message format compilation is not supported in this build. Because message compiler isn't included. You need to pre-compilation all message format. So translate function return 'message.hello'.

Indeed I've found and installed @intlify/message-compiler - but don't have any idea on using it.

my webpack.config.js is taken from examples

const path = require("path");
module.exports = {
  rules: [
    {
      test: /\.(json5?|ya?ml)$/, // target json, json5, yaml and yml files
      type: "javascript/auto",
      loader: "@intlify/vue-i18n-loader",
      include: [
        // Use `Rule.include` to specify the files of locale messages to be pre-compiled
        path.resolve(__dirname, "./src/locale"),
      ],
    },
  ],
};

my vue.config.js seems to be pretty simple

module.exports = {
  chainWebpack: (config) => {
    config.plugin("html").tap((args) => {
      args[0].template = "./resources/index.html";
      return args;
    });
  },
  configureWebpack: {
    devServer: {
      watchOptions: {
        ignored: ["/node_modules/", "/public/", "**/.#*"],
      },
    },
  },
  parallel: true,
  devServer: {
    disableHostCheck: true,
    public: process.env.DEV_PUBLIC ?? "mlb.ru",
    port: process.env.DEV_PORT ?? 8080,
  },
};

and I've even found that my messages has been compiled into bundle.

Maybe anyone has any success with vue-18n-next or maybe some other i18n solution for Vue 3?

Answer 1

The repo & docs have moved:

https://github.com/intlify/vue-i18n-next I have tried a very similar code and import { createI18n } from 'vue-i18n' should work for you as long as you are in vue-i18n@9.0.0-beta.16

... [code]

import { createI18n } from 'vue-i18n'

const messages = {
  es: {
    message: {
      value: 'Hola Español.',
    },
  },
  en: {
    message: {
      value: 'Hello English.',
    },
  },
}

const i18n = createI18n({
  locale: 'es',
  messages,
})

app
  .use(i18n)
  .mount('#app')

[code] ...

Answer 2

Like Vue itself, the i18n package comes with various versions. Like Vue, they have a version with and without a runtime compiler. From the docs:

vue-i18n.esm-bundler.js: includes the runtime compiler. Use this if you are using a bundler but still want locale messages compilation (e.g. templates via inline JavaScript strings)

The warning you received is apparently telling you that you need this compiler version. The docs are slightly less clear about this but you need to point the import to the runtime compiler version of the package, like this:

import { createI18n } from "vue-i18n/dist/vue-i18n.esm-bundler.js";

Answer 3

I use i18n in external file (i18n.js) I hope it helps you.

i18n.js

import { createI18n } from 'vue-i18n'
const messages = {
    en: {
        message: {
            hello: 'hello world'
        }
    },
    ru: {
        message: {
            hello: 'Таки здравствуйте'
        }
    }
}
const i18n = createI18n({
    locale: 'en',
    messages
})
export default i18n

main.js

import { createApp } from 'vue'
import App from './App.vue'
import i18n from "@/i18n"
const app = createApp(App)
app.use(i18n)
app.mount('#app')

App.vue

<template>
    <span><div>{{ $t("message.hello") }}</div></span>
</template>