Vue.js 4 + Vite + TypeScript + i18n + messages.ts

[splanard]

I'm trying to configure vue-i18n and @intlify/unplugin-vue-i18n to work with my vue.js 4 application.

Here what I did so far.

project structure

public
src
  i18n
    datetimeFormats.ts
    messages.ts   <-- contains all my messages
  projectName
    ui
       home
         Home.vue
         Home.spec.ts

vite.config.ts

import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
import vue from '@vitejs/plugin-vue';
import { dirname, resolve } from 'node:path';
import { URL, fileURLToPath } from 'node:url';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
  base: '/woundtrack',
  plugins: [
    vue(),
    VueI18nPlugin({
      include: resolve(dirname(fileURLToPath(import.meta.url)), './src/i18n/**'),
      runtimeOnly: false,
    }),
  ],
  // ...
}

Here is the unit test for my component Home.spec.ts :

import messages from '@/i18n/messages';
import HomeVue from '@/projectName/ui/home/Home.vue';
import { shallowMount, VueWrapper } from '@vue/test-utils';
import { beforeEach, describe, expect, it } from 'vitest';
import { createI18n } from 'vue-i18n';

describe('Home', () => {
  let wrapper: VueWrapper;
  beforeEach(() => {
    wrapper = shallowMount(HomeVue, {
      global: {
        plugins: [
          createI18n({
            legacy: false,
            locale: 'fr',
            fallbackLocale: 'fr',
            messages
          })
        ]
      }
    });
  });

  it('should display a welcome message', () => {
    expect(wrapper.find('[data-test="home-welcome"]').text()).toBe('Bienvenue sur mon projet !');
  });
});

And here is the component code (Home.vue) :

<template>
  <div>
    <h1 data-test="home-welcome">
      {{ t('home.welcome') }}
    </h1>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
</script>

messages.ts

const message = {
  fr: {
    home: {
      welcome: 'Bienvenue sur mon projet !'
    }
  }, 
  en: {
    home: {
      welcome: 'Welcome on my project!'
    }
  }
}
export default message;

In this configuration, if I run the tests, I'm getting this error :

FAIL  tests/unit/woundfollowup/ui/home/Home.spec.ts [ tests/unit/projectName/ui/home/Home.spec.ts ]
Error: You need to define an object as the locale message with 'export default'.
 ❯ generate node_modules/@intlify/bundle-utils/lib/index.cjs:880:13
 ❯ esbuildPlugin.transform node_modules/@intlify/unplugin-vue-i18n/lib/index.cjs:317:52
 ❯ Object.transform node_modules/vite/dist/node/chunks/dep-bb8a8339.js:44352:30
 ❯ loadAndTransform node_modules/vite/dist/node/chunks/dep-bb8a8339.js:55026:29

I'm using

• vue : 3.3.4
• vue-i18n : 9.6.5
• @intlify/unplugin-vue-i18n : 1.5.0
• vite : 4.4.11
• typescript : 5.2.0