title: Vue 3 + vue-i18n-next: what am I doing wrong?
body: <p>I've started a Vue 3 project (currently not much more than a boilerplate with TypeScript) and tried to add i18n to it.</p>
  <p>As far as I've got, vue-i18n does not work properly with Vue 3; but vue-i18n-next should.</p>
  <p>here is my main.ts</p>
  <pre><code>import { createApp } from &quot;vue&quot;;
  import &quot;./registerServiceWorker&quot;;
  import router from &quot;./router&quot;;
  import store from &quot;./store&quot;;
  import { createI18n } from 'vue-i18n'
  import App from &quot;./App.vue&quot;;
  
  //import en from &quot;./locale/en.json&quot;
  //import ru from &quot;./locale/ru.json&quot;
  
  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(&quot;#app&quot;);
  </code></pre>
  <p>here is my App.vue</p>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;nav&quot;&gt;
      &lt;router-link to=&quot;/&quot;&gt;Home&lt;/router-link&gt; |
      &lt;router-link to=&quot;/about&quot;&gt;About&lt;/router-link&gt;
    &lt;/div&gt;
    &lt;div&gt;{{ $t(&quot;message.hello&quot;) }}&lt;/div&gt;
    &lt;router-view /&gt;
  &lt;/template&gt;
  </code></pre>
  <p>However, I get a warning</p>
  <pre><code>[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'.
  </code></pre>
  <p>Indeed I've found and installed @intlify/message-compiler - but don't have any idea on using it.</p>
  <p>my webpack.config.js is taken from examples</p>
  <pre><code>const path = require(&quot;path&quot;);
  module.exports = {
    rules: [
      {
        test: /\.(json5?|ya?ml)$/, // target json, json5, yaml and yml files
        type: &quot;javascript/auto&quot;,
        loader: &quot;@intlify/vue-i18n-loader&quot;,
        include: [
          // Use `Rule.include` to specify the files of locale messages to be pre-compiled
          path.resolve(__dirname, &quot;./src/locale&quot;),
        ],
      },
    ],
  };
  </code></pre>
  <p>my vue.config.js seems to be pretty simple</p>
  <pre><code>module.exports = {
    chainWebpack: (config) =&gt; {
      config.plugin(&quot;html&quot;).tap((args) =&gt; {
        args[0].template = &quot;./resources/index.html&quot;;
        return args;
      });
    },
    configureWebpack: {
      devServer: {
        watchOptions: {
          ignored: [&quot;/node_modules/&quot;, &quot;/public/&quot;, &quot;**/.#*&quot;],
        },
      },
    },
    parallel: true,
    devServer: {
      disableHostCheck: true,
      public: process.env.DEV_PUBLIC ?? &quot;mlb.ru&quot;,
      port: process.env.DEV_PORT ?? 8080,
    },
  };
  </code></pre>
  <p>and I've even found that my messages has been compiled into bundle.</p>
  <p>Maybe anyone has any success with vue-18n-next or maybe some other i18n solution for Vue 3?</p>