messages from local i18n block not found by vue-i18n

86 Views Asked by At

I have an older project built with vue2 where I use vue-i18n with the custom <i18n> blocks for component-local translations. I wanted to test how that would work with vue3. I created a new project with vue3 + vuetify 3 + vue-i18n 9 and I cannot make the local <i18n> block work.

I reduced the code to the following:

vite.config.js

// Plugins
import vue from "@vitejs/plugin-vue";
import vuetify, { transformAssetUrls } from "vite-plugin-vuetify";
import ViteFonts from "unplugin-fonts/vite";

// Utilities
import { defineConfig } from "vite";
import { fileURLToPath, URL } from "node:url";

import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      template: { transformAssetUrls },
    }),
    // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
    vuetify({
      autoImport: true,
      styles: {
        configFile: "src/styles/settings.scss",
      },
    }),
    ViteFonts({
      google: {
        families: [
          {
            name: "Roboto",
            styles: "wght@100;300;400;500;700;900",
          },
        ],
      },
    }),
    VueI18nPlugin({}),
  ],
  define: { "process.env": {} },
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
    extensions: [".js", ".json", ".jsx", ".mjs", ".ts", ".tsx", ".vue"],
  },
  server: {
    port: 3000,
  },
});

main.js

import App from "./App.vue";

let messages = {
  en: {
    example: "Whatever in main.js",
  },
};

// Composables
import { createApp } from "vue";
import { createI18n } from "vue-i18n";

const i18n = createI18n({
  locale: "en",
  messages,
});

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

App.vue

<i18n>
{"en": {"test": "FOO"}}
</i18n>

<template>
  <h1>{{ $t("test") }}</h1>
  <h2>{{ $t("example") }}</h2>
</template>

The output is:

enter image description here

So, the messages defined when initializing i18n in main.js is used, but the one from the local block is not. Even though it matches the docs. What am I missing?

0

There are 0 best solutions below