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 pilation is not supported in this build. Because message piler isn't included. You need to pre-pilation all message format. So translate function return 'message.hello'.

Indeed I've found and installed @intlify/message-piler - 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-piled
        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 piled into bundle.

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

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 pilation is not supported in this build. Because message piler isn't included. You need to pre-pilation all message format. So translate function return 'message.hello'.

Indeed I've found and installed @intlify/message-piler - 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-piled
        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 piled into bundle.

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

• javascript
• vue.js
• vue-cli
• vuejs3
• vue-i18n

3 Answers 3

The repo & docs have moved:

https://github./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 [email protected]

... [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] ...

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

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

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

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

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>