Doesn't work with Vue and vuex-i18n

Describe the bug There is an icon in the vscode sidebar, but got empty content. The app is built with Vue.js(2.6.10) and Vuex-i18n(1.13.1), and the i18n works well, but the extension just doesn’t work whether I config locale path or not.

Extension Version i18n Ally (1.13.6)

Framework/i18n package you are using Vue.js(2.6.10), vuex-i18n (1.13.1)

Device Infomation

• OS: Windows
• Version: 7
• VSCode Version: 1.41.1

Extension Log Sorry I can’t paste the log from the cloud environment, but it seems normal, you can see it from the picture below. It detects vue successfully and the locales loading path is correct, too.

Screenshots

[gregveres]

@pureliumy I can share with you my config that works. I am using Vue and Vue-i18n.

first my i18n plugin file (imported from main.ts)

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import messages from '@/locales';

Vue.use(VueI18n);

console.log(messages);
export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en-us',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en-us',
  messages: messages
});

I store my locale files in /src/locales/{en, fr, …} like this: /src/locales/ index.ts — en — initial.json — activities.json — index.ts — fr — initial.json — activities.json — index.ts

the locales/index.ts file looks like this:

import en from './en';
import fr from './fr';

export default {
  en: en.messages,
  fr: fr.messages
};

the en / fr index.ts file looks like this:

import initial from './_initial.json';
import activities from './activities.json';

export default {
  messages: { ...initial, ...activities }
};

the activities.json file looks like this:

{
  "activities": {
    "addLeagueBtn": "Add a League or Ladder",
  }
}

Ok, that’s how the code is setup. Now lets look at how I have the extension hooked up: I like to keep everything configured at the workspace level rather than the user level so that when I switch machines everything is the same. So, in my project directory, there is a .vscode folder and in there is a settings.json for my VSCode settings. It contains the following:

  "i18n-ally.localesPaths": "src/locales",
  "i18n-ally.keystyle": "nested",
  "i18n-ally.sourceLanguage": "en",
  "i18n-ally.displayLanguage": "en",
  "i18n-ally.sortKeys": true,
  "i18n-ally.keepFulfilled": true,
  "i18n-ally.enabledParsers": "json",

I just checked and there is nothing defined in the user settings.json file.

With this setup, I see the following in the output tab:

🈶 Activated, v1.15.1

――――――

💼 Workspace root changed to "c:\Users\gregv\source\repos\SquashSpider\SquashSpider\SkyCourt.UI\ui"
📦 Packages file "package.json" found
🕳 Packages file "pubspec.yaml" not exists
🕳 Packages file "composer.json" not exists
🕳 Packages file "Gemfile" not exists
🌞 Enabled
✅ "Vue" framework(s) detected, extension enabled.
🧬 Parsers "json" enabled.

🚀 Initializing loader "c:\Users\gregv\source\repos\SquashSpider\SquashSpider\SkyCourt.UI\ui"
📂 Directory structure: dir
🗃 Path Matcher Regex: /^(?<locale>[\w-_]+)(?:.*\/|^).*\.(json5?|ya?ml|jsx?|tsx?|mjs|ini|pot|php?)$/

📂 Loading locales under c:\Users\gregv\source\repos\SquashSpider\SquashSpider\SkyCourt.UI\ui\src\locales
	📑 Loading (en) en/activities.json
	📑 Loading (en) en/money.json
	📑 Loading (en) en/_initial.json
	📑 Loading (fr) fr/activities.json
	📑 Loading (fr) fr/money.json
	📑 Loading (fr) fr/_initial.json

👀 Watching change on c:\Users\gregv\source\repos\SquashSpider\SquashSpider\SkyCourt.UI\ui\src\locales

✅ Loading finished

――――――

This gets me all setup. Then I can do the following things in VSCode:

1. I can see translations in my vue files right beside the usage.
2. I can select some text, press ctrl-. to bring up the actions menu and “extract text into i18n messages” comes up. It walks me through a series of three questions: a. what the key should be (I can use ‘.’ in the name to indicate nested keys) a. what form of translation mechanism I want in the vue file a. which file I want to save the key/message into

This all works really well when setup. I am really greatful for this extension.

I hope this helps you get the extension working in your project. I don’t think I missed any part of the configuration.

[antfu]

Closing this for now. Feel free to reopen if you still have any questions.